wcs-core 7.5.0 → 7.6.0

package/composite-elements/wcs-radio.js

@@ -1,2 +1,2 @@
-import{p as o,H as r,d as e,h as a,c}from"./p-2bef72c7.js";import{s as t,i,a as d}from"./p-e803bb26.js";const s=':host{width:fit-content;--wcs-radio-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-radio-text-color-default:var(--wcs-semantic-color-text-secondary);--wcs-radio-text-font-weight-default:var(--wcs-semantic-font-weight-medium);--wcs-radio-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-radio-text-font-weight-selected:var(--wcs-semantic-font-weight-medium);--wcs-radio-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-radio-text-color-hover:var(--wcs-semantic-color-text-primary);--wcs-radio-checkmark-size:1rem;--wcs-radio-gap:var(--wcs-semantic-spacing-base);--wcs-radio-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-radio-checkmark-border-width:var(--wcs-semantic-border-width-large);--wcs-radio-checkmark-border-color-default:var(--wcs-semantic-color-border-control-indicator-default);--wcs-radio-checkmark-border-color-selected:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-radio-checkmark-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-radio-checkmark-border-color-disabled:var(--wcs-semantic-color-border-control-indicator-disabled);--wcs-radio-checkmark-background-color-default:transparent;--wcs-radio-checkmark-background-color-selected:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-radio-checkmark-background-color-selected-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-radio-checkmark-background-color-selected-hover:var(--wcs-semantic-color-background-control-indicator-hover);--wcs-radio-checkmark-outline-distance-with-checkmark-circle:var(--wcs-semantic-spacing-small);--wcs-radio-checkmark-outline-width:var(--wcs-semantic-border-width-large);--wcs-radio-checkmark-outline-color:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-radio-checkmark-border-radius:var(--wcs-semantic-border-radius-full);--wcs-radio-border-radius:var(--wcs-semantic-border-radius-base);--wcs-radio-option-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-hover:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-press:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-disabled:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-selected-default:var(--wcs-semantic-color-background-action-primary-default);--wcs-radio-option-background-color-selected-hover:var(--wcs-semantic-color-background-action-primary-hover);--wcs-radio-option-background-color-selected-press:var(--wcs-semantic-color-background-action-primary-press);--wcs-radio-option-background-color-selected-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-radio-option-text-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-radio-option-text-color-hover:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-radio-option-text-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-radio-option-text-color-selected-default:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-radio-option-text-color-selected-hover:var(--wcs-semantic-color-foreground-action-primary-hover);--wcs-radio-option-text-color-selected-press:var(--wcs-semantic-color-foreground-action-primary-press);--wcs-radio-option-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-radio-option-text-font-weight-default:var(--wcs-semantic-font-weight-roman);--wcs-radio-option-text-font-weight-selected:var(--wcs-semantic-font-weight-roman);--wcs-radio-option-border-radius:var(--wcs-semantic-border-radius-base);--wcs-radio-option-border-width:var(--wcs-semantic-border-width-default);--wcs-radio-option-border-color-hover:var(--wcs-semantic-color-border-action-secondary-hover);--wcs-radio-option-border-color-press:var(--wcs-semantic-color-border-action-secondary-press);--wcs-radio-option-padding-top:var(--wcs-semantic-spacing-base);--wcs-radio-option-padding-right:var(--wcs-semantic-spacing-large);--wcs-radio-option-padding-bottom:var(--wcs-semantic-spacing-base);--wcs-radio-option-padding-left:var(--wcs-semantic-spacing-large)}:host([mode=radio]) input,:host([mode=horizontal]) input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host([mode=radio]) label,:host([mode=horizontal]) label{margin-bottom:0;color:var(--wcs-radio-text-color-default);font-weight:var(--wcs-radio-text-font-weight-default) !important;display:inline-block}:host([mode=radio]) label:before,:host([mode=horizontal]) label:before{border-radius:var(--wcs-radio-checkmark-border-radius);border:var(--wcs-radio-checkmark-border-width) solid var(--wcs-radio-checkmark-border-color-default);position:relative;width:var(--wcs-radio-checkmark-size);height:var(--wcs-radio-checkmark-size);pointer-events:none;content:"";background-color:var(--wcs-radio-checkmark-background-color-default)}:host([mode=radio]) input:focus-visible+label,:host([mode=horizontal]) input:focus-visible+label{transition:none;outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-radio-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-radio-border-radius)}:host([disabled]) label{color:var(--wcs-radio-text-color-disabled);cursor:not-allowed}:host([disabled]) label:before{border-color:var(--wcs-radio-checkmark-border-color-disabled)}:host(:not([disabled])) label{cursor:pointer}:host([mode=radio].checked) label,:host([mode=horizontal].checked) label{color:var(--wcs-radio-text-color-selected);font-weight:var(--wcs-radio-text-font-weight-selected) !important}:host([mode=radio].checked) label:before,:host([mode=horizontal].checked) label:before{border-color:var(--wcs-radio-checkmark-border-color-selected);background-color:var(--wcs-radio-checkmark-background-color-selected);outline:solid var(--wcs-radio-checkmark-outline-width) var(--wcs-radio-checkmark-outline-color);outline-offset:calc(-1 * var(--wcs-radio-checkmark-outline-distance-with-checkmark-circle))}:host([mode=radio][disabled].checked) label,:host([mode=horizontal][disabled].checked) label{color:var(--wcs-radio-text-color-disabled)}:host([mode=radio][disabled].checked) label:before,:host([mode=horizontal][disabled].checked) label:before{border-color:var(--wcs-radio-checkmark-border-color-disabled);background-color:var(--wcs-radio-checkmark-background-color-selected-disabled)}:host([mode=radio]:hover:not([disabled])) label,:host([mode=horizontal]:hover:not([disabled])) label{color:var(--wcs-radio-text-color-hover)}:host([mode=radio]:hover:not([disabled])) label:before,:host([mode=horizontal]:hover:not([disabled])) label:before{border-color:var(--wcs-radio-checkmark-border-color-hover);background-color:var(--wcs-radio-checkmark-background-color-selected-hover)}:host([mode=radio]:hover:not([disabled]):not(.checked)) label:before,:host([mode=horizontal]:hover:not([disabled]):not(.checked)) label:before{background-color:var(--wcs-radio-checkmark-background-color-default)}:host([mode=radio]) label{border:none}:host([mode=radio]) label:before{transition:background-color var(--wcs-radio-transition-duration) ease-in-out;margin-right:var(--wcs-radio-gap);display:inline-block;top:3px;box-sizing:border-box}:host([mode=radio]) label:empty::before{margin-right:0}:host([mode=horizontal]){height:fit-content}:host([mode=horizontal]) label:before{transition:background-color var(--wcs-radio-transition-duration) ease-in-out;margin:auto auto var(--wcs-radio-gap);display:block}:host([mode=horizontal]) label:empty::before{margin-bottom:0}:host([mode=option]){font-weight:var(--wcs-radio-option-text-font-weight-default) !important}:host([mode=option]) input{position:absolute;z-index:-1;opacity:0;box-sizing:border-box;padding:0}:host([mode=option]) label{padding:var(--wcs-radio-option-padding-top) var(--wcs-radio-option-padding-right) var(--wcs-radio-option-padding-bottom) var(--wcs-radio-option-padding-left);margin-bottom:0;color:var(--wcs-radio-option-text-color-default);white-space:nowrap;border-radius:var(--wcs-radio-option-border-radius);transition:background-color var(--wcs-radio-transition-duration) ease-in-out;background-color:var(--wcs-radio-option-background-color-default)}:host([mode=option]) input:focus-visible+label{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-radio-outline-color-focus);outline-offset:0;border-radius:var(--wcs-radio-border-radius)}:host([mode=option][disabled]) label{color:var(--wcs-radio-option-text-color-disabled);background-color:var(--wcs-radio-option-background-color-disabled)}:host([mode=option][disabled].checked) label{color:var(--wcs-radio-option-text-color-disabled);background-color:var(--wcs-radio-option-background-color-selected-disabled)}:host([mode=option].checked) label{font-weight:var(--wcs-radio-option-text-font-weight-selected) !important;color:var(--wcs-radio-option-text-color-selected-default);background-color:var(--wcs-radio-option-background-color-selected-default)}:host([mode=option]:hover.checked:not([disabled])) label{color:var(--wcs-radio-option-text-color-selected-hover);background-color:var(--wcs-radio-option-background-color-selected-hover)}:host([mode=option]:active.checked:not([disabled])) label{color:var(--wcs-radio-option-text-color-selected-press);background-color:var(--wcs-radio-option-background-color-selected-press)}:host([mode=option]:hover:not(.checked):not([disabled])) label{color:var(--wcs-radio-option-text-color-hover);background-color:var(--wcs-radio-option-background-color-hover);outline:var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-hover)}:host([mode=option]:active:not(.checked):not([disabled])) label{color:var(--wcs-radio-option-text-color-press);background-color:var(--wcs-radio-option-background-color-press);outline:var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-press)}';const n=s;const l=["title"];const h=o(class o extends r{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsRadioClick=e(this,"wcsRadioClick",7);this.wcsBlur=e(this,"wcsBlur",7);this.wcsFocus=e(this,"wcsFocus",7);this.inputId=`wcs-rb-${b++}`;this.inheritedAttributes={};this.checked=false;this.radioTabIndex=-1;this.value=undefined;this.label=undefined;this.disabled=false;this.name=undefined;this.mode="radio"}async updateState(){const o=this.getClosestRadioGroup();if(o){this.checked=o.name===this.name&&o.value===this.value}}async setTabIndex(o){this.radioTabIndex=o}async setAriaAttribute(o,r){t(this.nativeRadio,o,r)}onFocus(o){this.wcsFocus.emit(o)}onBlur(o){this.wcsBlur.emit(o)}getClosestRadioGroup(){return this.el.closest("wcs-radio-group")}componentWillLoad(){if(this.value===undefined){this.value=this.el.innerText||""}this.inheritedAttributes=Object.assign(Object.assign({},i(this.el)),d(this.el,l))}onChange(o){if(this.disabled)return;if(!this.checked){this.checked=true;this.emitRadioChangeEvent()}}emitRadioChangeEvent(){this.wcsRadioClick.emit({label:this.label,source:this.el,value:this.value})}render(){return a(c,{key:"b753f4673fccbd2f0d7e1636be135da90e1850ef",slot:"option",tabIndex:this.disabled?-1:this.radioTabIndex,class:this.checked?"checked":""},a("input",Object.assign({key:"25ac2afe93bdde452db9226feb11587f76a4fd69",id:this.inputId,type:"radio",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,onChange:this.onChange.bind(this),onFocus:this.onFocus.bind(this),onBlur:this.onBlur.bind(this),"aria-disabled":this.disabled?"true":null,"aria-checked":`${this.checked}`,ref:o=>this.nativeRadio=o},this.inheritedAttributes)),a("label",{key:"13b771ac257bcf81734cee12a85ffdf143e3c329",htmlFor:`${this.inputId}`},this.label))}static get delegatesFocus(){return true}get el(){return this}static get style(){return n}},[17,"wcs-radio",{value:[1544],label:[1537],disabled:[1540],name:[1025],mode:[513],checked:[32],radioTabIndex:[32],updateState:[64],setTabIndex:[64],setAriaAttribute:[64]}]);let b=0;function w(){if(typeof customElements==="undefined"){return}const o=["wcs-radio"];o.forEach((o=>{switch(o){case"wcs-radio":if(!customElements.get(o)){customElements.define(o,h)}break}}))}w();const u=h;const m=w;export{u as WcsRadio,m as defineCustomElement};
+import{p as o,H as r,d as e,h as a,c}from"./p-2bef72c7.js";import{s as t}from"./p-e803bb26.js";const i=':host{width:fit-content;--wcs-radio-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-radio-text-color-default:var(--wcs-semantic-color-text-secondary);--wcs-radio-text-font-weight-default:var(--wcs-semantic-font-weight-medium);--wcs-radio-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-radio-text-font-weight-selected:var(--wcs-semantic-font-weight-medium);--wcs-radio-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-radio-text-color-hover:var(--wcs-semantic-color-text-primary);--wcs-radio-checkmark-size:1rem;--wcs-radio-gap:var(--wcs-semantic-spacing-base);--wcs-radio-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-radio-checkmark-border-width:var(--wcs-semantic-border-width-large);--wcs-radio-checkmark-border-color-default:var(--wcs-semantic-color-border-control-indicator-default);--wcs-radio-checkmark-border-color-selected:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-radio-checkmark-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-radio-checkmark-border-color-disabled:var(--wcs-semantic-color-border-control-indicator-disabled);--wcs-radio-checkmark-background-color-default:transparent;--wcs-radio-checkmark-background-color-selected:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-radio-checkmark-background-color-selected-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-radio-checkmark-background-color-selected-hover:var(--wcs-semantic-color-background-control-indicator-hover);--wcs-radio-checkmark-outline-distance-with-checkmark-circle:var(--wcs-semantic-spacing-small);--wcs-radio-checkmark-outline-width:var(--wcs-semantic-border-width-large);--wcs-radio-checkmark-outline-color:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-radio-checkmark-border-radius:var(--wcs-semantic-border-radius-full);--wcs-radio-border-radius:var(--wcs-semantic-border-radius-base);--wcs-radio-option-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-hover:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-press:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-disabled:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-selected-default:var(--wcs-semantic-color-background-action-primary-default);--wcs-radio-option-background-color-selected-hover:var(--wcs-semantic-color-background-action-primary-hover);--wcs-radio-option-background-color-selected-press:var(--wcs-semantic-color-background-action-primary-press);--wcs-radio-option-background-color-selected-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-radio-option-text-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-radio-option-text-color-hover:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-radio-option-text-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-radio-option-text-color-selected-default:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-radio-option-text-color-selected-hover:var(--wcs-semantic-color-foreground-action-primary-hover);--wcs-radio-option-text-color-selected-press:var(--wcs-semantic-color-foreground-action-primary-press);--wcs-radio-option-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-radio-option-text-font-weight-default:var(--wcs-semantic-font-weight-roman);--wcs-radio-option-text-font-weight-selected:var(--wcs-semantic-font-weight-roman);--wcs-radio-option-border-radius:var(--wcs-semantic-border-radius-base);--wcs-radio-option-border-width:var(--wcs-semantic-border-width-default);--wcs-radio-option-border-color-hover:var(--wcs-semantic-color-border-action-secondary-hover);--wcs-radio-option-border-color-press:var(--wcs-semantic-color-border-action-secondary-press);--wcs-radio-option-padding-top:var(--wcs-semantic-spacing-base);--wcs-radio-option-padding-right:var(--wcs-semantic-spacing-large);--wcs-radio-option-padding-bottom:var(--wcs-semantic-spacing-base);--wcs-radio-option-padding-left:var(--wcs-semantic-spacing-large);position:relative}:host([mode=radio]) input,:host([mode=horizontal]) input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host([mode=radio]) .label,:host([mode=horizontal]) .label{margin-bottom:0;color:var(--wcs-radio-text-color-default);font-weight:var(--wcs-radio-text-font-weight-default) !important;display:inline-block}:host([mode=radio]) .label:before,:host([mode=horizontal]) .label:before{border-radius:var(--wcs-radio-checkmark-border-radius);border:var(--wcs-radio-checkmark-border-width) solid var(--wcs-radio-checkmark-border-color-default);position:relative;width:var(--wcs-radio-checkmark-size);height:var(--wcs-radio-checkmark-size);pointer-events:none;content:"";background-color:var(--wcs-radio-checkmark-background-color-default)}:host(:focus-visible){outline:none}:host(:focus-visible) .label{transition:none;outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-radio-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-radio-border-radius)}:host([disabled]) .label{color:var(--wcs-radio-text-color-disabled);cursor:not-allowed}:host([disabled]) .label:before{border-color:var(--wcs-radio-checkmark-border-color-disabled)}:host(:not([disabled])) .label{cursor:pointer}:host([mode=radio].checked) .label,:host([mode=horizontal].checked) .label{color:var(--wcs-radio-text-color-selected);font-weight:var(--wcs-radio-text-font-weight-selected) !important}:host([mode=radio].checked) .label:before,:host([mode=horizontal].checked) .label:before{border-color:var(--wcs-radio-checkmark-border-color-selected);background-color:var(--wcs-radio-checkmark-background-color-selected);outline:solid var(--wcs-radio-checkmark-outline-width) var(--wcs-radio-checkmark-outline-color);outline-offset:calc(-1 * var(--wcs-radio-checkmark-outline-distance-with-checkmark-circle))}:host([mode=radio][disabled].checked) .label,:host([mode=horizontal][disabled].checked) .label{color:var(--wcs-radio-text-color-disabled)}:host([mode=radio][disabled].checked) .label:before,:host([mode=horizontal][disabled].checked) .label:before{border-color:var(--wcs-radio-checkmark-border-color-disabled);background-color:var(--wcs-radio-checkmark-background-color-selected-disabled)}:host([mode=radio]:hover:not([disabled])) .label,:host([mode=horizontal]:hover:not([disabled])) .label{color:var(--wcs-radio-text-color-hover)}:host([mode=radio]:hover:not([disabled])) .label:before,:host([mode=horizontal]:hover:not([disabled])) .label:before{border-color:var(--wcs-radio-checkmark-border-color-hover);background-color:var(--wcs-radio-checkmark-background-color-selected-hover)}:host([mode=radio]:hover:not([disabled]):not(.checked)) .label:before,:host([mode=horizontal]:hover:not([disabled]):not(.checked)) .label:before{background-color:var(--wcs-radio-checkmark-background-color-default)}:host([mode=radio]) .label{border:none}:host([mode=radio]) .label:before{transition:background-color var(--wcs-radio-transition-duration) ease-in-out;margin-right:var(--wcs-radio-gap);display:inline-block;top:3px;box-sizing:border-box}:host([mode=radio]) .label:empty::before{margin-right:0}:host([mode=horizontal]){height:fit-content}:host([mode=horizontal]) .label:before{transition:background-color var(--wcs-radio-transition-duration) ease-in-out;margin:auto auto var(--wcs-radio-gap);display:block}:host([mode=horizontal]) .label:empty::before{margin-bottom:0}:host([mode=option]){font-weight:var(--wcs-radio-option-text-font-weight-default) !important}:host([mode=option]) input{position:absolute;z-index:-1;opacity:0;box-sizing:border-box;padding:0}:host([mode=option]) .label{padding:var(--wcs-radio-option-padding-top) var(--wcs-radio-option-padding-right) var(--wcs-radio-option-padding-bottom) var(--wcs-radio-option-padding-left);margin-bottom:0;color:var(--wcs-radio-option-text-color-default);white-space:nowrap;border-radius:var(--wcs-radio-option-border-radius);transition:background-color var(--wcs-radio-transition-duration) ease-in-out;background-color:var(--wcs-radio-option-background-color-default)}:host([mode=option]) input:focus-visible+.label{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-radio-outline-color-focus);outline-offset:0;border-radius:var(--wcs-radio-border-radius)}:host([mode=option][disabled]) .label{color:var(--wcs-radio-option-text-color-disabled);background-color:var(--wcs-radio-option-background-color-disabled)}:host([mode=option][disabled].checked) .label{color:var(--wcs-radio-option-text-color-disabled);background-color:var(--wcs-radio-option-background-color-selected-disabled)}:host([mode=option].checked) .label{font-weight:var(--wcs-radio-option-text-font-weight-selected) !important;color:var(--wcs-radio-option-text-color-selected-default);background-color:var(--wcs-radio-option-background-color-selected-default)}:host([mode=option]:hover.checked:not([disabled])) .label{color:var(--wcs-radio-option-text-color-selected-hover);background-color:var(--wcs-radio-option-background-color-selected-hover)}:host([mode=option]:active.checked:not([disabled])) .label{color:var(--wcs-radio-option-text-color-selected-press);background-color:var(--wcs-radio-option-background-color-selected-press)}:host([mode=option]:hover:not(.checked):not([disabled])) .label{color:var(--wcs-radio-option-text-color-hover);background-color:var(--wcs-radio-option-background-color-hover);outline:var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-hover)}:host([mode=option]:active:not(.checked):not([disabled])) .label{color:var(--wcs-radio-option-text-color-press);background-color:var(--wcs-radio-option-background-color-press);outline:var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-press)}';const s=i;const d=o(class o extends r{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsRadioClick=e(this,"wcsRadioClick",7);this.wcsBlur=e(this,"wcsBlur",7);this.wcsFocus=e(this,"wcsFocus",7);this.handleClick=()=>{this.selectRadio()};this.handleKeyDown=o=>{if(this.disabled)return;if(o.key===" "||o.key==="Enter"){o.preventDefault();o.stopPropagation();this.selectRadio()}};this.checked=false;this.radioTabIndex=-1;this.value=undefined;this.label=undefined;this.disabled=false;this.name=undefined;this.mode="radio"}async updateState(){const o=this.getClosestRadioGroup();if(o){this.checked=o.name===this.name&&o.value===this.value}}async setTabIndex(o){this.radioTabIndex=o}async setAriaAttribute(o,r){t(this.el,o,r)}onFocus(o){this.wcsFocus.emit(o)}onBlur(o){this.wcsBlur.emit(o)}getClosestRadioGroup(){return this.el.closest("wcs-radio-group")}componentWillLoad(){if(this.value===undefined){this.value=this.el.innerText||""}}emitRadioChangeEvent(){this.wcsRadioClick.emit({label:this.label,source:this.el,value:this.value})}selectRadio(){if(this.disabled||this.checked){return}this.checked=true;this.emitRadioChangeEvent()}render(){return a(c,{key:"0720e7983a66998bef080116aec041f3309d70dd",slot:"option",role:"radio","aria-checked":this.checked?"true":"false","aria-disabled":this.disabled?"true":"false",tabIndex:this.disabled?-1:this.radioTabIndex,class:this.checked?"checked":"",onClick:this.handleClick.bind(this),onFocus:this.onFocus.bind(this),onBlur:this.onBlur.bind(this),onKeyDown:this.handleKeyDown.bind(this)},a("span",{key:"bb2fb56fa6c5354a54b4debba078b0c129534e74",class:"label"},this.label))}get el(){return this}static get style(){return s}},[1,"wcs-radio",{value:[1544],label:[1537],disabled:[1540],name:[1025],mode:[513],checked:[32],radioTabIndex:[32],updateState:[64],setTabIndex:[64],setAriaAttribute:[64]}]);function n(){if(typeof customElements==="undefined"){return}const o=["wcs-radio"];o.forEach((o=>{switch(o){case"wcs-radio":if(!customElements.get(o)){customElements.define(o,d)}break}}))}n();const l=d;const h=n;export{l as WcsRadio,h as defineCustomElement};
 //# sourceMappingURL=wcs-radio.js.map

package/composite-elements/wcs-radio.js.map

