wcs-core 7.3.0 → 7.4.1

package/bundle/wcs-radio-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsRadioGroup extends Components.WcsRadioGroup, HTMLElement {}
+export const WcsRadioGroup: {
+    prototype: WcsRadioGroup;
+    new (): WcsRadioGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/bundle/wcs-radio-group.js

@@ -0,0 +1,2 @@
+import{p as o,H as a,d as e,h as t,c as s}from"./p-2bef72c7.js";import{s as i,c as r,d as n,q as d,r as c,t as l,u,o as p}from"./p-2e9b9605.js";const h=":host{display:flex;--wcs-radio-group-gap:var(--wcs-semantic-spacing-base);--wcs-radio-group-option-height:var(--wcs-semantic-size-m);--wcs-radio-group-option-gap:var(--wcs-semantic-spacing-small);--wcs-radio-group-option-padding:var(--wcs-semantic-spacing-small) var(--wcs-semantic-spacing-small);--wcs-radio-group-option-border-radius:var(--wcs-semantic-border-radius-base);--wcs-radio-group-option-background-color:var(--wcs-semantic-color-background-surface-accent-lightest)}:host([mode=radio]){flex-direction:column;gap:var(--wcs-radio-group-gap)}:host([mode=option]){box-sizing:border-box;height:var(--wcs-radio-group-option-height);display:inline-flex;flex-direction:row;align-items:center;gap:var(--wcs-radio-group-option-gap);padding:var(--wcs-radio-group-option-padding);background-color:var(--wcs-radio-group-option-background-color);border-radius:var(--wcs-radio-group-option-border-radius)}:host([mode=horizontal]){justify-content:space-between}";const g=h;const m=o(class o extends a{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsChange=e(this,"wcsChange",7);this.value=undefined;this.name=undefined;this.mode="radio"}onValueChangeHandler(o){this.updateRadioTabIndex(o);this.updateAllRadioState()}async setAriaAttribute(o,a){i(this.el,o,a)}componentDidLoad(){this.onValueChangeHandler(this.value);this.updateAllRadioModeAndName()}onSlotChange(){this.updateRadioTabIndex(this.value);this.updateAllRadioModeAndName()}updateAllRadioState(){this.getSlottedRadios().forEach((o=>o.updateState()))}updateAllRadioModeAndName(){this.getSlottedRadios().forEach((o=>{o.mode=this.mode;o.name=this.name}))}updateRadioTabIndex(o){const a=this.getSlottedRadios();const e=a.find((o=>!o.disabled));const t=a.find((a=>a.value===o&&!a.disabled));if(!e&&!t){return}const s=t||e;for(const o of a){const a=o===s?0:-1;o.setTabIndex(a)}}getSlottedRadios(){return Array.from(this.el.querySelectorAll("wcs-radio"))}getSlottedRadiosNotDisabled(){return Array.from(this.getSlottedRadios().filter((o=>!o.disabled)))}handleRadioClick(o){this.value=o.detail.value;this.wcsChange.emit({value:o.detail.value})}async handleKeyDown(o){const a=this.getSlottedRadiosNotDisabled();const e=a.findIndex((a=>a===o.target));let t;if(r(o)||n(o)){o.preventDefault();t=e}else if(d(o)||c(o)){o.preventDefault();t=(e+1)%a.length}else if(l(o)||u(o)){o.preventDefault();t=(e-1+a.length)%a.length}else if(p(o)){return}const s=a[t];if(s){s.focus();if(this.value!==s.value){this.wcsChange.emit({value:s.value})}this.value=s.value}}render(){return t(s,{key:"3179704d2f1ed56f940941c1777b90a49ecd0ffa",role:"radiogroup"},t("slot",{key:"f01213b0c89bc04622601447005e24df07fea376",name:"option",onSlotchange:this.onSlotChange.bind(this)}))}get el(){return this}static get watchers(){return{value:["onValueChangeHandler"],name:["updateAllRadioModeAndName"],mode:["updateAllRadioModeAndName"]}}static get style(){return g}},[1,"wcs-radio-group",{value:[1032],name:[520],mode:[513],setAriaAttribute:[64]},[[0,"wcsRadioClick","handleRadioClick"],[0,"keydown","handleKeyDown"]],{value:["onValueChangeHandler"],name:["updateAllRadioModeAndName"],mode:["updateAllRadioModeAndName"]}]);function f(){if(typeof customElements==="undefined"){return}const o=["wcs-radio-group"];o.forEach((o=>{switch(o){case"wcs-radio-group":if(!customElements.get(o)){customElements.define(o,m)}break}}))}const w=m;const b=f;export{w as WcsRadioGroup,b as defineCustomElement};
+//# sourceMappingURL=wcs-radio-group.js.map

