@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
2 lines (1 loc) • 4.18 kB
JavaScript
import{_ as e}from"../../tslib.es6-CmLYFWVC.js";import{i as t,E as s,x as i}from"../../lit-element-Ho-VPzO1.js";import{t as o}from"../../custom-element-Dz3n6kSt.js";import{n as r}from"../../property-Ck1wIidx.js";import{e as n}from"../../query-DifSdHBD.js";import{e as d}from"../../class-map-DlMb2KKL.js";import{mixinDelegatesAria as l}from"../../utils/aria/delegate.js";import{mixinConstraintValidation as a,createValidator as c,getValidityAnchor as h}from"../../utils/behaviors/constraint-validation.js";import{mixinElementInternals as p}from"../../utils/behaviors/element-internals.js";import{CheckboxValidator as u}from"../../utils/behaviors/validators/checkbox-validator.js";import{isActivationClick as m,dispatchActivationClick as v}from"../../utils/event/form-label-activation.js";import{redispatchEvent as f}from"../../utils/event/redispatch-event.js";import{mixinFormAssociated as b,getFormValue as j,getFormState as k}from"../../utils/form/form-associated.js";import{SwitchStyles as g}from"./switch.style.js";import"../../utils/aria/aria.js";import"../../utils/behaviors/validators/validator.js";import"../../easing-5hHInU7b.js";import"../../component-definitions/switch.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";let w=class extends(l(a(b(p(t))))){static{this.styles=g}static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}focus(){this.inputElement?.focus()}blur(){this.inputElement?.blur()}constructor(){super(),this.selected=!1,this.required=!1,this.value="on",this.hideSelectedIcon=!1,this.showUnselectedIcon=!1,this.addEventListener("click",this.handleClick.bind(this))}render(){const e=d({selected:this.selected,unselected:!this.selected,disabled:this.disabled,"show-unselected-icon":this.showUnselectedIcon});return i`<div class="${e} switch">${this.renderInput()} <span class="outline" aria-hidden="true"></span> <span class="handle-container"><mdc-ripple for="input" ?disabled="${this.disabled}"></mdc-ripple><span class="handle">${this.hideSelectedIcon?s:this.renderSelectedIcon()} ${this.showUnselectedIcon?this.renderUnselectedIcon():s} </span></span><span class="track" aria-hidden="true"></span><mdc-focus-ring for="input" part="focus-ring"></mdc-focus-ring></div>`}renderInput(){return i`<input id="input" class="touch input" .checked="${this.selected}" type="checkbox" role="switch" .disabled="${this.disabled}" aria-disabled="${this.disabled}" .required="${this.required}" aria-required="${this.required}" tabindex="0" ="${this.handleInput}" ="${this.handleChange}">`}renderSelectedIcon(){return i`<slot class="icon icon-selected" name="icon-selected"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z"/></svg></slot>`}renderUnselectedIcon(){return i`<slot class="icon icon-unselected" name="icon-unselected"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z"/></svg></slot>`}handleInput(e){const t=e.target;this.selected=t.checked}handleChange(e){f(this,e)}handleClick(e){m(e)&&this.inputElement&&(this.focus(),v(this.inputElement))}[j](){return this.selected?this.value:null}[k](){return String(this.selected)}formResetCallback(){this.selected=this.hasAttribute("selected")}formStateRestoreCallback(e){this.selected="true"===e}[c](){return new u(()=>({checked:this.selected,required:this.required}))}[h](){return this.inputElement}};e([r({type:Boolean})],w.prototype,"selected",void 0),e([r({type:Boolean})],w.prototype,"required",void 0),e([r({type:String})],w.prototype,"value",void 0),e([r({type:Boolean,attribute:"hide-selected-icon"})],w.prototype,"hideSelectedIcon",void 0),e([r({type:Boolean,attribute:"show-unselected-icon"})],w.prototype,"showUnselectedIcon",void 0),e([n("#input")],w.prototype,"inputElement",void 0),w=e([o("mdc-switch")],w);export{w as Switch};