39 lines
11 KiB
JavaScript
39 lines
11 KiB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react/jsx-runtime"),R=require("react"),V=require("./create-component-D9KTUrcf.js"),e=require("./class-map-DV5418hw.js");require("./ripple-DoKzzEey.js");const n=require("./animation-A38fZ1oY.js"),B=require("./delegate-4958lG3m.js"),v=require("./form-label-activation-CYEOF_US.js"),D=require("./redispatch-event-C93E51ce.js"),m=require("./validator-DUxooTr6.js"),M=require("./element-internals-OOm6rgx-.js"),u=require("./form-associated-CxXMoMPu.js"),S=require("./checkbox-validator-CeFJv7iw.js");/**
|
|
* @license
|
|
* Copyright 2019 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/const T=B.mixinDelegatesAria(m.mixinConstraintValidation(u.mixinFormAssociated(M.mixinElementInternals(e.r))));let t=class extends T{constructor(){super(),this.checked=!1,this.indeterminate=!1,this.required=!1,this.value="on",this.prevChecked=!1,this.prevDisabled=!1,this.prevIndeterminate=!1,this.addEventListener("click",r=>{!v.isActivationClick(r)||!this.input||(this.focus(),v.dispatchActivationClick(this.input))})}update(r){(r.has("checked")||r.has("disabled")||r.has("indeterminate"))&&(this.prevChecked=r.get("checked")??this.checked,this.prevDisabled=r.get("disabled")??this.disabled,this.prevIndeterminate=r.get("indeterminate")??this.indeterminate),super.update(r)}render(){const r=!this.prevChecked&&!this.prevIndeterminate,o=this.prevChecked&&!this.prevIndeterminate,d=this.prevIndeterminate,a=this.checked&&!this.indeterminate,i=this.indeterminate,l=e.e$1({disabled:this.disabled,selected:a||i,unselected:!a&&!i,checked:a,indeterminate:i,"prev-unselected":r,"prev-checked":o,"prev-indeterminate":d,"prev-disabled":this.prevDisabled}),{ariaLabel:h,ariaInvalid:p}=this;return e.x`
|
|
<div class="container ${l}">
|
|
<input
|
|
type="checkbox"
|
|
id="input"
|
|
aria-checked=${i?"mixed":e.E}
|
|
aria-label=${h||e.E}
|
|
aria-invalid=${p||e.E}
|
|
?disabled=${this.disabled}
|
|
?required=${this.required}
|
|
.indeterminate=${this.indeterminate}
|
|
.checked=${this.checked}
|
|
@input=${this.handleInput}
|
|
@change=${this.handleChange} />
|
|
|
|
<div class="outline"></div>
|
|
<div class="background"></div>
|
|
<md-focus-ring part="focus-ring" for="input"></md-focus-ring>
|
|
<md-ripple for="input" ?disabled=${this.disabled}></md-ripple>
|
|
<svg class="icon" viewBox="0 0 18 18" aria-hidden="true">
|
|
<rect class="mark short" />
|
|
<rect class="mark long" />
|
|
</svg>
|
|
</div>
|
|
`}handleInput(r){const o=r.target;this.checked=o.checked,this.indeterminate=o.indeterminate}handleChange(r){D.redispatchEvent(this,r)}[u.getFormValue](){return!this.checked||this.indeterminate?null:this.value}[u.getFormState](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute("checked")}formStateRestoreCallback(r){this.checked=r==="true"}[m.createValidator](){return new S.CheckboxValidator(()=>this)}[m.getValidityAnchor](){return this.input}};t.shadowRootOptions={...e.r.shadowRootOptions,delegatesFocus:!0};e.__decorate([e.n({type:Boolean})],t.prototype,"checked",void 0);e.__decorate([e.n({type:Boolean})],t.prototype,"indeterminate",void 0);e.__decorate([e.n({type:Boolean})],t.prototype,"required",void 0);e.__decorate([e.n()],t.prototype,"value",void 0);e.__decorate([n.r()],t.prototype,"prevChecked",void 0);e.__decorate([n.r()],t.prototype,"prevDisabled",void 0);e.__decorate([n.r()],t.prototype,"prevIndeterminate",void 0);e.__decorate([n.e$1("input")],t.prototype,"input",void 0);/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/const F=e.i$1`:host{border-start-start-radius:var(--md-checkbox-container-shape-start-start, var(--md-checkbox-container-shape, 2px));border-start-end-radius:var(--md-checkbox-container-shape-start-end, var(--md-checkbox-container-shape, 2px));border-end-end-radius:var(--md-checkbox-container-shape-end-end, var(--md-checkbox-container-shape, 2px));border-end-start-radius:var(--md-checkbox-container-shape-end-start, var(--md-checkbox-container-shape, 2px));display:inline-flex;height:var(--md-checkbox-container-size, 18px);position:relative;vertical-align:top;width:var(--md-checkbox-container-size, 18px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-checkbox-container-size, 18px))/2)}md-focus-ring{height:44px;inset:unset;width:44px}input{appearance:none;height:48px;margin:0;opacity:0;outline:none;position:absolute;width:48px;z-index:1;cursor:inherit}:host([touch-target=none]) input{height:100%;width:100%}.container{border-radius:inherit;display:flex;height:100%;place-content:center;place-items:center;position:relative;width:100%}.outline,.background,.icon{inset:0;position:absolute}.outline,.background{border-radius:inherit}.outline{border-color:var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));border-style:solid;border-width:var(--md-checkbox-outline-width, 2px);box-sizing:border-box}.background{background-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4))}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}:where(.selected) :is(.background,.icon){opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-ripple{border-radius:var(--md-checkbox-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));height:var(--md-checkbox-state-layer-size, 40px);inset:unset;width:var(--md-checkbox-state-layer-size, 40px);--md-ripple-hover-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12)}.selected md-ripple{--md-ripple-hover-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12)}.icon{fill:var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));height:var(--md-checkbox-icon-size, 18px);width:var(--md-checkbox-icon-size, 18px)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}:where(:hover) .outline{border-color:var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-hover-outline-width, 2px)}:where(:hover) .background{background:var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4))}:where(:hover) .icon{fill:var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:focus-within) .outline{border-color:var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-focus-outline-width, 2px)}:where(:focus-within) .background{background:var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4))}:where(:focus-within) .icon{fill:var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:active) .outline{border-color:var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-pressed-outline-width, 2px)}:where(:active) .background{background:var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4))}:where(:active) .icon{fill:var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-disabled-outline-width, 2px);opacity:var(--md-checkbox-disabled-container-opacity, 0.38)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-checkbox-selected-disabled-container-opacity, 0.38)}:where(.disabled) .icon{fill:var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff))}@media(forced-colors: active){.background{background-color:CanvasText}.selected.disabled .background{background-color:GrayText;opacity:1}.outline{border-color:CanvasText}.disabled .outline{border-color:GrayText;opacity:1}.icon{fill:Canvas}}
|
|
`;/**
|
|
* @license
|
|
* Copyright 2018 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/let s=class extends t{};s.styles=[F];s=e.__decorate([e.t$1("md-checkbox")],s);const j=V.o({tagName:"md-checkbox",react:R,elementClass:s}),L=({checked:c,indeterminate:r,id:o,disabled:d,hidden:a,ariaLabel:i,ariaLabelledBy:l,ariaDescribedBy:h,ariaControls:p,required:b,onInput:k,onChange:x,onClick:y,onMouseDown:f,onMouseUp:g,onMouseEnter:w,onFocus:C,onBlur:_,className:q,style:$,tabIndex:z,name:I,...A})=>E.jsx(j,{...A,id:o,value:c?"on":"off",indeterminate:r,disabled:d||!1,required:b,checked:c,hidden:a,"touch-target":"wrapper","aria-label":i,"aria-labelledby":l,"aria-describedby":h,"aria-controls":p,"aria-required":b,onInput:k,onChange:x,onClick:y,onMouseDown:f,onMouseUp:g,onMouseEnter:w,onFocus:C,onBlur:_,className:q,style:$,tabIndex:z,name:I||void 0});exports.Checkbox=L;
|