package/bundle/wcs-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["radioGroupCss","WcsRadioGroupStyle0","RadioGroup","proxyCustomElement","H","onValueChangeHandler","value","this","updateRadioTabIndex","updateAllRadioState","setAriaAttribute","attr","setOrRemoveAttribute","el","componentDidLoad","updateAllRadioModeAndName","onSlotChange","getSlottedRadios","forEach","r","updateState","mode","name","radios","first","find","radio","disabled","checked","focusable","tabindex","setTabIndex","Array","from","querySelectorAll","getSlottedRadiosNotDisabled","filter","handleRadioClick","event","detail","wcsChange","emit","handleKeyDown","ev","radiosNotDisabled","previousSelected","findIndex","target","indexToSelect","isSpaceKey","isEnterKey","preventDefault","isDownArrowKey","isRightArrowKey","length","isUpArrowKey","isLeftArrowKey","isTabKey","radioToSelect","focus","render","h","Host","key","role","onSlotchange","bind"],"sources":["src/components/radio-group/radio-group.scss?tag=wcs-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.tsx"],"sourcesContent":[":host {\n    display: flex;\n\n    // region Radio\n    --wcs-radio-group-gap: var(--wcs-semantic-spacing-base);\n    // endregion\n\n    // region Option\n    --wcs-radio-group-option-height: var(--wcs-semantic-size-m);\n    --wcs-radio-group-option-gap: var(--wcs-semantic-spacing-small);\n    --wcs-radio-group-option-padding: var(--wcs-semantic-spacing-small) var(--wcs-semantic-spacing-small);\n    --wcs-radio-group-option-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-radio-group-option-background-color: var(--wcs-semantic-color-background-surface-accent-lightest);\n    // endregion\n}\n\n:host([mode=radio]) {\n    flex-direction: column;\n    gap: var(--wcs-radio-group-gap);\n}\n\n:host([mode=option]) {\n    box-sizing: border-box;\n    height: var(--wcs-radio-group-option-height);\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--wcs-radio-group-option-gap);\n    padding: var(--wcs-radio-group-option-padding);\n    background-color: var(--wcs-radio-group-option-background-color);\n    border-radius: var(--wcs-radio-group-option-border-radius);\n}\n\n:host([mode=horizontal]) {\n    justify-content: space-between;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { RadioGroupChangeEventDetail, RadioGroupMode } from './radio-group-interface';\nimport { RadioChosedEvent } from '../radio/radio-interface';\nimport {\n    isDownArrowKey, isEnterKey,\n    isLeftArrowKey,\n    isRightArrowKey,\n    isSpaceKey,\n    isTabKey,\n    isUpArrowKey,\n    setOrRemoveAttribute\n} from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from '../../utils/mutable-aria-attribute';\n\n/**\n * @cssprop --wcs-radio-group-gap - Gap between each radio (checkmark + label) in horizontal mode\n * \n *\n * @cssprop --wcs-radio-group-option-background-color - Background color of the radio group option\n * \n * @cssprop --wcs-radio-group-option-height - Height of the radio group option\n * @cssprop --wcs-radio-group-option-padding - Padding of the radio group option\n *  \n * @cssprop --wcs-radio-group-option-border-radius - Border radius of the radio group option\n * \n * @cssprop --wcs-radio-group-option-gap - Gap between each radio option\n */\n@Component({\n    tag: 'wcs-radio-group',\n    styleUrl: 'radio-group.scss',\n    shadow: true\n})\nexport class RadioGroup implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLWcsRadioGroupElement;\n    \n    /**\n     * The value of the radio-group. Automatically reflects which radio button is selected.\n     */\n    @Prop({ mutable: true }) value: any | any[] | undefined | null;\n\n    /**\n     * The name of the control to be set on all radio button children\n     */\n    @Prop({ reflect: true }) name;\n\n    /**\n     * The display mode of the control to be set on all radio button children\n     */\n    @Prop({ reflect: true }) mode: RadioGroupMode = 'radio';\n\n    /** Emitted when the value has changed. */\n    @Event() wcsChange!: EventEmitter<RadioGroupChangeEventDetail>;\n\n    @Watch('value')\n    onValueChangeHandler(value: any | undefined) {\n        this.updateRadioTabIndex(value);\n        this.updateAllRadioState();\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.el, attr, value);\n    }\n\n    componentDidLoad() {\n       this.onValueChangeHandler(this.value);\n       this.updateAllRadioModeAndName();\n    }\n    \n    onSlotChange() {\n        this.updateRadioTabIndex(this.value);\n        this.updateAllRadioModeAndName();\n    }\n    \n    updateAllRadioState() {\n        this.getSlottedRadios().forEach(r => r.updateState());\n    }\n    \n    @Watch('name')\n    @Watch('mode')\n    updateAllRadioModeAndName() {\n        this.getSlottedRadios().forEach(r => {\n            r.mode = this.mode;\n            r.name = this.name;\n        });\n    }\n    \n    updateRadioTabIndex(value: any | undefined) {\n        const radios = this.getSlottedRadios();\n\n        // Get the first radio that is not disabled and the checked one\n        const first = radios.find((radio) => !radio.disabled);\n        const checked = radios.find((radio) => radio.value === value && !radio.disabled);\n\n        if (!first && !checked) {\n            return;\n        }\n\n        // If an enabled checked radio exists, set it to be the focusable radio\n        // otherwise we default to focus the first radio\n        const focusable = checked || first;\n\n        for (const radio of radios) {\n            const tabindex = radio === focusable ? 0 : -1;\n            radio.setTabIndex(tabindex);\n        }\n    }\n\n    private getSlottedRadios(): HTMLWcsRadioElement[] {\n        return Array.from(this.el.querySelectorAll('wcs-radio'));\n    }\n\n    private getSlottedRadiosNotDisabled(): HTMLWcsRadioElement[] {\n        return Array.from(this.getSlottedRadios().filter(radio => !radio.disabled));\n    }\n\n    @Listen('wcsRadioClick')\n    handleRadioClick(event: CustomEvent<RadioChosedEvent>) {\n        this.value = event.detail.value;\n        this.wcsChange.emit({\n            value: event.detail.value\n        });\n    }\n\n    @Listen('keydown')\n    async handleKeyDown(ev: KeyboardEvent) {\n        const radiosNotDisabled = this.getSlottedRadiosNotDisabled();\n        const previousSelected = radiosNotDisabled.findIndex(r => r === ev.target);\n        let indexToSelect: number;\n\n        if ((isSpaceKey(ev) || isEnterKey(ev))) {\n            ev.preventDefault();\n            indexToSelect = previousSelected;\n        } else if (isDownArrowKey(ev) || isRightArrowKey(ev)) {\n            ev.preventDefault();\n            // Check the next wcs-radio from the previous selected\n            indexToSelect = (previousSelected + 1) % radiosNotDisabled.length;  // to return at the beginning on the list when we are on the last index\n        } else if (isUpArrowKey(ev) || isLeftArrowKey(ev)) {\n            ev.preventDefault();\n            // Check the previous wcs-radio from the previous selected\n            indexToSelect = (previousSelected - 1 + radiosNotDisabled.length) % radiosNotDisabled.length; // To return at the end of the list when we are on index=0\n        } else if (isTabKey(ev)) {\n            return;\n        }\n        \n        const radioToSelect = radiosNotDisabled[indexToSelect]\n        if (radioToSelect) {\n            radioToSelect.focus();\n            \n            if (this.value !== radioToSelect.value) {\n                this.wcsChange.emit({\n                    value: radioToSelect.value\n                })\n            }\n            \n            this.value = radioToSelect.value;\n        }\n    }\n\n    render() {\n        return (\n            <Host role=\"radiogroup\">\n                <slot name=\"option\" onSlotchange={this.onSlotChange.bind(this)}/>\n            </Host>\n        );\n    }\n\n}\n"],"mappings":"gJAAA,MAAMA,EAAgB,g8BACtB,MAAAC,EAAeD,E,MC2CFE,EAAUC,EAAA,MAAAD,UAAAE,E,0JAgB6B,O,CAMhD,oBAAAC,CAAqBC,GACjBC,KAAKC,oBAAoBF,GACzBC,KAAKE,qB,CAIT,sBAAMC,CAAiBC,EAAyBL,GAC5CM,EAAqBL,KAAKM,GAAIF,EAAML,E,CAGxC,gBAAAQ,GACGP,KAAKF,qBAAqBE,KAAKD,OAC/BC,KAAKQ,2B,CAGR,YAAAC,GACIT,KAAKC,oBAAoBD,KAAKD,OAC9BC,KAAKQ,2B,CAGT,mBAAAN,GACIF,KAAKU,mBAAmBC,SAAQC,GAAKA,EAAEC,e,CAK3C,yBAAAL,GACIR,KAAKU,mBAAmBC,SAAQC,IAC5BA,EAAEE,KAAOd,KAAKc,KACdF,EAAEG,KAAOf,KAAKe,IAAI,G,CAI1B,mBAAAd,CAAoBF,GAChB,MAAMiB,EAAShB,KAAKU,mBAGpB,MAAMO,EAAQD,EAAOE,MAAMC,IAAWA,EAAMC,WAC5C,MAAMC,EAAUL,EAAOE,MAAMC,GAAUA,EAAMpB,QAAUA,IAAUoB,EAAMC,WAEvE,IAAKH,IAAUI,EAAS,CACpB,M,CAKJ,MAAMC,EAAYD,GAAWJ,EAE7B,IAAK,MAAME,KAASH,EAAQ,CACxB,MAAMO,EAAWJ,IAAUG,EAAY,GAAK,EAC5CH,EAAMK,YAAYD,E,EAIlB,gBAAAb,GACJ,OAAOe,MAAMC,KAAK1B,KAAKM,GAAGqB,iBAAiB,a,CAGvC,2BAAAC,GACJ,OAAOH,MAAMC,KAAK1B,KAAKU,mBAAmBmB,QAAOV,IAAUA,EAAMC,W,CAIrE,gBAAAU,CAAiBC,GACb/B,KAAKD,MAAQgC,EAAMC,OAAOjC,MAC1BC,KAAKiC,UAAUC,KAAK,CAChBnC,MAAOgC,EAAMC,OAAOjC,O,CAK5B,mBAAMoC,CAAcC,GAChB,MAAMC,EAAoBrC,KAAK4B,8BAC/B,MAAMU,EAAmBD,EAAkBE,WAAU3B,GAAKA,IAAMwB,EAAGI,SACnE,IAAIC,EAEJ,GAAKC,EAAWN,IAAOO,EAAWP,GAAM,CACpCA,EAAGQ,iBACHH,EAAgBH,C,MACb,GAAIO,EAAeT,IAAOU,EAAgBV,GAAK,CAClDA,EAAGQ,iBAEHH,GAAiBH,EAAmB,GAAKD,EAAkBU,M,MACxD,GAAIC,EAAaZ,IAAOa,EAAeb,GAAK,CAC/CA,EAAGQ,iBAEHH,GAAiBH,EAAmB,EAAID,EAAkBU,QAAUV,EAAkBU,M,MACnF,GAAIG,EAASd,GAAK,CACrB,M,CAGJ,MAAMe,EAAgBd,EAAkBI,GACxC,GAAIU,EAAe,CACfA,EAAcC,QAEd,GAAIpD,KAAKD,QAAUoD,EAAcpD,MAAO,CACpCC,KAAKiC,UAAUC,KAAK,CAChBnC,MAAOoD,EAAcpD,O,CAI7BC,KAAKD,MAAQoD,EAAcpD,K,EAInC,MAAAsD,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,cACPH,EAAA,QAAAE,IAAA,2CAAMzC,KAAK,SAAS2C,aAAc1D,KAAKS,aAAakD,KAAK3D,Q"}

package/bundle/wcs-radio.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsRadio extends Components.WcsRadio, HTMLElement {}
+export const WcsRadio: {
+    prototype: WcsRadio;
+    new (): WcsRadio;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/bundle/wcs-radio.js

@@ -0,0 +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-2e9b9605.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}}))}const u=h;const m=w;export{u as WcsRadio,m as defineCustomElement};
+//# sourceMappingURL=wcs-radio.js.map

package/bundle/wcs-radio.js.map

@@ -0,0 +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"}

package/bundle/wcs-select-option.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsSelectOption extends Components.WcsSelectOption, HTMLElement {}
+export const WcsSelectOption: {
+    prototype: WcsSelectOption;
+    new (): WcsSelectOption;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/bundle/wcs-select-option.js

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

package/bundle/wcs-select-option.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":""}

package/bundle/wcs-select.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsSelect extends Components.WcsSelect, HTMLElement {}
+export const WcsSelect: {
+    prototype: WcsSelect;
+    new (): WcsSelect;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/bundle/wcs-select.js

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

package/bundle/wcs-select.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":""}

package/bundle/wcs-skeleton-circle.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsSkeletonCircle extends Components.WcsSkeletonCircle, HTMLElement {}
+export const WcsSkeletonCircle: {
+    prototype: WcsSkeletonCircle;
+    new (): WcsSkeletonCircle;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/bundle/wcs-skeleton-circle.js

@@ -0,0 +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}}))}const c=a;const l=r;export{c as WcsSkeletonCircle,l as defineCustomElement};
+//# sourceMappingURL=wcs-skeleton-circle.js.map

