@sandlada/mdc/build/components/checkbox/checkbox.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{customElement as e}from"../../node_modules/@lit/reactive-element/decorators/custom-element.js";import{property as t}from"../../node_modules/@lit/reactive-element/decorators/property.js";import{query as n}from"../../node_modules/@lit/reactive-element/decorators/query.js";import"../../node_modules/lit/decorators.js";import{html as r,nothing as i}from"../../node_modules/lit-html/lit-html.js";import{LitElement as a}from"../../node_modules/lit-element/lit-element.js";import"../../node_modules/lit/index.js";import{classMap as o}from"../../node_modules/lit-html/directives/class-map.js";import"../../node_modules/lit/directives/class-map.js";import{mixinElementInternals as s}from"../../utils/behaviors/element-internals.js";import{composeMixin as c}from"../../utils/compose-mixin/compose-mixin.js";import l from"../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{mixinDelegatesAria as u}from"../../utils/aria/delegate.js";import{dispatchActivationClick as d,isActivationClick as f}from"../../utils/event/form-label-activation.js";import{mixinFocusRingOptions as p}from"../focus-ring/focus-ring-options.mixin.js";import{mixinRippleOptions as m}from"../ripple/ripple-options.mixin.js";import{getFormState as h,getFormValue as g,mixinFormAssociated as _}from"../../utils/form/form-associated.js";import{createValidator as v,getValidityAnchor as y,mixinConstraintValidation as b}from"../../utils/behaviors/constraint-validation.js";import{CheckboxValidator as x}from"../../utils/behaviors/validators/checkbox-validator.js";import{redispatchEvent as S}from"../../utils/event/redispatch-event.js";import{CheckboxStyles as C}from"./checkbox.style.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
let w=class extends c(u,b,_,s,m,p)(a){static{this.styles=C}static{this.shadowRootOptions={mode:`open`,delegatesFocus:!0}}get focusRingControl(){return this.inputElement??null}get rippleControl(){return this.inputElement??null}focus(){this.inputElement?.focus()}blur(){this.inputElement?.blur()}constructor(){super(),this.checked=!1,this.indeterminate=!1,this.tristate=!1,this.required=!1,this.value=`on`,this.prevChecked=!1,this.prevDisabled=!1,this.prevIndeterminate=!1,this.focusRingShapeInherit=!1,this.handleHostClick=e=>{!f(e)||!this.inputElement||(this.focus(),d(this.inputElement))},this.handleInputClick=e=>{this.tristate&&(e.preventDefault(),this.cycleTristate(),this.dispatchEvent(new Event(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0})))},this.handleInput=e=>{let t=e.target;this.checked=t.checked,this.indeterminate=t.indeterminate},this.handleChange=e=>{S(this,e)},this.addEventListener(`click`,this.handleHostClick)}connectedCallback(){super.connectedCallback(),this.hasAttribute(`default-checked`)&&(this.checked=!0)}update(e){(e.has(`checked`)||e.has(`disabled`)||e.has(`indeterminate`))&&(this.prevChecked=e.get(`checked`)??this.checked,this.prevDisabled=e.get(`disabled`)??this.disabled,this.prevIndeterminate=e.get(`indeterminate`)??this.indeterminate),super.update(e)}getRenderClasses(){let e=!this.prevChecked&&!this.prevIndeterminate,t=this.prevChecked&&!this.prevIndeterminate,n=this.prevIndeterminate,r=this.checked&&!this.indeterminate,i=this.indeterminate;return{container:!0,disabled:this.disabled,selected:r||i,unselected:!r&&!i,checked:r,indeterminate:i,"prev-unselected":e,"prev-checked":t,"prev-indeterminate":n,"prev-disabled":this.prevDisabled}}render(){return r`<div class="${o(this.getRenderClasses())}">${this.renderInput()}<div class="outline" aria-hidden="true"></div><div class="background" aria-hidden="true"></div>${this.renderFocusRing()} ${this.renderRipple()} <svg class="icon" viewBox="0 0 18 18" aria-hidden="true"><rect class="mark short"/><rect class="mark long"/></svg></div>`}renderInput(){let{ariaInvalid:e,ariaLabel:t}=this,n=this.indeterminate;return r`<input id="input" class="touch" type="checkbox" .checked="${this.checked}" .indeterminate="${n}" ?disabled="${this.disabled}" ?required="${this.required}" aria-checked="${n?`mixed`:i}" aria-label="${t||i}" aria-invalid="${e||i}" @click="${this.handleInputClick}" @input="${this.handleInput}" @change="${this.handleChange}">`}cycleTristate(){this.indeterminate?(this.checked=!1,this.indeterminate=!1):this.checked?(this.checked=!1,this.indeterminate=!0):(this.checked=!0,this.indeterminate=!1)}[g](){return!this.checked||this.indeterminate?null:this.value}[h](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute(`default-checked`),this.indeterminate=!1}formStateRestoreCallback(e){this.checked=e===`true`}[v](){return new x(()=>({checked:this.checked,required:this.required}))}[y](){return this.inputElement}};l([t({type:Boolean,reflect:!0})],w.prototype,`checked`,void 0),l([t({type:Boolean,reflect:!0})],w.prototype,`indeterminate`,void 0),l([t({type:Boolean,reflect:!0})],w.prototype,`tristate`,void 0),l([t({type:Boolean,reflect:!0})],w.prototype,`required`,void 0),l([t({type:String})],w.prototype,`value`,void 0),l([n(`#input`)],w.prototype,`inputElement`,void 0),w=l([e(`mdc-checkbox`)],w);export{w as MDCCheckbox};
//# sourceMappingURL=checkbox.js.map