@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
2 lines (1 loc) • 3.53 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 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 l,createValidator as n,getValidityAnchor as d}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{BaseButton as b}from"./base-button.js";import{buttonStyles as f}from"./button.style.js";import"../../utils/behaviors/element-internals.js";import"../../utils/behaviors/validators/validator.js";import"../../state--U2hSgGK.js";import"../../utils/aria/delegate.js";import"../../utils/aria/aria.js";import"../../utils/event/form-label-activation.js";import"../../component-definitions/button.definition.js";import"../../color-CigMJnjV.js";import"../../elevation-dUQez_WX.js";import"../../shape-CrZ0CLVJ.js";import"../../state-C-haZXan.js";import"../../typescale-Bh1NLwSE.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(l(c(b))){constructor(){super(...arguments),this.variant="filled",this.value="on",this.selected=!1,this.required=!1}static{this.styles=f}getRenderClasses(){return{...super.getRenderClasses(),togglable:!0,selected:this.selected,unselected:!this.selected}}render(){const{ariaHasPopup:t,ariaExpanded:s,ariaLabel:r}=this;return i`<button class="${a(this.getRenderClasses())}" ?disabled="${this.disabled}" aria-disabled="${this.disabled}" aria-label="${r||e}" aria-haspopup="${t||e}" aria-expanded="${s||e}" tabindex="-1">${"outlined"===this.variant?this.renderOutline():e} ${["elevated","filled","filled-tonal"].includes(this.variant)?this.renderElevation():e} ${this.renderContent()} ${this.renderTouchTarget()} ${this.renderBackground()}<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"></mdc-focus-ring></button>`}renderTouchTarget(){return i`<input type="checkbox" role="button" id="input-as-touch-target" class="toggle-input touch-target" .checked="${this.selected}" ?disabled="${this.disabled}" ?required="${this.required}" aria-disabled="${this.disabled}" aria-required="${this.required}" tabindex="0" ="${this.handleInput}" ="${this.handleChange}">`}handleInput(t){this.selected=this.buttonElement.checked}handleChange(t){u(this,t)}[h](){return this.selected?this.value:null}[m](){return String(this.selected)}formResetCallback(){this.selected=this.hasAttribute("selected")}formStateRestoreCallback(t){this.selected="true"===t}[n](){return new p(()=>({checked:this.selected,required:this.required}))}[d](){return this.buttonElement}};t([r({type:String,reflect:!0})],g.prototype,"variant",void 0),t([r({type:String})],g.prototype,"value",void 0),t([r({type:Boolean,reflect:!1})],g.prototype,"selected",void 0),t([r({type:Boolean})],g.prototype,"required",void 0),t([o("#input-as-touch-target")],g.prototype,"buttonElement",void 0),g=t([s("mdc-toggle-button")],g);export{g as TogglableButton};