package/bundle/wcs-skeleton-circle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["skeletonCircleCss","WcsSkeletonCircleStyle0","SkeletonCircle","proxyCustomElement","H","render","h","Host","key","style","width","this","radius","height"],"sources":["src/components/skeleton-circle/skeleton-circle.scss?tag=wcs-skeleton-circle&encapsulation=shadow","src/components/skeleton-circle/skeleton-circle.tsx"],"sourcesContent":["@import \"../skeleton/skeleton.scss\";\n\n:host {\n    --wcs-skeleton-circle-border-radius: var(--wcs-semantic-border-radius-full);\n\n    aspect-ratio: 1/1;\n    border-radius: var(--wcs-skeleton-circle-border-radius);\n}\n","import { Component, ComponentInterface, h, Host, Prop } from \"@stencil/core\";\nimport { WcsSkeletonAnimation } from \"../skeleton/skeleton-interface\";\n\n/**\n * Use a skeleton circle as a placeholder round images, illustrations or components\n * \n * @cssprop --wcs-skeleton-circle-border-radius - Border radius of the circle\n * \n * @cssprop --wcs-skeleton-height - _(Shared among all skeleton types)_<br/>Height of the skeleton\n * @cssprop --wcs-skeleton-min-height - _(Shared among all skeleton types)_<br/> Minimum height of the skeleton\n * @cssprop --wcs-skeleton-width - _(Shared among all skeleton types)_<br/> Width of the skeleton\n * @cssprop --wcs-skeleton-background-color - _(Shared among all skeleton types)_<br/> Background color of the skeleton (default is a gradient)\n * @cssprop --wcs-skeleton-animation-duration - _(Shared among all skeleton types)_<br/> Duration of the skeleton animation, if applicable\n */\n@Component({\n    tag: 'wcs-skeleton-circle',\n    styleUrl: 'skeleton-circle.scss',\n    shadow: true\n})\nexport class SkeletonCircle implements ComponentInterface {\n\n    /**\n     * Specifies the animation of the skeleton\n     */\n    @Prop({reflect: true}) animation: WcsSkeletonAnimation = 'glide';\n\n    /**\n     * Specifies the radius of the circle in px\n     */\n    @Prop({reflect: true}) radius: number = 50;\n\n    render() {\n        return (\n            <Host style={{width: `${this.radius}px`, height: `${this.radius}px`}}>\n                <span aria-hidden=\"true\"></span>\n            </Host>\n        );\n    }\n\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,ujCAC1B,MAAAC,EAAeD,E,MCkBFE,EAAcC,EAAA,MAAAD,UAAAE,E,iFAKkC,Q,YAKjB,E,CAExC,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAACC,MAAO,GAAGC,KAAKC,WAAYC,OAAQ,GAAGF,KAAKC,aACrDN,EAAA,QAAAE,IAAA,yDAAkB,S"}

package/bundle/wcs-skeleton-rectangle.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsSkeletonRectangle extends Components.WcsSkeletonRectangle, HTMLElement {}
+export const WcsSkeletonRectangle: {
+    prototype: WcsSkeletonRectangle;
+    new (): WcsSkeletonRectangle;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/bundle/wcs-skeleton-rectangle.js

@@ -0,0 +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}}))}const c=a;const d=r;export{c as WcsSkeletonRectangle,d as defineCustomElement};
+//# sourceMappingURL=wcs-skeleton-rectangle.js.map

package/bundle/wcs-skeleton-rectangle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["skeletonRectangleCss","WcsSkeletonRectangleStyle0","SkeletonRectangle","proxyCustomElement","H","render","h","Host","key","style","height","this","width"],"sources":["src/components/skeleton-rectangle/skeleton-rectangle.scss?tag=wcs-skeleton-rectangle&encapsulation=shadow","src/components/skeleton-rectangle/skeleton-rectangle.tsx"],"sourcesContent":["@import \"../skeleton/skeleton.scss\";\n\n:host {\n    --wcs-skeleton-border-radius: 0rem;\n\n    span {\n        border-radius: var(--wcs-skeleton-border-radius);\n    }\n}\n\n:host([rounded]) {\n    --wcs-skeleton-border-radius: var(--wcs-semantic-border-radius-base);\n}\n","import { Component, ComponentInterface, h, Host, Prop } from \"@stencil/core\";\nimport { WcsSkeletonAnimation } from \"../skeleton/skeleton-interface\";\nimport { CssTypes } from \"../../shared-types\";\n\n/**\n * Use a skeleton rectangle as a placeholder for large images or square-shaped components\n *\n * @cssprop --wcs-skeleton-border-radius - Border-radius of the skeleton. If not overridden, depends on the `rounded` attribute.\n * \n * @cssprop --wcs-skeleton-height - _(Shared among all skeleton types)_<br/>Height of the skeleton\n * @cssprop --wcs-skeleton-min-height - _(Shared among all skeleton types)_<br/> Minimum height of the skeleton\n * @cssprop --wcs-skeleton-width - _(Shared among all skeleton types)_<br/> Width of the skeleton\n * @cssprop --wcs-skeleton-background-color - _(Shared among all skeleton types)_<br/> Background color of the skeleton (default is a gradient)\n * @cssprop --wcs-skeleton-animation-duration - _(Shared among all skeleton types)_<br/> Duration of the skeleton animation, if applicable\n */\n@Component({\n    tag: 'wcs-skeleton-rectangle',\n    styleUrl: 'skeleton-rectangle.scss',\n    shadow: true\n})\nexport class SkeletonRectangle implements ComponentInterface {\n\n    /**\n     * Specifies the animation of the skeleton\n     */\n    @Prop({reflect: true}) animation: WcsSkeletonAnimation = 'glide';\n\n    /**\n     * Adds a border radius on the skeleton if true\n     */\n    @Prop({reflect: true}) rounded: boolean = false;\n\n    /**\n     * Specifies the height of the skeleton (can be any valid CSS value)\n     */\n    @Prop({reflect: true}) height: CssTypes.Height = 'auto';\n\n    /**\n     * Specifies the width of the skeleton (can be any valid CSS value)\n     */\n    @Prop({reflect: true}) width: CssTypes.Width = 'auto';\n\n    render() {\n        return (\n            <Host style={{height: this.height, width: this.width}}>\n                <span aria-hidden=\"true\"></span>\n            </Host>\n        );\n    }\n\n}\n"],"mappings":"yDAAA,MAAMA,EAAuB,slCAC7B,MAAAC,EAAeD,E,MCmBFE,EAAiBC,EAAA,MAAAD,UAAAE,E,iFAK+B,Q,aAKf,M,YAKO,O,WAKF,M,CAE/C,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAACC,OAAQC,KAAKD,OAAQE,MAAOD,KAAKC,QAC3CN,EAAA,QAAAE,IAAA,yDAAkB,S"}

package/bundle/wcs-skeleton-text.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsSkeletonText extends Components.WcsSkeletonText, HTMLElement {}
+export const WcsSkeletonText: {
+    prototype: WcsSkeletonText;
+    new (): WcsSkeletonText;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/bundle/wcs-skeleton-text.js

@@ -0,0 +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}}))}const h=o;const c=a;export{h as WcsSkeletonText,c as defineCustomElement};
+//# sourceMappingURL=wcs-skeleton-text.js.map

package/bundle/wcs-skeleton-text.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["skeletonTextCss","WcsSkeletonTextStyle0","SkeletonText","proxyCustomElement","H","render","h","key"],"sources":["src/components/skeleton-text/skeleton-text.scss?tag=wcs-skeleton-text&encapsulation=shadow","src/components/skeleton-text/skeleton-text.tsx"],"sourcesContent":["@import \"../skeleton/skeleton.scss\";\n\n:host {\n    --wcs-skeleton-text-height: var(--wcs-semantic-font-size-base);\n    --wcs-skeleton-text-height-h1: var(--wcs-semantic-font-size-heading-1);\n    --wcs-skeleton-text-height-h2: var(--wcs-semantic-font-size-heading-2);\n    --wcs-skeleton-text-height-h3: var(--wcs-semantic-font-size-heading-3);\n    --wcs-skeleton-text-height-body: var(--wcs-semantic-font-size-body-3);\n    --wcs-skeleton-text-height-caption: var(--wcs-semantic-font-size-caption-1);\n}\n\n:host([height=h1]) {\n    height: var(--wcs-skeleton-text-height-h1);\n}\n\n:host([height=h2]) {\n    height: var(--wcs-skeleton-text-height-h2);\n}\n\n:host([height=h3]) {\n    height: var(--wcs-skeleton-text-height-h3);\n}\n\n:host([height=body]) {\n    height: var(--wcs-skeleton-text-height-body);\n}\n\n:host([height=caption]) {\n    height: var(--wcs-skeleton-text-height-caption);\n}\n","import { Component, ComponentInterface, h, Prop } from \"@stencil/core\";\nimport { WcsSkeletonAnimation } from \"../skeleton/skeleton-interface\";\n\n/**\n * Use a skeleton text as a placeholder for titles or paragraphs.\n * \n *\n * @cssprop --wcs-skeleton-text-height - Height of the skeleton text\n * @cssprop --wcs-skeleton-text-height-h1 - Height of the skeleton text for heading 1\n * @cssprop --wcs-skeleton-text-height-h2 - Height of the skeleton text for heading 2\n * @cssprop --wcs-skeleton-text-height-h3 - Height of the skeleton text for heading 3\n * @cssprop --wcs-skeleton-text-height-body - Height of the skeleton text for body\n * @cssprop --wcs-skeleton-text-height-caption - Height of the skeleton text for caption\n * \n * @cssprop --wcs-skeleton-height - _(Shared among all skeleton types)_<br/>Height of the skeleton\n * @cssprop --wcs-skeleton-min-height - _(Shared among all skeleton types)_<br/> Minimum height of the skeleton\n * @cssprop --wcs-skeleton-width - _(Shared among all skeleton types)_<br/> Width of the skeleton\n * @cssprop --wcs-skeleton-background-color - _(Shared among all skeleton types)_<br/> Background color of the skeleton (default is a gradient)\n * @cssprop --wcs-skeleton-animation-duration - _(Shared among all skeleton types)_<br/> Duration of the skeleton animation, if applicable\n */\n@Component({\n    tag: 'wcs-skeleton-text',\n    styleUrl: 'skeleton-text.scss',\n    shadow: true\n})\nexport class SkeletonText implements ComponentInterface {\n\n    /**\n     * Specifies the animation of the skeleton\n     */\n    @Prop({reflect: true}) animation: WcsSkeletonAnimation = 'glide';\n\n    /**\n     * Specifies the line height of the text skeleton\n     */\n    @Prop() height: 'h1' | 'h2' | 'h3' | 'caption' | 'body' = 'body';\n\n    render() {\n        return <span aria-hidden=\"true\"></span>;\n    }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAkB,moDACxB,MAAAC,EAAeD,E,MCwBFE,EAAYC,EAAA,MAAAD,UAAAE,E,iFAKoC,Q,YAKC,M,CAE1D,MAAAC,GACI,OAAOC,EAAA,QAAAC,IAAA,yDAAkB,Q"}