@@ -1 +1 @@
-{"version":3,"names":["radioCss","WcsRadioStyle0","RADIO_INHERITED_ATTRS","Radio","proxyCustomElement","H","this","inputId","radioButtonIds","inheritedAttributes","updateState","radioGroup","getClosestRadioGroup","checked","name","value","setTabIndex","radioTabIndex","setAriaAttribute","attr","setOrRemoveAttribute","nativeRadio","onFocus","ev","wcsFocus","emit","onBlur","wcsBlur","el","closest","componentWillLoad","undefined","innerText","Object","assign","inheritAriaAttributes","inheritAttributes","onChange","_","disabled","emitRadioChangeEvent","wcsRadioClick","label","source","render","h","Host","key","slot","tabIndex","class","id","type","bind","ref","htmlFor"],"sources":["src/components/radio/radio.scss?tag=wcs-radio&encapsulation=shadow","src/components/radio/radio.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    width: fit-content;\n\n    --wcs-radio-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    // region mode Radio\n    --wcs-radio-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-radio-text-font-weight-default: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-radio-text-color-selected: var(--wcs-semantic-color-text-primary);\n    --wcs-radio-text-font-weight-selected: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-radio-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-radio-text-color-hover: var(--wcs-semantic-color-text-primary);\n\n    --wcs-radio-checkmark-size: 1rem; // for now, we let raw value to let adjust the size based on base font size\n\n    --wcs-radio-gap: var(--wcs-semantic-spacing-base);\n\n    --wcs-radio-outline-color-focus: var(--wcs-semantic-color-border-focus-base); // outline color for focus ring\n\n    --wcs-radio-checkmark-border-width: var(--wcs-semantic-border-width-large);\n    --wcs-radio-checkmark-border-color-default: var(--wcs-semantic-color-border-control-indicator-default);\n    --wcs-radio-checkmark-border-color-selected: var(--wcs-semantic-color-border-control-indicator-selected);\n    --wcs-radio-checkmark-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-radio-checkmark-border-color-disabled: var(--wcs-semantic-color-border-control-indicator-disabled);\n\n    --wcs-radio-checkmark-background-color-default: transparent;\n    --wcs-radio-checkmark-background-color-selected: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-radio-checkmark-background-color-selected-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-radio-checkmark-background-color-selected-hover: var(--wcs-semantic-color-background-control-indicator-hover);\n\n    --wcs-radio-checkmark-outline-distance-with-checkmark-circle: var(--wcs-semantic-spacing-small);\n    --wcs-radio-checkmark-outline-width: var(--wcs-semantic-border-width-large);\n    --wcs-radio-checkmark-outline-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n    --wcs-radio-checkmark-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-radio-border-radius: var(--wcs-semantic-border-radius-base);\n    // endregion\n\n    // region mode Option\n    --wcs-radio-option-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-hover: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-press: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-disabled: var(--wcs-semantic-color-background-action-secondary-default);\n\n    --wcs-radio-option-background-color-selected-default: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-radio-option-background-color-selected-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-radio-option-background-color-selected-press: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-radio-option-background-color-selected-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-radio-option-text-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-radio-option-text-color-hover: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-radio-option-text-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n\n    --wcs-radio-option-text-color-selected-default: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-radio-option-text-color-selected-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-radio-option-text-color-selected-press: var(--wcs-semantic-color-foreground-action-primary-press);\n    --wcs-radio-option-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-radio-option-text-font-weight-default: var(--wcs-semantic-font-weight-roman);\n    --wcs-radio-option-text-font-weight-selected: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-radio-option-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-radio-option-border-width: var(--wcs-semantic-border-width-default);\n\n    --wcs-radio-option-border-color-hover: var(--wcs-semantic-color-border-action-secondary-hover);\n    --wcs-radio-option-border-color-press: var(--wcs-semantic-color-border-action-secondary-press);\n\n    --wcs-radio-option-padding-top: var(--wcs-semantic-spacing-base);\n    --wcs-radio-option-padding-right: var(--wcs-semantic-spacing-large);\n    --wcs-radio-option-padding-bottom: var(--wcs-semantic-spacing-base);\n    --wcs-radio-option-padding-left: var(--wcs-semantic-spacing-large);\n    // endregion\n}\n\n:host([mode=radio]),\n:host([mode=horizontal]) {\n    input {\n        position: absolute;\n        opacity: 0;\n        height: 1px;\n        width: 1px;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n    }\n\n    label {\n        margin-bottom: 0;\n        color: var(--wcs-radio-text-color-default);\n        font-weight: var(--wcs-radio-text-font-weight-default) !important;\n        display: inline-block;\n\n        &:before {\n            border-radius: var(--wcs-radio-checkmark-border-radius);\n            border: var(--wcs-radio-checkmark-border-width) solid var(--wcs-radio-checkmark-border-color-default);\n            position: relative;\n            width: var(--wcs-radio-checkmark-size);\n            height: var(--wcs-radio-checkmark-size);\n            pointer-events: none;\n            content: \"\";\n            background-color: var(--wcs-radio-checkmark-background-color-default);\n        }\n    }\n\n    input:focus-visible + label {\n        transition: none;\n        @include focus-outline($outline-color: var(--wcs-radio-outline-color-focus), $border-radius: var(--wcs-radio-border-radius));\n    }\n}\n\n:host([disabled]) {\n    label {\n        color: var(--wcs-radio-text-color-disabled);\n        cursor: not-allowed;\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-disabled);\n        }\n    }\n}\n\n:host(:not([disabled])) {\n    label {\n        cursor: pointer;\n    }\n}\n\n:host([mode=radio].checked),\n:host([mode=horizontal].checked) {\n    label {\n        color: var(--wcs-radio-text-color-selected);\n        font-weight: var(--wcs-radio-text-font-weight-selected) !important;\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-selected);\n            background-color: var(--wcs-radio-checkmark-background-color-selected);\n            outline: solid var(--wcs-radio-checkmark-outline-width) var(--wcs-radio-checkmark-outline-color);\n            outline-offset: calc(-1 * var(--wcs-radio-checkmark-outline-distance-with-checkmark-circle));\n        }\n    }\n}\n\n:host([mode=radio][disabled].checked),\n:host([mode=horizontal][disabled].checked) {\n    label {\n        color: var(--wcs-radio-text-color-disabled);\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-disabled);\n            background-color: var(--wcs-radio-checkmark-background-color-selected-disabled);\n        }\n    }\n}\n\n:host([mode=radio]:hover:not([disabled])),\n:host([mode=horizontal]:hover:not([disabled])) {\n    label {\n        color: var(--wcs-radio-text-color-hover);\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-hover);\n            background-color: var(--wcs-radio-checkmark-background-color-selected-hover);\n        }\n    }\n}\n\n:host([mode=radio]:hover:not([disabled]):not(.checked)),\n:host([mode=horizontal]:hover:not([disabled]):not(.checked)) {\n    label:before {\n        background-color: var(--wcs-radio-checkmark-background-color-default);\n    }\n}\n\n:host([mode=radio]) {\n    label {\n        border: none;\n\n        &:before {\n            transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n            margin-right: var(--wcs-radio-gap);\n            display: inline-block;\n            top: 3px;\n            box-sizing: border-box;\n        }\n\n        &:empty::before {\n            margin-right: 0;\n        }\n    }\n}\n\n:host([mode=horizontal]) {\n    height: fit-content;\n\n    label {\n        &:before {\n            transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n            margin: auto auto var(--wcs-radio-gap);\n            display: block;\n        }\n\n        &:empty::before {\n            margin-bottom: 0;\n        }\n    }\n}\n\n:host([mode=option]) {\n    font-weight: var(--wcs-radio-option-text-font-weight-default) !important;\n\n    input {\n        position: absolute;\n        z-index: -1;\n        opacity: 0;\n        box-sizing: border-box;\n        padding: 0;\n    }\n\n    label {\n        padding: var(--wcs-radio-option-padding-top) var(--wcs-radio-option-padding-right) var(--wcs-radio-option-padding-bottom) var(--wcs-radio-option-padding-left);\n        margin-bottom: 0;\n        color: var(--wcs-radio-option-text-color-default);\n        white-space: nowrap;\n        border-radius: var(--wcs-radio-option-border-radius);\n        transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n        background-color: var(--wcs-radio-option-background-color-default);\n    }\n\n    input:focus-visible + label {\n        @include focus-outline($outline-color: var(--wcs-radio-outline-color-focus), $border-radius: var(--wcs-radio-border-radius), $outline-offset: 0);\n    }\n}\n\n:host([mode=option][disabled]) {\n    label {\n        color: var(--wcs-radio-option-text-color-disabled);\n        background-color: var(--wcs-radio-option-background-color-disabled);\n    }\n}\n\n:host([mode=option][disabled].checked) {\n    label {\n        color: var(--wcs-radio-option-text-color-disabled);\n        background-color: var(--wcs-radio-option-background-color-selected-disabled);\n    }\n}\n\n:host([mode=option].checked) {\n    label {\n        font-weight: var(--wcs-radio-option-text-font-weight-selected) !important;\n        color: var(--wcs-radio-option-text-color-selected-default);\n        background-color: var(--wcs-radio-option-background-color-selected-default);\n    }\n}\n\n:host([mode=option]:hover.checked:not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-selected-hover);\n        background-color: var(--wcs-radio-option-background-color-selected-hover);\n    }\n}\n\n:host([mode=option]:active.checked:not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-selected-press);\n        background-color: var(--wcs-radio-option-background-color-selected-press);\n    }\n}\n\n:host([mode=option]:hover:not(.checked):not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-hover);\n        background-color: var(--wcs-radio-option-background-color-hover);\n        outline: var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-hover);\n    }\n}\n\n:host([mode=option]:active:not(.checked):not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-press);\n        background-color: var(--wcs-radio-option-background-color-press);\n        outline: var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-press);\n\n\n\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State\n} from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst RADIO_INHERITED_ATTRS = ['title'];\n\n/**\n * The radio component should always be wrapped in a `wcs-radio-group`.\n * \n * @cssprop --wcs-radio-transition-duration - Duration of the transition\n * \n * @cssprop --wcs-radio-text-color-default - Color of the text when the radio is not selected\n * @cssprop --wcs-radio-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-text-color-selected - Color of the text when the radio is selected\n * @cssprop --wcs-radio-text-font-weight-selected - Font weight of the text when the radio is selected\n * @cssprop --wcs-radio-text-color-disabled - Color of the text when the radio is disabled\n * @cssprop --wcs-radio-text-color-hover - Color of the text when the radio is hovered\n * \n * @cssprop --wcs-radio-outline-color-focus - Color of the outline when the radio is focused\n * \n * @cssprop --wcs-radio-checkmark-size - Size of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-width - Width of the border of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-color-default - Color of the border of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-border-color-selected - Color of the border of the checkmark circle when the radio is selected\n * @cssprop --wcs-radio-checkmark-border-color-hover - Color of the border of the checkmark circle when the radio is hovered\n * @cssprop --wcs-radio-checkmark-border-color-disabled - Color of the border of the checkmark circle when the radio is disabled\n * @cssprop --wcs-radio-checkmark-background-color-default - Background color of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-background-color-selected - Background color of the checkmark circle when the radio's is selected\n * @cssprop --wcs-radio-checkmark-background-color-selected-disabled - Background color of the checkmark circle when the radio is selected and disabled\n * @cssprop --wcs-radio-checkmark-background-color-selected-hover - Background color of the checkmark circle when the radio is selected and hovered\n *\n * @cssprop --wcs-radio-checkmark-outline-distance-with-checkmark-circle - Distance between the checkmark circle and the outline (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-width - Width of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-color - Color of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-border-radius - Border radius of the checkmark circle\n * \n * @cssprop --wcs-radio-gap - Gap between the radio checkmark circle and the label\n * \n * @cssprop --wcs-radio-border-radius - Border radius of the radio (default mode)\n *\n * @cssprop --wcs-radio-option-background-color-default - Background color of the radio option when not selected\n * @cssprop --wcs-radio-option-background-color-hover - Background color of the radio option not selected when hovered\n * @cssprop --wcs-radio-option-background-color-press - Background color of the radio option when pressed\n * @cssprop --wcs-radio-option-background-color-disabled - Background color of the radio option when disabled\n * \n * @cssprop --wcs-radio-option-background-color-selected-default - Background color of the radio option when selected\n * @cssprop --wcs-radio-option-background-color-selected-hover - Background color of the radio option when selected and hovered\n * @cssprop --wcs-radio-option-background-color-selected-press - Background color of the radio option when selected and pressed\n * @cssprop --wcs-radio-option-background-color-selected-disabled - Background color of the radio option when selected and disabled\n * \n * @cssprop --wcs-radio-option-text-color-default - Color of the text when the radio option is not selected\n * @cssprop --wcs-radio-option-text-color-hover - Color of the text when the radio option not selected is hovered\n * @cssprop --wcs-radio-option-text-color-press - Color of the text when the radio option is pressed\n * \n * @cssprop --wcs-radio-option-text-color-selected-default - Color of the text when the radio option is selected\n * @cssprop --wcs-radio-option-text-color-selected-hover - Color of the text when the radio option is selected and hovered\n * @cssprop --wcs-radio-option-text-color-selected-press - Color of the text when the radio option is selected and pressed\n * @cssprop --wcs-radio-option-text-color-disabled - Color of the text when the radio option's is disabled\n * \n * @cssprop --wcs-radio-option-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-option-text-font-weight-selected - Font weight of the text when the radio option is selected\n *\n * @cssprop --wcs-radio-option-border-radius - Border radius of the radio option\n * @cssprop --wcs-radio-option-border-width - Width of the border of the radio option\n * @cssprop --wcs-radio-option-border-color-hover - Color of the border of the radio option when not selected and hovered\n * @cssprop --wcs-radio-option-border-color-press - Color of the border of the radio option when not selected and pressed\n * \n * @cssprop --wcs-radio-option-padding-top - Padding top of the radio option\n * @cssprop --wcs-radio-option-padding-right - Padding right of the radio option\n * @cssprop --wcs-radio-option-padding-bottom - Padding bottom of the radio option\n * @cssprop --wcs-radio-option-padding-left - Padding left of the radio option\n */\n@Component({\n    tag: 'wcs-radio',\n    styleUrl: 'radio.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Radio implements ComponentInterface, MutableAriaAttribute {\n    private inputId = `wcs-rb-${radioButtonIds++}`;\n    @Element() private el!: HTMLWcsRadioElement;\n    private nativeRadio!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * If `true`, the radio is selected. \n     * @private\n     */\n    @State() private checked: boolean = false;\n\n    /**\n     * The tabindex of the radio button\n     * @private\n     */\n    @State() private radioTabIndex = -1;\n\n    /**\n     * Sets a unique value for each radio, used to identify which radio button in a group is selected\n     */\n    @Prop({ mutable: true, reflect: true }) value: any | any[] | undefined | null;\n\n    /**\n     * The label text displayed for the user\n     */\n    @Prop({ mutable: true, reflect: true }) label: string;\n    \n    /**\n     * If `true`, the user cannot interact with the radio.\n     */\n    @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the radio is clicked or Space/Enter is pressed above an unchecked radio\n     */\n    @Event({ eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n\n    /**\n     * Emitted when the radio loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the radio has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * The name of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ mutable: true }) name: string;\n\n\n    /**\n     * The display mode of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n    /**\n     * @internal\n     * Checks of unchecks the radio according to it's radio-group value\n     */\n    @Method()\n    async updateState() {\n        const radioGroup = this.getClosestRadioGroup();\n        if (radioGroup) {\n            this.checked = radioGroup.name === this.name && radioGroup.value === this.value\n        }\n    }\n\n    /** @internal */\n    @Method()\n    async setTabIndex(value: number) {\n        this.radioTabIndex = value;\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeRadio, attr, value);\n    }\n\n    onFocus(ev: FocusEvent) {\n        this.wcsFocus.emit(ev);\n    }\n\n    onBlur(ev: FocusEvent) {\n        this.wcsBlur.emit(ev);\n    }\n    \n    private getClosestRadioGroup(): HTMLWcsRadioGroupElement | null {\n        return this.el.closest('wcs-radio-group');\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (this.value === undefined) {\n            // If no value was given we use the text content instead.\n            this.value = this.el.innerText || '';\n        }\n        \n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, RADIO_INHERITED_ATTRS),\n        };\n    }\n    \n    private onChange(_: Event) {\n        if (this.disabled) return;\n\n        // If the radio is unchecked, then the change represents its transition to the check state.\n        // Only emit the change event when going from unchecked to checked, like the native behavior.\n        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n        if (!this.checked) {\n            this.checked = true;\n            this.emitRadioChangeEvent();\n        }\n    }\n\n    emitRadioChangeEvent() {\n        this.wcsRadioClick.emit({\n            label: this.label,\n            source: this.el,\n            value: this.value\n        });\n    }\n\n    render() {\n        \n        return (\n            <Host slot=\"option\"\n                  tabIndex={this.disabled ? -1 : this.radioTabIndex}\n                  class={this.checked ? 'checked' : ''}>\n                <input\n                    id={this.inputId}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    checked={this.checked} // Initial checked state of native input\n                    disabled={this.disabled}\n                    onChange={this.onChange.bind(this)}\n                    onFocus={this.onFocus.bind(this)}\n                    onBlur={this.onBlur.bind(this)}\n                    aria-disabled={this.disabled ? 'true' : null}\n                    aria-checked={`${this.checked}`}\n                    ref={(el) => (this.nativeRadio = el)}\n                    {...this.inheritedAttributes}\n                />\n                <label htmlFor={`${this.inputId}`}>{this.label}</label>\n            </Host>\n        );\n    }\n}\n\nlet radioButtonIds = 0;\n"],"mappings":"wGAAA,MAAMA,EAAW,02TACjB,MAAAC,EAAeD,ECgBf,MAAME,EAAwB,CAAC,S,MA2ElBC,EAAKC,EAAA,MAAAD,UAAAE,E,mLACNC,KAAAC,QAAU,UAAUC,MAGpBF,KAAAG,oBAA4C,G,aAMhB,M,oBAMF,E,wDAe0B,M,8BA8BI,O,CAOhE,iBAAMC,GACF,MAAMC,EAAaL,KAAKM,uBACxB,GAAID,EAAY,CACZL,KAAKO,QAAUF,EAAWG,OAASR,KAAKQ,MAAQH,EAAWI,QAAUT,KAAKS,K,EAMlF,iBAAMC,CAAYD,GACdT,KAAKW,cAAgBF,C,CAIzB,sBAAMG,CAAiBC,EAAyBJ,GAC5CK,EAAqBd,KAAKe,YAAaF,EAAMJ,E,CAGjD,OAAAO,CAAQC,GACJjB,KAAKkB,SAASC,KAAKF,E,CAGvB,MAAAG,CAAOH,GACHjB,KAAKqB,QAAQF,KAAKF,E,CAGd,oBAAAX,GACJ,OAAON,KAAKsB,GAAGC,QAAQ,kB,CAG3B,iBAAAC,GACI,GAAIxB,KAAKS,QAAUgB,UAAW,CAE1BzB,KAAKS,MAAQT,KAAKsB,GAAGI,WAAa,E,CAGtC1B,KAAKG,oBAAmBwB,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsB7B,KAAKsB,KAC3BQ,EAAkB9B,KAAKsB,GAAI1B,G,CAI9B,QAAAmC,CAASC,GACb,GAAIhC,KAAKiC,SAAU,OAKnB,IAAKjC,KAAKO,QAAS,CACfP,KAAKO,QAAU,KACfP,KAAKkC,sB,EAIb,oBAAAA,GACIlC,KAAKmC,cAAchB,KAAK,CACpBiB,MAAOpC,KAAKoC,MACZC,OAAQrC,KAAKsB,GACbb,MAAOT,KAAKS,O,CAIpB,MAAA6B,GAEI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SACLC,SAAU3C,KAAKiC,UAAY,EAAIjC,KAAKW,cACpCiC,MAAO5C,KAAKO,QAAU,UAAY,IACpCgC,EAAA,QAAAZ,OAAAC,OAAA,CAAAa,IAAA,2CACII,GAAI7C,KAAKC,QACT6C,KAAK,QACLtC,KAAMR,KAAKQ,KACXC,MAAOT,KAAKS,MACZF,QAASP,KAAKO,QACd0B,SAAUjC,KAAKiC,SACfF,SAAU/B,KAAK+B,SAASgB,KAAK/C,MAC7BgB,QAAShB,KAAKgB,QAAQ+B,KAAK/C,MAC3BoB,OAAQpB,KAAKoB,OAAO2B,KAAK/C,MAAK,gBACfA,KAAKiC,SAAW,OAAS,KAAI,eAC9B,GAAGjC,KAAKO,UACtByC,IAAM1B,GAAQtB,KAAKe,YAAcO,GAC7BtB,KAAKG,sBAEboC,EAAA,SAAAE,IAAA,2CAAOQ,QAAS,GAAGjD,KAAKC,WAAYD,KAAKoC,O,yQAMzD,IAAIlC,EAAiB,E"}
+{"version":3,"names":["radioCss","WcsRadioStyle0","Radio","proxyCustomElement","H","this","handleClick","selectRadio","handleKeyDown","event","disabled","key","preventDefault","stopPropagation","updateState","radioGroup","getClosestRadioGroup","checked","name","value","setTabIndex","radioTabIndex","setAriaAttribute","attr","setOrRemoveAttribute","el","onFocus","ev","wcsFocus","emit","onBlur","wcsBlur","closest","componentWillLoad","undefined","innerText","emitRadioChangeEvent","wcsRadioClick","label","source","render","h","Host","slot","role","tabIndex","class","onClick","bind","onKeyDown"],"sources":["src/components/radio/radio.scss?tag=wcs-radio&encapsulation=shadow","src/components/radio/radio.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    width: fit-content;\n\n    --wcs-radio-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    // region mode Radio\n    --wcs-radio-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-radio-text-font-weight-default: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-radio-text-color-selected: var(--wcs-semantic-color-text-primary);\n    --wcs-radio-text-font-weight-selected: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-radio-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-radio-text-color-hover: var(--wcs-semantic-color-text-primary);\n\n    --wcs-radio-checkmark-size: 1rem; // for now, we let raw value to let adjust the size based on base font size\n\n    --wcs-radio-gap: var(--wcs-semantic-spacing-base);\n\n    --wcs-radio-outline-color-focus: var(--wcs-semantic-color-border-focus-base); // outline color for focus ring\n\n    --wcs-radio-checkmark-border-width: var(--wcs-semantic-border-width-large);\n    --wcs-radio-checkmark-border-color-default: var(--wcs-semantic-color-border-control-indicator-default);\n    --wcs-radio-checkmark-border-color-selected: var(--wcs-semantic-color-border-control-indicator-selected);\n    --wcs-radio-checkmark-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-radio-checkmark-border-color-disabled: var(--wcs-semantic-color-border-control-indicator-disabled);\n\n    --wcs-radio-checkmark-background-color-default: transparent;\n    --wcs-radio-checkmark-background-color-selected: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-radio-checkmark-background-color-selected-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-radio-checkmark-background-color-selected-hover: var(--wcs-semantic-color-background-control-indicator-hover);\n\n    --wcs-radio-checkmark-outline-distance-with-checkmark-circle: var(--wcs-semantic-spacing-small);\n    --wcs-radio-checkmark-outline-width: var(--wcs-semantic-border-width-large);\n    --wcs-radio-checkmark-outline-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n    --wcs-radio-checkmark-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-radio-border-radius: var(--wcs-semantic-border-radius-base);\n    // endregion\n\n    // region mode Option\n    --wcs-radio-option-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-hover: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-press: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-disabled: var(--wcs-semantic-color-background-action-secondary-default);\n\n    --wcs-radio-option-background-color-selected-default: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-radio-option-background-color-selected-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-radio-option-background-color-selected-press: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-radio-option-background-color-selected-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-radio-option-text-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-radio-option-text-color-hover: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-radio-option-text-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n\n    --wcs-radio-option-text-color-selected-default: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-radio-option-text-color-selected-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-radio-option-text-color-selected-press: var(--wcs-semantic-color-foreground-action-primary-press);\n    --wcs-radio-option-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-radio-option-text-font-weight-default: var(--wcs-semantic-font-weight-roman);\n    --wcs-radio-option-text-font-weight-selected: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-radio-option-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-radio-option-border-width: var(--wcs-semantic-border-width-default);\n\n    --wcs-radio-option-border-color-hover: var(--wcs-semantic-color-border-action-secondary-hover);\n    --wcs-radio-option-border-color-press: var(--wcs-semantic-color-border-action-secondary-press);\n\n    --wcs-radio-option-padding-top: var(--wcs-semantic-spacing-base);\n    --wcs-radio-option-padding-right: var(--wcs-semantic-spacing-large);\n    --wcs-radio-option-padding-bottom: var(--wcs-semantic-spacing-base);\n    --wcs-radio-option-padding-left: var(--wcs-semantic-spacing-large);\n    // endregion\n\n    /*\n    * DO NOT REMOVE:\n    * The native input is absolutely positioned.\n    * This `position: relative` makes `wcs-radio` its containing block.\n    * Without it, the input can be laid out relative to another ancestor higher in the DOM,\n    * so when the browser focuses the native control it may scroll the window unexpectedly.\n    */\n    position: relative;\n}\n\n:host([mode=radio]),\n:host([mode=horizontal]) {\n    input {\n        position: absolute;\n        opacity: 0;\n        height: 1px;\n        width: 1px;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n    }\n\n    .label {\n        margin-bottom: 0;\n        color: var(--wcs-radio-text-color-default);\n        font-weight: var(--wcs-radio-text-font-weight-default) !important;\n        display: inline-block;\n\n        &:before {\n            border-radius: var(--wcs-radio-checkmark-border-radius);\n            border: var(--wcs-radio-checkmark-border-width) solid var(--wcs-radio-checkmark-border-color-default);\n            position: relative;\n            width: var(--wcs-radio-checkmark-size);\n            height: var(--wcs-radio-checkmark-size);\n            pointer-events: none;\n            content: \"\";\n            background-color: var(--wcs-radio-checkmark-background-color-default);\n        }\n    }\n}\n\n:host(:focus-visible) {\n    outline: none;\n\n    .label {\n        transition: none;\n        @include focus-outline($outline-color: var(--wcs-radio-outline-color-focus), $border-radius: var(--wcs-radio-border-radius));\n    }\n}\n\n:host([disabled]) {\n    .label {\n        color: var(--wcs-radio-text-color-disabled);\n        cursor: not-allowed;\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-disabled);\n        }\n    }\n}\n\n:host(:not([disabled])) {\n    .label {\n        cursor: pointer;\n    }\n}\n\n:host([mode=radio].checked),\n:host([mode=horizontal].checked) {\n    .label {\n        color: var(--wcs-radio-text-color-selected);\n        font-weight: var(--wcs-radio-text-font-weight-selected) !important;\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-selected);\n            background-color: var(--wcs-radio-checkmark-background-color-selected);\n            outline: solid var(--wcs-radio-checkmark-outline-width) var(--wcs-radio-checkmark-outline-color);\n            outline-offset: calc(-1 * var(--wcs-radio-checkmark-outline-distance-with-checkmark-circle));\n        }\n    }\n}\n\n:host([mode=radio][disabled].checked),\n:host([mode=horizontal][disabled].checked) {\n    .label {\n        color: var(--wcs-radio-text-color-disabled);\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-disabled);\n            background-color: var(--wcs-radio-checkmark-background-color-selected-disabled);\n        }\n    }\n}\n\n:host([mode=radio]:hover:not([disabled])),\n:host([mode=horizontal]:hover:not([disabled])) {\n    .label {\n        color: var(--wcs-radio-text-color-hover);\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-hover);\n            background-color: var(--wcs-radio-checkmark-background-color-selected-hover);\n        }\n    }\n}\n\n:host([mode=radio]:hover:not([disabled]):not(.checked)),\n:host([mode=horizontal]:hover:not([disabled]):not(.checked)) {\n    .label:before {\n        background-color: var(--wcs-radio-checkmark-background-color-default);\n    }\n}\n\n:host([mode=radio]) {\n    .label {\n        border: none;\n\n        &:before {\n            transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n            margin-right: var(--wcs-radio-gap);\n            display: inline-block;\n            top: 3px;\n            box-sizing: border-box;\n        }\n\n        &:empty::before {\n            margin-right: 0;\n        }\n    }\n}\n\n:host([mode=horizontal]) {\n    height: fit-content;\n\n    .label {\n        &:before {\n            transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n            margin: auto auto var(--wcs-radio-gap);\n            display: block;\n        }\n\n        &:empty::before {\n            margin-bottom: 0;\n        }\n    }\n}\n\n:host([mode=option]) {\n    font-weight: var(--wcs-radio-option-text-font-weight-default) !important;\n\n    input {\n        position: absolute;\n        z-index: -1;\n        opacity: 0;\n        box-sizing: border-box;\n        padding: 0;\n    }\n\n    .label {\n        padding: var(--wcs-radio-option-padding-top) var(--wcs-radio-option-padding-right) var(--wcs-radio-option-padding-bottom) var(--wcs-radio-option-padding-left);\n        margin-bottom: 0;\n        color: var(--wcs-radio-option-text-color-default);\n        white-space: nowrap;\n        border-radius: var(--wcs-radio-option-border-radius);\n        transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n        background-color: var(--wcs-radio-option-background-color-default);\n    }\n\n    input:focus-visible + .label {\n        @include focus-outline($outline-color: var(--wcs-radio-outline-color-focus), $border-radius: var(--wcs-radio-border-radius), $outline-offset: 0);\n    }\n}\n\n:host([mode=option][disabled]) {\n    .label {\n        color: var(--wcs-radio-option-text-color-disabled);\n        background-color: var(--wcs-radio-option-background-color-disabled);\n    }\n}\n\n:host([mode=option][disabled].checked) {\n    .label {\n        color: var(--wcs-radio-option-text-color-disabled);\n        background-color: var(--wcs-radio-option-background-color-selected-disabled);\n    }\n}\n\n:host([mode=option].checked) {\n    .label {\n        font-weight: var(--wcs-radio-option-text-font-weight-selected) !important;\n        color: var(--wcs-radio-option-text-color-selected-default);\n        background-color: var(--wcs-radio-option-background-color-selected-default);\n    }\n}\n\n:host([mode=option]:hover.checked:not([disabled])) {\n    .label {\n        color: var(--wcs-radio-option-text-color-selected-hover);\n        background-color: var(--wcs-radio-option-background-color-selected-hover);\n    }\n}\n\n:host([mode=option]:active.checked:not([disabled])) {\n    .label {\n        color: var(--wcs-radio-option-text-color-selected-press);\n        background-color: var(--wcs-radio-option-background-color-selected-press);\n    }\n}\n\n:host([mode=option]:hover:not(.checked):not([disabled])) {\n    .label {\n        color: var(--wcs-radio-option-text-color-hover);\n        background-color: var(--wcs-radio-option-background-color-hover);\n        outline: var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-hover);\n    }\n}\n\n:host([mode=option]:active:not(.checked):not([disabled])) {\n    .label {\n        color: var(--wcs-radio-option-text-color-press);\n        background-color: var(--wcs-radio-option-background-color-press);\n        outline: var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-press);\n\n\n\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State\n} from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n/**\n * The radio component should always be wrapped in a `wcs-radio-group`.\n * \n * @cssprop --wcs-radio-transition-duration - Duration of the transition\n * \n * @cssprop --wcs-radio-text-color-default - Color of the text when the radio is not selected\n * @cssprop --wcs-radio-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-text-color-selected - Color of the text when the radio is selected\n * @cssprop --wcs-radio-text-font-weight-selected - Font weight of the text when the radio is selected\n * @cssprop --wcs-radio-text-color-disabled - Color of the text when the radio is disabled\n * @cssprop --wcs-radio-text-color-hover - Color of the text when the radio is hovered\n * \n * @cssprop --wcs-radio-outline-color-focus - Color of the outline when the radio is focused\n * \n * @cssprop --wcs-radio-checkmark-size - Size of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-width - Width of the border of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-color-default - Color of the border of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-border-color-selected - Color of the border of the checkmark circle when the radio is selected\n * @cssprop --wcs-radio-checkmark-border-color-hover - Color of the border of the checkmark circle when the radio is hovered\n * @cssprop --wcs-radio-checkmark-border-color-disabled - Color of the border of the checkmark circle when the radio is disabled\n * @cssprop --wcs-radio-checkmark-background-color-default - Background color of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-background-color-selected - Background color of the checkmark circle when the radio's is selected\n * @cssprop --wcs-radio-checkmark-background-color-selected-disabled - Background color of the checkmark circle when the radio is selected and disabled\n * @cssprop --wcs-radio-checkmark-background-color-selected-hover - Background color of the checkmark circle when the radio is selected and hovered\n *\n * @cssprop --wcs-radio-checkmark-outline-distance-with-checkmark-circle - Distance between the checkmark circle and the outline (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-width - Width of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-color - Color of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-border-radius - Border radius of the checkmark circle\n * \n * @cssprop --wcs-radio-gap - Gap between the radio checkmark circle and the label\n * \n * @cssprop --wcs-radio-border-radius - Border radius of the radio (default mode)\n *\n * @cssprop --wcs-radio-option-background-color-default - Background color of the radio option when not selected\n * @cssprop --wcs-radio-option-background-color-hover - Background color of the radio option not selected when hovered\n * @cssprop --wcs-radio-option-background-color-press - Background color of the radio option when pressed\n * @cssprop --wcs-radio-option-background-color-disabled - Background color of the radio option when disabled\n * \n * @cssprop --wcs-radio-option-background-color-selected-default - Background color of the radio option when selected\n * @cssprop --wcs-radio-option-background-color-selected-hover - Background color of the radio option when selected and hovered\n * @cssprop --wcs-radio-option-background-color-selected-press - Background color of the radio option when selected and pressed\n * @cssprop --wcs-radio-option-background-color-selected-disabled - Background color of the radio option when selected and disabled\n * \n * @cssprop --wcs-radio-option-text-color-default - Color of the text when the radio option is not selected\n * @cssprop --wcs-radio-option-text-color-hover - Color of the text when the radio option not selected is hovered\n * @cssprop --wcs-radio-option-text-color-press - Color of the text when the radio option is pressed\n * \n * @cssprop --wcs-radio-option-text-color-selected-default - Color of the text when the radio option is selected\n * @cssprop --wcs-radio-option-text-color-selected-hover - Color of the text when the radio option is selected and hovered\n * @cssprop --wcs-radio-option-text-color-selected-press - Color of the text when the radio option is selected and pressed\n * @cssprop --wcs-radio-option-text-color-disabled - Color of the text when the radio option's is disabled\n * \n * @cssprop --wcs-radio-option-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-option-text-font-weight-selected - Font weight of the text when the radio option is selected\n *\n * @cssprop --wcs-radio-option-border-radius - Border radius of the radio option\n * @cssprop --wcs-radio-option-border-width - Width of the border of the radio option\n * @cssprop --wcs-radio-option-border-color-hover - Color of the border of the radio option when not selected and hovered\n * @cssprop --wcs-radio-option-border-color-press - Color of the border of the radio option when not selected and pressed\n * \n * @cssprop --wcs-radio-option-padding-top - Padding top of the radio option\n * @cssprop --wcs-radio-option-padding-right - Padding right of the radio option\n * @cssprop --wcs-radio-option-padding-bottom - Padding bottom of the radio option\n * @cssprop --wcs-radio-option-padding-left - Padding left of the radio option\n */\n@Component({\n    tag: 'wcs-radio',\n    styleUrl: 'radio.scss',\n    shadow: true\n})\nexport class Radio implements ComponentInterface, MutableAriaAttribute {\n    @Element() private readonly el!: HTMLWcsRadioElement;\n    \n    /**\n     * If `true`, the radio is selected. \n     * @private\n     */\n    @State() private checked: boolean = false;\n\n    /**\n     * The tabindex of the radio button\n     * @private\n     */\n    @State() private radioTabIndex = -1;\n\n    /**\n     * Sets a unique value for each radio, used to identify which radio button in a group is selected\n     */\n    @Prop({ mutable: true, reflect: true }) value: any | any[] | undefined | null;\n\n    /**\n     * The label text displayed for the user\n     */\n    @Prop({ mutable: true, reflect: true }) label: string;\n    \n    /**\n     * If `true`, the user cannot interact with the radio.\n     */\n    @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the radio is clicked or Space/Enter is pressed above an unchecked radio\n     */\n    @Event({ eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n\n    /**\n     * Emitted when the radio loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the radio has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * The name of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ mutable: true }) name: string;\n\n\n    /**\n     * The display mode of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n    /**\n     * @internal\n     * Checks of unchecks the radio according to it's radio-group value\n     */\n    @Method()\n    async updateState() {\n        const radioGroup = this.getClosestRadioGroup();\n        if (radioGroup) {\n            this.checked = radioGroup.name === this.name && radioGroup.value === this.value\n        }\n    }\n\n    /** @internal */\n    @Method()\n    async setTabIndex(value: number) {\n        this.radioTabIndex = value;\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.el, attr, value);\n    }\n\n    onFocus(ev: FocusEvent) {\n        this.wcsFocus.emit(ev);\n    }\n\n    onBlur(ev: FocusEvent) {\n        this.wcsBlur.emit(ev);\n    }\n    \n    private getClosestRadioGroup(): HTMLWcsRadioGroupElement | null {\n        return this.el.closest('wcs-radio-group');\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (this.value === undefined) {\n            // If no value was given we use the text content instead.\n            this.value = this.el.innerText || '';\n        }\n    }\n\n    emitRadioChangeEvent() {\n        this.wcsRadioClick.emit({\n            label: this.label,\n            source: this.el,\n            value: this.value\n        });\n    }\n\n    private selectRadio() {\n        if (this.disabled || this.checked) {\n            return;\n        }\n\n        this.checked = true;\n        // Only emit the change event when going from unchecked to checked, like the native behavior.\n        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n        this.emitRadioChangeEvent();\n    }\n\n    private readonly handleClick = () => {\n        this.selectRadio();\n    };\n\n    private readonly handleKeyDown = (event: KeyboardEvent) => {\n        if (this.disabled) return;\n\n        if (event.key === ' ' || event.key === 'Enter') {\n            event.preventDefault();\n            event.stopPropagation();\n            this.selectRadio();\n        }\n    };\n\n    render() {\n        \n        return (\n            <Host slot=\"option\"\n                  role=\"radio\"\n                  aria-checked={this.checked ? 'true' : 'false'}\n                  aria-disabled={this.disabled ? 'true' : 'false'}\n                  tabIndex={this.disabled ? -1 : this.radioTabIndex}\n                  class={this.checked ? 'checked' : ''}\n                  onClick={this.handleClick.bind(this)}\n                  onFocus={this.onFocus.bind(this)}\n                  onBlur={this.onBlur.bind(this)}\n                  onKeyDown={this.handleKeyDown.bind(this)}>\n                <span class=\"label\">{this.label}</span>\n            </Host>\n        );\n    }\n}\n"],"mappings":"+FAAA,MAAMA,EAAW,83TACjB,MAAAC,EAAeD,E,MCuFFE,EAAKC,EAAA,MAAAD,UAAAE,E,mLAyHGC,KAAAC,YAAc,KAC3BD,KAAKE,aAAa,EAGLF,KAAAG,cAAiBC,IAC9B,GAAIJ,KAAKK,SAAU,OAEnB,GAAID,EAAME,MAAQ,KAAOF,EAAME,MAAQ,QAAS,CAC5CF,EAAMG,iBACNH,EAAMI,kBACNR,KAAKE,a,gBA5HuB,M,oBAMF,E,wDAe0B,M,8BA8BI,O,CAOhE,iBAAMO,GACF,MAAMC,EAAaV,KAAKW,uBACxB,GAAID,EAAY,CACZV,KAAKY,QAAUF,EAAWG,OAASb,KAAKa,MAAQH,EAAWI,QAAUd,KAAKc,K,EAMlF,iBAAMC,CAAYD,GACdd,KAAKgB,cAAgBF,C,CAIzB,sBAAMG,CAAiBC,EAAyBJ,GAC5CK,EAAqBnB,KAAKoB,GAAIF,EAAMJ,E,CAGxC,OAAAO,CAAQC,GACJtB,KAAKuB,SAASC,KAAKF,E,CAGvB,MAAAG,CAAOH,GACHtB,KAAK0B,QAAQF,KAAKF,E,CAGd,oBAAAX,GACJ,OAAOX,KAAKoB,GAAGO,QAAQ,kB,CAG3B,iBAAAC,GACI,GAAI5B,KAAKc,QAAUe,UAAW,CAE1B7B,KAAKc,MAAQd,KAAKoB,GAAGU,WAAa,E,EAI1C,oBAAAC,GACI/B,KAAKgC,cAAcR,KAAK,CACpBS,MAAOjC,KAAKiC,MACZC,OAAQlC,KAAKoB,GACbN,MAAOd,KAAKc,O,CAIZ,WAAAZ,GACJ,GAAIF,KAAKK,UAAYL,KAAKY,QAAS,CAC/B,M,CAGJZ,KAAKY,QAAU,KAGfZ,KAAK+B,sB,CAiBT,MAAAI,GAEI,OACIC,EAACC,EAAI,CAAA/B,IAAA,2CAACgC,KAAK,SACLC,KAAK,QAAO,eACEvC,KAAKY,QAAU,OAAS,QAAO,gBAC9BZ,KAAKK,SAAW,OAAS,QACxCmC,SAAUxC,KAAKK,UAAY,EAAIL,KAAKgB,cACpCyB,MAAOzC,KAAKY,QAAU,UAAY,GAClC8B,QAAS1C,KAAKC,YAAY0C,KAAK3C,MAC/BqB,QAASrB,KAAKqB,QAAQsB,KAAK3C,MAC3ByB,OAAQzB,KAAKyB,OAAOkB,KAAK3C,MACzB4C,UAAW5C,KAAKG,cAAcwC,KAAK3C,OACrCoC,EAAA,QAAA9B,IAAA,2CAAMmC,MAAM,SAASzC,KAAKiC,O"}

