@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
1 lines • 9.67 kB
JavaScript
import{r as t,h as a,c as i,g as e}from"./p-c5b7f45e.js";import{g as s}from"./p-a4e6e35b.js";import{f as r}from"./p-6b4b7af1.js";import{h as o}from"./p-18a62b5e.js";const c=class{constructor(a){t(this,a),this.checked=!1,this.disabled=!1,this.focused=!1,this.hidden=!1,this.hovered=!1,this.scale="m"}render(){return a("div",{class:"radio"})}};c.style="@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host .radio{border-radius:9999px;cursor:pointer;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input)}:host([hovered]) .radio,:host(:not([checked])[focused]) .radio{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}:host([disabled]) .radio{cursor:default;opacity:var(--calcite-ui-opacity-disabled)}:host([hovered][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input)}:host([scale=s]){--calcite-radio-size:var(--calcite-font-size--2)}:host([scale=m]){--calcite-radio-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-radio-size:var(--calcite-font-size-0)}.radio{height:var(--calcite-radio-size);max-width:var(--calcite-radio-size);min-width:var(--calcite-radio-size)}:host([scale=s][checked]) .radio,:host([hovered][scale=s][checked][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 4px var(--calcite-ui-brand)}:host([scale=s][focused][checked]) .radio{-webkit-box-shadow:inset 0 0 0 4px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 4px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand)}:host([scale=m][checked]) .radio,:host([hovered][scale=m][checked][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 5px var(--calcite-ui-brand);box-shadow:inset 0 0 0 5px var(--calcite-ui-brand)}:host([scale=m][focused][checked]) .radio{-webkit-box-shadow:inset 0 0 0 5px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 5px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand)}:host([scale=l][checked]) .radio,:host([hovered][scale=l][checked][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 6px var(--calcite-ui-brand);box-shadow:inset 0 0 0 6px var(--calcite-ui-brand)}:host([scale=l][focused][checked]) .radio{-webkit-box-shadow:inset 0 0 0 6px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 6px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand)}:host([hidden]){display:none}";const n=class{constructor(a){t(this,a),this.calciteRadioButtonChange=i(this,"calciteRadioButtonChange",7),this.calciteRadioButtonCheckedChange=i(this,"calciteRadioButtonCheckedChange",7),this.calciteRadioButtonFocusedChange=i(this,"calciteRadioButtonFocusedChange",7),this.checked=!1,this.disabled=!1,this.focused=!1,this.hidden=!1,this.hovered=!1,this.required=!1,this.scale="m",this.setInputEl=t=>{this.inputEl=t},this.formResetHandler=()=>{var t;this.checked=this.initialChecked,this.initialChecked&&(null===(t=this.inputEl)||void 0===t||t.setAttribute("checked",""))},this.hideInputEl=()=>{this.inputEl.style.cssText=o},this.onInputBlur=()=>{this.focused=!1,this.calciteRadioButtonFocusedChange.emit()},this.onInputFocus=()=>{this.focused=!0,this.calciteRadioButtonFocusedChange.emit()}}checkedChanged(t){t&&this.uncheckOtherRadioButtonsInGroup(),this.inputEl&&(this.inputEl.checked=t),this.calciteRadioButtonCheckedChange.emit(t)}disabledChanged(t){this.inputEl.disabled=t}focusedChanged(t){this.inputEl&&(t&&!this.el.hasAttribute("hidden")?this.inputEl.focus():this.inputEl.blur())}hiddenChanged(t){this.inputEl.hidden=t}nameChanged(t){if(this.name===t)return;this.inputEl&&(this.inputEl.name=t),this.checkLastRadioButton();const a=this.rootNode.querySelector(`input[name="${this.name}"]:checked`);(null==a?void 0:a.value)||this.uncheckAllRadioButtonsInGroup()}requiredChanged(t){this.inputEl.required=t}async setFocus(){r(this.inputEl)}checkLastRadioButton(){const t=Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((t=>t.name===this.name)).filter((t=>t.checked));if((null==t?void 0:t.length)>1){const a=t[t.length-1];t.filter((t=>t!==a)).forEach((t=>{t.checked=!1,t.emitCheckedChange()}))}}async emitCheckedChange(){this.calciteRadioButtonCheckedChange.emit()}uncheckAllRadioButtonsInGroup(){Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((t=>t.name===this.name)).forEach((t=>{t.checked&&(t.checked=!1,t.focused=!1)}))}uncheckOtherRadioButtonsInGroup(){Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((t=>t.name===this.name&&t.guid!==this.guid)).forEach((t=>{t.checked&&(t.checked=!1,t.focused=!1)}))}check(t){!this.el.closest("label")||t.target!==this.el&&t.target!==this.radio||t.preventDefault(),this.disabled||this.hidden||(this.uncheckOtherRadioButtonsInGroup(),this.checked=!0,this.focused=!0,this.calciteRadioButtonChange.emit())}mouseenter(){this.hovered=!0}mouseleave(){this.hovered=!1}connectedCallback(){this.rootNode=this.el.getRootNode(),this.guid=this.el.id||`calcite-radio-button-${s()}`,this.initialChecked=this.checked,this.name&&this.checkLastRadioButton();const t=this.el.closest("form");t&&t.addEventListener("reset",this.formResetHandler)}componentDidLoad(){this.hideInputEl(),this.focused&&this.inputEl.focus()}disconnectedCallback(){const t=this.el.closest("form");t&&t.removeEventListener("reset",this.formResetHandler)}render(){var t;const i=null===(t=this.value)||void 0===t?void 0:t.toString();return a("div",{class:"container"},a("input",{"aria-label":this.label||null,checked:this.checked,disabled:this.disabled,hidden:this.hidden,id:`${this.guid}-input`,name:this.name,onBlur:this.onInputBlur,onFocus:this.onInputFocus,ref:this.setInputEl,required:this.required,type:"radio",value:i}),a("calcite-radio",{checked:this.checked,disabled:this.disabled,focused:this.focused,hidden:this.hidden,hovered:this.hovered,ref:t=>this.radio=t,scale:this.scale}))}get el(){return e(this)}static get watchers(){return{checked:["checkedChanged"],disabled:["disabledChanged"],focused:["focusedChanged"],hidden:["hiddenChanged"],name:["nameChanged"],required:["requiredChanged"]}}};n.style="@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}.sc-calcite-radio-button:root{--calcite-popper-transition:150ms ease-in-out}[hidden].sc-calcite-radio-button-h{display:none}.sc-calcite-radio-button-h{cursor:pointer;display:inline-block}.sc-calcite-radio-button-h .container.sc-calcite-radio-button{position:relative}[disabled].sc-calcite-radio-button-h{cursor:pointer}";export{c as calcite_radio,n as calcite_radio_button}