package/bundle/wcs-spinner.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsSpinner extends Components.WcsSpinner, HTMLElement {}
+export const WcsSpinner: {
+    prototype: WcsSpinner;
+    new (): WcsSpinner;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/bundle/wcs-spinner.js

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

package/bundle/wcs-spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":""}

package/bundle/wcs-switch.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsSwitch extends Components.WcsSwitch, HTMLElement {}
+export const WcsSwitch: {
+    prototype: WcsSwitch;
+    new (): WcsSwitch;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/bundle/wcs-switch.js

@@ -0,0 +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-2e9b9605.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}}))}const m=w;const g=u;export{m as WcsSwitch,g as defineCustomElement};
+//# sourceMappingURL=wcs-switch.js.map

package/bundle/wcs-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["switchCss","WcsSwitchStyle0","SWITCH_INHERITED_ATTRS","Switch","proxyCustomElement","H","this","switchId","switchIds","inheritedAttributes","handleChange","ev","stopImmediatePropagation","preventDefault","toggleSwitchState","handleHostClick","e","stopPropagation","handleInputClick","detail","disabled","checked","wcsChange","emit","handleFocus","event","wcsFocus","handleBlur","wcsBlur","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeInput","getLabel","getSlottedContentText","render","h","Host","key","htmlFor","name","class","onBlur","bind","onChange","onClick","onFocus","id","type","ref"],"sources":["src/components/switch/switch.scss?tag=wcs-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-switch-background-color-initial: var(--wcs-semantic-color-background-control-indicator-default);\n    --wcs-switch-background-color-final: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-switch-background-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-switch-background-color-disabled-selected: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-switch-background-color-hover-selected: var(--wcs-semantic-color-background-control-indicator-hover);\n\n    --wcs-switch-padding-horizontal: var(--wcs-semantic-spacing-small);\n    --wcs-switch-padding-vertical: calc((var(--wcs-switch-height) - var(--wcs-switch-dot-size)) / 2); // to center the dot vertically, at the middle of the dot\n\n    // TODO : Les variables figma sont bindées sur les primitives\n    --wcs-switch-dot-color-default: var(--wcs-semantic-color-foreground-brand); // the dot color when the switch is not checked\n    --wcs-switch-dot-color-selected: var(--wcs-semantic-color-foreground-control-indicator-selected); // the dot color when the switch is checked\n    --wcs-switch-dot-color-disabled: var(--wcs-semantic-color-foreground-control-indicator-disabled);\n\n    --wcs-switch-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-switch-text-color-selected: var(--wcs-semantic-color-text-primary);\n    --wcs-switch-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-switch-text-font-weight-default: var(--wcs-semantic-font-weight-medium);\n    --wcs-switch-text-font-weight-selected: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-switch-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-switch-dot-translate-x: calc(var(--wcs-switch-width) - var(--wcs-switch-dot-size) - (2 * var(--wcs-switch-padding-horizontal)));\n    --wcs-switch-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    --wcs-switch-dot-size: 0.875rem; /* 14px */\n\n    --wcs-switch-height: var(--wcs-semantic-size-xs);\n    --wcs-switch-width: var(--wcs-semantic-size-l);\n\n    --wcs-switch-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-switch-gap: var(--wcs-semantic-spacing-base);\n\n    display: inline-flex;\n}\n\n:host([disabled]) {\n    .text {\n        color: var(--wcs-switch-text-color-disabled);\n    }\n\n    .wcs-container {\n        cursor: not-allowed;\n    }\n}\n\n/* Customize the label (the wcs-container) */\n.wcs-container {\n    position: relative;\n    display: flex;\n    user-select: none;\n    margin-bottom: 0;\n\n    gap: var(--wcs-switch-gap);\n}\n\n.wcs-container:has(input:focus-visible) {\n    @include focus-outline($outline-color: var(--wcs-switch-outline-color-focus), $border-radius: var(--wcs-switch-border-radius));\n}\n\n/* If the selector focus-visible is not supported by the browser, use focus-within instead */\n@supports not selector(.wcs-container:has(input:focus-visible)){\n    .wcs-container:focus-within {\n        @include focus-outline($outline-color: var(--wcs-switch-outline-color-focus), $border-radius: var(--wcs-switch-border-radius));\n    }\n}\n\n/* Let the user choose the alignment of the checkbox with the label text */\n:host([label-alignment=\"top\"]) {\n    .wcs-container {\n        align-items: start;\n    }\n}\n\n:host([label-alignment=\"center\"]) {\n    .wcs-container {\n        align-items: center;\n    }\n}\n\n:host([label-alignment=\"bottom\"]) {\n    .wcs-container {\n        align-items: flex-end;\n    }\n}\n\n/* Hide the browser's default switch */\n.wcs-container input {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n}\n\n.text {\n    color: var(--wcs-switch-text-color-default);\n\n    font-weight: var(--wcs-switch-text-font-weight-default);\n    line-height: 1.375;\n}\n\n.wcs-container:not([aria-disabled]) input:checked ~ .text {\n    font-weight: var(--wcs-switch-text-font-weight-selected);\n    color: var(--wcs-switch-text-color-selected);\n}\n\n.wcs-checkmark::before {\n    position: absolute;\n    transition: all var(--wcs-switch-transition-duration) ease-out;\n}\n\n.wcs-checkmark::before {\n    bottom: var(--wcs-switch-padding-vertical);\n    left: var(--wcs-switch-padding-horizontal);\n    width: var(--wcs-switch-dot-size);\n    height: var(--wcs-switch-dot-size);\n    content: \"\";\n    border-radius: 50%;\n    background-color: var(--wcs-switch-dot-color-default);\n}\n\n:host([disabled]:not([checked])) {\n    .wcs-checkmark::before {\n        background-color: var(--wcs-switch-dot-color-disabled);\n    }\n\n    .wcs-checkmark {\n        background-color: var(--wcs-switch-background-color-disabled);\n    }\n}\n\n:host([disabled][checked]) {\n    .wcs-checkmark {\n        background-color: var(--wcs-switch-background-color-disabled-selected);\n    }\n}\n\n:host([disabled]) {\n    .text {\n        color: var(--wcs-switch-text-color-disabled);\n    }\n}\n\n.wcs-checkmark {\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    width: var(--wcs-switch-width);\n    height: var(--wcs-switch-height);\n    border-radius: var(--wcs-switch-border-radius);\n    background-color: var(--wcs-switch-background-color-initial);\n\n    min-width: 3rem;\n    position: relative;\n}\n\n.wcs-container:not([aria-disabled]) {\n    cursor: pointer;\n}\n\n/* When the switch is checked, change the dot to white */\ninput:not([disabled]):checked + .wcs-checkmark::before,\n.wcs-container:focus input:not([disabled]) + .wcs-checkmark::before {\n    background-color: var(--wcs-switch-dot-color-selected);\n}\n\n/* Switch transition */\ninput:checked + .wcs-checkmark::before {\n    transform: translateX(var(--wcs-switch-dot-translate-x));\n}\n\n/* When the switch is checked, change background */\ninput:not([disabled]):checked + .wcs-checkmark {\n    background-color: var(--wcs-switch-background-color-final);\n}\n\n/* When the switch is checked and hover, change background */\n.wcs-container:hover input:not([disabled]):checked + .wcs-checkmark {\n    background-color: var(--wcs-switch-background-color-hover-selected);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Method,\n    Prop\n} from '@stencil/core';\nimport { SwitchChangeEventDetail, SwitchLabelAlignment } from './switch-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { ControlComponentWithLabel, getSlottedContentText } from \"../../utils/control-component-interface\";\n\nconst SWITCH_INHERITED_ATTRS = ['tabindex'];\n\n/**\n * The switch component is a control used to switch between on and off state.\n * \n * @cssprop --wcs-switch-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-switch-text-color-default - Color of the text when the switch is not selected\n * @cssprop --wcs-switch-text-color-selected - Color of the text when the switch is selected\n * @cssprop --wcs-switch-text-color-disabled - Color of the text when the switch is disabled\n\n * \n * @cssprop --wcs-switch-background-color-initial - Background color of the switch when not selected\n * @cssprop --wcs-switch-background-color-final - Background color of the switch when selected\n * @cssprop --wcs-switch-background-color-disabled - Background color of the switch when disabled\n * @cssprop --wcs-switch-background-color-disabled-selected - Background color of the switch when disabled and selected\n * @cssprop --wcs-switch-background-color-hover-selected - Background color of the switch when hovered and selected\n * \n * @cssprop --wcs-switch-height - Height of the switch\n * @cssprop --wcs-switch-width - Width of the switch\n * @cssprop --wcs-switch-border-radius - Border radius of the switch\n * @cssprop --wcs-switch-padding-horizontal - Horizontal padding of the switch\n * @cssprop --wcs-switch-padding-vertical - Vertical padding of the switch\n * \n * @cssprop --wcs-switch-dot-color-default - Color of the dot when not selected\n * @cssprop --wcs-switch-dot-color-selected - Color of the dot when selected\n * @cssprop --wcs-switch-dot-color-disabled - Color of the dot when disabled\n * \n * @cssprop --wcs-switch-dot-translate-x - Horizontal translation of the dot (from left to right = right to left)\n * @cssprop --wcs-switch-dot-size - Size of the dot\n * \n * @cssprop --wcs-switch-gap - Gap between the switch and the text\n */\n@Component({\n    tag: 'wcs-switch',\n    styleUrl: 'switch.scss',\n    shadow: {\n        delegatesFocus: true,\n    }\n})\nexport class Switch implements ComponentInterface, MutableAriaAttribute, ControlComponentWithLabel {\n    @Element() private el!: HTMLElement;\n    private switchId = `wcs-switch-${switchIds++}`;\n    private nativeInput!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    @Prop() name = this.switchId;\n\n    /**\n     * If `true`, the switch is selected.\n     */\n    @Prop({ reflect: true }) checked: boolean = false;\n\n    /**\n     * Specifie the alignment of the switch with the label content\n     */\n    @Prop({ reflect: true }) labelAlignment: SwitchLabelAlignment = 'center';\n\n    /**\n     * Specify whether the switch is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<SwitchChangeEventDetail>;\n\n    /**\n     * Emitted when the switch has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n    \n    /**\n     * Emitted when the switch loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    \n    handleChange(ev: Event) {\n        ev.stopImmediatePropagation();\n        ev.preventDefault();\n        this.toggleSwitchState();\n    }\n\n    @Listen('click')\n    async handleHostClick(e: Event){\n        e.preventDefault();\n        e.stopPropagation();\n\n        this.toggleSwitchState();\n    }\n\n    handleInputClick(ev: PointerEvent) {\n        // If the click event is coming from the mouse we ignore it.\n        // We only want to handle the keyboard interactions as it is the only purpose of this native input\n        if (ev.detail) {\n            ev.stopImmediatePropagation()\n            ev.preventDefault();\n        }\n    }\n\n    toggleSwitchState() {\n        if (this.disabled) return;\n        \n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked,\n        });\n    }\n\n    handleFocus(event: FocusEvent) {\n        this.wcsFocus.emit(event);\n    }\n\n    handleBlur(event: FocusEvent) {\n        this.wcsBlur.emit(event);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, SWITCH_INHERITED_ATTRS),\n        };\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    @Method()\n    async getLabel(): Promise<string> {\n        return getSlottedContentText(this.el);\n    }\n    \n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input onBlur={this.handleBlur.bind(this)}\n                           onChange={this.handleChange.bind(this)}\n                           onClick={this.handleInputClick.bind(this)}\n                           onFocus={this.handleFocus.bind(this)}\n                           checked={this.checked}\n                           id={this.name}\n                           class=\"wcs-switch\"\n                           type=\"checkbox\"\n                           name={this.name}\n                           disabled={this.disabled}\n                           ref={el => {this.nativeInput = el}}\n                           {...this.inheritedAttributes}>\n                    </input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot/>\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet switchIds = 0;\n"],"mappings":"iJAAA,MAAMA,EAAY,2mJAClB,MAAAC,EAAeD,ECgBf,MAAME,EAAyB,CAAC,Y,MAwCnBC,EAAMC,EAAA,MAAAD,UAAAE,E,2KAEPC,KAAAC,SAAW,cAAcC,MAEzBF,KAAAG,oBAA4C,G,UAErCH,KAAKC,S,aAKwB,M,oBAKoB,S,cAKnB,K,CAkB7C,YAAAG,CAAaC,GACTA,EAAGC,2BACHD,EAAGE,iBACHP,KAAKQ,mB,CAIT,qBAAMC,CAAgBC,GAClBA,EAAEH,iBACFG,EAAEC,kBAEFX,KAAKQ,mB,CAGT,gBAAAI,CAAiBP,GAGb,GAAIA,EAAGQ,OAAQ,CACXR,EAAGC,2BACHD,EAAGE,gB,EAIX,iBAAAC,GACI,GAAIR,KAAKc,SAAU,OAEnBd,KAAKe,SAAWf,KAAKe,QACrBf,KAAKgB,UAAUC,KAAK,CAChBF,QAASf,KAAKe,S,CAItB,WAAAG,CAAYC,GACRnB,KAAKoB,SAASH,KAAKE,E,CAGvB,UAAAE,CAAWF,GACPnB,KAAKsB,QAAQL,KAAKE,E,CAGtB,iBAAAI,GACIvB,KAAKG,oBAAmBqB,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsB1B,KAAK2B,KAC3BC,EAAkB5B,KAAK2B,GAAI/B,G,CAKtC,sBAAMiC,CAAiBC,EAAyBC,GAC5CC,EAAqBhC,KAAKiC,YAAaH,EAAMC,E,CAIjD,cAAMG,GACF,OAAOC,EAAsBnC,KAAK2B,G,CAGtC,MAAAS,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,SAAAE,IAAA,2CAAOC,QAASxC,KAAKyC,KAAMC,MAAM,gBAAe,gBAAgB1C,KAAKc,UACjEuB,EAAA,QAAAb,OAAAC,OAAA,CAAAc,IAAA,2CAAOI,OAAQ3C,KAAKqB,WAAWuB,KAAK5C,MAC7B6C,SAAU7C,KAAKI,aAAawC,KAAK5C,MACjC8C,QAAS9C,KAAKY,iBAAiBgC,KAAK5C,MACpC+C,QAAS/C,KAAKkB,YAAY0B,KAAK5C,MAC/Be,QAASf,KAAKe,QACdiC,GAAIhD,KAAKyC,KACTC,MAAM,aACNO,KAAK,WACLR,KAAMzC,KAAKyC,KACX3B,SAAUd,KAAKc,SACfoC,IAAKvB,IAAO3B,KAAKiC,YAAcN,CAAE,GAC7B3B,KAAKG,sBAEhBkC,EAAA,QAAAE,IAAA,2CAAMG,MAAM,kBACZL,EAAA,QAAAE,IAAA,2CAAMG,MAAM,QACRL,EAAA,QAAAE,IAAA,+C,kQAQxB,IAAIrC,EAAY,E"}

