UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

5 lines (4 loc) 4.35 kB
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified. See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details. v3.2.1 */ import{a as h}from"./FN45KTPK.js";import{a as d}from"./M7EAHGE3.js";import"./5RDOSP2E.js";import{n as e}from"./3ADX47DD.js";import{d as u}from"./HPN2C7M6.js";import"./JOSABGK6.js";import"./NNVH7JUI.js";import{E as l,F as r,J as c,R as n,c as s,d as i,q as o}from"./BJZTU5BQ.js";var m={itemWrapper:"item-wrapper"},p={validationMessage:"radioButtonGroupValidationMessage"},g=s`:host{display:flex;flex-direction:column}:host>.item-wrapper{display:flex;max-inline-size:100vw}:host([layout=horizontal])>.item-wrapper{flex-direction:row;flex-wrap:wrap}:host([layout=horizontal][scale=s])>.item-wrapper{column-gap:var(--calcite-radio-button-group-gap, var(--calcite-spacing-lg))}:host([layout=horizontal][scale=m])>.item-wrapper{column-gap:var(--calcite-radio-button-group-gap, var(--calcite-spacing-xl))}:host([layout=horizontal][scale=l])>.item-wrapper{column-gap:var(--calcite-radio-button-group-gap, var(--calcite-spacing-xxl))}:host([layout=vertical])>.item-wrapper{flex-direction:column;inline-size:fit-content}:host([scale=s]) calcite-input-message{--calcite-input-message-spacing: var( --calcite-radio-button-input-message-spacing, calc(var(--calcite-spacing-xxs) * -1) )}:host([scale=m]) calcite-input-message{--calcite-input-message-spacing: var( --calcite-radio-button-input-message-spacing, calc(var(--calcite-spacing-sm) * -1) )}:host([scale=l]) calcite-input-message{--calcite-input-message-spacing: var( --calcite-radio-button-input-message-spacing, calc(var(--calcite-spacing-md) * -1) )}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}:host([hidden]){display:none}[hidden]{display:none}`,a=class extends l{constructor(){super(),this.mutationObserver=d("mutation",()=>this.passPropsToRadioButtons()),this.radioButtons=[],this.disabled=!1,this.layout="horizontal",this.required=!1,this.scale="m",this.selectedItem=null,this.status="idle",this.calciteRadioButtonGroupChange=o({cancelable:!1}),this.listen("calciteRadioButtonChange",this.radioButtonChangeHandler)}static{this.properties={radioButtons:[16,{},{state:!0}],disabled:[7,{},{reflect:!0,type:Boolean}],layout:[3,{},{reflect:!0}],name:[3,{},{reflect:!0}],required:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],selectedItem:[0,{},{attribute:!1}],status:[3,{},{reflect:!0}],validationIcon:[3,{converter:c},{reflect:!0}],validationMessage:1}}static{this.styles=g}async setFocus(){await u(this),this.selectedItem&&!this.selectedItem.disabled&&e(this.selectedItem),this.radioButtons.length>0&&e(this.getFocusableRadioButton())}connectedCallback(){super.connectedCallback(),this.passPropsToRadioButtons(),this.mutationObserver?.observe(this.el,{childList:!0,subtree:!0})}willUpdate(t){(t.has("disabled")&&(this.hasUpdated||this.disabled!==!1)||t.has("layout")&&(this.hasUpdated||this.layout!=="horizontal")||t.has("scale")&&(this.hasUpdated||this.scale!=="m"))&&this.passPropsToRadioButtons()}loaded(){this.passPropsToRadioButtons()}disconnectedCallback(){super.disconnectedCallback(),this.mutationObserver?.disconnect()}passPropsToRadioButtons(){this.radioButtons=Array.from(this.el.querySelectorAll("calcite-radio-button")),this.selectedItem=Array.from(this.radioButtons).reverse().find(t=>t.checked)||null,this.radioButtons.length>0&&this.radioButtons.forEach(t=>{this.hasUpdated&&(t.disabled=this.disabled||t.disabled),t.name=this.name,t.required=this.required,t.scale=this.scale})}getFocusableRadioButton(){return this.radioButtons.find(t=>!t.disabled)??null}radioButtonChangeHandler(t){this.selectedItem=t.target,this.calciteRadioButtonGroupChange.emit()}render(){return this.el.role="radiogroup",i`<div aria-errormessage=${p.validationMessage} .ariaInvalid=${this.status==="invalid"} class=${r(m.itemWrapper)}><slot></slot></div>${this.validationMessage&&this.status==="invalid"?h({icon:this.validationIcon,id:p.validationMessage,message:this.validationMessage,scale:this.scale,status:this.status}):null}`}};n("calcite-radio-button-group",a);export{a as RadioButtonGroup};