@sandlada/mdc/build/components/icon-button/toggle-icon-button.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{state as n}from"../../node_modules/@lit/reactive-element/decorators/state.js";import"../../node_modules/lit/decorators.js";import{html as r,nothing as i}from"../../node_modules/lit-html/lit-html.js";import"../../node_modules/lit/index.js";import{classMap as a}from"../../node_modules/lit-html/directives/class-map.js";import"../../node_modules/lit/directives/class-map.js";import{internals as o}from"../../utils/behaviors/element-internals.js";import{composeMixin as s}from"../../utils/compose-mixin/compose-mixin.js";import c from"../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{getFormState as l,getFormValue as u,mixinFormAssociated as d}from"../../utils/form/form-associated.js";import{createValidator as f,getValidityAnchor as p,mixinConstraintValidation as m}from"../../utils/behaviors/constraint-validation.js";import{CheckboxValidator as h}from"../../utils/behaviors/validators/checkbox-validator.js";import{RadioValidator as g}from"../../utils/behaviors/validators/radio-validator.js";import{SelectionController as _}from"../../utils/controller/selection-controller.js";import{BaseMDCIconButton as v}from"./base-icon-button.js";
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
let y=class extends s(m,d)(v){static{this.shadowRootOptions={mode:`open`,delegatesFocus:!0}}constructor(){super(),this.type=`checkbox`,this.checked=!1,this.value=`on`,this.required=!1,this.hasDefaultIcon=!1,this.hasActiveIcon=!1,this.hasInactiveIcon=!1,this.selectionController=new _(this,{multiple:this.type===`checkbox`,canCancel:this.type===`checkbox`,preventSelectionDuringInitialFocus:this.type===`checkbox`,preventSelectionDuringSwitching:this.type===`checkbox`,dispatchNavigationClick:this.type===`radio`,getFocusableElement:e=>e}),this.tabIndex=0,this[o].role=this.type}connectedCallback(){super.connectedCallback(),this.hasAttribute(`default-checked`)&&(this.checked=!0)}willUpdate(e){if(super.willUpdate(e),e.has(`type`)){let e=this.type===`checkbox`;this.selectionController.configure({multiple:e,canCancel:e,preventSelectionDuringInitialFocus:e,preventSelectionDuringSwitching:e,dispatchNavigationClick:!e}),this[o].role=this.type}e.has(`checked`)&&(this[o].ariaChecked=String(this.checked))}getRenderClasses(){return{...super.getRenderClasses(),togglable:!0,selected:this.checked,unselected:!this.checked,"has-default-icon":this.hasDefaultIcon&&!this.hasActiveIcon,"has-active-icon":this.hasActiveIcon,"has-inactive-icon":this.hasInactiveIcon}}render(){let{ariaHasPopup:e,ariaExpanded:t,ariaLabel:n}=this;return r`<button class="${a(this.getRenderClasses())}" id="button" ?disabled="${this.disabled}" aria-disabled="${this.disabled}" aria-label="${n||i}" aria-haspopup="${e||i}" aria-expanded="${t||i}" @focusin="${this.handleVisualFocusIn}" @focusout="${this.handleVisualFocusOut}" @keydown="${this.handleVisualKeyDown}">${this.variant===`outlined`?this.renderOutline():i} ${this.renderIcon()} ${this.renderBackground()} ${this.renderTouchTarget()} ${this.renderRipple()} ${this.renderFocusRing()}</button>`}renderIcon(){return r`<span class="icon default-icon"><slot @slotchange="${this.handleDefaultIconSlotChange}"></slot></span><span class="icon active-icon"><slot @slotchange="${this.handleActiveIconSlotChange}" name="active-icon"></slot></span><span class="icon inactive-icon"><slot @slotchange="${this.handleInactiveIconSlotChange}" name="inactive-icon"></slot></span>`}renderTouchTarget(){return r`<input id="input-as-touch-target" class="touch-target" role="button" .checked="${this.checked}" ?required="${this.required}" ?disabled="${this.disabled}" aria-checked="${this.checked}" aria-required="${this.required}" aria-disabled="${this.disabled}" tabindex="-1">`}handleDefaultIconSlotChange(e){this.hasDefaultIcon=e.target.assignedElements().length>0}handleActiveIconSlotChange(e){this.hasActiveIcon=e.target.assignedElements().length>0}handleInactiveIconSlotChange(e){this.hasInactiveIcon=e.target.assignedElements().length>0}[u](){return this.checked?this.value:null}[l](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute(`default-checked`)}formStateRestoreCallback(e){this.checked=e===`true`}[f](){return this.type===`checkbox`?new h(()=>({checked:this.checked,required:this.required})):new g(()=>this.selectionController?this.selectionController.controls:[this])}[p](){return this.buttonElement}};c([t({type:String,reflect:!0})],y.prototype,`type`,void 0),c([t({type:Boolean,reflect:!0})],y.prototype,`checked`,void 0),c([t({type:String})],y.prototype,`value`,void 0),c([t({type:Boolean,reflect:!0})],y.prototype,`required`,void 0),c([n()],y.prototype,`hasDefaultIcon`,void 0),c([n()],y.prototype,`hasActiveIcon`,void 0),c([n()],y.prototype,`hasInactiveIcon`,void 0),y=c([e(`mdc-toggle-icon-button`)],y);export{y as MDCToggleIconButton};
//# sourceMappingURL=toggle-icon-button.js.map