package/bundle/wcs-tab.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsTab extends Components.WcsTab, HTMLElement {}
+export const WcsTab: {
+    prototype: WcsTab;
+    new (): WcsTab;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/bundle/wcs-tab.js

@@ -0,0 +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}}))}const r=d;const b=i;export{r as WcsTab,b as defineCustomElement};
+//# sourceMappingURL=wcs-tab.js.map

package/bundle/wcs-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tabCss","WcsTabStyle0","Tab","proxyCustomElement","H","componentDidLoad","this","tabLoaded","emit","render","h","Host","key","slot","role"],"sources":["src/components/tab/tab.scss?tag=wcs-tab&encapsulation=shadow","src/components/tab/tab.tsx"],"sourcesContent":[":host {\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n","import { Component, Prop, h, Host, Event, EventEmitter, ComponentInterface } from '@stencil/core';\n\n/**\n * Tab content component.\n * Use this component to specify the content of a component.\n */\n@Component({\n    tag: 'wcs-tab',\n    styleUrl: 'tab.scss',\n    shadow: true,\n})\nexport class Tab implements ComponentInterface {\n    /**\n     * The header you want to be displayed for this tab.\n     */\n    @Prop({ reflect: true }) header: string;\n\n    /**\n     * The id of the tab. It should be unique.\n     */\n    @Prop() itemKey: any;\n\n    // TODO: See if there is a solution that doesn't pollute the API.\n    /**\n     * Do not use, meant for internal use only.\n     * @inner\n     * @ignore\n     */\n    @Event()\n    tabLoaded!: EventEmitter<void>;\n\n    componentDidLoad() {\n        this.tabLoaded.emit();\n    }\n\n    render() {\n        return (\n            <Host slot=\"wcs-tab\" role=\"tabpanel\">\n                <slot></slot>\n            </Host>\n        );\n    }\n}\n"],"mappings":"gEAAA,MAAMA,EAAS,oDACf,MAAAC,EAAeD,E,MCUFE,EAAGC,EAAA,MAAAD,UAAAE,E,oJAoBZ,gBAAAC,GACIC,KAAKC,UAAUC,M,CAGnB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,UAAUC,KAAK,YACtBJ,EAAA,QAAAE,IAAA,6C"}

package/bundle/wcs-tabs.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsTabs extends Components.WcsTabs, HTMLElement {}
+export const WcsTabs: {
+    prototype: WcsTabs;
+    new (): WcsTabs;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/bundle/wcs-tabs.js

@@ -0,0 +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-2e9b9605.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}}))}const f=w;const m=v;export{f as WcsTabs,m as defineCustomElement};
+//# sourceMappingURL=wcs-tabs.js.map