package/composite-elements/wcs-select-option.js

@@ -1,2 +1,2 @@
-import{S as o,d as s}from"./p-b92e818b.js";const t=o;const p=s;export{t as WcsSelectOption,p as defineCustomElement};
+import{S as o,d as s}from"./p-a70a3379.js";const a=o;const t=s;export{a as WcsSelectOption,t as defineCustomElement};
 //# sourceMappingURL=wcs-select-option.js.map

package/composite-elements/wcs-select.js

@@ -1,2 +1,2 @@
-import{y as o,x as s}from"./p-af24fb0d.js";const t=o;const a=s;export{t as WcsSelect,a as defineCustomElement};
+import{y as o,x as s}from"./p-00dd13c3.js";const t=o;const c=s;export{t as WcsSelect,c as defineCustomElement};
 //# sourceMappingURL=wcs-select.js.map

package/composite-elements/wcs-skeleton-circle.js

@@ -1,2 +1,2 @@
-import{p as e,H as t,h as s,c as i}from"./p-2bef72c7.js";const n=":host{--wcs-skeleton-width:100%;--wcs-skeleton-height:100%;--wcs-skeleton-min-height:1rem;--wcs-skeleton-background-color:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);--wcs-skeleton-animation-duration:var(--wcs-semantic-motion-duration-animation-base);display:block;position:relative;overflow:hidden}:host span{display:flex;flex:1 1 auto;height:var(--wcs-skeleton-height);width:var(--wcs-skeleton-width);min-height:var(--wcs-skeleton-min-height);background:var(--wcs-skeleton-background-color);background-size:400% 100%}:host([animation=glide]) span{animation:glide var(--wcs-skeleton-animation-duration) ease-in-out infinite}:host([animation=pulse]){animation:pulse var(--wcs-skeleton-animation-duration) ease-in-out infinite}@keyframes glide{from{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}:host{--wcs-skeleton-circle-border-radius:var(--wcs-semantic-border-radius-full);aspect-ratio:1/1;border-radius:var(--wcs-skeleton-circle-border-radius)}";const o=n;const a=e(class e extends t{constructor(){super();this.__registerHost();this.__attachShadow();this.animation="glide";this.radius=50}render(){return s(i,{key:"0d5704fdc6c41256665994d2a2d63c525e14ee6c",style:{width:`${this.radius}px`,height:`${this.radius}px`}},s("span",{key:"e2712e309be66af8be9fd3aee2b34ee20b67a980","aria-hidden":"true"}))}static get style(){return o}},[1,"wcs-skeleton-circle",{animation:[513],radius:[514]}]);function r(){if(typeof customElements==="undefined"){return}const e=["wcs-skeleton-circle"];e.forEach((e=>{switch(e){case"wcs-skeleton-circle":if(!customElements.get(e)){customElements.define(e,a)}break}}))}r();const c=a;const l=r;export{c as WcsSkeletonCircle,l as defineCustomElement};
+import{p as e,H as t,h as s,c as i}from"./p-2bef72c7.js";const n=":host{--wcs-skeleton-width:100%;--wcs-skeleton-height:100%;--wcs-skeleton-min-height:1rem;--wcs-skeleton-background-color:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);--wcs-skeleton-animation-duration:var(--wcs-semantic-motion-duration-animation-base);display:block;position:relative;overflow:hidden}:host span{display:flex;flex:1 1 auto;height:var(--wcs-skeleton-height);width:var(--wcs-skeleton-width);min-height:var(--wcs-skeleton-min-height);background:var(--wcs-skeleton-background-color);background-size:400% 100%}:host([animation=glide]) span{animation:glide var(--wcs-skeleton-animation-duration) ease-in-out infinite}:host([animation=pulse]){animation:pulse var(--wcs-skeleton-animation-duration) ease-in-out infinite}@keyframes glide{from{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}:host{--wcs-skeleton-circle-border-radius:var(--wcs-semantic-border-radius-full);aspect-ratio:1/1;border-radius:var(--wcs-skeleton-circle-border-radius)}";const o=n;const a=e(class e extends t{constructor(){super();this.__registerHost();this.__attachShadow();this.animation="glide";this.radius=50}render(){return s(i,{key:"377f60acab21afe24878db2236e58eeea21dddda",style:{width:`${this.radius}px`,height:`${this.radius}px`}},s("span",{key:"78417601b7e6cda0dcc6d785618618e28cffbddc","aria-hidden":"true"}))}static get style(){return o}},[1,"wcs-skeleton-circle",{animation:[513],radius:[514]}]);function r(){if(typeof customElements==="undefined"){return}const e=["wcs-skeleton-circle"];e.forEach((e=>{switch(e){case"wcs-skeleton-circle":if(!customElements.get(e)){customElements.define(e,a)}break}}))}r();const c=a;const d=r;export{c as WcsSkeletonCircle,d as defineCustomElement};
 //# sourceMappingURL=wcs-skeleton-circle.js.map

package/composite-elements/wcs-skeleton-rectangle.js

@@ -1,2 +1,2 @@
-import{p as e,H as t,h as s,c as n}from"./p-2bef72c7.js";const i=":host{--wcs-skeleton-width:100%;--wcs-skeleton-height:100%;--wcs-skeleton-min-height:1rem;--wcs-skeleton-background-color:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);--wcs-skeleton-animation-duration:var(--wcs-semantic-motion-duration-animation-base);display:block;position:relative;overflow:hidden}:host span{display:flex;flex:1 1 auto;height:var(--wcs-skeleton-height);width:var(--wcs-skeleton-width);min-height:var(--wcs-skeleton-min-height);background:var(--wcs-skeleton-background-color);background-size:400% 100%}:host([animation=glide]) span{animation:glide var(--wcs-skeleton-animation-duration) ease-in-out infinite}:host([animation=pulse]){animation:pulse var(--wcs-skeleton-animation-duration) ease-in-out infinite}@keyframes glide{from{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}:host{--wcs-skeleton-border-radius:0rem}:host span{border-radius:var(--wcs-skeleton-border-radius)}:host([rounded]){--wcs-skeleton-border-radius:var(--wcs-semantic-border-radius-base)}";const o=i;const a=e(class e extends t{constructor(){super();this.__registerHost();this.__attachShadow();this.animation="glide";this.rounded=false;this.height="auto";this.width="auto"}render(){return s(n,{key:"edf5aa2fa711b6e27d066dab259559154af9b08e",style:{height:this.height,width:this.width}},s("span",{key:"f139ef33c3d2a10aede15bbd540f10758cc1ce16","aria-hidden":"true"}))}static get style(){return o}},[1,"wcs-skeleton-rectangle",{animation:[513],rounded:[516],height:[513],width:[513]}]);function r(){if(typeof customElements==="undefined"){return}const e=["wcs-skeleton-rectangle"];e.forEach((e=>{switch(e){case"wcs-skeleton-rectangle":if(!customElements.get(e)){customElements.define(e,a)}break}}))}r();const c=a;const d=r;export{c as WcsSkeletonRectangle,d as defineCustomElement};
+import{p as e,H as t,h as s,c as n}from"./p-2bef72c7.js";const i=":host{--wcs-skeleton-width:100%;--wcs-skeleton-height:100%;--wcs-skeleton-min-height:1rem;--wcs-skeleton-background-color:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);--wcs-skeleton-animation-duration:var(--wcs-semantic-motion-duration-animation-base);display:block;position:relative;overflow:hidden}:host span{display:flex;flex:1 1 auto;height:var(--wcs-skeleton-height);width:var(--wcs-skeleton-width);min-height:var(--wcs-skeleton-min-height);background:var(--wcs-skeleton-background-color);background-size:400% 100%}:host([animation=glide]) span{animation:glide var(--wcs-skeleton-animation-duration) ease-in-out infinite}:host([animation=pulse]){animation:pulse var(--wcs-skeleton-animation-duration) ease-in-out infinite}@keyframes glide{from{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}:host{--wcs-skeleton-border-radius:0rem}:host span{border-radius:var(--wcs-skeleton-border-radius)}:host([rounded]){--wcs-skeleton-border-radius:var(--wcs-semantic-border-radius-base)}";const o=i;const a=e(class e extends t{constructor(){super();this.__registerHost();this.__attachShadow();this.animation="glide";this.rounded=false;this.height="auto";this.width="auto"}render(){return s(n,{key:"67da0cd70d8cff6fa889ec4a337ab51a70c2da55",style:{height:this.height,width:this.width}},s("span",{key:"b6b8a8cbc2bbf5387d3a5c66d8e5c6deba7dbe5a","aria-hidden":"true"}))}static get style(){return o}},[1,"wcs-skeleton-rectangle",{animation:[513],rounded:[516],height:[513],width:[513]}]);function r(){if(typeof customElements==="undefined"){return}const e=["wcs-skeleton-rectangle"];e.forEach((e=>{switch(e){case"wcs-skeleton-rectangle":if(!customElements.get(e)){customElements.define(e,a)}break}}))}r();const c=a;const d=r;export{c as WcsSkeletonRectangle,d as defineCustomElement};
 //# sourceMappingURL=wcs-skeleton-rectangle.js.map

package/composite-elements/wcs-skeleton-text.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,h as s}from"./p-2bef72c7.js";const i=":host{--wcs-skeleton-width:100%;--wcs-skeleton-height:100%;--wcs-skeleton-min-height:1rem;--wcs-skeleton-background-color:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);--wcs-skeleton-animation-duration:var(--wcs-semantic-motion-duration-animation-base);display:block;position:relative;overflow:hidden}:host span{display:flex;flex:1 1 auto;height:var(--wcs-skeleton-height);width:var(--wcs-skeleton-width);min-height:var(--wcs-skeleton-min-height);background:var(--wcs-skeleton-background-color);background-size:400% 100%}:host([animation=glide]) span{animation:glide var(--wcs-skeleton-animation-duration) ease-in-out infinite}:host([animation=pulse]){animation:pulse var(--wcs-skeleton-animation-duration) ease-in-out infinite}@keyframes glide{from{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}:host{--wcs-skeleton-text-height:var(--wcs-semantic-font-size-base);--wcs-skeleton-text-height-h1:var(--wcs-semantic-font-size-heading-1);--wcs-skeleton-text-height-h2:var(--wcs-semantic-font-size-heading-2);--wcs-skeleton-text-height-h3:var(--wcs-semantic-font-size-heading-3);--wcs-skeleton-text-height-body:var(--wcs-semantic-font-size-body-3);--wcs-skeleton-text-height-caption:var(--wcs-semantic-font-size-caption-1)}:host([height=h1]){height:var(--wcs-skeleton-text-height-h1)}:host([height=h2]){height:var(--wcs-skeleton-text-height-h2)}:host([height=h3]){height:var(--wcs-skeleton-text-height-h3)}:host([height=body]){height:var(--wcs-skeleton-text-height-body)}:host([height=caption]){height:var(--wcs-skeleton-text-height-caption)}";const n=i;const o=t(class t extends e{constructor(){super();this.__registerHost();this.__attachShadow();this.animation="glide";this.height="body"}render(){return s("span",{key:"ba89cefda296d6c9fec4c035756a12deddfc35e3","aria-hidden":"true"})}static get style(){return n}},[1,"wcs-skeleton-text",{animation:[513],height:[1]}]);function a(){if(typeof customElements==="undefined"){return}const t=["wcs-skeleton-text"];t.forEach((t=>{switch(t){case"wcs-skeleton-text":if(!customElements.get(t)){customElements.define(t,o)}break}}))}a();const h=o;const c=a;export{h as WcsSkeletonText,c as defineCustomElement};
+import{p as t,H as e,h as s}from"./p-2bef72c7.js";const i=":host{--wcs-skeleton-width:100%;--wcs-skeleton-height:100%;--wcs-skeleton-min-height:1rem;--wcs-skeleton-background-color:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);--wcs-skeleton-animation-duration:var(--wcs-semantic-motion-duration-animation-base);display:block;position:relative;overflow:hidden}:host span{display:flex;flex:1 1 auto;height:var(--wcs-skeleton-height);width:var(--wcs-skeleton-width);min-height:var(--wcs-skeleton-min-height);background:var(--wcs-skeleton-background-color);background-size:400% 100%}:host([animation=glide]) span{animation:glide var(--wcs-skeleton-animation-duration) ease-in-out infinite}:host([animation=pulse]){animation:pulse var(--wcs-skeleton-animation-duration) ease-in-out infinite}@keyframes glide{from{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}:host{--wcs-skeleton-text-height:var(--wcs-semantic-font-size-base);--wcs-skeleton-text-height-h1:var(--wcs-semantic-font-size-heading-1);--wcs-skeleton-text-height-h2:var(--wcs-semantic-font-size-heading-2);--wcs-skeleton-text-height-h3:var(--wcs-semantic-font-size-heading-3);--wcs-skeleton-text-height-body:var(--wcs-semantic-font-size-body-3);--wcs-skeleton-text-height-caption:var(--wcs-semantic-font-size-caption-1)}:host([height=h1]){height:var(--wcs-skeleton-text-height-h1)}:host([height=h2]){height:var(--wcs-skeleton-text-height-h2)}:host([height=h3]){height:var(--wcs-skeleton-text-height-h3)}:host([height=body]){height:var(--wcs-skeleton-text-height-body)}:host([height=caption]){height:var(--wcs-skeleton-text-height-caption)}";const n=i;const o=t(class t extends e{constructor(){super();this.__registerHost();this.__attachShadow();this.animation="glide";this.height="body"}render(){return s("span",{key:"513909d5e86ad9972317ac980b0cdd56e337505e","aria-hidden":"true"})}static get style(){return n}},[1,"wcs-skeleton-text",{animation:[513],height:[1]}]);function a(){if(typeof customElements==="undefined"){return}const t=["wcs-skeleton-text"];t.forEach((t=>{switch(t){case"wcs-skeleton-text":if(!customElements.get(t)){customElements.define(t,o)}break}}))}a();const h=o;const c=a;export{h as WcsSkeletonText,c as defineCustomElement};
 //# sourceMappingURL=wcs-skeleton-text.js.map

