@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
2 lines (1 loc) • 5.38 kB
JavaScript
import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{E as e,x as i}from"../../lit-element-Ho-VPzO1.js";import{t as s}from"../../custom-element-Dz3n6kSt.js";import{n as o}from"../../property-Ck1wIidx.js";import{r as a}from"../../state--U2hSgGK.js";import{e as r}from"../../query-DhvfedBn.js";import{e as n}from"../../class-map-D69pxdWL.js";import{mixinConstraintValidation as c,createValidator as l,getValidityAnchor as h}from"../../utils/behaviors/constraint-validation.js";import{internals as d}from"../../utils/behaviors/element-internals.js";import{CheckboxValidator as p}from"../../utils/behaviors/validators/checkbox-validator.js";import{RadioValidator as u}from"../../utils/behaviors/validators/radio-validator.js";import{SelectionController as m}from"../../utils/controller/selection-controller.js";import{redispatchEvent as g}from"../../utils/event/redispatch-event.js";import{mixinFormAssociated as v,getFormValue as b,getFormState as k}from"../../utils/form/form-associated.js";import{BaseMDCIconButton as f}from"./base-icon-button.js";import"../../base-hbm3XPKy.js";import"../../directive-7hqM2TFx.js";import"../../utils/behaviors/validators/validator.js";import"../../utils/aria/delegate.js";import"../../utils/aria/aria.js";import"../../utils/event/form-label-activation.js";import"./icon-button.style.js";import"../../component-definitions/icon-button.definition.js";import"../../color-CigMJnjV.js";import"../../shape-CrZ0CLVJ.js";import"../../state-C-haZXan.js";import"../../utils/tokens/create-logic-shape-tokens.js";import"../../utils/tokens/create-wrapped-tokens.js";import"../../utils/tokens/override-component-tokens.js";import"../../utils/tokens/string-tokens.js";var j;const I=Symbol("checked");let C=class extends(c(v(f))){static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}get checked(){return this[I]}set checked(t){if(t===this[I])return;const e=this[I];this[I]=t,this.selectionController.handleCheckedChange(),this.requestUpdate("checked",e)}constructor(){super(),this.required=!1,this.value="on",this.type="checkbox",this[j]=!1,this.hasDefaultIcon=!1,this.hasActiveIcon=!1,this.hasInactiveIcon=!1}connectedCallback(){super.connectedCallback(),this.selectionController||(this.selectionController=new m(this,{multiple:"checkbox"===this.type}),this.addController(this.selectionController))}willUpdate(t){super.willUpdate(t),t.has("type")&&(this[d].role=this.type,this.selectionController.multiple="checkbox"===this.type),t.has("checked")&&(this[d].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(){const{ariaHasPopup:t,ariaExpanded:s,ariaLabel:o}=this;return i`<button class="${n(this.getRenderClasses())}" id="button" ?disabled="${this.disabled}" aria-disabled="${this.disabled}" aria-label="${o||e}" aria-haspopup="${t||e}" aria-expanded="${s||e}" tabindex="-1">${"outlined"===this.variant?this.renderOutline():e} ${this.renderIcon()} ${this.renderBackground()} ${this.renderTouchTarget()}<mdc-ripple for="input-as-touch-target" part="ripple" .disabled="${this.disabled}"></mdc-ripple><mdc-focus-ring for="input-as-touch-target" part="focus-ring" .disabled="${this.disabled}"></mdc-focus-ring></button>`}renderIcon(){return i`<span class="icon default-icon"><slot ="${this.handleDefaultIconSlotChange}"></slot></span><span class="icon active-icon"><slot ="${this.handleActiveIconSlotChange}" name="active-icon"></slot></span><span class="icon inactive-icon"><slot ="${this.handleInactiveIconSlotChange}" name="inactive-icon"></slot></span>`}renderTouchTarget(){return i`<input id="input-as-touch-target" class="touch-target" type="${this.type}" .checked="${this.checked}" ?required="${this.required}" ?disabled="${this.disabled}" aria-checked="${this.checked}" aria-required="${this.required}" aria-disabled="${this.disabled}" tabindex="0" ="${this.handleInput}" ="${this.handleChange}">`}handleInput(t){this.checked=this.buttonElement.checked}handleChange(t){g(this,t)}handleDefaultIconSlotChange(t){this.hasDefaultIcon=t.target.assignedElements().length>0}handleActiveIconSlotChange(t){this.hasActiveIcon=t.target.assignedElements().length>0}handleInactiveIconSlotChange(t){this.hasInactiveIcon=t.target.assignedElements().length>0}[(j=I,b)](){return this.checked?this.value:null}[k](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute("default-checked")}formStateRestoreCallback(t){this.checked="true"===t}[l](){return"checkbox"===this.type?new p(()=>({checked:this.checked,required:this.required})):new u(()=>this.selectionController?this.selectionController.controls:[this])}[h](){return this.buttonElement}};t([o({type:Boolean,reflect:!0,noAccessor:!0})],C.prototype,"checked",null),t([o({type:Boolean})],C.prototype,"required",void 0),t([o({type:String})],C.prototype,"value",void 0),t([o({type:String,reflect:!0})],C.prototype,"type",void 0),t([r("#input-as-touch-target")],C.prototype,"buttonElement",void 0),t([a()],C.prototype,"hasDefaultIcon",void 0),t([a()],C.prototype,"hasActiveIcon",void 0),t([a()],C.prototype,"hasInactiveIcon",void 0),C=t([s("mdc-toggle-icon-button")],C);export{C as MDCToggleIconButton};