package/bundle/wcs-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tabsCss","WcsTabsStyle0","TABS_INHERITED_ATTRS","Tabs","proxyCustomElement","H","this","inheritedAttributes","tabsId","selectedIndexChanged","newValue","currentActiveTabIndex","selectedTabkeyChanged","updateCurrentActiveIndexByTabKey","onMobileChange","popper","destroy","emitActiveTabChange","tabChange","emit","tabName","headers","tabIndex","selectedKey","tabs","itemKey","i","length","tab","onTabLoaded","refreshHeaders","onWindowClickEvent","event","mobile","clickedOnMobileButtonOrOverlay","composedPath","some","el","mobileButton","popoverDiv","mobileOverlayExpanded","tabsDidLoadWithResizeObserver","smallBreakpoint","getComputedStyle","getPropertyValue","smallBreakpointValue","parseInt","ResizeObserver","entry","cr","contentRect","paddingRight","right","width","paddingLeft","left","initMobileOverlay","createPopper","placement","strategy","modifiers","name","options","offset","componentDidLoad","putTabsInCorrectDivIfTheyAreNot","selectedIndex","resizeObserver","observe","document","body","componentDidRender","update","tabDiv","shadowRoot","querySelector","Array","from","querySelectorAll","filter","node","parentNode","forEach","parentElement","isEqualNode","removeChild","appendChild","handleKeyDown","ev","target","key","selectTabAndEmitChangeEvent","preventDefault","_a","previousElementSibling","classList","contains","focus","_b","nextElementSibling","firstTab","lastTab","handleKeyDownMobile","x","push","getAttribute","tabsEl","assignedElements","index","componentWillUpdate","headersOnly","updateTabVisibility","hideAllTabsContent","componentWillLoad","Object","assign","inheritAriaAttributes","inheritAttributes","disconnectedCallback","disconnect","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeTablist","idx","hidden","onMobileButtonClick","tabElementToFocus","requestAnimationFrame","onMobileButtonKeyDown","mobileLayout","h","id","class","role","ref","onClick","onKeyDown","evt","onBlur","$event","stopImmediatePropagation","SelectArrow","up","description","map","header","desktopLayout","render","Host","onSlotchange","onTabsSlotChange","tabId","setAttribute","at"],"sources":["src/components/tabs/tabs.scss?tag=wcs-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-tabs-indicator-height: calc(var(--wcs-semantic-size-base) / 2);\n    --wcs-tabs-indicator-background-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-tabs-indicator-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-tabs-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-tabs-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);\n    --wcs-tabs-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-tabs-color-selected: var(--wcs-semantic-color-foreground-action-secondary-default);\n\n    --wcs-tabs-background-color-focus: var(--wcs-semantic-color-background-action-secondary-focus);\n    --wcs-tabs-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-tabs-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);\n\n    --wcs-tabs-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-tabs-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-tabs-font-weight-default: var(--wcs-semantic-font-weight-roman);\n    --wcs-tabs-font-weight-selected: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-tabs-padding-top: var(--wcs-semantic-spacing-base);\n    --wcs-tabs-padding-right: var(--wcs-semantic-spacing-large);\n    --wcs-tabs-padding-bottom: calc(var(--wcs-semantic-spacing-base) + var(--wcs-tabs-indicator-height));\n    --wcs-tabs-padding-left: var(--wcs-semantic-spacing-large);\n\n    --wcs-tabs-gutter-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-tabs-gutter-background-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-tabs-headers-border-bottom: var(--wcs-tabs-gutter-border-width) solid var(--wcs-tabs-gutter-background-color);\n\n    --wcs-tabs-mobile-breakpoint: var(--wcs-phone-breakpoint-max-width, 575px);\n\n    --wcs-tabs-mobile-overlay-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-tabs-mobile-overlay-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-tabs-mobile-overlay-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-tabs-mobile-overlay-padding: var(--wcs-semantic-spacing-base);\n    --wcs-tabs-mobile-overlay-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-tabs-mobile-gap: var(--wcs-semantic-spacing-base);\n    --wcs-tabs-mobile-padding: 0 var(--wcs-semantic-spacing-base);\n    --wcs-tabs-mobile-height: var(--wcs-semantic-size-m);\n    --wcs-tabs-mobile-font-weight-default: var(--wcs-semantic-font-weight-medium);\n    --wcs-tabs-mobile-font-weight-active: var(--wcs-semantic-font-weight-black);\n    --wcs-tabs-mobile-font-size: var(--wcs-semantic-font-size-base);\n    --wcs-tabs-mobile-color: var(--wcs-semantic-color-text-primary);\n    --wcs-tabs-mobile-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-tabs-mobile-background-color-focus: var(--wcs-semantic-color-background-action-secondary-focus);\n    --wcs-tabs-mobile-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-tabs-mobile-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);\n    --wcs-tabs-mobile-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-tabs-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    display: block;\n}\n\n:host([align=start]) .wcs-tabs-headers {\n    justify-content: start;\n}\n\n:host([align=end]) .wcs-tabs-headers {\n    justify-content: end;\n}\n\n:host([align=center]) .wcs-tabs-headers {\n    justify-content: center;\n}\n\n.wcs-tabs-headers {\n    overflow-x: auto;\n    display: flex;\n    flex-direction: row;\n    position: relative;\n}\n\n:host([gutter]) {\n    .wcs-tabs-headers {\n        border-bottom: var(--wcs-tabs-headers-border-bottom);\n    }\n}\n\n.wcs-tab-header {\n    position: relative;\n\n    padding: var(--wcs-tabs-padding-top) var(--wcs-tabs-padding-right) var(--wcs-tabs-padding-bottom) var(--wcs-tabs-padding-left);\n    border-radius: var(--wcs-tabs-border-radius) var(--wcs-tabs-border-radius) 0 0;\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    outline: none;\n    transition: all var(--wcs-tabs-transition-duration) ease-out;\n\n    span {\n        text-align: center;\n        color: var(--wcs-tabs-color-default);\n        font-size: 1rem;\n        font-weight: var(--wcs-tabs-font-weight-default);\n    }\n\n    &:hover {\n        background-color: var(--wcs-tabs-background-color-hover);\n\n        span {\n            color: var(--wcs-tabs-color-hover);\n        }\n    }\n\n    // TODO : mettre le focus outline sur la wcs-tab-header comme dans figma\n    &:focus-visible > span {\n        @include focus-outline(var(--wcs-tabs-border-color-focus));\n    }\n\n    &:active {\n        background-color: var(--wcs-tabs-background-color-press);\n\n        span {\n            color: var(--wcs-tabs-color-press);\n        }\n    }\n}\n\n\n.active {\n    span {\n        font-weight: var(--wcs-tabs-font-weight-selected);\n        color: var(--wcs-tabs-color-selected);\n    }\n\n    &::after {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        content: \"\";\n        height: var(--wcs-tabs-indicator-height);\n        background-color: var(--wcs-tabs-indicator-background-color);\n        border-radius: var(--wcs-tabs-indicator-border-radius);\n    }\n}\n\n/* ============= */\n/* region MOBILE */\n/* ============= */\n\nbutton {\n    background-color: inherit;\n}\n\n#mobile-button {\n    border: 0;\n    font-family: var(--wcs-font-sans-serif), sans-serif;\n    text-align: center;\n    color: var(--wcs-tabs-color-default);\n    font-size: 1rem;\n    font-weight: var(--wcs-tabs-font-weight-default);\n    padding-right: calc(0.75 * var(--wcs-tabs-padding-right)); /* reduce padding right because of the arrow */\n\n    span {\n        display: flex;\n        align-items: center;\n    }\n\n    .arrow {\n        fill: var(--wcs-tabs-color-default);\n    }\n\n    &:hover {\n        .arrow {\n            fill: var(--wcs-tabs-color-hover);\n        }\n    }\n\n    &:active {\n        .arrow {\n            fill: var(--wcs-tabs-color-press);\n        }\n    }\n}\n\n.popover {\n    display: none;\n    z-index: 9999;\n    overflow: hidden;\n    border: var(--wcs-tabs-mobile-overlay-border-width) solid var(--wcs-tabs-mobile-overlay-border-color);\n    border-radius: var(--wcs-tabs-mobile-overlay-border-radius);\n    padding: var(--wcs-tabs-mobile-overlay-padding);\n    background-color: var(--wcs-tabs-mobile-overlay-background-color);\n\n    [role=tab] {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        cursor: pointer;\n        user-select: none;\n\n        gap: var(--wcs-tabs-mobile-gap);\n        padding: var(--wcs-tabs-mobile-padding);\n        height: var(--wcs-tabs-mobile-height);\n        font-weight: var(--wcs-tabs-mobile-font-weight-default);\n        font-size: var(--wcs-tabs-mobile-font-size);\n\n        color: var(--wcs-tabs-mobile-color);\n        background-color: var(--wcs-tabs-mobile-background-color);\n        border-radius: var(--wcs-tabs-mobile-border-radius);\n\n        transition-duration: var(--wcs-tabs-transition-duration);\n        transition-property: background-color, color;\n        transition-timing-function: ease;\n\n        overflow: hidden;\n        white-space: nowrap;\n\n        &:focus {\n            background-color: var(--wcs-tabs-mobile-background-color-focus);\n        }\n\n        &:focus-visible {\n            @include focus-outline($border-radius: var(--wcs-tabs-mobile-border-radius), $outline-offset: 0);\n        }\n\n        &:hover {\n            background-color: var(--wcs-tabs-mobile-background-color-hover);\n        }\n\n        &:active {\n            background-color: var(--wcs-tabs-mobile-background-color-press);\n        }\n\n    }\n\n    .mobile-active {\n        font-weight: var(--wcs-tabs-mobile-font-weight-active);\n    }\n}\n\n.show {\n    display: block;\n}\n\n/* ================ */\n/* endregion MOBILE */\n/* ================ */\n","import {\n    Component,\n    Prop,\n    Element,\n    State,\n    ComponentInterface,\n    Event,\n    EventEmitter,\n    Watch,\n    h,\n    Host,\n    Listen, Method\n} from '@stencil/core';\n\nimport { WcsTabsAlignment, WcsTabChangeEvent } from './tabs-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport {\n    inheritAriaAttributes,\n    inheritAttributes,\n    setOrRemoveAttribute\n} from \"../../utils/helpers\";\nimport { SelectArrow } from \"../select/select-arrow\";\nimport { createPopper, Instance } from \"@popperjs/core\";\n\nconst TABS_INHERITED_ATTRS = [];\n\n/**\n * Tabs component to switch between tab content. Use in conjunction with `wcs-tab`.\n * \n * ## Accessibility guidelines 💡\n * > - Mobile display should be used for narrower screens (automatically set by default).\n * > - The component respects the W3C [tab pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)\n * \n * @cssprop --wcs-tabs-indicator-height - Height of the tabs indicator \n * @cssprop --wcs-tabs-indicator-background-color - Background color of the tabs indicator\n * @cssprop --wcs-tabs-indicator-border-radius - Border radius of the tabs indicator\n * @cssprop --wcs-tabs-color-default - Text color of the tabs\n * @cssprop --wcs-tabs-color-hover - Text color of the tabs when hovered\n * @cssprop --wcs-tabs-color-press - Text color of the tabs when pressed\n * @cssprop --wcs-tabs-color-focus - Text color of the tabs when focused\n * @cssprop --wcs-tabs-color-selected - Text color of the tabs when selected\n * @cssprop --wcs-tabs-background-color-focus - Background color of the tabs when focused\n * @cssprop --wcs-tabs-background-color-hover - Background color of the tabs when hovered\n * @cssprop --wcs-tabs-background-color-press - Background color of the tabs when pressed\n * @cssprop --wcs-tabs-border-radius - Border radius of the tabs\n * @cssprop --wcs-tabs-border-color-focus - Outline color on a focused tab\n * @cssprop --wcs-tabs-font-weight-default - Font weight of the tabs\n * @cssprop --wcs-tabs-font-weight-selected - Font weight of the tabs when selected\n * @cssprop --wcs-tabs-padding-top - Padding top of the tabs\n * @cssprop --wcs-tabs-padding-right - Padding right of the tabs\n * @cssprop --wcs-tabs-padding-bottom - Padding bottom of the tabs\n * @cssprop --wcs-tabs-padding-left - Padding left of the tabs\n * @cssprop --wcs-tabs-headers-border-bottom - Border bottom (gutter) below the tabs\n * @cssprop --wcs-tabs-transition-duration - Transition duration of the tabs\n * @cssprop --wcs-tabs-mobile-breakpoint - Breakpoint for mobile display (default: 575px)\n * @cssprop --wcs-tabs-mobile-overlay-border-width - Border width of the mobile overlay\n * @cssprop --wcs-tabs-mobile-overlay-border-color - Border color of the mobile overlay\n * @cssprop --wcs-tabs-mobile-overlay-background-color - Background color of the mobile overlay\n * @cssprop --wcs-tabs-mobile-overlay-padding - Padding of the mobile overlay\n * @cssprop --wcs-tabs-mobile-overlay-border-radius - Border radius of the mobile overlay\n * @cssprop --wcs-tabs-mobile-gap - Gap between the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-padding - Padding of the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-height - Height of the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-font-weight-default - Default weight of the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-font-weight-active - Active font weight of the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-font-size - Font size of the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-color - Text color of the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-background-color-default - Default background color of the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-background-color-focus - Focused background color of the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-background-color-hover - Hovered background color of the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-background-color-press - Pressed background color of the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-border-radius - Border radius of the mobile tabs in the overlay\n */\n@Component({\n    tag: 'wcs-tabs',\n    styleUrl: 'tabs.scss',\n    shadow: true,\n})\nexport class Tabs implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLWcsTabsElement;\n    private nativeTablist!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * Tab headers alignment.\n     */\n    @Prop({reflect: true}) align: WcsTabsAlignment = 'start';\n\n    /**\n     * Current selected tab index.\n     * Starts at 0.\n     */\n    @Prop() selectedIndex: number = 0;\n\n    @Prop() selectedKey: any;\n\n    /**\n     * Whether to skip rendering the tabpanel with the content of the selected tab. Use this prop if you plan to\n     * separately render the tab content.\n     */\n    @Prop({ reflect: true }) headersOnly: boolean = false;\n    /** Determines if tabs header should have a border at the bottom */\n    @Prop({ reflect: true }) gutter: boolean;\n\n    /**\n     * Description is used to provide aria-label for the tabs container which has `role=\"tablist\"`.\n     */\n    @Prop() description: string;\n\n    // region MOBILE\n    \n    /**\n     * Mobile display : This div is shown on the user interface when the tabs are expanded\n     * @private\n     */\n    private popoverDiv!: HTMLDivElement;\n\n    private popper: Instance;\n    \n    @State() private mobileOverlayExpanded: boolean = false;\n\n    /**\n     * If true, the tabs will be displayed as a dropdown list containing the tabs. Useful for narrower screens.\n     */\n    @State() private mobile: boolean = false;\n\n    /**\n     * Mobile display: the selected tab semantically become a button that opens an overlay\n     */\n    private mobileButton!: HTMLButtonElement;\n\n    /**\n     * Observe the screen resize to switch between mobile and desktop mode\n     */\n    private resizeObserver: ResizeObserver;\n\n\n    // endregion MOBILE\n\n    /**\n     *\n     * Emitted when the selected tab change.\n     */\n    @Event() tabChange!: EventEmitter<WcsTabChangeEvent>;\n\n    @State() private headers: string[] = [];\n\n    @State() private currentActiveTabIndex = 0;\n\n    private tabsId: number = tabsId++;\n\n    @Watch('selectedIndex')\n    selectedIndexChanged(newValue: number) {\n        this.currentActiveTabIndex = newValue;\n    }\n\n    @Watch('selectedKey')\n    selectedTabkeyChanged(newValue: any) {\n        this.updateCurrentActiveIndexByTabKey(newValue);\n    }\n    \n    @Watch('mobile')\n    onMobileChange(newValue: boolean) {\n        // Remove the popper instance when switching from mobile to desktop for performance\n        if (!newValue) {\n            this.popper.destroy();\n            this.popper = null;\n        }\n    }\n\n    private emitActiveTabChange() {\n        this.tabChange.emit({\n            tabName: this.headers[this.currentActiveTabIndex],\n            tabIndex: this.currentActiveTabIndex,\n            selectedKey: this.tabs[this.currentActiveTabIndex].itemKey\n        });\n    }\n\n    private updateCurrentActiveIndexByTabKey(newValue: any) {\n        for (let i = 0; i < this.tabs.length; i++) {\n            const tab = this.tabs[i];\n            if (tab.itemKey === newValue) {\n                this.currentActiveTabIndex = i;\n            }\n        }\n    }\n\n    @Listen('tabLoaded')\n    onTabLoaded() {\n        this.refreshHeaders();\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        if (this.mobile) {\n            const clickedOnMobileButtonOrOverlay = event.composedPath().some(el => el === this.mobileButton || el === this.popoverDiv);\n            if (this.mobileOverlayExpanded && !clickedOnMobileButtonOrOverlay) {\n                this.mobileOverlayExpanded = false;\n            }\n        }\n    }\n\n    /**\n     * Init resize observer for mobile\n     */\n    private tabsDidLoadWithResizeObserver(): ResizeObserver {\n        const smallBreakpoint = getComputedStyle(this.el).getPropertyValue('--wcs-tabs-mobile-breakpoint') || '575px';\n        const smallBreakpointValue = parseInt(smallBreakpoint, 10);\n\n        return new ResizeObserver(entry => {\n            const cr = entry[0].contentRect;\n            const paddingRight = cr.right - cr.width;\n            const paddingLeft = cr.left;\n            // Switch to mobile mode if the screen is smaller than the breakpoint\n            this.mobile = cr.width <= smallBreakpointValue - (paddingLeft + paddingRight);\n        });\n    }\n\n\n    private initMobileOverlay() {\n        this.popper = createPopper(this.mobileButton, this.popoverDiv, {\n            placement: 'bottom-start',\n            strategy: 'fixed',\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n    }\n\n    componentDidLoad() {\n        this.putTabsInCorrectDivIfTheyAreNot();\n        this.refreshHeaders();\n        if (this.selectedIndex) {\n            this.currentActiveTabIndex = this.selectedIndex;\n        }\n        if (this.selectedKey) {\n            this.updateCurrentActiveIndexByTabKey(this.selectedKey);\n        }\n        if (!this.resizeObserver) {\n            this.resizeObserver = this.tabsDidLoadWithResizeObserver();\n            this.resizeObserver.observe(document.body);\n        }\n    }\n\n    componentDidRender() {\n        if (this.mobile) {\n            if(!this.popper) {\n                this.initMobileOverlay();\n            } else {\n                this.popper.update();\n            }\n        }\n    }\n\n    // XXX: Firefox < 63\n    private putTabsInCorrectDivIfTheyAreNot() {\n        const tabDiv = this.el.shadowRoot.querySelector('.wcs-tabs');\n        if (tabDiv.querySelector('slot') === null) {\n            Array.from(this.el.querySelectorAll('wcs-tab'))\n                .filter(node => node.parentNode !== tabDiv)\n                .forEach(tab => {\n                    if (tab.parentElement.isEqualNode(this.el)) {\n                        this.el.removeChild(tab);\n                        tabDiv.appendChild(tab);\n                    }\n                });\n        }\n    }\n\n    handleKeyDown(ev: KeyboardEvent, tabIndex: number) {\n        const target = ev.target as HTMLDivElement;\n        switch (ev.key) {\n            case ' ':\n            case 'Enter': {\n                this.selectTabAndEmitChangeEvent(tabIndex);\n                ev.preventDefault();\n                break;\n            }\n            case 'ArrowLeft': {\n                if (target.previousElementSibling?.classList.contains('wcs-tab-header')) {\n                    (target.previousElementSibling as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'ArrowRight': {\n                if (target.nextElementSibling?.classList.contains('wcs-tab-header')) {\n                    (target.nextElementSibling as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'Home': {\n                const firstTab = this.el.shadowRoot.querySelector('.wcs-tab-header:first-child');\n                if (firstTab) {\n                    (firstTab as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'End': {\n                const lastTab = this.el.shadowRoot.querySelector('.wcs-tab-header:last-child');\n                if (lastTab) {\n                    (lastTab as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n        }\n    }\n\n    handleKeyDownMobile(ev: KeyboardEvent, tabIndex: number) {\n        const target = ev.target as HTMLDivElement;\n        switch (ev.key) {\n            case ' ':\n            case 'Enter': {\n                this.selectTabAndEmitChangeEvent(tabIndex);\n                ev.preventDefault();\n                break;\n            }\n            case 'ArrowUp': {\n                if (target.previousElementSibling?.classList.contains('wcs-tab-header-mobile')) {\n                    (target.previousElementSibling as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'ArrowDown': {\n                if (target.nextElementSibling?.classList.contains('wcs-tab-header-mobile')) {\n                    (target.nextElementSibling as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'Home': {\n                const firstTab = this.el.shadowRoot.querySelector('.wcs-tab-header-mobile:first-child');\n                if (firstTab) {\n                    (firstTab as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'End': {\n                const lastTab = this.el.shadowRoot.querySelector('.wcs-tab-header-mobile:last-child');\n                if (lastTab) {\n                    (lastTab as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'Escape': {\n                this.mobileOverlayExpanded = false;\n                ev.preventDefault();\n                break;\n            }\n        }\n    }\n\n    private refreshHeaders() {\n        this.headers = [];\n        this.tabs\n            .forEach(x => {\n                this.headers.push(x.getAttribute('header'));\n            });\n    }\n\n    private get tabs() {\n        const tabsEl = this.el.shadowRoot.querySelector('.wcs-tabs');\n        // FIXME: problem with this selector being too greedy in ff < 63\n        const tabs = this.el.shadowRoot.querySelectorAll('.wcs-tabs > wcs-tab');\n\n        return tabs.length !== 0\n            ? tabs\n            : tabsEl?.querySelector('slot')\n                ? tabsEl?.querySelector('slot')?.assignedElements() as unknown as NodeListOf<HTMLWcsTabElement>\n                : [];\n    }\n\n    private selectTabAndEmitChangeEvent(index: number) {\n        this.currentActiveTabIndex = index;\n        this.emitActiveTabChange();\n        \n        if (this.mobile) {\n            this.mobileOverlayExpanded = false;\n            this.mobileButton?.focus();\n            \n        }\n    }\n\n    componentWillUpdate() {\n        if (!this.headersOnly) {\n            this.updateTabVisibility();\n        } else {\n            this.hideAllTabsContent();\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, TABS_INHERITED_ATTRS),\n        };\n    }\n\n    disconnectedCallback(): void {\n        if (this.popper) {\n            this.popper.destroy();\n            this.popper = null;\n        }\n        this.resizeObserver?.disconnect();\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.mobile ? this.popoverDiv : this.nativeTablist, attr, value);\n    }\n\n    private updateTabVisibility() {\n        this.tabs.forEach((el: HTMLWcsTabElement, idx: number) => {\n            if (idx !== this.currentActiveTabIndex) {\n                el.hidden = true;\n            } else {\n                el.hidden = false;\n            }\n        });\n    }\n\n    private hideAllTabsContent() {\n        this.tabs.forEach((el: HTMLWcsTabElement) => el.hidden = true);\n    }\n    \n    onMobileButtonClick() {\n        this.mobileOverlayExpanded = !this.mobileOverlayExpanded;\n        const tabElementToFocus = this.popoverDiv.querySelectorAll('[role=tab]')[this.currentActiveTabIndex] as HTMLElement;\n        requestAnimationFrame(() => {\n            tabElementToFocus?.focus();\n        })\n    }\n    \n    onMobileButtonKeyDown(ev: KeyboardEvent) {\n        if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {\n            this.onMobileButtonClick();\n        }\n    }\n\n    mobileLayout() {\n        return [\n            <button id=\"mobile-button\"\n                    class=\"wcs-tab-header active\"\n                    aria-controls=\"menu\"\n                    role=\"button\"\n                    aria-expanded={this.mobileOverlayExpanded ? 'true' : 'false'}\n                    ref={el => this.mobileButton = el}\n                    onClick={() => this.onMobileButtonClick()}\n                    onKeyDown={(evt) => this.onMobileButtonKeyDown(evt)}\n                    onBlur={($event) => $event.stopImmediatePropagation()}>\n                <span>\n                    {this.headers[this.currentActiveTabIndex]} <SelectArrow up={this.mobileOverlayExpanded}/>\n                </span>\n            </button>,\n            <div class={(this.mobileOverlayExpanded ? 'show ' : '') + 'popover'}\n                 role=\"tablist\"\n                 id=\"menu\"\n                 aria-label={this.description}\n                 aria-orientation=\"vertical\"\n                 ref={el => this.popoverDiv = el}\n                 tabIndex={-1}\n                 {...this.inheritedAttributes}>\n                {this.headers.map((header, idx) =>\n                    <div class={'wcs-tab-header-mobile ' + (this.currentActiveTabIndex === idx ? 'mobile-active' : '')}\n                         onClick={() => this.selectTabAndEmitChangeEvent(idx)}\n                         onKeyDown={evt => this.handleKeyDownMobile(evt, idx)}\n                         tabIndex={this.currentActiveTabIndex === idx ? 0 : -1}\n                         role=\"tab\"\n                         id={`tabs-id-${this.tabsId}-tab-id-${idx}`}\n                        // aria-controls refers to ID of the tab panel related to the header\n                         aria-controls={`tabs-id-${this.tabsId}-tab-panel-${idx}`}\n                         aria-label={header}\n                         aria-selected={this.currentActiveTabIndex === idx ? 'true' : 'false'}\n                    >\n                        <span>{header}</span>\n                    </div>\n                )}\n            </div>\n        ]\n    }\n    \n    desktopLayout() {\n        return (\n            this.headers.map((header, idx) =>\n                <div class={'wcs-tab-header ' + (this.currentActiveTabIndex === idx ? 'active' : '')}\n                     onClick={() => this.selectTabAndEmitChangeEvent(idx)}\n                     onKeyDown={evt => this.handleKeyDown(evt, idx)}\n                     tabIndex={this.currentActiveTabIndex === idx ? 0 : -1}\n                     role=\"tab\"\n                     id={`tabs-id-${this.tabsId}-tab-id-${idx}`}\n                    // aria-controls refers to ID of the tab panel related to the header\n                     aria-controls={`tabs-id-${this.tabsId}-tab-panel-${idx}`}\n                     aria-label={header}\n                     aria-selected={this.currentActiveTabIndex === idx ? 'true' : 'false'}\n                >\n                    <span>{header}</span>\n                </div>\n            )\n        )\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"wcs-tabs-headers\"\n                     role={this.mobile ? null : 'tablist'}\n                     ref={(el) => (this.nativeTablist = el)}\n                     aria-orientation={this.mobile ? null : 'horizontal'}\n                     aria-label={this.mobile ? null : this.description}\n                     {...(!this.mobile && this.inheritedAttributes)}>\n                    {this.mobile ? this.mobileLayout() : this.desktopLayout()}\n                </div>\n                <div class=\"wcs-tabs\">\n                    <slot onSlotchange={() => this.onTabsSlotChange()} name=\"wcs-tab\"/>\n                </div>\n            </Host>\n        );\n    }\n\n    /**\n     * Observe when a new tab panel is added to the slot to let's handle accessibility properties for tabs panel:\n     * - id: to let header tab refers it proper panel\n     * - aria-label: take the same name as it's referenced header name\n     * \n     * @private\n     */\n    private onTabsSlotChange() {\n        let tabId = 0;\n        this.refreshHeaders();\n        this.tabs.forEach(tab => {\n            tab.setAttribute(\"aria-label\", this.headers.at(tabId));\n            // set an ID to set aria-controls on header tab \n            // (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/#:~:text=Refers%20to%20the%20element)\n            tab.setAttribute(\"id\", `tabs-id-${this.tabsId}-tab-panel-${tabId}`);\n            tabId++;\n        });\n    }\n}\n\nlet tabsId = 0;\n"],"mappings":"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"}

package/bundle/wcs-textarea.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface WcsTextarea extends Components.WcsTextarea, HTMLElement {}
+export const WcsTextarea: {
+    prototype: WcsTextarea;
+    new (): WcsTextarea;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;