package/composite-elements/wcs-spinner.js

@@ -1,2 +1,2 @@
-import{S as o,d as s}from"./p-04663560.js";const t=o;const p=s;export{t as WcsSpinner,p as defineCustomElement};
+import{S as o,d as s}from"./p-e4e3ed2c.js";const e=o;const t=s;export{e as WcsSpinner,t as defineCustomElement};
 //# sourceMappingURL=wcs-spinner.js.map

package/composite-elements/wcs-switch.js

@@ -1,2 +1,2 @@
-import{p as c,H as t,d as s,h as e,c as i}from"./p-2bef72c7.js";import{i as o,a,s as r}from"./p-e803bb26.js";import{g as n}from"./p-a7468a3a.js";const d=':host{--wcs-switch-background-color-initial:var(--wcs-semantic-color-background-control-indicator-default);--wcs-switch-background-color-final:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-switch-background-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-switch-background-color-disabled-selected:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-switch-background-color-hover-selected:var(--wcs-semantic-color-background-control-indicator-hover);--wcs-switch-padding-horizontal:var(--wcs-semantic-spacing-small);--wcs-switch-padding-vertical:calc((var(--wcs-switch-height) - var(--wcs-switch-dot-size)) / 2);--wcs-switch-dot-color-default:var(--wcs-semantic-color-foreground-brand);--wcs-switch-dot-color-selected:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-switch-dot-color-disabled:var(--wcs-semantic-color-foreground-control-indicator-disabled);--wcs-switch-text-color-default:var(--wcs-semantic-color-text-secondary);--wcs-switch-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-switch-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-switch-text-font-weight-default:var(--wcs-semantic-font-weight-medium);--wcs-switch-text-font-weight-selected:var(--wcs-semantic-font-weight-medium);--wcs-switch-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-switch-dot-translate-x:calc(var(--wcs-switch-width) - var(--wcs-switch-dot-size) - (2 * var(--wcs-switch-padding-horizontal)));--wcs-switch-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-switch-dot-size:0.875rem;--wcs-switch-height:var(--wcs-semantic-size-xs);--wcs-switch-width:var(--wcs-semantic-size-l);--wcs-switch-border-radius:var(--wcs-semantic-border-radius-full);--wcs-switch-gap:var(--wcs-semantic-spacing-base);display:inline-flex}:host([disabled]) .text{color:var(--wcs-switch-text-color-disabled)}:host([disabled]) .wcs-container{cursor:not-allowed}.wcs-container{position:relative;display:flex;user-select:none;margin-bottom:0;gap:var(--wcs-switch-gap)}.wcs-container:has(input:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-switch-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-switch-border-radius)}@supports not selector(.wcs-container:has(input:focus-visible)){.wcs-container:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-switch-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-switch-border-radius)}}:host([label-alignment=top]) .wcs-container{align-items:start}:host([label-alignment=center]) .wcs-container{align-items:center}:host([label-alignment=bottom]) .wcs-container{align-items:flex-end}.wcs-container input{position:absolute;opacity:0;height:0;width:0}.text{color:var(--wcs-switch-text-color-default);font-weight:var(--wcs-switch-text-font-weight-default);line-height:1.375}.wcs-container:not([aria-disabled]) input:checked~.text{font-weight:var(--wcs-switch-text-font-weight-selected);color:var(--wcs-switch-text-color-selected)}.wcs-checkmark::before{position:absolute;transition:all var(--wcs-switch-transition-duration) ease-out}.wcs-checkmark::before{bottom:var(--wcs-switch-padding-vertical);left:var(--wcs-switch-padding-horizontal);width:var(--wcs-switch-dot-size);height:var(--wcs-switch-dot-size);content:"";border-radius:50%;background-color:var(--wcs-switch-dot-color-default)}:host([disabled]:not([checked])) .wcs-checkmark::before{background-color:var(--wcs-switch-dot-color-disabled)}:host([disabled]:not([checked])) .wcs-checkmark{background-color:var(--wcs-switch-background-color-disabled)}:host([disabled][checked]) .wcs-checkmark{background-color:var(--wcs-switch-background-color-disabled-selected)}:host([disabled]) .text{color:var(--wcs-switch-text-color-disabled)}.wcs-checkmark{top:0;right:0;bottom:0;left:0;width:var(--wcs-switch-width);height:var(--wcs-switch-height);border-radius:var(--wcs-switch-border-radius);background-color:var(--wcs-switch-background-color-initial);min-width:3rem;position:relative}.wcs-container:not([aria-disabled]){cursor:pointer}input:not([disabled]):checked+.wcs-checkmark::before,.wcs-container:focus input:not([disabled])+.wcs-checkmark::before{background-color:var(--wcs-switch-dot-color-selected)}input:checked+.wcs-checkmark::before{transform:translateX(var(--wcs-switch-dot-translate-x))}input:not([disabled]):checked+.wcs-checkmark{background-color:var(--wcs-switch-background-color-final)}.wcs-container:hover input:not([disabled]):checked+.wcs-checkmark{background-color:var(--wcs-switch-background-color-hover-selected)}';const l=d;const h=["tabindex"];const w=c(class c extends t{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsChange=s(this,"wcsChange",7);this.wcsFocus=s(this,"wcsFocus",7);this.wcsBlur=s(this,"wcsBlur",7);this.switchId=`wcs-switch-${b++}`;this.inheritedAttributes={};this.name=this.switchId;this.checked=false;this.labelAlignment="center";this.disabled=false}handleChange(c){c.stopImmediatePropagation();c.preventDefault();this.toggleSwitchState()}async handleHostClick(c){c.preventDefault();c.stopPropagation();this.toggleSwitchState()}handleInputClick(c){if(c.detail){c.stopImmediatePropagation();c.preventDefault()}}toggleSwitchState(){if(this.disabled)return;this.checked=!this.checked;this.wcsChange.emit({checked:this.checked})}handleFocus(c){this.wcsFocus.emit(c)}handleBlur(c){this.wcsBlur.emit(c)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},o(this.el)),a(this.el,h))}async setAriaAttribute(c,t){r(this.nativeInput,c,t)}async getLabel(){return n(this.el)}render(){return e(i,{key:"cedd87377ee17731f5422f42117321f23d944281"},e("label",{key:"1bb8e511921d30ccf6153738eb6a0844ea3f4082",htmlFor:this.name,class:"wcs-container","aria-disabled":this.disabled},e("input",Object.assign({key:"b05af8decb4cd3c23b2c814fd849612370c896e6",onBlur:this.handleBlur.bind(this),onChange:this.handleChange.bind(this),onClick:this.handleInputClick.bind(this),onFocus:this.handleFocus.bind(this),checked:this.checked,id:this.name,class:"wcs-switch",type:"checkbox",name:this.name,disabled:this.disabled,ref:c=>{this.nativeInput=c}},this.inheritedAttributes)),e("span",{key:"fcc0664435cb4d40d6fd95571ff233ae44806f58",class:"wcs-checkmark"}),e("span",{key:"67a951e606c537e911352799de289e4eefc87e23",class:"text"},e("slot",{key:"dbe2ced66c88f5184144661215c9332d464c01fc"}))))}static get delegatesFocus(){return true}get el(){return this}static get style(){return l}},[17,"wcs-switch",{name:[1],checked:[516],labelAlignment:[513,"label-alignment"],disabled:[516],setAriaAttribute:[64],getLabel:[64]},[[0,"click","handleHostClick"]]]);let b=0;function u(){if(typeof customElements==="undefined"){return}const c=["wcs-switch"];c.forEach((c=>{switch(c){case"wcs-switch":if(!customElements.get(c)){customElements.define(c,w)}break}}))}u();const m=w;const g=u;export{m as WcsSwitch,g as defineCustomElement};
+import{p as c,H as t,d as s,h as e,c as i}from"./p-2bef72c7.js";import{i as o,a,s as r}from"./p-e803bb26.js";import{g as n}from"./p-a7468a3a.js";const d=':host{--wcs-switch-background-color-initial:var(--wcs-semantic-color-background-control-indicator-default);--wcs-switch-background-color-final:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-switch-background-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-switch-background-color-disabled-selected:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-switch-background-color-hover-selected:var(--wcs-semantic-color-background-control-indicator-hover);--wcs-switch-padding-horizontal:var(--wcs-semantic-spacing-small);--wcs-switch-padding-vertical:calc((var(--wcs-switch-height) - var(--wcs-switch-dot-size)) / 2);--wcs-switch-dot-color-default:var(--wcs-semantic-color-foreground-brand);--wcs-switch-dot-color-selected:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-switch-dot-color-disabled:var(--wcs-semantic-color-foreground-control-indicator-disabled);--wcs-switch-text-color-default:var(--wcs-semantic-color-text-secondary);--wcs-switch-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-switch-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-switch-text-font-weight-default:var(--wcs-semantic-font-weight-medium);--wcs-switch-text-font-weight-selected:var(--wcs-semantic-font-weight-medium);--wcs-switch-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-switch-dot-translate-x:calc(var(--wcs-switch-width) - var(--wcs-switch-dot-size) - (2 * var(--wcs-switch-padding-horizontal)));--wcs-switch-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-switch-dot-size:0.875rem;--wcs-switch-height:var(--wcs-semantic-size-xs);--wcs-switch-width:var(--wcs-semantic-size-l);--wcs-switch-border-radius:var(--wcs-semantic-border-radius-full);--wcs-switch-gap:var(--wcs-semantic-spacing-base);display:inline-flex}:host([disabled]) .text{color:var(--wcs-switch-text-color-disabled)}:host([disabled]) .wcs-container{cursor:not-allowed}.wcs-container{position:relative;display:flex;user-select:none;margin-bottom:0;gap:var(--wcs-switch-gap)}.wcs-container:has(input:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-switch-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-switch-border-radius)}@supports not selector(.wcs-container:has(input:focus-visible)){.wcs-container:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-switch-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-switch-border-radius)}}:host([label-alignment=top]) .wcs-container{align-items:start}:host([label-alignment=center]) .wcs-container{align-items:center}:host([label-alignment=bottom]) .wcs-container{align-items:flex-end}.wcs-container input{position:absolute;opacity:0;height:0;width:0}.text{color:var(--wcs-switch-text-color-default);font-weight:var(--wcs-switch-text-font-weight-default);line-height:1.375}.wcs-container:not([aria-disabled]) input:checked~.text{font-weight:var(--wcs-switch-text-font-weight-selected);color:var(--wcs-switch-text-color-selected)}.wcs-checkmark::before{position:absolute;transition:all var(--wcs-switch-transition-duration) ease-out}.wcs-checkmark::before{bottom:var(--wcs-switch-padding-vertical);left:var(--wcs-switch-padding-horizontal);width:var(--wcs-switch-dot-size);height:var(--wcs-switch-dot-size);content:"";border-radius:50%;background-color:var(--wcs-switch-dot-color-default)}:host([disabled]:not([checked])) .wcs-checkmark::before{background-color:var(--wcs-switch-dot-color-disabled)}:host([disabled]:not([checked])) .wcs-checkmark{background-color:var(--wcs-switch-background-color-disabled)}:host([disabled][checked]) .wcs-checkmark{background-color:var(--wcs-switch-background-color-disabled-selected)}:host([disabled]) .text{color:var(--wcs-switch-text-color-disabled)}.wcs-checkmark{top:0;right:0;bottom:0;left:0;width:var(--wcs-switch-width);height:var(--wcs-switch-height);border-radius:var(--wcs-switch-border-radius);background-color:var(--wcs-switch-background-color-initial);min-width:3rem;position:relative}.wcs-container:not([aria-disabled]){cursor:pointer}input:not([disabled]):checked+.wcs-checkmark::before,.wcs-container:focus input:not([disabled])+.wcs-checkmark::before{background-color:var(--wcs-switch-dot-color-selected)}input:checked+.wcs-checkmark::before{transform:translateX(var(--wcs-switch-dot-translate-x))}input:not([disabled]):checked+.wcs-checkmark{background-color:var(--wcs-switch-background-color-final)}.wcs-container:hover input:not([disabled]):checked+.wcs-checkmark{background-color:var(--wcs-switch-background-color-hover-selected)}';const l=d;const h=["tabindex"];const w=c(class c extends t{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsChange=s(this,"wcsChange",7);this.wcsFocus=s(this,"wcsFocus",7);this.wcsBlur=s(this,"wcsBlur",7);this.switchId=`wcs-switch-${b++}`;this.inheritedAttributes={};this.name=this.switchId;this.checked=false;this.labelAlignment="center";this.disabled=false}handleChange(c){c.stopImmediatePropagation();c.preventDefault();this.toggleSwitchState()}async handleHostClick(c){c.preventDefault();c.stopPropagation();this.toggleSwitchState()}handleInputClick(c){if(c.detail){c.stopImmediatePropagation();c.preventDefault()}}toggleSwitchState(){if(this.disabled)return;this.checked=!this.checked;this.wcsChange.emit({checked:this.checked})}handleFocus(c){this.wcsFocus.emit(c)}handleBlur(c){this.wcsBlur.emit(c)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},o(this.el)),a(this.el,h))}async setAriaAttribute(c,t){r(this.nativeInput,c,t)}async getLabel(){return n(this.el)}render(){return e(i,{key:"482132afd430c9dcc4f43e945f73516cd3ff0916"},e("label",{key:"347ef36c5f79f40c07b033061fc4306c7af1d6d4",htmlFor:this.name,class:"wcs-container","aria-disabled":this.disabled},e("input",Object.assign({key:"3fd70b6177fc09b5d86af8985b89d33c20bec1a2",onBlur:this.handleBlur.bind(this),onChange:this.handleChange.bind(this),onClick:this.handleInputClick.bind(this),onFocus:this.handleFocus.bind(this),checked:this.checked,id:this.name,class:"wcs-switch",type:"checkbox",name:this.name,disabled:this.disabled,ref:c=>{this.nativeInput=c}},this.inheritedAttributes)),e("span",{key:"9fd555c6694b6ec7bb0257c248d440bdba797227",class:"wcs-checkmark"}),e("span",{key:"1b54f6891ba864be362055ceaba9f0853c75fd16",class:"text"},e("slot",{key:"bc3338c266b9ead8338ba50a69fcafcb325d13f3"}))))}static get delegatesFocus(){return true}get el(){return this}static get style(){return l}},[17,"wcs-switch",{name:[1],checked:[516],labelAlignment:[513,"label-alignment"],disabled:[516],setAriaAttribute:[64],getLabel:[64]},[[0,"click","handleHostClick"]]]);let b=0;function u(){if(typeof customElements==="undefined"){return}const c=["wcs-switch"];c.forEach((c=>{switch(c){case"wcs-switch":if(!customElements.get(c)){customElements.define(c,w)}break}}))}u();const f=w;const m=u;export{f as WcsSwitch,m as defineCustomElement};
 //# sourceMappingURL=wcs-switch.js.map

package/composite-elements/wcs-tab.js

@@ -1,2 +1,2 @@
-import{p as e,H as t,d as s,h as n,c as o}from"./p-2bef72c7.js";const c=":host{display:block}:host([hidden]){display:none}";const a=c;const d=e(class e extends t{constructor(){super();this.__registerHost();this.__attachShadow();this.tabLoaded=s(this,"tabLoaded",7);this.header=undefined;this.itemKey=undefined}componentDidLoad(){this.tabLoaded.emit()}render(){return n(o,{key:"794409fa3f716ebb644a961702f98908d396c9e2",slot:"wcs-tab",role:"tabpanel"},n("slot",{key:"9d98f7701d339eb5a1c3a9680595d7e5e88beba6"}))}static get style(){return a}},[1,"wcs-tab",{header:[513],itemKey:[8,"item-key"]}]);function i(){if(typeof customElements==="undefined"){return}const e=["wcs-tab"];e.forEach((e=>{switch(e){case"wcs-tab":if(!customElements.get(e)){customElements.define(e,d)}break}}))}i();const r=d;const b=i;export{r as WcsTab,b as defineCustomElement};
+import{p as t,H as e,d as s,h as c,c as a}from"./p-2bef72c7.js";const n=":host{display:block}:host([hidden]){display:none}";const o=n;const i=t(class t extends e{constructor(){super();this.__registerHost();this.__attachShadow();this.tabLoaded=s(this,"tabLoaded",7);this.header=undefined;this.itemKey=undefined}componentDidLoad(){this.tabLoaded.emit()}render(){return c(a,{key:"7a7e32bac1115db932217147ac7ca0a5d589198a",slot:"wcs-tab",role:"tabpanel"},c("slot",{key:"82b5f09a33f743a1284154284a5a9432442c3c9c"}))}static get style(){return o}},[1,"wcs-tab",{header:[513],itemKey:[8,"item-key"]}]);function d(){if(typeof customElements==="undefined"){return}const t=["wcs-tab"];t.forEach((t=>{switch(t){case"wcs-tab":if(!customElements.get(t)){customElements.define(t,i)}break}}))}d();const r=i;const b=d;export{r as WcsTab,b as defineCustomElement};
 //# sourceMappingURL=wcs-tab.js.map

package/composite-elements/wcs-tabs.js

