@sandlada/mdc/build/components/radio-button/radio-button.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{i 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 n}from"../../class-map-DlMb2KKL.js";import{mixinDelegatesAria as c}from"../../utils/aria/delegate.js";import{mixinConstraintValidation as l,createValidator as a,getValidityAnchor as d}from"../../utils/behaviors/constraint-validation.js";import{mixinElementInternals as h,internals as m}from"../../utils/behaviors/element-internals.js";import{RadioValidator as p}from"../../utils/behaviors/validators/radio-validator.js";import{isActivationClick as u}from"../../utils/event/form-label-activation.js";import{mixinFormAssociated as k,getFormValue as v,getFormState as f}from"../../utils/form/form-associated.js";import{generateUUID as b}from"../../utils/uuid/generate-uuid.js";import{SingleSelectionController as j}from"./radio-button-selection-controller.js";import{radioButtonStyle as y}from"./radio-button.style.js";import"../../utils/aria/aria.js";import"../../utils/behaviors/validators/validator.js";import"../../easing-5hHInU7b.js";import"../../component-definitions/radio-button.definition.js";import"../../color-CigMJnjV.js";import"../../state-C-haZXan.js";import"../../utils/tokens/create-wrapped-tokens.js";import"../../utils/tokens/override-component-tokens.js";import"../../utils/tokens/string-tokens.js";var g;const w=Symbol("checked");let C=class extends(c(l(k(h(e))))){static{this.styles=y}get checked(){return this[w]}set checked(t){if(t===this[w])return;const e=this[w];this[w]=t,this.requestUpdate("checked",e),this.selectionController.handleCheckedChange()}constructor(){super(),this[g]=!1,this.maskId=`maskid-${b()}`,this.selectionController=new j(this),this.required=!1,this.value="on",this.addController(this.selectionController),this[m].role="radio",this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.handleKeydown.bind(this))}render(){const t=n({selected:this.checked,unselected:!this.checked});return i`<div class="container ${t}" aria-hidden="true"><mdc-ripple .control="${this}" .disabled="${this.disabled}" part="ripple"></mdc-ripple><mdc-focus-ring .control="${this}" part="focus-ring"></mdc-focus-ring><svg class="icon" viewBox="0 0 20 20"><mask id="${this.maskId}"><rect width="100%" height="100%" fill="white"/><circle cx="10" cy="10" r="8" fill="black"/></mask><circle class="outer circle" cx="10" cy="10" r="10" mask="url(#${this.maskId})"/><circle class="inner circle" cx="10" cy="10" r="5"/></svg><div class="touch-target"></div></div>`}updated(){this[m].ariaChecked=String(this.checked)}async handleClick(t){this.disabled||(await 0,t.defaultPrevented||(u(t)&&this.focus(),this.checked=!0,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))))}async handleKeydown(t){await 0," "!==t.key||t.defaultPrevented||this.click()}[(g=w,v)](){return this.checked?this.value:null}[f](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute("checked")}formStateRestoreCallback(t){this.checked="true"===t}[a](){return new p(()=>this.selectionController?this.selectionController.controls:[this])}[d](){return this.containerElement}};t([r({type:Boolean})],C.prototype,"checked",null),t([r({type:Boolean})],C.prototype,"required",void 0),t([r({type:String})],C.prototype,"value",void 0),t([o(".container")],C.prototype,"containerElement",void 0),C=t([s("mdc-radio-button")],C);export{C as RadioButton};