@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{customElement as e}from"../../node_modules/@lit/reactive-element/decorators/custom-element.js";import{property as t}from"../../node_modules/@lit/reactive-element/decorators/property.js";import"../../node_modules/lit/decorators.js";import{html as n}from"../../node_modules/lit-html/lit-html.js";import{LitElement as r}from"../../node_modules/lit-element/lit-element.js";import"../../node_modules/lit/index.js";import{classMap as i}from"../../node_modules/lit-html/directives/class-map.js";import"../../node_modules/lit/directives/class-map.js";import{internals as a,mixinElementInternals as o}from"../../utils/behaviors/element-internals.js";import{composeMixin as s}from"../../utils/compose-mixin/compose-mixin.js";import c from"../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{mixinDelegatesAria as l}from"../../utils/aria/delegate.js";import{isActivationClick as u}from"../../utils/event/form-label-activation.js";import{mixinFocusRingOptions as d}from"../focus-ring/focus-ring-options.mixin.js";import{mixinRippleOptions as f}from"../ripple/ripple-options.mixin.js";import{getFormState as p,getFormValue as m,mixinFormAssociated as h}from"../../utils/form/form-associated.js";import{createValidator as g,getValidityAnchor as _,mixinConstraintValidation as v}from"../../utils/behaviors/constraint-validation.js";import{RadioValidator as y}from"../../utils/behaviors/validators/radio-validator.js";import{SelectionController as b}from"../../utils/controller/selection-controller.js";import{radioButtonStyle as x}from"./radio-button.style.js";
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
const S=new Set([`Tab`,` `,`Enter`,`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`,`Home`,`End`]),C=new Set([` `,`Enter`]),w=[`pointerdown`,`mousedown`,`touchstart`];let T=!1,E=!1;function D(){if(!E){E=!0,document.addEventListener(`keydown`,e=>{e.altKey||e.ctrlKey||e.metaKey||(T=!0)},!0);for(let e of w)document.addEventListener(e,()=>{T=!1},!0)}}let O=class extends s(l,v,h,o,d,f)(r){static{this.shadowRootOptions={...r.shadowRootOptions,delegatesFocus:!1}}static{this.styles=x}get focusRingControl(){return this}get rippleControl(){return this}constructor(){super(),this.type=`radio`,this.value=`on`,this.required=!1,this.checked=!1,this.selectionController=new b(this,{canCancel:!1,dispatchNavigationClick:!0,getFocusableElement:e=>e,onAfterNavigate:e=>{e===this&&(T=!0,this.queueKeyboardVisualSync(!0))}}),this.handleFocusIn=()=>{this.shouldShowKeyboardVisuals()&&this.queueKeyboardVisualSync(!1)},this.handleFocusOut=()=>{queueMicrotask(()=>{this.matches(`:focus`)||this.clearKeyboardVisuals()})},this.handleVisualKeyDown=e=>{this.disabled||!S.has(e.key)||(T=!0,this.queueKeyboardVisualSync(C.has(e.key)))},this.addController(this.selectionController),D(),this[a].role=`radio`,this.tabIndex=0,this.addEventListener(`focusin`,this.handleFocusIn),this.addEventListener(`focusout`,this.handleFocusOut),this.addEventListener(`keydown`,this.handleVisualKeyDown)}connectedCallback(){super.connectedCallback(),this.hasAttribute(`default-checked`)&&(this.checked=!0)}updated(e){super.updated(e),this[a].ariaChecked=String(this.checked)}getRenderClasses(){return{container:!0,selected:this.checked,unselected:!this.checked}}render(){return n`<div class="${i(this.getRenderClasses())}">${this.renderRipple()} ${this.renderFocusRing()} <svg class="icon" viewBox="0 0 20 20"><circle class="outer" cx="10" cy="10" r="9"/><circle class="inner" cx="10" cy="10" r="9"/></svg> <input class="touch-target" role="button" type="radio" tabindex="-1" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-checked="${this.checked}" aria-disabled="${this.disabled}" aria-required="${this.required}" @click="${this.handleClick}"></div>`}shouldShowKeyboardVisuals(){return T||this.matches(`:focus-visible`)}queueKeyboardVisualSync(e){queueMicrotask(()=>{!this.isConnected||this.disabled||!this.matches(`:focus`)||this.shouldShowKeyboardVisuals()&&(this.focusRingElement&&!this.focusRingElement.focused&&(this.focusRingElement.focused=!0),this.rippleElement&&!this.rippleElement.focused&&(this.rippleElement.focused=!0),e&&this.rippleElement&&!this.rippleElement.pressed&&this.rippleElement.action.handleClick())})}clearKeyboardVisuals(){this.focusRingElement?.focused&&this.focusRingElement.close(),this.rippleElement?.focused&&(this.rippleElement.focused=!1)}async handleClick(e){this.disabled||(await 0,!e.defaultPrevented&&u(e)&&this.focus())}[g](){return new y(()=>this.selectionController?this.selectionController.controls:[this])}[_](){return this}[m](){return this.checked?this.value:null}[p](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute(`default-checked`)}formStateRestoreCallback(e){this.checked=e===`true`}};c([t({type:String})],O.prototype,`value`,void 0),c([t({type:Boolean,reflect:!0})],O.prototype,`required`,void 0),c([t({type:Boolean,reflect:!0})],O.prototype,`checked`,void 0),O=c([e(`mdc-radio-button`)],O);export{O as RadioButton};
//# sourceMappingURL=radio-button.js.map