@@ -1,2 +1,2 @@
-import{p as s,H as t,d as e,h as a,c as o}from"./p-2bef72c7.js";import{i as r,a as i,s as c}from"./p-e803bb26.js";import{S as n}from"./p-35d7af48.js";import{c as b}from"./p-e1fb3625.js";const d=':host{--wcs-tabs-indicator-height:calc(var(--wcs-semantic-size-base) / 2);--wcs-tabs-indicator-background-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-indicator-border-radius:var(--wcs-semantic-border-radius-full);--wcs-tabs-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-color-hover:var(--wcs-semantic-color-foreground-action-secondary-hover);--wcs-tabs-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-tabs-color-selected:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-background-color-focus:var(--wcs-semantic-color-background-action-secondary-focus);--wcs-tabs-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-tabs-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-tabs-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-tabs-font-weight-default:var(--wcs-semantic-font-weight-roman);--wcs-tabs-font-weight-selected:var(--wcs-semantic-font-weight-roman);--wcs-tabs-padding-top:var(--wcs-semantic-spacing-base);--wcs-tabs-padding-right:var(--wcs-semantic-spacing-large);--wcs-tabs-padding-bottom:calc(var(--wcs-semantic-spacing-base) + var(--wcs-tabs-indicator-height));--wcs-tabs-padding-left:var(--wcs-semantic-spacing-large);--wcs-tabs-gutter-border-width:var(--wcs-semantic-border-width-default);--wcs-tabs-gutter-background-color:var(--wcs-semantic-color-border-secondary);--wcs-tabs-headers-border-bottom:var(--wcs-tabs-gutter-border-width) solid var(--wcs-tabs-gutter-background-color);--wcs-tabs-mobile-breakpoint:var(--wcs-phone-breakpoint-max-width, 575px);--wcs-tabs-mobile-overlay-border-width:var(--wcs-semantic-border-width-default);--wcs-tabs-mobile-overlay-border-color:var(--wcs-semantic-color-border-secondary);--wcs-tabs-mobile-overlay-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-tabs-mobile-overlay-padding:var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-overlay-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-mobile-gap:var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-padding:0 var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-height:var(--wcs-semantic-size-m);--wcs-tabs-mobile-font-weight-default:var(--wcs-semantic-font-weight-medium);--wcs-tabs-mobile-font-weight-active:var(--wcs-semantic-font-weight-black);--wcs-tabs-mobile-font-size:var(--wcs-semantic-font-size-base);--wcs-tabs-mobile-color:var(--wcs-semantic-color-text-primary);--wcs-tabs-mobile-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-tabs-mobile-background-color-focus:var(--wcs-semantic-color-background-action-secondary-focus);--wcs-tabs-mobile-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-tabs-mobile-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-tabs-mobile-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:block}:host([align=start]) .wcs-tabs-headers{justify-content:start}:host([align=end]) .wcs-tabs-headers{justify-content:end}:host([align=center]) .wcs-tabs-headers{justify-content:center}.wcs-tabs-headers{overflow-x:auto;display:flex;flex-direction:row;position:relative}:host([gutter]) .wcs-tabs-headers{border-bottom:var(--wcs-tabs-headers-border-bottom)}.wcs-tab-header{position:relative;padding:var(--wcs-tabs-padding-top) var(--wcs-tabs-padding-right) var(--wcs-tabs-padding-bottom) var(--wcs-tabs-padding-left);border-radius:var(--wcs-tabs-border-radius) var(--wcs-tabs-border-radius) 0 0;display:flex;flex-shrink:0;align-items:center;justify-content:center;cursor:pointer;outline:none;transition:all var(--wcs-tabs-transition-duration) ease-out}.wcs-tab-header span{text-align:center;color:var(--wcs-tabs-color-default);font-size:1rem;font-weight:var(--wcs-tabs-font-weight-default)}.wcs-tab-header:hover{background-color:var(--wcs-tabs-background-color-hover)}.wcs-tab-header:hover span{color:var(--wcs-tabs-color-hover)}.wcs-tab-header:focus-visible>span{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-tabs-border-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}.wcs-tab-header:active{background-color:var(--wcs-tabs-background-color-press)}.wcs-tab-header:active span{color:var(--wcs-tabs-color-press)}.active span{font-weight:var(--wcs-tabs-font-weight-selected);color:var(--wcs-tabs-color-selected)}.active::after{position:absolute;bottom:0;left:0;width:100%;content:"";height:var(--wcs-tabs-indicator-height);background-color:var(--wcs-tabs-indicator-background-color);border-radius:var(--wcs-tabs-indicator-border-radius)}button{background-color:inherit}#mobile-button{border:0;font-family:var(--wcs-font-sans-serif), sans-serif;text-align:center;color:var(--wcs-tabs-color-default);font-size:1rem;font-weight:var(--wcs-tabs-font-weight-default);padding-right:calc(0.75 * var(--wcs-tabs-padding-right));}#mobile-button span{display:flex;align-items:center}#mobile-button .arrow{fill:var(--wcs-tabs-color-default)}#mobile-button:hover .arrow{fill:var(--wcs-tabs-color-hover)}#mobile-button:active .arrow{fill:var(--wcs-tabs-color-press)}.popover{display:none;z-index:9999;overflow:hidden;border:var(--wcs-tabs-mobile-overlay-border-width) solid var(--wcs-tabs-mobile-overlay-border-color);border-radius:var(--wcs-tabs-mobile-overlay-border-radius);padding:var(--wcs-tabs-mobile-overlay-padding);background-color:var(--wcs-tabs-mobile-overlay-background-color)}.popover [role=tab]{display:flex;flex-direction:row;align-items:center;cursor:pointer;user-select:none;gap:var(--wcs-tabs-mobile-gap);padding:var(--wcs-tabs-mobile-padding);height:var(--wcs-tabs-mobile-height);font-weight:var(--wcs-tabs-mobile-font-weight-default);font-size:var(--wcs-tabs-mobile-font-size);color:var(--wcs-tabs-mobile-color);background-color:var(--wcs-tabs-mobile-background-color);border-radius:var(--wcs-tabs-mobile-border-radius);transition-duration:var(--wcs-tabs-transition-duration);transition-property:background-color, color;transition-timing-function:ease;overflow:hidden;white-space:nowrap}.popover [role=tab]:focus{background-color:var(--wcs-tabs-mobile-background-color-focus)}.popover [role=tab]:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-semantic-color-border-focus-base);outline-offset:0;border-radius:var(--wcs-tabs-mobile-border-radius)}.popover [role=tab]:hover{background-color:var(--wcs-tabs-mobile-background-color-hover)}.popover [role=tab]:active{background-color:var(--wcs-tabs-mobile-background-color-press)}.popover .mobile-active{font-weight:var(--wcs-tabs-mobile-font-weight-active)}.show{display:block}';const l=d;const h=[];const w=s(class s extends t{constructor(){super();this.__registerHost();this.__attachShadow();this.tabChange=e(this,"tabChange",7);this.inheritedAttributes={};this.tabsId=u++;this.align="start";this.selectedIndex=0;this.selectedKey=undefined;this.headersOnly=false;this.gutter=undefined;this.description=undefined;this.mobileOverlayExpanded=false;this.mobile=false;this.headers=[];this.currentActiveTabIndex=0}selectedIndexChanged(s){this.currentActiveTabIndex=s}selectedTabkeyChanged(s){this.updateCurrentActiveIndexByTabKey(s)}onMobileChange(s){if(!s){this.popper.destroy();this.popper=null}}emitActiveTabChange(){this.tabChange.emit({tabName:this.headers[this.currentActiveTabIndex],tabIndex:this.currentActiveTabIndex,selectedKey:this.tabs[this.currentActiveTabIndex].itemKey})}updateCurrentActiveIndexByTabKey(s){for(let t=0;t<this.tabs.length;t++){const e=this.tabs[t];if(e.itemKey===s){this.currentActiveTabIndex=t}}}onTabLoaded(){this.refreshHeaders()}onWindowClickEvent(s){if(this.mobile){const t=s.composedPath().some((s=>s===this.mobileButton||s===this.popoverDiv));if(this.mobileOverlayExpanded&&!t){this.mobileOverlayExpanded=false}}}tabsDidLoadWithResizeObserver(){const s=getComputedStyle(this.el).getPropertyValue("--wcs-tabs-mobile-breakpoint")||"575px";const t=parseInt(s,10);return new ResizeObserver((s=>{const e=s[0].contentRect;const a=e.right-e.width;const o=e.left;this.mobile=e.width<=t-(o+a)}))}initMobileOverlay(){this.popper=b(this.mobileButton,this.popoverDiv,{placement:"bottom-start",strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,8]}}]})}componentDidLoad(){this.putTabsInCorrectDivIfTheyAreNot();this.refreshHeaders();if(this.selectedIndex){this.currentActiveTabIndex=this.selectedIndex}if(this.selectedKey){this.updateCurrentActiveIndexByTabKey(this.selectedKey)}if(!this.resizeObserver){this.resizeObserver=this.tabsDidLoadWithResizeObserver();this.resizeObserver.observe(document.body)}}componentDidRender(){if(this.mobile){if(!this.popper){this.initMobileOverlay()}else{this.popper.update()}}}putTabsInCorrectDivIfTheyAreNot(){const s=this.el.shadowRoot.querySelector(".wcs-tabs");if(s.querySelector("slot")===null){Array.from(this.el.querySelectorAll("wcs-tab")).filter((t=>t.parentNode!==s)).forEach((t=>{if(t.parentElement.isEqualNode(this.el)){this.el.removeChild(t);s.appendChild(t)}}))}}handleKeyDown(s,t){var e,a;const o=s.target;switch(s.key){case" ":case"Enter":{this.selectTabAndEmitChangeEvent(t);s.preventDefault();break}case"ArrowLeft":{if((e=o.previousElementSibling)===null||e===void 0?void 0:e.classList.contains("wcs-tab-header")){o.previousElementSibling.focus();s.preventDefault()}break}case"ArrowRight":{if((a=o.nextElementSibling)===null||a===void 0?void 0:a.classList.contains("wcs-tab-header")){o.nextElementSibling.focus();s.preventDefault()}break}case"Home":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header:first-child");if(t){t.focus();s.preventDefault()}break}case"End":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header:last-child");if(t){t.focus();s.preventDefault()}break}}}handleKeyDownMobile(s,t){var e,a;const o=s.target;switch(s.key){case" ":case"Enter":{this.selectTabAndEmitChangeEvent(t);s.preventDefault();break}case"ArrowUp":{if((e=o.previousElementSibling)===null||e===void 0?void 0:e.classList.contains("wcs-tab-header-mobile")){o.previousElementSibling.focus();s.preventDefault()}break}case"ArrowDown":{if((a=o.nextElementSibling)===null||a===void 0?void 0:a.classList.contains("wcs-tab-header-mobile")){o.nextElementSibling.focus();s.preventDefault()}break}case"Home":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header-mobile:first-child");if(t){t.focus();s.preventDefault()}break}case"End":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header-mobile:last-child");if(t){t.focus();s.preventDefault()}break}case"Escape":{this.mobileOverlayExpanded=false;s.preventDefault();break}}}refreshHeaders(){this.headers=[];this.tabs.forEach((s=>{this.headers.push(s.getAttribute("header"))}))}get tabs(){var s;const t=this.el.shadowRoot.querySelector(".wcs-tabs");const e=this.el.shadowRoot.querySelectorAll(".wcs-tabs > wcs-tab");return e.length!==0?e:(t===null||t===void 0?void 0:t.querySelector("slot"))?(s=t===null||t===void 0?void 0:t.querySelector("slot"))===null||s===void 0?void 0:s.assignedElements():[]}selectTabAndEmitChangeEvent(s){var t;this.currentActiveTabIndex=s;this.emitActiveTabChange();if(this.mobile){this.mobileOverlayExpanded=false;(t=this.mobileButton)===null||t===void 0?void 0:t.focus()}}componentWillUpdate(){if(!this.headersOnly){this.updateTabVisibility()}else{this.hideAllTabsContent()}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},r(this.el)),i(this.el,h))}disconnectedCallback(){var s;if(this.popper){this.popper.destroy();this.popper=null}(s=this.resizeObserver)===null||s===void 0?void 0:s.disconnect()}async setAriaAttribute(s,t){c(this.mobile?this.popoverDiv:this.nativeTablist,s,t)}updateTabVisibility(){this.tabs.forEach(((s,t)=>{if(t!==this.currentActiveTabIndex){s.hidden=true}else{s.hidden=false}}))}hideAllTabsContent(){this.tabs.forEach((s=>s.hidden=true))}onMobileButtonClick(){this.mobileOverlayExpanded=!this.mobileOverlayExpanded;const s=this.popoverDiv.querySelectorAll("[role=tab]")[this.currentActiveTabIndex];requestAnimationFrame((()=>{s===null||s===void 0?void 0:s.focus()}))}onMobileButtonKeyDown(s){if(s.key==="ArrowDown"||s.key==="ArrowUp"){this.onMobileButtonClick()}}mobileLayout(){return[a("button",{id:"mobile-button",class:"wcs-tab-header active","aria-controls":"menu",role:"button","aria-expanded":this.mobileOverlayExpanded?"true":"false",ref:s=>this.mobileButton=s,onClick:()=>this.onMobileButtonClick(),onKeyDown:s=>this.onMobileButtonKeyDown(s),onBlur:s=>s.stopImmediatePropagation()},a("span",null,this.headers[this.currentActiveTabIndex]," ",a(n,{up:this.mobileOverlayExpanded}))),a("div",Object.assign({class:(this.mobileOverlayExpanded?"show ":"")+"popover",role:"tablist",id:"menu","aria-label":this.description,"aria-orientation":"vertical",ref:s=>this.popoverDiv=s,tabIndex:-1},this.inheritedAttributes),this.headers.map(((s,t)=>a("div",{class:"wcs-tab-header-mobile "+(this.currentActiveTabIndex===t?"mobile-active":""),onClick:()=>this.selectTabAndEmitChangeEvent(t),onKeyDown:s=>this.handleKeyDownMobile(s,t),tabIndex:this.currentActiveTabIndex===t?0:-1,role:"tab",id:`tabs-id-${this.tabsId}-tab-id-${t}`,"aria-controls":`tabs-id-${this.tabsId}-tab-panel-${t}`,"aria-label":s,"aria-selected":this.currentActiveTabIndex===t?"true":"false"},a("span",null,s)))))]}desktopLayout(){return this.headers.map(((s,t)=>a("div",{class:"wcs-tab-header "+(this.currentActiveTabIndex===t?"active":""),onClick:()=>this.selectTabAndEmitChangeEvent(t),onKeyDown:s=>this.handleKeyDown(s,t),tabIndex:this.currentActiveTabIndex===t?0:-1,role:"tab",id:`tabs-id-${this.tabsId}-tab-id-${t}`,"aria-controls":`tabs-id-${this.tabsId}-tab-panel-${t}`,"aria-label":s,"aria-selected":this.currentActiveTabIndex===t?"true":"false"},a("span",null,s))))}render(){return a(o,{key:"072fa3551b320a6415c20a3107500f2bee2aa690"},a("div",Object.assign({key:"294008dc27c2ff694119c3ce136caf866a0802b3",class:"wcs-tabs-headers",role:this.mobile?null:"tablist",ref:s=>this.nativeTablist=s,"aria-orientation":this.mobile?null:"horizontal","aria-label":this.mobile?null:this.description},!this.mobile&&this.inheritedAttributes),this.mobile?this.mobileLayout():this.desktopLayout()),a("div",{key:"d20bb48fe80434a6797c86d206a86d11081b92ea",class:"wcs-tabs"},a("slot",{key:"d4a31047e41627dc9c2cfb63f201e5e7ddc40f15",onSlotchange:()=>this.onTabsSlotChange(),name:"wcs-tab"})))}onTabsSlotChange(){let s=0;this.refreshHeaders();this.tabs.forEach((t=>{t.setAttribute("aria-label",this.headers.at(s));t.setAttribute("id",`tabs-id-${this.tabsId}-tab-panel-${s}`);s++}))}get el(){return this}static get watchers(){return{selectedIndex:["selectedIndexChanged"],selectedKey:["selectedTabkeyChanged"],mobile:["onMobileChange"]}}static get style(){return l}},[1,"wcs-tabs",{align:[513],selectedIndex:[2,"selected-index"],selectedKey:[8,"selected-key"],headersOnly:[516,"headers-only"],gutter:[516],description:[1],mobileOverlayExpanded:[32],mobile:[32],headers:[32],currentActiveTabIndex:[32],setAriaAttribute:[64]},[[0,"tabLoaded","onTabLoaded"],[8,"click","onWindowClickEvent"]],{selectedIndex:["selectedIndexChanged"],selectedKey:["selectedTabkeyChanged"],mobile:["onMobileChange"]}]);let u=0;function v(){if(typeof customElements==="undefined"){return}const s=["wcs-tabs"];s.forEach((s=>{switch(s){case"wcs-tabs":if(!customElements.get(s)){customElements.define(s,w)}break}}))}v();const f=w;const m=v;export{f as WcsTabs,m as defineCustomElement};
+import{p as s,H as t,d as e,h as a,c as o}from"./p-2bef72c7.js";import{i as r,a as i,s as c}from"./p-e803bb26.js";import{S as n}from"./p-35d7af48.js";import{c as b}from"./p-e1fb3625.js";const d=':host{--wcs-tabs-indicator-height:calc(var(--wcs-semantic-size-base) / 2);--wcs-tabs-indicator-background-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-indicator-border-radius:var(--wcs-semantic-border-radius-full);--wcs-tabs-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-color-hover:var(--wcs-semantic-color-foreground-action-secondary-hover);--wcs-tabs-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-tabs-color-selected:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-background-color-focus:var(--wcs-semantic-color-background-action-secondary-focus);--wcs-tabs-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-tabs-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-tabs-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-tabs-font-weight-default:var(--wcs-semantic-font-weight-roman);--wcs-tabs-font-weight-selected:var(--wcs-semantic-font-weight-roman);--wcs-tabs-padding-top:var(--wcs-semantic-spacing-base);--wcs-tabs-padding-right:var(--wcs-semantic-spacing-large);--wcs-tabs-padding-bottom:calc(var(--wcs-semantic-spacing-base) + var(--wcs-tabs-indicator-height));--wcs-tabs-padding-left:var(--wcs-semantic-spacing-large);--wcs-tabs-gutter-border-width:var(--wcs-semantic-border-width-default);--wcs-tabs-gutter-background-color:var(--wcs-semantic-color-border-secondary);--wcs-tabs-headers-border-bottom:var(--wcs-tabs-gutter-border-width) solid var(--wcs-tabs-gutter-background-color);--wcs-tabs-mobile-breakpoint:var(--wcs-phone-breakpoint-max-width, 575px);--wcs-tabs-mobile-overlay-border-width:var(--wcs-semantic-border-width-default);--wcs-tabs-mobile-overlay-border-color:var(--wcs-semantic-color-border-secondary);--wcs-tabs-mobile-overlay-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-tabs-mobile-overlay-padding:var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-overlay-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-mobile-gap:var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-padding:0 var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-height:var(--wcs-semantic-size-m);--wcs-tabs-mobile-font-weight-default:var(--wcs-semantic-font-weight-medium);--wcs-tabs-mobile-font-weight-active:var(--wcs-semantic-font-weight-black);--wcs-tabs-mobile-font-size:var(--wcs-semantic-font-size-base);--wcs-tabs-mobile-color:var(--wcs-semantic-color-text-primary);--wcs-tabs-mobile-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-tabs-mobile-background-color-focus:var(--wcs-semantic-color-background-action-secondary-focus);--wcs-tabs-mobile-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-tabs-mobile-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-tabs-mobile-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:block}:host([align=start]) .wcs-tabs-headers{justify-content:start}:host([align=end]) .wcs-tabs-headers{justify-content:end}:host([align=center]) .wcs-tabs-headers{justify-content:center}.wcs-tabs-headers{overflow-x:auto;display:flex;flex-direction:row;position:relative}:host([gutter]) .wcs-tabs-headers{border-bottom:var(--wcs-tabs-headers-border-bottom)}.wcs-tab-header{position:relative;padding:var(--wcs-tabs-padding-top) var(--wcs-tabs-padding-right) var(--wcs-tabs-padding-bottom) var(--wcs-tabs-padding-left);border-radius:var(--wcs-tabs-border-radius) var(--wcs-tabs-border-radius) 0 0;display:flex;flex-shrink:0;align-items:center;justify-content:center;cursor:pointer;outline:none;transition:all var(--wcs-tabs-transition-duration) ease-out}.wcs-tab-header span{text-align:center;color:var(--wcs-tabs-color-default);font-size:1rem;font-weight:var(--wcs-tabs-font-weight-default)}.wcs-tab-header:hover{background-color:var(--wcs-tabs-background-color-hover)}.wcs-tab-header:hover span{color:var(--wcs-tabs-color-hover)}.wcs-tab-header:focus-visible>span{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-tabs-border-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}.wcs-tab-header:active{background-color:var(--wcs-tabs-background-color-press)}.wcs-tab-header:active span{color:var(--wcs-tabs-color-press)}.active span{font-weight:var(--wcs-tabs-font-weight-selected);color:var(--wcs-tabs-color-selected)}.active::after{position:absolute;bottom:0;left:0;width:100%;content:"";height:var(--wcs-tabs-indicator-height);background-color:var(--wcs-tabs-indicator-background-color);border-radius:var(--wcs-tabs-indicator-border-radius)}button{background-color:inherit}#mobile-button{border:0;font-family:var(--wcs-font-sans-serif), sans-serif;text-align:center;color:var(--wcs-tabs-color-default);font-size:1rem;font-weight:var(--wcs-tabs-font-weight-default);padding-right:calc(0.75 * var(--wcs-tabs-padding-right));}#mobile-button span{display:flex;align-items:center}#mobile-button .arrow{fill:var(--wcs-tabs-color-default)}#mobile-button:hover .arrow{fill:var(--wcs-tabs-color-hover)}#mobile-button:active .arrow{fill:var(--wcs-tabs-color-press)}.popover{display:none;z-index:9999;overflow:hidden;border:var(--wcs-tabs-mobile-overlay-border-width) solid var(--wcs-tabs-mobile-overlay-border-color);border-radius:var(--wcs-tabs-mobile-overlay-border-radius);padding:var(--wcs-tabs-mobile-overlay-padding);background-color:var(--wcs-tabs-mobile-overlay-background-color)}.popover [role=tab]{display:flex;flex-direction:row;align-items:center;cursor:pointer;user-select:none;gap:var(--wcs-tabs-mobile-gap);padding:var(--wcs-tabs-mobile-padding);height:var(--wcs-tabs-mobile-height);font-weight:var(--wcs-tabs-mobile-font-weight-default);font-size:var(--wcs-tabs-mobile-font-size);color:var(--wcs-tabs-mobile-color);background-color:var(--wcs-tabs-mobile-background-color);border-radius:var(--wcs-tabs-mobile-border-radius);transition-duration:var(--wcs-tabs-transition-duration);transition-property:background-color, color;transition-timing-function:ease;overflow:hidden;white-space:nowrap}.popover [role=tab]:focus{background-color:var(--wcs-tabs-mobile-background-color-focus)}.popover [role=tab]:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-semantic-color-border-focus-base);outline-offset:0;border-radius:var(--wcs-tabs-mobile-border-radius)}.popover [role=tab]:hover{background-color:var(--wcs-tabs-mobile-background-color-hover)}.popover [role=tab]:active{background-color:var(--wcs-tabs-mobile-background-color-press)}.popover .mobile-active{font-weight:var(--wcs-tabs-mobile-font-weight-active)}.show{display:block}';const l=d;const h=[];const w=s(class s extends t{constructor(){super();this.__registerHost();this.__attachShadow();this.tabChange=e(this,"tabChange",7);this.inheritedAttributes={};this.tabsId=u++;this.align="start";this.selectedIndex=0;this.selectedKey=undefined;this.headersOnly=false;this.gutter=undefined;this.description=undefined;this.mobileOverlayExpanded=false;this.mobile=false;this.headers=[];this.currentActiveTabIndex=0}selectedIndexChanged(s){this.currentActiveTabIndex=s}selectedTabkeyChanged(s){this.updateCurrentActiveIndexByTabKey(s)}onMobileChange(s){if(!s){this.popper.destroy();this.popper=null}}emitActiveTabChange(){this.tabChange.emit({tabName:this.headers[this.currentActiveTabIndex],tabIndex:this.currentActiveTabIndex,selectedKey:this.tabs[this.currentActiveTabIndex].itemKey})}updateCurrentActiveIndexByTabKey(s){for(let t=0;t<this.tabs.length;t++){const e=this.tabs[t];if(e.itemKey===s){this.currentActiveTabIndex=t}}}onTabLoaded(){this.refreshHeaders()}onWindowClickEvent(s){if(this.mobile){const t=s.composedPath().some((s=>s===this.mobileButton||s===this.popoverDiv));if(this.mobileOverlayExpanded&&!t){this.mobileOverlayExpanded=false}}}tabsDidLoadWithResizeObserver(){const s=getComputedStyle(this.el).getPropertyValue("--wcs-tabs-mobile-breakpoint")||"575px";const t=parseInt(s,10);return new ResizeObserver((s=>{const e=s[0].contentRect;const a=e.right-e.width;const o=e.left;this.mobile=e.width<=t-(o+a)}))}initMobileOverlay(){this.popper=b(this.mobileButton,this.popoverDiv,{placement:"bottom-start",strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,8]}}]})}componentDidLoad(){this.putTabsInCorrectDivIfTheyAreNot();this.refreshHeaders();if(this.selectedIndex){this.currentActiveTabIndex=this.selectedIndex}if(this.selectedKey){this.updateCurrentActiveIndexByTabKey(this.selectedKey)}if(!this.resizeObserver){this.resizeObserver=this.tabsDidLoadWithResizeObserver();this.resizeObserver.observe(document.body)}}componentDidRender(){if(this.mobile){if(!this.popper){this.initMobileOverlay()}else{this.popper.update()}}}putTabsInCorrectDivIfTheyAreNot(){const s=this.el.shadowRoot.querySelector(".wcs-tabs");if(s.querySelector("slot")===null){Array.from(this.el.querySelectorAll("wcs-tab")).filter((t=>t.parentNode!==s)).forEach((t=>{if(t.parentElement.isEqualNode(this.el)){this.el.removeChild(t);s.appendChild(t)}}))}}handleKeyDown(s,t){var e,a;const o=s.target;switch(s.key){case" ":case"Enter":{this.selectTabAndEmitChangeEvent(t);s.preventDefault();break}case"ArrowLeft":{if((e=o.previousElementSibling)===null||e===void 0?void 0:e.classList.contains("wcs-tab-header")){o.previousElementSibling.focus();s.preventDefault()}break}case"ArrowRight":{if((a=o.nextElementSibling)===null||a===void 0?void 0:a.classList.contains("wcs-tab-header")){o.nextElementSibling.focus();s.preventDefault()}break}case"Home":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header:first-child");if(t){t.focus();s.preventDefault()}break}case"End":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header:last-child");if(t){t.focus();s.preventDefault()}break}}}handleKeyDownMobile(s,t){var e,a;const o=s.target;switch(s.key){case" ":case"Enter":{this.selectTabAndEmitChangeEvent(t);s.preventDefault();break}case"ArrowUp":{if((e=o.previousElementSibling)===null||e===void 0?void 0:e.classList.contains("wcs-tab-header-mobile")){o.previousElementSibling.focus();s.preventDefault()}break}case"ArrowDown":{if((a=o.nextElementSibling)===null||a===void 0?void 0:a.classList.contains("wcs-tab-header-mobile")){o.nextElementSibling.focus();s.preventDefault()}break}case"Home":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header-mobile:first-child");if(t){t.focus();s.preventDefault()}break}case"End":{const t=this.el.shadowRoot.querySelector(".wcs-tab-header-mobile:last-child");if(t){t.focus();s.preventDefault()}break}case"Escape":{this.mobileOverlayExpanded=false;s.preventDefault();break}}}refreshHeaders(){this.headers=[];this.tabs.forEach((s=>{this.headers.push(s.getAttribute("header"))}))}get tabs(){var s;const t=this.el.shadowRoot.querySelector(".wcs-tabs");const e=this.el.shadowRoot.querySelectorAll(".wcs-tabs > wcs-tab");return e.length!==0?e:(t===null||t===void 0?void 0:t.querySelector("slot"))?(s=t===null||t===void 0?void 0:t.querySelector("slot"))===null||s===void 0?void 0:s.assignedElements():[]}selectTabAndEmitChangeEvent(s){var t;this.currentActiveTabIndex=s;this.emitActiveTabChange();if(this.mobile){this.mobileOverlayExpanded=false;(t=this.mobileButton)===null||t===void 0?void 0:t.focus()}}componentWillUpdate(){if(!this.headersOnly){this.updateTabVisibility()}else{this.hideAllTabsContent()}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},r(this.el)),i(this.el,h))}disconnectedCallback(){var s;if(this.popper){this.popper.destroy();this.popper=null}(s=this.resizeObserver)===null||s===void 0?void 0:s.disconnect()}async setAriaAttribute(s,t){c(this.mobile?this.popoverDiv:this.nativeTablist,s,t)}updateTabVisibility(){this.tabs.forEach(((s,t)=>{if(t!==this.currentActiveTabIndex){s.hidden=true}else{s.hidden=false}}))}hideAllTabsContent(){this.tabs.forEach((s=>s.hidden=true))}onMobileButtonClick(){this.mobileOverlayExpanded=!this.mobileOverlayExpanded;const s=this.popoverDiv.querySelectorAll("[role=tab]")[this.currentActiveTabIndex];requestAnimationFrame((()=>{s===null||s===void 0?void 0:s.focus()}))}onMobileButtonKeyDown(s){if(s.key==="ArrowDown"||s.key==="ArrowUp"){this.onMobileButtonClick()}}mobileLayout(){return[a("button",{id:"mobile-button",class:"wcs-tab-header active","aria-controls":"menu",role:"button","aria-expanded":this.mobileOverlayExpanded?"true":"false",ref:s=>this.mobileButton=s,onClick:()=>this.onMobileButtonClick(),onKeyDown:s=>this.onMobileButtonKeyDown(s),onBlur:s=>s.stopImmediatePropagation()},a("span",null,this.headers[this.currentActiveTabIndex]," ",a(n,{up:this.mobileOverlayExpanded}))),a("div",Object.assign({class:(this.mobileOverlayExpanded?"show ":"")+"popover",role:"tablist",id:"menu","aria-label":this.description,"aria-orientation":"vertical",ref:s=>this.popoverDiv=s,tabIndex:-1},this.inheritedAttributes),this.headers.map(((s,t)=>a("div",{class:"wcs-tab-header-mobile "+(this.currentActiveTabIndex===t?"mobile-active":""),onClick:()=>this.selectTabAndEmitChangeEvent(t),onKeyDown:s=>this.handleKeyDownMobile(s,t),tabIndex:this.currentActiveTabIndex===t?0:-1,role:"tab",id:`tabs-id-${this.tabsId}-tab-id-${t}`,"aria-controls":`tabs-id-${this.tabsId}-tab-panel-${t}`,"aria-label":s,"aria-selected":this.currentActiveTabIndex===t?"true":"false"},a("span",null,s)))))]}desktopLayout(){return this.headers.map(((s,t)=>a("div",{class:"wcs-tab-header "+(this.currentActiveTabIndex===t?"active":""),onClick:()=>this.selectTabAndEmitChangeEvent(t),onKeyDown:s=>this.handleKeyDown(s,t),tabIndex:this.currentActiveTabIndex===t?0:-1,role:"tab",id:`tabs-id-${this.tabsId}-tab-id-${t}`,"aria-controls":`tabs-id-${this.tabsId}-tab-panel-${t}`,"aria-label":s,"aria-selected":this.currentActiveTabIndex===t?"true":"false"},a("span",null,s))))}render(){return a(o,{key:"52a78624d4440876aacfcabeb2b25df81867d64c"},a("div",Object.assign({key:"6bdbb2386f24c7d4f808a5af656ea8efc740a2d1",class:"wcs-tabs-headers",role:this.mobile?null:"tablist",ref:s=>this.nativeTablist=s,"aria-orientation":this.mobile?null:"horizontal","aria-label":this.mobile?null:this.description},!this.mobile&&this.inheritedAttributes),this.mobile?this.mobileLayout():this.desktopLayout()),a("div",{key:"dfc2a9df4b2778cbb5d0144aaca7fd54cf699f9c",class:"wcs-tabs"},a("slot",{key:"a97bec22c495527408eb56caf91a30a67aed3e4f",onSlotchange:()=>this.onTabsSlotChange(),name:"wcs-tab"})))}onTabsSlotChange(){let s=0;this.refreshHeaders();this.tabs.forEach((t=>{t.setAttribute("aria-label",this.headers.at(s));t.setAttribute("id",`tabs-id-${this.tabsId}-tab-panel-${s}`);s++}))}get el(){return this}static get watchers(){return{selectedIndex:["selectedIndexChanged"],selectedKey:["selectedTabkeyChanged"],mobile:["onMobileChange"]}}static get style(){return l}},[1,"wcs-tabs",{align:[513],selectedIndex:[2,"selected-index"],selectedKey:[8,"selected-key"],headersOnly:[516,"headers-only"],gutter:[516],description:[1],mobileOverlayExpanded:[32],mobile:[32],headers:[32],currentActiveTabIndex:[32],setAriaAttribute:[64]},[[0,"tabLoaded","onTabLoaded"],[8,"click","onWindowClickEvent"]],{selectedIndex:["selectedIndexChanged"],selectedKey:["selectedTabkeyChanged"],mobile:["onMobileChange"]}]);let u=0;function v(){if(typeof customElements==="undefined"){return}const s=["wcs-tabs"];s.forEach((s=>{switch(s){case"wcs-tabs":if(!customElements.get(s)){customElements.define(s,w)}break}}))}v();const f=w;const m=v;export{f as WcsTabs,m as defineCustomElement};
 //# sourceMappingURL=wcs-tabs.js.map

package/composite-elements/wcs-textarea.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,d as a,r,h as s,c as o}from"./p-2bef72c7.js";import{y as i,i as c,a as n,D as d,s as l}from"./p-e803bb26.js";import{d as h}from"./p-55668982.js";const w=":host{--wcs-textarea-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-textarea-value-color:var(--wcs-semantic-color-text-primary);--wcs-textarea-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-textarea-placeholder-color:var(--wcs-semantic-color-text-tertiary);--wcs-textarea-placeholder-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-textarea-placeholder-font-style:var(--wcs-semantic-font-style-control-placeholder);--wcs-textarea-icon-color-default:var(--wcs-semantic-color-foreground-brand);--wcs-textarea-icon-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-textarea-icon-color-focus:var(--wcs-semantic-color-foreground-brand);--wcs-textarea-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-textarea-border-color-disabled:var(--wcs-semantic-color-border-disabled);--wcs-textarea-border-color-error:var(--wcs-semantic-color-border-critical);--wcs-textarea-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-textarea-border-style-default:solid;--wcs-textarea-border-style-error:solid;--wcs-textarea-border-style-focus:var(--wcs-semantic-border-style-focus-control);--wcs-internal-textarea-border-radius-left:var(--wcs-textarea-border-radius-left, var(--wcs-semantic-border-radius-base));--wcs-internal-textarea-border-radius-right:var(--wcs-textarea-border-radius-right, var(--wcs-semantic-border-radius-base));--wcs-textarea-border-width:var(--wcs-semantic-border-width-default);--wcs-textarea-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-textarea-gap:var(--wcs-semantic-spacing-base);--wcs-textarea-padding-top:var(--wcs-semantic-spacing-base);--wcs-textarea-padding-bottom:var(--wcs-semantic-spacing-base);--wcs-internal-textarea-padding-left:var(--wcs-textarea-padding-left, var(--wcs-semantic-spacing-large));--wcs-internal-textarea-padding-right:var(--wcs-textarea-padding-right, var(--wcs-semantic-spacing-large));--wcs-textarea-min-height:var(--wcs-semantic-size-m);--wcs-internal-textarea-max-height:var(--wcs-textarea-max-height, unset);--wcs-textarea-background-color:var(--wcs-semantic-color-background-control-default);display:flex;flex-direction:row;align-items:center;gap:var(--wcs-textarea-gap);width:100%;border-radius:var(--wcs-internal-textarea-border-radius-left) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-left);background-color:var(--wcs-textarea-background-color);outline:var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-default);outline-offset:calc(-1 * var(--wcs-textarea-border-width));background-clip:padding-box;box-sizing:border-box}:host textarea{box-sizing:border-box;font-family:inherit;overflow:auto;flex:1;width:100%;min-height:var(--wcs-textarea-min-height);max-height:var(--wcs-internal-textarea-max-height);background-color:transparent;color:var(--wcs-textarea-value-color);font-weight:var(--wcs-textarea-value-font-weight) !important;border:none;padding-top:var(--wcs-textarea-padding-top);padding-bottom:var(--wcs-textarea-padding-bottom);padding-left:var(--wcs-internal-textarea-padding-left);padding-right:var(--wcs-internal-textarea-padding-right);font-size:1rem;line-height:1.5}:host textarea::placeholder{color:var(--wcs-textarea-placeholder-color);opacity:1;font-weight:var(--wcs-textarea-placeholder-font-weight);font-style:var(--wcs-textarea-placeholder-font-style)}:host textarea:focus{box-shadow:none;outline:0}:host wcs-mat-icon{margin-left:var(--wcs-internal-textarea-padding-left);color:var(--wcs-textarea-icon-color-default)}:host([disabled]){--wcs-textarea-background-color:var(--wcs-semantic-color-background-control-disabled);outline:var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-disabled)}:host([disabled]) textarea{color:var(--wcs-textarea-text-color-disabled);cursor:not-allowed}:host([disabled]) textarea::placeholder{color:var(--wcs-textarea-text-color-disabled)}:host([disabled]) wcs-mat-icon{color:var(--wcs-textarea-icon-color-disabled)}:host([icon]) textarea{padding-left:0}:host([state=error]){outline-color:var(--wcs-textarea-border-color-error) !important}:host(:focus-within){outline:var(--wcs-textarea-border-style-focus) var(--wcs-textarea-border-width-focus) var(--wcs-textarea-border-color-focus);outline-offset:calc(var(--wcs-textarea-border-width-focus) * -1)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-textarea-icon-color-focus)}";const u=w;const f=["tabindex","title"];const b=t(class t extends e{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsChange=a(this,"wcsChange",7);this.wcsInput=a(this,"wcsInput",7);this.wcsBlur=a(this,"wcsBlur",7);this.wcsFocus=a(this,"wcsFocus",7);this.inputId=`wcs-textarea-${x++}`;this.inheritedAttributes={};this.onInput=t=>{if(this.nativeInput){this.value=this.nativeInput.value}this.wcsInput.emit(t)};this.onChange=t=>{this.wcsChange.emit({value:this.nativeInput.value})};this.onFocus=t=>{if(this.fireFocusEvents){this.wcsFocus.emit(t)}};this.onBlur=t=>{if(this.fireFocusEvents){this.wcsBlur.emit(t)}};this.fireFocusEvents=true;this.autocapitalize="none";this.autofocus=false;this.debounce=0;this.disabled=false;this.icon=undefined;this.inputmode=undefined;this.enterkeyhint=undefined;this.maxlength=undefined;this.minlength=undefined;this.name=this.inputId;this.placeholder=undefined;this.readonly=false;this.required=false;this.spellcheck=false;this.state="initial";this.cols=undefined;this.rows=undefined;this.wrap=undefined;this.autoGrow=false;this.value="";this.resize=undefined}debounceChanged(){this.wcsInput=i(this.wcsInput,this.debounce)}valueChanged(){const t=this.nativeInput;const e=this.getValue();if(t&&t.value!==e){t.value=e}this.runAutoGrow()}connectedCallback(){this.debounceChanged();{document.dispatchEvent(new CustomEvent("wcsInputDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("wcsInputDidUnload",{detail:this.el}))}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},c(this.el)),n(this.el,f))}componentDidLoad(){d((()=>this.runAutoGrow()))}runAutoGrow(){const t=this.nativeInput;if(t&&this.autoGrow){r((()=>{t.style.height="auto";t.style.height=t.scrollHeight+"px"}))}}async setAriaAttribute(t,e){l(this.nativeInput,t,e)}async fitContent(){d((()=>this.runAutoGrow()))}async setBlur(){if(this.nativeInput){this.nativeInput.blur()}}getInputElement(){return Promise.resolve(this.nativeInput)}getValue(){return this.value||""}render(){const t=this.getValue();const e=Object.assign({},this.resize&&{resize:this.resize});return s(o,{key:"2ffd19f34c0feb9a49931942e48d7b7193ff377e","aria-disabled":this.disabled?"true":null},this.icon?s("wcs-mat-icon",{icon:this.icon,size:"m"}):null,s("textarea",Object.assign({key:"ce0c430d962cf93b962c7a6227ec98d6cfcc46f0",class:"native-textarea",ref:t=>this.nativeInput=t,autoCapitalize:this.autocapitalize,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,disabled:this.disabled,maxLength:this.maxlength,minLength:this.minlength,name:this.name,placeholder:this.placeholder||"",readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,cols:this.cols,rows:this.rows,wrap:this.wrap,onInput:this.onInput,onChange:this.onChange,onBlur:this.onBlur,onFocus:this.onFocus,style:e},this.inheritedAttributes),t))}static get delegatesFocus(){return true}get el(){return this}static get watchers(){return{debounce:["debounceChanged"],value:["valueChanged"]}}static get style(){return u}},[17,"wcs-textarea",{fireFocusEvents:[4,"fire-focus-events"],autocapitalize:[1],autofocus:[4],debounce:[2],disabled:[516],icon:[1],inputmode:[1],enterkeyhint:[1],maxlength:[2],minlength:[2],name:[1],placeholder:[1],readonly:[516],required:[516],spellcheck:[4],state:[513],cols:[2],rows:[2],wrap:[1],autoGrow:[516,"auto-grow"],value:[1025],resize:[513],setAriaAttribute:[64],fitContent:[64],setBlur:[64],getInputElement:[64]},undefined,{debounce:["debounceChanged"],value:["valueChanged"]}]);let x=0;function g(){if(typeof customElements==="undefined"){return}const t=["wcs-textarea","wcs-mat-icon"];t.forEach((t=>{switch(t){case"wcs-textarea":if(!customElements.get(t)){customElements.define(t,b)}break;case"wcs-mat-icon":if(!customElements.get(t)){h()}break}}))}g();const m=b;const v=g;export{m as WcsTextarea,v as defineCustomElement};
+import{p as t,H as e,d as a,r,h as s,c as o}from"./p-2bef72c7.js";import{y as i,i as c,a as n,D as d,s as l}from"./p-e803bb26.js";import{d as h}from"./p-c028b8e6.js";const w=":host{--wcs-textarea-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-textarea-value-color:var(--wcs-semantic-color-text-primary);--wcs-textarea-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-textarea-placeholder-color:var(--wcs-semantic-color-text-tertiary);--wcs-textarea-placeholder-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-textarea-placeholder-font-style:var(--wcs-semantic-font-style-control-placeholder);--wcs-textarea-icon-color-default:var(--wcs-semantic-color-foreground-brand);--wcs-textarea-icon-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-textarea-icon-color-focus:var(--wcs-semantic-color-foreground-brand);--wcs-textarea-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-textarea-border-color-disabled:var(--wcs-semantic-color-border-disabled);--wcs-textarea-border-color-error:var(--wcs-semantic-color-border-critical);--wcs-textarea-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-textarea-border-style-default:solid;--wcs-textarea-border-style-error:solid;--wcs-textarea-border-style-focus:var(--wcs-semantic-border-style-focus-control);--wcs-internal-textarea-border-radius-left:var(--wcs-textarea-border-radius-left, var(--wcs-semantic-border-radius-base));--wcs-internal-textarea-border-radius-right:var(--wcs-textarea-border-radius-right, var(--wcs-semantic-border-radius-base));--wcs-textarea-border-width:var(--wcs-semantic-border-width-default);--wcs-textarea-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-textarea-gap:var(--wcs-semantic-spacing-base);--wcs-textarea-padding-top:var(--wcs-semantic-spacing-base);--wcs-textarea-padding-bottom:var(--wcs-semantic-spacing-base);--wcs-internal-textarea-padding-left:var(--wcs-textarea-padding-left, var(--wcs-semantic-spacing-large));--wcs-internal-textarea-padding-right:var(--wcs-textarea-padding-right, var(--wcs-semantic-spacing-large));--wcs-textarea-min-height:var(--wcs-semantic-size-m);--wcs-internal-textarea-max-height:var(--wcs-textarea-max-height, unset);--wcs-textarea-background-color:var(--wcs-semantic-color-background-control-default);display:flex;flex-direction:row;align-items:center;gap:var(--wcs-textarea-gap);width:100%;border-radius:var(--wcs-internal-textarea-border-radius-left) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-left);background-color:var(--wcs-textarea-background-color);outline:var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-default);outline-offset:calc(-1 * var(--wcs-textarea-border-width));background-clip:padding-box;box-sizing:border-box}:host textarea{box-sizing:border-box;font-family:inherit;overflow:auto;flex:1;width:100%;min-height:var(--wcs-textarea-min-height);max-height:var(--wcs-internal-textarea-max-height);background-color:transparent;color:var(--wcs-textarea-value-color);font-weight:var(--wcs-textarea-value-font-weight) !important;border:none;padding-top:var(--wcs-textarea-padding-top);padding-bottom:var(--wcs-textarea-padding-bottom);padding-left:var(--wcs-internal-textarea-padding-left);padding-right:var(--wcs-internal-textarea-padding-right);font-size:1rem;line-height:1.5}:host textarea::placeholder{color:var(--wcs-textarea-placeholder-color);opacity:1;font-weight:var(--wcs-textarea-placeholder-font-weight);font-style:var(--wcs-textarea-placeholder-font-style)}:host textarea:focus{box-shadow:none;outline:0}:host wcs-mat-icon{margin-left:var(--wcs-internal-textarea-padding-left);color:var(--wcs-textarea-icon-color-default)}:host([disabled]){--wcs-textarea-background-color:var(--wcs-semantic-color-background-control-disabled);outline:var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-disabled)}:host([disabled]) textarea{color:var(--wcs-textarea-text-color-disabled);cursor:not-allowed}:host([disabled]) textarea::placeholder{color:var(--wcs-textarea-text-color-disabled)}:host([disabled]) wcs-mat-icon{color:var(--wcs-textarea-icon-color-disabled)}:host([icon]) textarea{padding-left:0}:host([state=error]){outline-color:var(--wcs-textarea-border-color-error) !important}:host(:focus-within){outline:var(--wcs-textarea-border-style-focus) var(--wcs-textarea-border-width-focus) var(--wcs-textarea-border-color-focus);outline-offset:calc(var(--wcs-textarea-border-width-focus) * -1)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-textarea-icon-color-focus)}";const u=w;const b=["tabindex","title"];const x=t(class t extends e{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsChange=a(this,"wcsChange",7);this.wcsInput=a(this,"wcsInput",7);this.wcsBlur=a(this,"wcsBlur",7);this.wcsFocus=a(this,"wcsFocus",7);this.inputId=`wcs-textarea-${f++}`;this.inheritedAttributes={};this.onInput=t=>{if(this.nativeInput){this.value=this.nativeInput.value}this.wcsInput.emit(t)};this.onChange=t=>{this.wcsChange.emit({value:this.nativeInput.value})};this.onFocus=t=>{if(this.fireFocusEvents){this.wcsFocus.emit(t)}};this.onBlur=t=>{if(this.fireFocusEvents){this.wcsBlur.emit(t)}};this.fireFocusEvents=true;this.autocapitalize="none";this.autofocus=false;this.debounce=0;this.disabled=false;this.icon=undefined;this.inputmode=undefined;this.enterkeyhint=undefined;this.maxlength=undefined;this.minlength=undefined;this.name=this.inputId;this.placeholder=undefined;this.readonly=false;this.required=false;this.spellcheck=false;this.state="initial";this.cols=undefined;this.rows=undefined;this.wrap=undefined;this.autoGrow=false;this.value="";this.resize=undefined}debounceChanged(){this.wcsInput=i(this.wcsInput,this.debounce)}valueChanged(){const t=this.nativeInput;const e=this.getValue();if(t&&t.value!==e){t.value=e}this.runAutoGrow()}connectedCallback(){this.debounceChanged();{document.dispatchEvent(new CustomEvent("wcsInputDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("wcsInputDidUnload",{detail:this.el}))}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},c(this.el)),n(this.el,b))}componentDidLoad(){d((()=>this.runAutoGrow()))}runAutoGrow(){const t=this.nativeInput;if(t&&this.autoGrow){r((()=>{t.style.height="auto";t.style.height=t.scrollHeight+"px"}))}}async setAriaAttribute(t,e){l(this.nativeInput,t,e)}async fitContent(){d((()=>this.runAutoGrow()))}async setBlur(){if(this.nativeInput){this.nativeInput.blur()}}getInputElement(){return Promise.resolve(this.nativeInput)}getValue(){return this.value||""}render(){const t=this.getValue();const e=Object.assign({},this.resize&&{resize:this.resize});return s(o,{key:"daa597288a0d494b61344a1c60e21208823964b6","aria-disabled":this.disabled?"true":null},this.icon?s("wcs-mat-icon",{icon:this.icon,size:"m"}):null,s("textarea",Object.assign({key:"978490deee1bb0808336ad345f9ec9daa8b0e30e",class:"native-textarea",ref:t=>this.nativeInput=t,autoCapitalize:this.autocapitalize,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,disabled:this.disabled,maxLength:this.maxlength,minLength:this.minlength,name:this.name,placeholder:this.placeholder||"",readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,cols:this.cols,rows:this.rows,wrap:this.wrap,onInput:this.onInput,onChange:this.onChange,onBlur:this.onBlur,onFocus:this.onFocus,style:e},this.inheritedAttributes),t))}static get delegatesFocus(){return true}get el(){return this}static get watchers(){return{debounce:["debounceChanged"],value:["valueChanged"]}}static get style(){return u}},[17,"wcs-textarea",{fireFocusEvents:[4,"fire-focus-events"],autocapitalize:[1],autofocus:[4],debounce:[2],disabled:[516],icon:[1],inputmode:[1],enterkeyhint:[1],maxlength:[2],minlength:[2],name:[1],placeholder:[1],readonly:[516],required:[516],spellcheck:[4],state:[513],cols:[2],rows:[2],wrap:[1],autoGrow:[516,"auto-grow"],value:[1025],resize:[513],setAriaAttribute:[64],fitContent:[64],setBlur:[64],getInputElement:[64]},undefined,{debounce:["debounceChanged"],value:["valueChanged"]}]);let f=0;function g(){if(typeof customElements==="undefined"){return}const t=["wcs-textarea","wcs-mat-icon"];t.forEach((t=>{switch(t){case"wcs-textarea":if(!customElements.get(t)){customElements.define(t,x)}break;case"wcs-mat-icon":if(!customElements.get(t)){h()}break}}))}g();const m=x;const v=g;export{m as WcsTextarea,v as defineCustomElement};
 //# sourceMappingURL=wcs-textarea.js.map

package/composite-elements/wcs-tooltip.js

@@ -3,5 +3,5 @@ import{p as t,H as e,h as n,c as i}from"./p-2bef72c7.js";import{a as r,c as o}fr
 * tippy.js v6.3.7
 * (c) 2017-2021 atomiks
 * MIT License
-*/var f="tippy-box";var s="tippy-content";var c="tippy-backdrop";var d="tippy-arrow";var l="tippy-svg-arrow";var v={passive:true,capture:true};var p=function t(){return document.body};function h(t,e,n){if(Array.isArray(t)){var i=t[e];return i==null?Array.isArray(n)?n[e]:n:i}return t}function m(t,e){var n={}.toString.call(t);return n.indexOf("[object")===0&&n.indexOf(e+"]")>-1}function b(t,e){return typeof t==="function"?t.apply(void 0,e):t}function y(t,e){if(e===0){return t}var n;return function(i){clearTimeout(n);n=setTimeout((function(){t(i)}),e)}}function g(t){return t.split(/\s+/).filter(Boolean)}function w(t){return[].concat(t)}function T(t,e){if(t.indexOf(e)===-1){t.push(e)}}function x(t){return t.filter((function(e,n){return t.indexOf(e)===n}))}function O(t){return t.split("-")[0]}function j(t){return[].slice.call(t)}function k(t){return Object.keys(t).reduce((function(e,n){if(t[n]!==undefined){e[n]=t[n]}return e}),{})}function P(){return document.createElement("div")}function C(t){return["Element","Fragment"].some((function(e){return m(t,e)}))}function S(t){return m(t,"NodeList")}function A(t){return m(t,"MouseEvent")}function W(t){return!!(t&&t._tippy&&t._tippy.reference===t)}function E(t){if(C(t)){return[t]}if(S(t)){return j(t)}if(Array.isArray(t)){return t}return j(document.querySelectorAll(t))}function H(t,e){t.forEach((function(t){if(t){t.style.transitionDuration=e+"ms"}}))}function U(t,e){t.forEach((function(t){if(t){t.setAttribute("data-state",e)}}))}function B(t){var e;var n=w(t),i=n[0];return i!=null&&(e=i.ownerDocument)!=null&&e.body?i.ownerDocument:document}function D(t,e){var n=e.clientX,i=e.clientY;return t.every((function(t){var e=t.popperRect,r=t.popperState,o=t.props;var a=o.interactiveBorder;var u=O(r.placement);var f=r.modifiersData.offset;if(!f){return true}var s=u==="bottom"?f.top.y:0;var c=u==="top"?f.bottom.y:0;var d=u==="right"?f.left.x:0;var l=u==="left"?f.right.x:0;var v=e.top-i+s>a;var p=i-e.bottom-c>a;var h=e.left-n+d>a;var m=n-e.right-l>a;return v||p||h||m}))}function F(t,e,n){var i=e+"EventListener";["transitionend","webkitTransitionEnd"].forEach((function(e){t[i](e,n)}))}function M(t,e){var n=e;while(n){var i;if(t.contains(n)){return true}n=n.getRootNode==null?void 0:(i=n.getRootNode())==null?void 0:i.host}return false}var L={isTouch:false};var R=0;function q(){if(L.isTouch){return}L.isTouch=true;if(window.performance){document.addEventListener("mousemove",I)}}function I(){var t=performance.now();if(t-R<20){L.isTouch=false;document.removeEventListener("mousemove",I)}R=t}function N(){var t=document.activeElement;if(W(t)){var e=t._tippy;if(t.blur&&!e.state.isVisible){t.blur()}}}function K(){document.addEventListener("touchstart",q,v);window.addEventListener("blur",N)}var $=typeof window!=="undefined"&&typeof document!=="undefined";var z=$?!!window.msCrypto:false;var J={animateFill:false,followCursor:false,inlinePositioning:false,sticky:false};var V={allowHTML:false,animation:"fade",arrow:true,content:"",inertia:false,maxWidth:350,role:"tooltip",theme:"",zIndex:9999};var G=Object.assign({appendTo:p,aria:{content:"auto",expanded:"auto"},delay:0,duration:[300,250],getReferenceClientRect:null,hideOnClick:true,ignoreAttributes:false,interactive:false,interactiveBorder:2,interactiveDebounce:0,moveTransition:"",offset:[0,10],onAfterUpdate:function t(){},onBeforeUpdate:function t(){},onCreate:function t(){},onDestroy:function t(){},onHidden:function t(){},onHide:function t(){},onMount:function t(){},onShow:function t(){},onShown:function t(){},onTrigger:function t(){},onUntrigger:function t(){},onClickOutside:function t(){},placement:"top",plugins:[],popperOptions:{},render:null,showOnCreate:false,touch:true,trigger:"mouseenter focus",triggerTarget:null},J,V);var Q=Object.keys(G);var X=function t(e){var n=Object.keys(e);n.forEach((function(t){G[t]=e[t]}))};function Y(t){var e=t.plugins||[];var n=e.reduce((function(e,n){var i=n.name,r=n.defaultValue;if(i){var o;e[i]=t[i]!==undefined?t[i]:(o=G[i])!=null?o:r}return e}),{});return Object.assign({},t,n)}function Z(t,e){var n=e?Object.keys(Y(Object.assign({},G,{plugins:e}))):Q;var i=n.reduce((function(e,n){var i=(t.getAttribute("data-tippy-"+n)||"").trim();if(!i){return e}if(n==="content"){e[n]=i}else{try{e[n]=JSON.parse(i)}catch(t){e[n]=i}}return e}),{});return i}function _(t,e){var n=Object.assign({},e,{content:b(e.content,[t])},e.ignoreAttributes?{}:Z(t,e.plugins));n.aria=Object.assign({},G.aria,n.aria);n.aria={expanded:n.aria.expanded==="auto"?e.interactive:n.aria.expanded,content:n.aria.content==="auto"?e.interactive?null:"describedby":n.aria.content};return n}var tt=function t(){return"innerHTML"};function et(t,e){t[tt()]=e}function nt(t){var e=P();if(t===true){e.className=d}else{e.className=l;if(C(t)){e.appendChild(t)}else{et(e,t)}}return e}function it(t,e){if(C(e.content)){et(t,"");t.appendChild(e.content)}else if(typeof e.content!=="function"){if(e.allowHTML){et(t,e.content)}else{t.textContent=e.content}}}function rt(t){var e=t.firstElementChild;var n=j(e.children);return{box:e,content:n.find((function(t){return t.classList.contains(s)})),arrow:n.find((function(t){return t.classList.contains(d)||t.classList.contains(l)})),backdrop:n.find((function(t){return t.classList.contains(c)}))}}function ot(t){var e=P();var n=P();n.className=f;n.setAttribute("data-state","hidden");n.setAttribute("tabindex","-1");var i=P();i.className=s;i.setAttribute("data-state","hidden");it(i,t.props);e.appendChild(n);n.appendChild(i);r(t.props,t.props);function r(n,i){var r=rt(e),o=r.box,a=r.content,u=r.arrow;if(i.theme){o.setAttribute("data-theme",i.theme)}else{o.removeAttribute("data-theme")}if(typeof i.animation==="string"){o.setAttribute("data-animation",i.animation)}else{o.removeAttribute("data-animation")}if(i.inertia){o.setAttribute("data-inertia","")}else{o.removeAttribute("data-inertia")}o.style.maxWidth=typeof i.maxWidth==="number"?i.maxWidth+"px":i.maxWidth;if(i.role){o.setAttribute("role",i.role)}else{o.removeAttribute("role")}if(n.content!==i.content||n.allowHTML!==i.allowHTML){it(a,t.props)}if(i.arrow){if(!u){o.appendChild(nt(i.arrow))}else if(n.arrow!==i.arrow){o.removeChild(u);o.appendChild(nt(i.arrow))}}else if(u){o.removeChild(u)}}return{popper:e,onUpdate:r}}ot.$$tippy=true;var at=1;var ut=[];var ft=[];function st(t,e){var n=_(t,Object.assign({},G,Y(k(e))));var i;var r;var a;var u=false;var f=false;var s=false;var c=false;var d;var l;var m;var O=[];var C=y(kt,n.interactiveDebounce);var S;var W=at++;var E=null;var R=x(n.plugins);var q={isEnabled:true,isVisible:false,isDestroyed:false,isMounted:false,isShown:false};var I={id:W,reference:t,popper:P(),popperInstance:E,props:n,state:q,plugins:R,clearDelayTimeouts:Mt,setProps:Lt,setContent:Rt,show:qt,hide:It,hideWithInteractivity:Nt,enable:Dt,disable:Ft,unmount:Kt,destroy:$t};if(!n.render){return I}var N=n.render(I),K=N.popper,$=N.onUpdate;K.setAttribute("data-tippy-root","");K.id="tippy-"+I.id;I.popper=K;t._tippy=I;K._tippy=I;var J=R.map((function(t){return t.fn(I)}));var V=t.hasAttribute("aria-expanded");xt();dt();ot();st("onCreate",[I]);if(n.showOnCreate){Ut()}K.addEventListener("mouseenter",(function(){if(I.props.interactive&&I.state.isVisible){I.clearDelayTimeouts()}}));K.addEventListener("mouseleave",(function(){if(I.props.interactive&&I.props.trigger.indexOf("mouseenter")>=0){et().addEventListener("mousemove",C)}}));return I;function Q(){var t=I.props.touch;return Array.isArray(t)?t:[t,0]}function X(){return Q()[0]==="hold"}function Z(){var t;return!!((t=I.props.render)!=null&&t.$$tippy)}function tt(){return S||t}function et(){var t=tt().parentNode;return t?B(t):document}function nt(){return rt(K)}function it(t){if(I.state.isMounted&&!I.state.isVisible||L.isTouch||d&&d.type==="focus"){return 0}return h(I.props.delay,t?0:1,G.delay)}function ot(t){if(t===void 0){t=false}K.style.pointerEvents=I.props.interactive&&!t?"":"none";K.style.zIndex=""+I.props.zIndex}function st(t,e,n){if(n===void 0){n=true}J.forEach((function(n){if(n[t]){n[t].apply(n,e)}}));if(n){var i;(i=I.props)[t].apply(i,e)}}function ct(){var e=I.props.aria;if(!e.content){return}var n="aria-"+e.content;var i=K.id;var r=w(I.props.triggerTarget||t);r.forEach((function(t){var e=t.getAttribute(n);if(I.state.isVisible){t.setAttribute(n,e?e+" "+i:i)}else{var r=e&&e.replace(i,"").trim();if(r){t.setAttribute(n,r)}else{t.removeAttribute(n)}}}))}function dt(){if(V||!I.props.aria.expanded){return}var e=w(I.props.triggerTarget||t);e.forEach((function(t){if(I.props.interactive){t.setAttribute("aria-expanded",I.state.isVisible&&t===tt()?"true":"false")}else{t.removeAttribute("aria-expanded")}}))}function lt(){et().removeEventListener("mousemove",C);ut=ut.filter((function(t){return t!==C}))}function vt(e){if(L.isTouch){if(s||e.type==="mousedown"){return}}var n=e.composedPath&&e.composedPath()[0]||e.target;if(I.props.interactive&&M(K,n)){return}if(w(I.props.triggerTarget||t).some((function(t){return M(t,n)}))){if(L.isTouch){return}if(I.state.isVisible&&I.props.trigger.indexOf("click")>=0){return}}else{st("onClickOutside",[I,e])}if(I.props.hideOnClick===true){I.clearDelayTimeouts();I.hide();f=true;setTimeout((function(){f=false}));if(!I.state.isMounted){bt()}}}function pt(){s=true}function ht(){s=false}function mt(){var t=et();t.addEventListener("mousedown",vt,true);t.addEventListener("touchend",vt,v);t.addEventListener("touchstart",ht,v);t.addEventListener("touchmove",pt,v)}function bt(){var t=et();t.removeEventListener("mousedown",vt,true);t.removeEventListener("touchend",vt,v);t.removeEventListener("touchstart",ht,v);t.removeEventListener("touchmove",pt,v)}function yt(t,e){wt(t,(function(){if(!I.state.isVisible&&K.parentNode&&K.parentNode.contains(K)){e()}}))}function gt(t,e){wt(t,e)}function wt(t,e){var n=nt().box;function i(t){if(t.target===n){F(n,"remove",i);e()}}if(t===0){return e()}F(n,"remove",l);F(n,"add",i);l=i}function Tt(e,n,i){if(i===void 0){i=false}var r=w(I.props.triggerTarget||t);r.forEach((function(t){t.addEventListener(e,n,i);O.push({node:t,eventType:e,handler:n,options:i})}))}function xt(){if(X()){Tt("touchstart",jt,{passive:true});Tt("touchend",Pt,{passive:true})}g(I.props.trigger).forEach((function(t){if(t==="manual"){return}Tt(t,jt);switch(t){case"mouseenter":Tt("mouseleave",Pt);break;case"focus":Tt(z?"focusout":"blur",Ct);break;case"focusin":Tt("focusout",Ct);break}}))}function Ot(){O.forEach((function(t){var e=t.node,n=t.eventType,i=t.handler,r=t.options;e.removeEventListener(n,i,r)}));O=[]}function jt(t){var e;var n=false;if(!I.state.isEnabled||St(t)||f){return}var i=((e=d)==null?void 0:e.type)==="focus";d=t;S=t.currentTarget;dt();if(!I.state.isVisible&&A(t)){ut.forEach((function(e){return e(t)}))}if(t.type==="click"&&(I.props.trigger.indexOf("mouseenter")<0||u)&&I.props.hideOnClick!==false&&I.state.isVisible){n=true}else{Ut(t)}if(t.type==="click"){u=!n}if(n&&!i){Bt(t)}}function kt(t){var e=t.target;var i=tt().contains(e)||K.contains(e);if(t.type==="mousemove"&&i){return}var r=Ht().concat(K).map((function(t){var e;var i=t._tippy;var r=(e=i.popperInstance)==null?void 0:e.state;if(r){return{popperRect:t.getBoundingClientRect(),popperState:r,props:n}}return null})).filter(Boolean);if(D(r,t)){lt();Bt(t)}}function Pt(t){var e=St(t)||I.props.trigger.indexOf("click")>=0&&u;if(e){return}if(I.props.interactive){I.hideWithInteractivity(t);return}Bt(t)}function Ct(t){if(I.props.trigger.indexOf("focusin")<0&&t.target!==tt()){return}if(I.props.interactive&&t.relatedTarget&&K.contains(t.relatedTarget)){return}Bt(t)}function St(t){return L.isTouch?X()!==t.type.indexOf("touch")>=0:false}function At(){Wt();var e=I.props,n=e.popperOptions,i=e.placement,r=e.offset,a=e.getReferenceClientRect,u=e.moveTransition;var f=Z()?rt(K).arrow:null;var s=a?{getBoundingClientRect:a,contextElement:a.contextElement||tt()}:t;var c={name:"$$tippy",enabled:true,phase:"beforeWrite",requires:["computeStyles"],fn:function t(e){var n=e.state;if(Z()){var i=nt(),r=i.box;["placement","reference-hidden","escaped"].forEach((function(t){if(t==="placement"){r.setAttribute("data-placement",n.placement)}else{if(n.attributes.popper["data-popper-"+t]){r.setAttribute("data-"+t,"")}else{r.removeAttribute("data-"+t)}}}));n.attributes.popper={}}}};var d=[{name:"offset",options:{offset:r}},{name:"preventOverflow",options:{padding:{top:2,bottom:2,left:5,right:5}}},{name:"flip",options:{padding:5}},{name:"computeStyles",options:{adaptive:!u}},c];if(Z()&&f){d.push({name:"arrow",options:{element:f,padding:3}})}d.push.apply(d,(n==null?void 0:n.modifiers)||[]);I.popperInstance=o(s,K,Object.assign({},n,{placement:i,onFirstUpdate:m,modifiers:d}))}function Wt(){if(I.popperInstance){I.popperInstance.destroy();I.popperInstance=null}}function Et(){var t=I.props.appendTo;var e;var n=tt();if(I.props.interactive&&t===p||t==="parent"){e=n.parentNode}else{e=b(t,[n])}if(!e.contains(K)){e.appendChild(K)}I.state.isMounted=true;At()}function Ht(){return j(K.querySelectorAll("[data-tippy-root]"))}function Ut(t){I.clearDelayTimeouts();if(t){st("onTrigger",[I,t])}mt();var e=it(true);var n=Q(),r=n[0],o=n[1];if(L.isTouch&&r==="hold"&&o){e=o}if(e){i=setTimeout((function(){I.show()}),e)}else{I.show()}}function Bt(t){I.clearDelayTimeouts();st("onUntrigger",[I,t]);if(!I.state.isVisible){bt();return}if(I.props.trigger.indexOf("mouseenter")>=0&&I.props.trigger.indexOf("click")>=0&&["mouseleave","mousemove"].indexOf(t.type)>=0&&u){return}var e=it(false);if(e){r=setTimeout((function(){if(I.state.isVisible){I.hide()}}),e)}else{a=requestAnimationFrame((function(){I.hide()}))}}function Dt(){I.state.isEnabled=true}function Ft(){I.hide();I.state.isEnabled=false}function Mt(){clearTimeout(i);clearTimeout(r);cancelAnimationFrame(a)}function Lt(e){if(I.state.isDestroyed){return}st("onBeforeUpdate",[I,e]);Ot();var n=I.props;var i=_(t,Object.assign({},n,k(e),{ignoreAttributes:true}));I.props=i;xt();if(n.interactiveDebounce!==i.interactiveDebounce){lt();C=y(kt,i.interactiveDebounce)}if(n.triggerTarget&&!i.triggerTarget){w(n.triggerTarget).forEach((function(t){t.removeAttribute("aria-expanded")}))}else if(i.triggerTarget){t.removeAttribute("aria-expanded")}dt();ot();if($){$(n,i)}if(I.popperInstance){At();Ht().forEach((function(t){requestAnimationFrame(t._tippy.popperInstance.forceUpdate)}))}st("onAfterUpdate",[I,e])}function Rt(t){I.setProps({content:t})}function qt(){var t=I.state.isVisible;var e=I.state.isDestroyed;var n=!I.state.isEnabled;var i=L.isTouch&&!I.props.touch;var r=h(I.props.duration,0,G.duration);if(t||e||n||i){return}if(tt().hasAttribute("disabled")){return}st("onShow",[I],false);if(I.props.onShow(I)===false){return}I.state.isVisible=true;if(Z()){K.style.visibility="visible"}ot();mt();if(!I.state.isMounted){K.style.transition="none"}if(Z()){var o=nt(),a=o.box,u=o.content;H([a,u],0)}m=function t(){var e;if(!I.state.isVisible||c){return}c=true;K.style.transition=I.props.moveTransition;if(Z()&&I.props.animation){var n=nt(),i=n.box,o=n.content;H([i,o],r);U([i,o],"visible")}ct();dt();T(ft,I);(e=I.popperInstance)==null?void 0:e.forceUpdate();st("onMount",[I]);if(I.props.animation&&Z()){gt(r,(function(){I.state.isShown=true;st("onShown",[I])}))}};Et()}function It(){var t=!I.state.isVisible;var e=I.state.isDestroyed;var n=!I.state.isEnabled;var i=h(I.props.duration,1,G.duration);if(t||e||n){return}st("onHide",[I],false);if(I.props.onHide(I)===false){return}I.state.isVisible=false;I.state.isShown=false;c=false;u=false;if(Z()){K.style.visibility="hidden"}lt();bt();ot(true);if(Z()){var r=nt(),o=r.box,a=r.content;if(I.props.animation){H([o,a],i);U([o,a],"hidden")}}ct();dt();if(I.props.animation){if(Z()){yt(i,I.unmount)}}else{I.unmount()}}function Nt(t){et().addEventListener("mousemove",C);T(ut,C);C(t)}function Kt(){if(I.state.isVisible){I.hide()}if(!I.state.isMounted){return}Wt();Ht().forEach((function(t){t._tippy.unmount()}));if(K.parentNode){K.parentNode.removeChild(K)}ft=ft.filter((function(t){return t!==I}));I.state.isMounted=false;st("onHidden",[I])}function $t(){if(I.state.isDestroyed){return}I.clearDelayTimeouts();I.unmount();Ot();delete t._tippy;I.state.isDestroyed=true;st("onDestroy",[I])}}function ct(t,e){if(e===void 0){e={}}var n=G.plugins.concat(e.plugins||[]);K();var i=Object.assign({},e,{plugins:n});var r=E(t);var o=r.reduce((function(t,e){var n=e&&st(e,i);if(n){t.push(n)}return t}),[]);return C(t)?o[0]:o}ct.defaultProps=G;ct.setDefaultProps=X;ct.currentInput=L;Object.assign({},r,{effect:function t(e){var n=e.state;var i={popper:{position:n.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};Object.assign(n.elements.popper.style,i.popper);n.styles=i;if(n.elements.arrow){Object.assign(n.elements.arrow.style,i.arrow)}}});ct.setDefaultProps({render:ot});const dt=":host{display:none}";const lt=dt;const vt=["WCS-BUTTON"];const pt=t(class t extends e{constructor(){super();this.__registerHost();this.__attachShadow();this.for=undefined;this.position="bottom";this.interactive=false;this.maxWidth=350;this.delay=0;this.duration=[300,250];this.trigger="mouseenter focus";this.theme="dark";this.content=undefined;this.appendTo=undefined}componentWillLoad(){this.forElement=document.getElementById(this.for);if(!this.forElement){console.error('[wcs-tooltip]: The element with the id provided in the "for" property does not exist');return}this.tippyInstance=ct(this.forElement,{appendTo:this.appendTo||(()=>document.body),theme:this.theme,allowHTML:true,content:this.getTooltipContentFromPropAndSlot(),maxWidth:this.maxWidth,placement:this.position,delay:this.delay,duration:this.duration,interactive:this.interactive,trigger:this.trigger,onShow:()=>this.onShow(),onHide:()=>this.onHide()})}onShow(){if(!this.forElement){return}if(this.forElement.tagName&&vt.indexOf(this.forElement.tagName)!==-1){if(u(this.forElement)){if(this.interactive){this.forElement.setAriaAttribute("aria-expanded","true")}}}}onHide(){if(!this.forElement){return}if(this.forElement.tagName&&vt.indexOf(this.forElement.tagName)!==-1){if(u(this.forElement)){if(this.interactive){this.forElement.setAriaAttribute("aria-expanded","false")}}}}async handleKeyDown(t){if(a(t)){if(this.tippyInstance.state.isShown){await this.hide()}}}getTooltipContentFromPropAndSlot(){if(this.content){return this.content+this.el.innerHTML}return this.el.innerHTML}updateProps(){var t;(t=this.tippyInstance)===null||t===void 0?void 0:t.setProps({interactive:this.interactive,placement:this.position,maxWidth:this.maxWidth,theme:this.theme,delay:this.delay,duration:this.duration,trigger:this.trigger})}updateTippyContent(){var t;(t=this.tippyInstance)===null||t===void 0?void 0:t.setProps({content:this.getTooltipContentFromPropAndSlot()})}async hide(){this.tippyInstance.hide()}async show(){this.tippyInstance.show()}async disable(){this.tippyInstance.disable()}async enable(){this.tippyInstance.enable()}disconnectedCallback(){var t;(t=this.tippyInstance)===null||t===void 0?void 0:t.destroy()}render(){return n(i,{key:"34f019e113250ce19d69186080c932f838ac5c86",role:"tooltip"},n("slot",{key:"7edce2cfc96d454177668c81d615231369600977",onSlotchange:t=>this.updateTippyContent()}))}get el(){return this}static get watchers(){return{interactive:["updateProps"],position:["updateProps"],maxWidth:["updateProps"],theme:["updateProps"],delay:["updateProps"],duration:["updateProps"],trigger:["updateProps"],content:["updateTippyContent"]}}static get style(){return lt}},[1,"wcs-tooltip",{for:[1],position:[513],interactive:[516],maxWidth:[8,"max-width"],delay:[2],duration:[2],trigger:[1],theme:[1],content:[1],appendTo:[1,"append-to"],hide:[64],show:[64],disable:[64],enable:[64]},[[8,"keydown","handleKeyDown"]],{interactive:["updateProps"],position:["updateProps"],maxWidth:["updateProps"],theme:["updateProps"],delay:["updateProps"],duration:["updateProps"],trigger:["updateProps"],content:["updateTippyContent"]}]);function ht(){if(typeof customElements==="undefined"){return}const t=["wcs-tooltip"];t.forEach((t=>{switch(t){case"wcs-tooltip":if(!customElements.get(t)){customElements.define(t,pt)}break}}))}ht();const mt=pt;const bt=ht;export{mt as WcsTooltip,bt as defineCustomElement};
+*/var f="tippy-box";var s="tippy-content";var c="tippy-backdrop";var d="tippy-arrow";var l="tippy-svg-arrow";var v={passive:true,capture:true};var p=function t(){return document.body};function h(t,e,n){if(Array.isArray(t)){var i=t[e];return i==null?Array.isArray(n)?n[e]:n:i}return t}function m(t,e){var n={}.toString.call(t);return n.indexOf("[object")===0&&n.indexOf(e+"]")>-1}function b(t,e){return typeof t==="function"?t.apply(void 0,e):t}function y(t,e){if(e===0){return t}var n;return function(i){clearTimeout(n);n=setTimeout((function(){t(i)}),e)}}function g(t){return t.split(/\s+/).filter(Boolean)}function w(t){return[].concat(t)}function T(t,e){if(t.indexOf(e)===-1){t.push(e)}}function x(t){return t.filter((function(e,n){return t.indexOf(e)===n}))}function O(t){return t.split("-")[0]}function j(t){return[].slice.call(t)}function k(t){return Object.keys(t).reduce((function(e,n){if(t[n]!==undefined){e[n]=t[n]}return e}),{})}function P(){return document.createElement("div")}function C(t){return["Element","Fragment"].some((function(e){return m(t,e)}))}function S(t){return m(t,"NodeList")}function A(t){return m(t,"MouseEvent")}function W(t){return!!(t&&t._tippy&&t._tippy.reference===t)}function E(t){if(C(t)){return[t]}if(S(t)){return j(t)}if(Array.isArray(t)){return t}return j(document.querySelectorAll(t))}function H(t,e){t.forEach((function(t){if(t){t.style.transitionDuration=e+"ms"}}))}function U(t,e){t.forEach((function(t){if(t){t.setAttribute("data-state",e)}}))}function B(t){var e;var n=w(t),i=n[0];return i!=null&&(e=i.ownerDocument)!=null&&e.body?i.ownerDocument:document}function D(t,e){var n=e.clientX,i=e.clientY;return t.every((function(t){var e=t.popperRect,r=t.popperState,o=t.props;var a=o.interactiveBorder;var u=O(r.placement);var f=r.modifiersData.offset;if(!f){return true}var s=u==="bottom"?f.top.y:0;var c=u==="top"?f.bottom.y:0;var d=u==="right"?f.left.x:0;var l=u==="left"?f.right.x:0;var v=e.top-i+s>a;var p=i-e.bottom-c>a;var h=e.left-n+d>a;var m=n-e.right-l>a;return v||p||h||m}))}function F(t,e,n){var i=e+"EventListener";["transitionend","webkitTransitionEnd"].forEach((function(e){t[i](e,n)}))}function M(t,e){var n=e;while(n){var i;if(t.contains(n)){return true}n=n.getRootNode==null?void 0:(i=n.getRootNode())==null?void 0:i.host}return false}var L={isTouch:false};var R=0;function q(){if(L.isTouch){return}L.isTouch=true;if(window.performance){document.addEventListener("mousemove",I)}}function I(){var t=performance.now();if(t-R<20){L.isTouch=false;document.removeEventListener("mousemove",I)}R=t}function N(){var t=document.activeElement;if(W(t)){var e=t._tippy;if(t.blur&&!e.state.isVisible){t.blur()}}}function K(){document.addEventListener("touchstart",q,v);window.addEventListener("blur",N)}var $=typeof window!=="undefined"&&typeof document!=="undefined";var z=$?!!window.msCrypto:false;var J={animateFill:false,followCursor:false,inlinePositioning:false,sticky:false};var V={allowHTML:false,animation:"fade",arrow:true,content:"",inertia:false,maxWidth:350,role:"tooltip",theme:"",zIndex:9999};var G=Object.assign({appendTo:p,aria:{content:"auto",expanded:"auto"},delay:0,duration:[300,250],getReferenceClientRect:null,hideOnClick:true,ignoreAttributes:false,interactive:false,interactiveBorder:2,interactiveDebounce:0,moveTransition:"",offset:[0,10],onAfterUpdate:function t(){},onBeforeUpdate:function t(){},onCreate:function t(){},onDestroy:function t(){},onHidden:function t(){},onHide:function t(){},onMount:function t(){},onShow:function t(){},onShown:function t(){},onTrigger:function t(){},onUntrigger:function t(){},onClickOutside:function t(){},placement:"top",plugins:[],popperOptions:{},render:null,showOnCreate:false,touch:true,trigger:"mouseenter focus",triggerTarget:null},J,V);var Q=Object.keys(G);var X=function t(e){var n=Object.keys(e);n.forEach((function(t){G[t]=e[t]}))};function Y(t){var e=t.plugins||[];var n=e.reduce((function(e,n){var i=n.name,r=n.defaultValue;if(i){var o;e[i]=t[i]!==undefined?t[i]:(o=G[i])!=null?o:r}return e}),{});return Object.assign({},t,n)}function Z(t,e){var n=e?Object.keys(Y(Object.assign({},G,{plugins:e}))):Q;var i=n.reduce((function(e,n){var i=(t.getAttribute("data-tippy-"+n)||"").trim();if(!i){return e}if(n==="content"){e[n]=i}else{try{e[n]=JSON.parse(i)}catch(t){e[n]=i}}return e}),{});return i}function _(t,e){var n=Object.assign({},e,{content:b(e.content,[t])},e.ignoreAttributes?{}:Z(t,e.plugins));n.aria=Object.assign({},G.aria,n.aria);n.aria={expanded:n.aria.expanded==="auto"?e.interactive:n.aria.expanded,content:n.aria.content==="auto"?e.interactive?null:"describedby":n.aria.content};return n}var tt=function t(){return"innerHTML"};function et(t,e){t[tt()]=e}function nt(t){var e=P();if(t===true){e.className=d}else{e.className=l;if(C(t)){e.appendChild(t)}else{et(e,t)}}return e}function it(t,e){if(C(e.content)){et(t,"");t.appendChild(e.content)}else if(typeof e.content!=="function"){if(e.allowHTML){et(t,e.content)}else{t.textContent=e.content}}}function rt(t){var e=t.firstElementChild;var n=j(e.children);return{box:e,content:n.find((function(t){return t.classList.contains(s)})),arrow:n.find((function(t){return t.classList.contains(d)||t.classList.contains(l)})),backdrop:n.find((function(t){return t.classList.contains(c)}))}}function ot(t){var e=P();var n=P();n.className=f;n.setAttribute("data-state","hidden");n.setAttribute("tabindex","-1");var i=P();i.className=s;i.setAttribute("data-state","hidden");it(i,t.props);e.appendChild(n);n.appendChild(i);r(t.props,t.props);function r(n,i){var r=rt(e),o=r.box,a=r.content,u=r.arrow;if(i.theme){o.setAttribute("data-theme",i.theme)}else{o.removeAttribute("data-theme")}if(typeof i.animation==="string"){o.setAttribute("data-animation",i.animation)}else{o.removeAttribute("data-animation")}if(i.inertia){o.setAttribute("data-inertia","")}else{o.removeAttribute("data-inertia")}o.style.maxWidth=typeof i.maxWidth==="number"?i.maxWidth+"px":i.maxWidth;if(i.role){o.setAttribute("role",i.role)}else{o.removeAttribute("role")}if(n.content!==i.content||n.allowHTML!==i.allowHTML){it(a,t.props)}if(i.arrow){if(!u){o.appendChild(nt(i.arrow))}else if(n.arrow!==i.arrow){o.removeChild(u);o.appendChild(nt(i.arrow))}}else if(u){o.removeChild(u)}}return{popper:e,onUpdate:r}}ot.$$tippy=true;var at=1;var ut=[];var ft=[];function st(t,e){var n=_(t,Object.assign({},G,Y(k(e))));var i;var r;var a;var u=false;var f=false;var s=false;var c=false;var d;var l;var m;var O=[];var C=y(kt,n.interactiveDebounce);var S;var W=at++;var E=null;var R=x(n.plugins);var q={isEnabled:true,isVisible:false,isDestroyed:false,isMounted:false,isShown:false};var I={id:W,reference:t,popper:P(),popperInstance:E,props:n,state:q,plugins:R,clearDelayTimeouts:Mt,setProps:Lt,setContent:Rt,show:qt,hide:It,hideWithInteractivity:Nt,enable:Dt,disable:Ft,unmount:Kt,destroy:$t};if(!n.render){return I}var N=n.render(I),K=N.popper,$=N.onUpdate;K.setAttribute("data-tippy-root","");K.id="tippy-"+I.id;I.popper=K;t._tippy=I;K._tippy=I;var J=R.map((function(t){return t.fn(I)}));var V=t.hasAttribute("aria-expanded");xt();dt();ot();st("onCreate",[I]);if(n.showOnCreate){Ut()}K.addEventListener("mouseenter",(function(){if(I.props.interactive&&I.state.isVisible){I.clearDelayTimeouts()}}));K.addEventListener("mouseleave",(function(){if(I.props.interactive&&I.props.trigger.indexOf("mouseenter")>=0){et().addEventListener("mousemove",C)}}));return I;function Q(){var t=I.props.touch;return Array.isArray(t)?t:[t,0]}function X(){return Q()[0]==="hold"}function Z(){var t;return!!((t=I.props.render)!=null&&t.$$tippy)}function tt(){return S||t}function et(){var t=tt().parentNode;return t?B(t):document}function nt(){return rt(K)}function it(t){if(I.state.isMounted&&!I.state.isVisible||L.isTouch||d&&d.type==="focus"){return 0}return h(I.props.delay,t?0:1,G.delay)}function ot(t){if(t===void 0){t=false}K.style.pointerEvents=I.props.interactive&&!t?"":"none";K.style.zIndex=""+I.props.zIndex}function st(t,e,n){if(n===void 0){n=true}J.forEach((function(n){if(n[t]){n[t].apply(n,e)}}));if(n){var i;(i=I.props)[t].apply(i,e)}}function ct(){var e=I.props.aria;if(!e.content){return}var n="aria-"+e.content;var i=K.id;var r=w(I.props.triggerTarget||t);r.forEach((function(t){var e=t.getAttribute(n);if(I.state.isVisible){t.setAttribute(n,e?e+" "+i:i)}else{var r=e&&e.replace(i,"").trim();if(r){t.setAttribute(n,r)}else{t.removeAttribute(n)}}}))}function dt(){if(V||!I.props.aria.expanded){return}var e=w(I.props.triggerTarget||t);e.forEach((function(t){if(I.props.interactive){t.setAttribute("aria-expanded",I.state.isVisible&&t===tt()?"true":"false")}else{t.removeAttribute("aria-expanded")}}))}function lt(){et().removeEventListener("mousemove",C);ut=ut.filter((function(t){return t!==C}))}function vt(e){if(L.isTouch){if(s||e.type==="mousedown"){return}}var n=e.composedPath&&e.composedPath()[0]||e.target;if(I.props.interactive&&M(K,n)){return}if(w(I.props.triggerTarget||t).some((function(t){return M(t,n)}))){if(L.isTouch){return}if(I.state.isVisible&&I.props.trigger.indexOf("click")>=0){return}}else{st("onClickOutside",[I,e])}if(I.props.hideOnClick===true){I.clearDelayTimeouts();I.hide();f=true;setTimeout((function(){f=false}));if(!I.state.isMounted){bt()}}}function pt(){s=true}function ht(){s=false}function mt(){var t=et();t.addEventListener("mousedown",vt,true);t.addEventListener("touchend",vt,v);t.addEventListener("touchstart",ht,v);t.addEventListener("touchmove",pt,v)}function bt(){var t=et();t.removeEventListener("mousedown",vt,true);t.removeEventListener("touchend",vt,v);t.removeEventListener("touchstart",ht,v);t.removeEventListener("touchmove",pt,v)}function yt(t,e){wt(t,(function(){if(!I.state.isVisible&&K.parentNode&&K.parentNode.contains(K)){e()}}))}function gt(t,e){wt(t,e)}function wt(t,e){var n=nt().box;function i(t){if(t.target===n){F(n,"remove",i);e()}}if(t===0){return e()}F(n,"remove",l);F(n,"add",i);l=i}function Tt(e,n,i){if(i===void 0){i=false}var r=w(I.props.triggerTarget||t);r.forEach((function(t){t.addEventListener(e,n,i);O.push({node:t,eventType:e,handler:n,options:i})}))}function xt(){if(X()){Tt("touchstart",jt,{passive:true});Tt("touchend",Pt,{passive:true})}g(I.props.trigger).forEach((function(t){if(t==="manual"){return}Tt(t,jt);switch(t){case"mouseenter":Tt("mouseleave",Pt);break;case"focus":Tt(z?"focusout":"blur",Ct);break;case"focusin":Tt("focusout",Ct);break}}))}function Ot(){O.forEach((function(t){var e=t.node,n=t.eventType,i=t.handler,r=t.options;e.removeEventListener(n,i,r)}));O=[]}function jt(t){var e;var n=false;if(!I.state.isEnabled||St(t)||f){return}var i=((e=d)==null?void 0:e.type)==="focus";d=t;S=t.currentTarget;dt();if(!I.state.isVisible&&A(t)){ut.forEach((function(e){return e(t)}))}if(t.type==="click"&&(I.props.trigger.indexOf("mouseenter")<0||u)&&I.props.hideOnClick!==false&&I.state.isVisible){n=true}else{Ut(t)}if(t.type==="click"){u=!n}if(n&&!i){Bt(t)}}function kt(t){var e=t.target;var i=tt().contains(e)||K.contains(e);if(t.type==="mousemove"&&i){return}var r=Ht().concat(K).map((function(t){var e;var i=t._tippy;var r=(e=i.popperInstance)==null?void 0:e.state;if(r){return{popperRect:t.getBoundingClientRect(),popperState:r,props:n}}return null})).filter(Boolean);if(D(r,t)){lt();Bt(t)}}function Pt(t){var e=St(t)||I.props.trigger.indexOf("click")>=0&&u;if(e){return}if(I.props.interactive){I.hideWithInteractivity(t);return}Bt(t)}function Ct(t){if(I.props.trigger.indexOf("focusin")<0&&t.target!==tt()){return}if(I.props.interactive&&t.relatedTarget&&K.contains(t.relatedTarget)){return}Bt(t)}function St(t){return L.isTouch?X()!==t.type.indexOf("touch")>=0:false}function At(){Wt();var e=I.props,n=e.popperOptions,i=e.placement,r=e.offset,a=e.getReferenceClientRect,u=e.moveTransition;var f=Z()?rt(K).arrow:null;var s=a?{getBoundingClientRect:a,contextElement:a.contextElement||tt()}:t;var c={name:"$$tippy",enabled:true,phase:"beforeWrite",requires:["computeStyles"],fn:function t(e){var n=e.state;if(Z()){var i=nt(),r=i.box;["placement","reference-hidden","escaped"].forEach((function(t){if(t==="placement"){r.setAttribute("data-placement",n.placement)}else{if(n.attributes.popper["data-popper-"+t]){r.setAttribute("data-"+t,"")}else{r.removeAttribute("data-"+t)}}}));n.attributes.popper={}}}};var d=[{name:"offset",options:{offset:r}},{name:"preventOverflow",options:{padding:{top:2,bottom:2,left:5,right:5}}},{name:"flip",options:{padding:5}},{name:"computeStyles",options:{adaptive:!u}},c];if(Z()&&f){d.push({name:"arrow",options:{element:f,padding:3}})}d.push.apply(d,(n==null?void 0:n.modifiers)||[]);I.popperInstance=o(s,K,Object.assign({},n,{placement:i,onFirstUpdate:m,modifiers:d}))}function Wt(){if(I.popperInstance){I.popperInstance.destroy();I.popperInstance=null}}function Et(){var t=I.props.appendTo;var e;var n=tt();if(I.props.interactive&&t===p||t==="parent"){e=n.parentNode}else{e=b(t,[n])}if(!e.contains(K)){e.appendChild(K)}I.state.isMounted=true;At()}function Ht(){return j(K.querySelectorAll("[data-tippy-root]"))}function Ut(t){I.clearDelayTimeouts();if(t){st("onTrigger",[I,t])}mt();var e=it(true);var n=Q(),r=n[0],o=n[1];if(L.isTouch&&r==="hold"&&o){e=o}if(e){i=setTimeout((function(){I.show()}),e)}else{I.show()}}function Bt(t){I.clearDelayTimeouts();st("onUntrigger",[I,t]);if(!I.state.isVisible){bt();return}if(I.props.trigger.indexOf("mouseenter")>=0&&I.props.trigger.indexOf("click")>=0&&["mouseleave","mousemove"].indexOf(t.type)>=0&&u){return}var e=it(false);if(e){r=setTimeout((function(){if(I.state.isVisible){I.hide()}}),e)}else{a=requestAnimationFrame((function(){I.hide()}))}}function Dt(){I.state.isEnabled=true}function Ft(){I.hide();I.state.isEnabled=false}function Mt(){clearTimeout(i);clearTimeout(r);cancelAnimationFrame(a)}function Lt(e){if(I.state.isDestroyed){return}st("onBeforeUpdate",[I,e]);Ot();var n=I.props;var i=_(t,Object.assign({},n,k(e),{ignoreAttributes:true}));I.props=i;xt();if(n.interactiveDebounce!==i.interactiveDebounce){lt();C=y(kt,i.interactiveDebounce)}if(n.triggerTarget&&!i.triggerTarget){w(n.triggerTarget).forEach((function(t){t.removeAttribute("aria-expanded")}))}else if(i.triggerTarget){t.removeAttribute("aria-expanded")}dt();ot();if($){$(n,i)}if(I.popperInstance){At();Ht().forEach((function(t){requestAnimationFrame(t._tippy.popperInstance.forceUpdate)}))}st("onAfterUpdate",[I,e])}function Rt(t){I.setProps({content:t})}function qt(){var t=I.state.isVisible;var e=I.state.isDestroyed;var n=!I.state.isEnabled;var i=L.isTouch&&!I.props.touch;var r=h(I.props.duration,0,G.duration);if(t||e||n||i){return}if(tt().hasAttribute("disabled")){return}st("onShow",[I],false);if(I.props.onShow(I)===false){return}I.state.isVisible=true;if(Z()){K.style.visibility="visible"}ot();mt();if(!I.state.isMounted){K.style.transition="none"}if(Z()){var o=nt(),a=o.box,u=o.content;H([a,u],0)}m=function t(){var e;if(!I.state.isVisible||c){return}c=true;K.style.transition=I.props.moveTransition;if(Z()&&I.props.animation){var n=nt(),i=n.box,o=n.content;H([i,o],r);U([i,o],"visible")}ct();dt();T(ft,I);(e=I.popperInstance)==null?void 0:e.forceUpdate();st("onMount",[I]);if(I.props.animation&&Z()){gt(r,(function(){I.state.isShown=true;st("onShown",[I])}))}};Et()}function It(){var t=!I.state.isVisible;var e=I.state.isDestroyed;var n=!I.state.isEnabled;var i=h(I.props.duration,1,G.duration);if(t||e||n){return}st("onHide",[I],false);if(I.props.onHide(I)===false){return}I.state.isVisible=false;I.state.isShown=false;c=false;u=false;if(Z()){K.style.visibility="hidden"}lt();bt();ot(true);if(Z()){var r=nt(),o=r.box,a=r.content;if(I.props.animation){H([o,a],i);U([o,a],"hidden")}}ct();dt();if(I.props.animation){if(Z()){yt(i,I.unmount)}}else{I.unmount()}}function Nt(t){et().addEventListener("mousemove",C);T(ut,C);C(t)}function Kt(){if(I.state.isVisible){I.hide()}if(!I.state.isMounted){return}Wt();Ht().forEach((function(t){t._tippy.unmount()}));if(K.parentNode){K.parentNode.removeChild(K)}ft=ft.filter((function(t){return t!==I}));I.state.isMounted=false;st("onHidden",[I])}function $t(){if(I.state.isDestroyed){return}I.clearDelayTimeouts();I.unmount();Ot();delete t._tippy;I.state.isDestroyed=true;st("onDestroy",[I])}}function ct(t,e){if(e===void 0){e={}}var n=G.plugins.concat(e.plugins||[]);K();var i=Object.assign({},e,{plugins:n});var r=E(t);var o=r.reduce((function(t,e){var n=e&&st(e,i);if(n){t.push(n)}return t}),[]);return C(t)?o[0]:o}ct.defaultProps=G;ct.setDefaultProps=X;ct.currentInput=L;Object.assign({},r,{effect:function t(e){var n=e.state;var i={popper:{position:n.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};Object.assign(n.elements.popper.style,i.popper);n.styles=i;if(n.elements.arrow){Object.assign(n.elements.arrow.style,i.arrow)}}});ct.setDefaultProps({render:ot});const dt=":host{display:none}";const lt=dt;const vt=["WCS-BUTTON"];const pt=t(class t extends e{constructor(){super();this.__registerHost();this.__attachShadow();this.for=undefined;this.position="bottom";this.interactive=false;this.maxWidth=350;this.delay=0;this.duration=[300,250];this.trigger="mouseenter focus";this.theme="dark";this.content=undefined;this.appendTo=undefined}componentWillLoad(){this.forElement=document.getElementById(this.for);if(!this.forElement){console.error('[wcs-tooltip]: The element with the id provided in the "for" property does not exist');return}this.tippyInstance=ct(this.forElement,{appendTo:this.appendTo||(()=>document.body),theme:this.theme,allowHTML:true,content:this.getTooltipContentFromPropAndSlot(),maxWidth:this.maxWidth,placement:this.position,delay:this.delay,duration:this.duration,interactive:this.interactive,trigger:this.trigger,onShow:()=>this.onShow(),onHide:()=>this.onHide()})}onShow(){if(!this.forElement){return}if(this.forElement.tagName&&vt.indexOf(this.forElement.tagName)!==-1){if(u(this.forElement)){if(this.interactive){this.forElement.setAriaAttribute("aria-expanded","true")}}}}onHide(){if(!this.forElement){return}if(this.forElement.tagName&&vt.indexOf(this.forElement.tagName)!==-1){if(u(this.forElement)){if(this.interactive){this.forElement.setAriaAttribute("aria-expanded","false")}}}}async handleKeyDown(t){if(a(t)){if(this.tippyInstance.state.isShown){await this.hide()}}}getTooltipContentFromPropAndSlot(){if(this.content){return this.content+this.el.innerHTML}return this.el.innerHTML}updateProps(){var t;(t=this.tippyInstance)===null||t===void 0?void 0:t.setProps({interactive:this.interactive,placement:this.position,maxWidth:this.maxWidth,theme:this.theme,delay:this.delay,duration:this.duration,trigger:this.trigger})}updateTippyContent(){var t;(t=this.tippyInstance)===null||t===void 0?void 0:t.setProps({content:this.getTooltipContentFromPropAndSlot()})}async hide(){this.tippyInstance.hide()}async show(){this.tippyInstance.show()}async disable(){this.tippyInstance.disable()}async enable(){this.tippyInstance.enable()}disconnectedCallback(){var t;(t=this.tippyInstance)===null||t===void 0?void 0:t.destroy()}render(){return n(i,{key:"430814e1eefde613ed887a70b837c5603b3d7656",role:"tooltip"},n("slot",{key:"f1915740c4c18c7c154bedd8db7bc10e7836822c",onSlotchange:t=>this.updateTippyContent()}))}get el(){return this}static get watchers(){return{interactive:["updateProps"],position:["updateProps"],maxWidth:["updateProps"],theme:["updateProps"],delay:["updateProps"],duration:["updateProps"],trigger:["updateProps"],content:["updateTippyContent"]}}static get style(){return lt}},[1,"wcs-tooltip",{for:[1],position:[513],interactive:[516],maxWidth:[8,"max-width"],delay:[2],duration:[2],trigger:[1],theme:[1],content:[1],appendTo:[1,"append-to"],hide:[64],show:[64],disable:[64],enable:[64]},[[8,"keydown","handleKeyDown"]],{interactive:["updateProps"],position:["updateProps"],maxWidth:["updateProps"],theme:["updateProps"],delay:["updateProps"],duration:["updateProps"],trigger:["updateProps"],content:["updateTippyContent"]}]);function ht(){if(typeof customElements==="undefined"){return}const t=["wcs-tooltip"];t.forEach((t=>{switch(t){case"wcs-tooltip":if(!customElements.get(t)){customElements.define(t,pt)}break}}))}ht();const mt=pt;const bt=ht;export{mt as WcsTooltip,bt as defineCustomElement};
 //# sourceMappingURL=wcs-tooltip.js.map

package/dist/cjs/{grid-pagination-4505d7b6.js → grid-pagination-ded127cc.js}

@@ -130,7 +130,7 @@ const GridPagination = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'a51e533835607f4e0b712fe26680704a71f76cd6', slot: "grid-pagination" }, index.h("div", { key: '8ff4ebf10c9e134a8e2fe5d577860a8d6dc9c863', class: "container" }, index.h("div", { key: 'a4c6ce48c71fb017dfecdb3f1e8bdc59894e1cbd', class: "page-size" }, index.h("wcs-select", { key: 'ae08e610f92bc8084806b25b0b5d7fa95db079ee', placeholder: "El\u00E9ments par page", class: "available-page-sizes", "aria-labelledby": "elements-per-page-number elements-per-page-text", value: this.pageSize, onWcsChange: this.onChangePageSize.bind(this) }, this.availablePageSizes.map((pageSize) => index.h("wcs-select-option", { value: pageSize }, pageSize))), index.h("span", { key: '282fd594fa817e9f2535c7403b5e1d66e4a7d030', id: "elements-per-page-number", hidden: true }, this.pageSize), index.h("span", { key: '00ee37d7e5156aa17b234fdf6eec956228064094', id: "elements-per-page-text" }, "\u00E9l\u00E9ments par page")), index.h("div", { key: '2ae95e32fc77cafebf0a38eb2746c62d0bd3a537', class: "items-count" }, index.h("span", { key: '5861d6bbf937867579181842dc93ba33290cdfe9' }, this.itemsCount, " \u00E9l\u00E9ments")), index.h("nav", Object.assign({ key: '7d847f316fb18ec7bdc08f7c055115a7391bb25e', "aria-label": "pagination", ref: (el) => (this.nativeNav = el) }, this.inheritedAttributes), index.h("ul", { key: 'd58fdfcd0a663071a6c94b72acf339a2efd57b5d', class: "page-management" }, index.h("li", { key: 'd18366653d52b0e481bfc8bb0d001d72aa5b3b36', class: "pagination-arrow", onClick: this.firstPage.bind(this) }, index.h(GridPaginationArrow, { key: 'ce33b84750ac08bfc50e91378f79ce62c11c9750', active: this.canGoToPreviousPage(), order: "previous", double: true })), index.h("li", { key: 'fb8adcbe91d40dd5d5dd741ec2c69299d971a1ee', class: "pagination-arrow", onClick: this.previousPage.bind(this) }, index.h(GridPaginationArrow, { key: 'b5f8b2804909a64e73e4d26a1faea483a10d2137', active: this.canGoToPreviousPage(), order: "previous" })), index.h("li", { key: '22742254c3c37ecf900eba29d1605a0420ff11e2', class: "pagination-counter" }, index.h("span", { key: '1f9385fffd93e2eb97d8199b0d7e459e58e01285', "aria-label": `Page ${this.currentPage + 1} sur ${this.pageCount}`, "aria-current": "page" }, this.currentPage + 1, " / ", this.pageCount)), index.h("li", { key: '3a408b5b27a1ff8ba7dc52b6027506100e371d49', class: "pagination-arrow", onClick: this.nextPage.bind(this) }, index.h(GridPaginationArrow, { key: '54e0d638e0645fd46b8a96a99509c8a3dafc842b', active: this.canGoToNextPage(), order: "next" })), index.h("li", { key: 'e91b2f2eeadfeea3ef68fa83c3c3e9fa30c3c17f', class: "pagination-arrow", onClick: this.lastPage.bind(this) }, index.h(GridPaginationArrow, { key: '14834c2f39a7f1076dfe2660aa2c651d1c52f40e', active: this.canGoToNextPage(), order: "next", double: true })))))));
+        return (index.h(index.Host, { key: '3efc96789e89f352f23038016baf6cbc232d6e0c', slot: "grid-pagination" }, index.h("div", { key: 'df2365f3367fe20bfb66f8b4969036a1662daef3', class: "container" }, index.h("div", { key: 'b700909bbdcef7087af7a7f5d624db07bf909315', class: "page-size" }, index.h("wcs-select", { key: 'bd9454c106da98c1dfbd7c5081f1bc2c564db2ae', placeholder: "El\u00E9ments par page", class: "available-page-sizes", "aria-labelledby": "elements-per-page-number elements-per-page-text", value: this.pageSize, onWcsChange: this.onChangePageSize.bind(this) }, this.availablePageSizes.map((pageSize) => index.h("wcs-select-option", { value: pageSize }, pageSize))), index.h("span", { key: '792711f34454bb10a42c44b7e13d03f8fbf4af74', id: "elements-per-page-number", hidden: true }, this.pageSize), index.h("span", { key: '00848f6a348aed84d37ebb19172e3d7818ba3c17', id: "elements-per-page-text" }, index.h("slot", { key: '21848ccaf60179a82c53916f8e438e8b63ebaf61', name: "elements-per-page-text" }, index.h("span", { key: '6bf5a0c3e6dc2bd81193e362abab61b7e165de54' }, " \u00E9l\u00E9ments par page")))), index.h("div", { key: 'ef6378352c7251430bb90540b28d52407b792b4d', class: "items-count" }, index.h("span", { key: 'a0f8ebf6564358233cf2683107d7a3af50bbd3e7' }, this.itemsCount, index.h("slot", { key: 'b0549af31d518ea3d748ba615c226d242aa1ea3e', name: "items-count-text" }, index.h("span", { key: 'b0266239fa9726005d9946ccedf59bfe26e030a3' }, " \u00E9l\u00E9ments")))), index.h("nav", Object.assign({ key: '43a87e737be4890ac0f4fcb8f76e56fc5a40a27d', "aria-label": "pagination", ref: (el) => (this.nativeNav = el) }, this.inheritedAttributes), index.h("ul", { key: '6e95be555deb6741ac851eaa0163483bd9a33e19', class: "page-management" }, index.h("li", { key: 'faab6e7ab55628be3b5bf4e61c559a67c6ea2a57', class: "pagination-arrow", onClick: this.firstPage.bind(this) }, index.h(GridPaginationArrow, { key: '699c51108204e3e13c408abb43ed59039b12cddb', active: this.canGoToPreviousPage(), order: "previous", double: true })), index.h("li", { key: '3e13d327cab3e2b4c54ad915e38c10effa852970', class: "pagination-arrow", onClick: this.previousPage.bind(this) }, index.h(GridPaginationArrow, { key: '5fbe8676685d367affe840948a4ae037e7e1b0d0', active: this.canGoToPreviousPage(), order: "previous" })), index.h("li", { key: '086fd79d45cc0d8c60cf53b9ae44015944341b95', class: "pagination-counter" }, index.h("span", { key: '9bd2e83985ae3b482830628ed9384c1583392f70', "aria-label": `Page ${this.currentPage + 1} sur ${this.pageCount}`, "aria-current": "page" }, this.currentPage + 1, " / ", this.pageCount)), index.h("li", { key: '6a61141774ba5ddc261e911945cbe71282c34793', class: "pagination-arrow", onClick: this.nextPage.bind(this) }, index.h(GridPaginationArrow, { key: '4c41d7cdce692495b67227f0bb24fd0b605998e0', active: this.canGoToNextPage(), order: "next" })), index.h("li", { key: 'c929ccd8c749763034a42a7006264747eed59b02', class: "pagination-arrow", onClick: this.lastPage.bind(this) }, index.h(GridPaginationArrow, { key: '184d97af95b7fad98617f7fb138463826f94c9a8', active: this.canGoToNextPage(), order: "next", double: true })))))));
     }
     get el() { return index.getElement(this); }
 };
@@ -139,4 +139,4 @@ GridPagination.style = WcsGridPaginationStyle0;
 
 exports.GridPagination = GridPagination;
 
-//# sourceMappingURL=grid-pagination-4505d7b6.js.map
+//# sourceMappingURL=grid-pagination-ded127cc.js.map