@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
2 lines (1 loc) • 3.38 kB
JavaScript
import{_ as e}from"../../tslib.es6-CmLYFWVC.js";import{E as t,x as s}from"../../lit-element-Ho-VPzO1.js";import{t as i}from"../../custom-element-Dz3n6kSt.js";import{n as r}from"../../property-Ck1wIidx.js";import{e as o}from"../../query-DifSdHBD.js";import{e as a}from"../../class-map-DlMb2KKL.js";import{mixinConstraintValidation as n,createValidator as d,getValidityAnchor as l}from"../../utils/behaviors/constraint-validation.js";import{CheckboxValidator as p}from"../../utils/behaviors/validators/checkbox-validator.js";import{redispatchEvent as u}from"../../utils/event/redispatch-event.js";import{mixinFormAssociated as c,getFormValue as h,getFormState as m}from"../../utils/form/form-associated.js";import{BaseIconButton as b}from"./base-icon-button.js";import"../../utils/behaviors/element-internals.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";let g=class extends(n(c(b))){constructor(){super(...arguments),this.selected=!1,this.required=!1,this.value="on"}static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}getRenderClasses(){return{...super.getRenderClasses(),togglable:!0,selected:this.selected,unselected:!this.selected}}render(){const{ariaHasPopup:e,ariaExpanded:i,ariaLabel:r}=this;return s`<button class="${a(this.getRenderClasses())}" id="button" ?disabled="${this.disabled}" aria-disabled="${this.disabled}" aria-label="${r||t}" aria-haspopup="${e||t}" aria-expanded="${i||t}" tabindex="-1">${"outlined"===this.variant?this.renderOutline():t} ${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>`}renderTouchTarget(){return s`<input id="input-as-touch-target" class="touch-target" type="checkbox" tabindex="0" ?checked="${this.selected}" ?required="${this.required}" ?disabled="${this.disabled}" aria-checked="${this.selected}" aria-required="${this.required}" aria-disabled="${this.disabled}" ="${this.handleInput}" ="${this.handleChange}">`}handleInput(e){this.selected=e.target.checked}handleChange(e){u(this,e)}[h](){return this.selected?this.value:null}[m](){return String(this.selected)}formResetCallback(){this.selected=this.hasAttribute("selected"),this.buttonElement&&(this.buttonElement.checked=this.selected)}formStateRestoreCallback(e){this.selected="true"===e}[d](){return new p(()=>({checked:this.selected,required:this.required}))}[l](){return this.buttonElement}};e([r({type:Boolean})],g.prototype,"selected",void 0),e([r({type:Boolean})],g.prototype,"required",void 0),e([r({type:String})],g.prototype,"value",void 0),e([o("#input-as-touch-target")],g.prototype,"buttonElement",void 0),g=e([i("mdc-toggle-icon-button")],g);export{g as MDCToggleIconButton};