wcs-core 7.0.0 → 7.1.0

package/dist/wcs/p-0fdaec9e.entry.js

@@ -1,2 +0,0 @@
-import{r as o,c as a,h as s,H as i,g as t}from"./p-32e583ea.js";import{c as e,d as r,r as n,t as d,u as c,v as p,n as l}from"./p-a3aece7a.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 u=class{constructor(s){o(this,s);this.wcsChange=a(this,"wcsChange",7);this.value=undefined;this.name=undefined;this.mode="radio"}onValueChangeHandler(o){this.updateRadioTabIndex(o);this.updateAllRadioState()}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 s=a.find((o=>!o.disabled));const i=a.find((a=>a.value===o&&!a.disabled));if(!s&&!i){return}const t=i||s;for(const o of a){const a=o===t?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 s=a.findIndex((a=>a===o.target));let i;if(e(o)||r(o)){o.preventDefault();i=s}else if(n(o)||d(o)){o.preventDefault();i=(s+1)%a.length}else if(c(o)||p(o)){o.preventDefault();i=(s-1+a.length)%a.length}else if(l(o)){return}const t=a[i];if(t){t.focus();if(this.value!==t.value){this.wcsChange.emit({value:t.value})}this.value=t.value}}render(){return s(i,{key:"3bdbfd7aa67f709fed97c60c7226a25058bc6092",role:"radiogroup"},s("slot",{key:"5b64203983551a6504ae675442c36e904bb5dec8",name:"option",onSlotchange:this.onSlotChange.bind(this)}))}get el(){return t(this)}static get watchers(){return{value:["onValueChangeHandler"],name:["updateAllRadioModeAndName"],mode:["updateAllRadioModeAndName"]}}};u.style=g;export{u as wcs_radio_group};
-//# sourceMappingURL=p-0fdaec9e.entry.js.map

package/dist/wcs/p-0fdaec9e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["radioGroupCss","WcsRadioGroupStyle0","RadioGroup","onValueChangeHandler","value","this","updateRadioTabIndex","updateAllRadioState","componentDidLoad","updateAllRadioModeAndName","onSlotChange","getSlottedRadios","forEach","r","updateState","mode","name","radios","first","find","radio","disabled","checked","focusable","tabindex","setTabIndex","Array","from","el","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    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} from \"../../utils/helpers\";\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 {\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    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":"8IAAA,MAAMA,EAAgB,g8BACtB,MAAAC,EAAeD,E,MCwCFE,EAAU,M,iHAgB6B,O,CAMhD,oBAAAC,CAAqBC,GACjBC,KAAKC,oBAAoBF,GACzBC,KAAKE,qB,CAGT,gBAAAC,GACGH,KAAKF,qBAAqBE,KAAKD,OAC/BC,KAAKI,2B,CAGR,YAAAC,GACIL,KAAKC,oBAAoBD,KAAKD,OAC9BC,KAAKI,2B,CAGT,mBAAAF,GACIF,KAAKM,mBAAmBC,SAAQC,GAAKA,EAAEC,e,CAK3C,yBAAAL,GACIJ,KAAKM,mBAAmBC,SAAQC,IAC5BA,EAAEE,KAAOV,KAAKU,KACdF,EAAEG,KAAOX,KAAKW,IAAI,G,CAI1B,mBAAAV,CAAoBF,GAChB,MAAMa,EAASZ,KAAKM,mBAGpB,MAAMO,EAAQD,EAAOE,MAAMC,IAAWA,EAAMC,WAC5C,MAAMC,EAAUL,EAAOE,MAAMC,GAAUA,EAAMhB,QAAUA,IAAUgB,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,KAAKtB,KAAKuB,GAAGC,iBAAiB,a,CAGvC,2BAAAC,GACJ,OAAOJ,MAAMC,KAAKtB,KAAKM,mBAAmBoB,QAAOX,IAAUA,EAAMC,W,CAIrE,gBAAAW,CAAiBC,GACb5B,KAAKD,MAAQ6B,EAAMC,OAAO9B,MAC1BC,KAAK8B,UAAUC,KAAK,CAChBhC,MAAO6B,EAAMC,OAAO9B,O,CAK5B,mBAAMiC,CAAcC,GAChB,MAAMC,EAAoBlC,KAAKyB,8BAC/B,MAAMU,EAAmBD,EAAkBE,WAAU5B,GAAKA,IAAMyB,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,GAAIjD,KAAKD,QAAUiD,EAAcjD,MAAO,CACpCC,KAAK8B,UAAUC,KAAK,CAChBhC,MAAOiD,EAAcjD,O,CAI7BC,KAAKD,MAAQiD,EAAcjD,K,EAInC,MAAAmD,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,cACPH,EAAA,QAAAE,IAAA,2CAAM1C,KAAK,SAAS4C,aAAcvD,KAAKK,aAAamD,KAAKxD,Q"}

package/dist/wcs/p-19c77b5c.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as e,H as s}from"./p-32e583ea.js";const r=class{constructor(e){a(this,e)}render(){return e(s,{key:"e1234c4af917630a9be2805a3910be32ad35760a",slot:"label"},e("slot",{key:"878a7b15927cdde4bfb345024445821abfab2ea6"}))}};export{r as wcs_field_label};
-//# sourceMappingURL=p-19c77b5c.entry.js.map

package/dist/wcs/p-1ab0d13b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tabsCss","WcsTabsStyle0","TABS_INHERITED_ATTRS","Tabs","this","inheritedAttributes","tabsId","selectedIndexChanged","newValue","currentActiveTabIndex","selectedTabkeyChanged","updateCurrentActiveIndexByTabKey","emitActiveTabChange","tabChange","emit","tabName","headers","tabIndex","selectedKey","tabs","itemKey","i","length","tab","onTabLoaded","refreshHeaders","componentDidLoad","putTabsInCorrectDivIfTheyAreNot","selectedIndex","tabDiv","el","shadowRoot","querySelector","Array","from","querySelectorAll","filter","node","parentNode","forEach","parentElement","isEqualNode","removeChild","appendChild","handleKeyDown","ev","target","key","preventDefault","_a","previousElementSibling","classList","contains","focus","_b","nextElementSibling","firstTab","lastTab","x","push","getAttribute","tabsEl","assignedElements","selectTabAndEmitChangeEvent","index","componentWillUpdate","headersOnly","updateTabVisibility","hideAllTabsContent","componentWillLoad","Object","assign","inheritAriaAttributes","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeTablist","idx","hidden","render","h","Host","class","role","ref","description","map","header","onClick","onKeyDown","evt","id","onSlotchange","onTabsSlotChange","name","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-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","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 { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst TABS_INHERITED_ATTRS = [];\n\n/**\n * Tabs component to switch between tab content. Use in conjunction with `wcs-tab`.\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 */\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() headersOnly: boolean = false;\n    /** Determines if tabs header should have a border at the bottom */\n    @Prop() 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    /**\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    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    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    }\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.currentActiveTabIndex = tabIndex;\n                this.emitActiveTabChange();\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    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\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    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(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    render() {\n        return (\n            <Host>\n                <div class=\"wcs-tabs-headers\"\n                     role=\"tablist\"\n                     ref={(el) => (this.nativeTablist = el)}\n                     aria-label={this.description}\n                     {...this.inheritedAttributes}>\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                </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.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":"kHAAA,MAAMA,EAAU,04GAChB,MAAAC,EAAeD,ECiBf,MAAME,EAAuB,G,MAgChBC,EAAI,M,8DAGLC,KAAAC,oBAA4C,GAsC5CD,KAAAE,OAAiBA,I,WAjCwB,Q,mBAMjB,E,4CAQD,M,8DAeM,G,2BAEI,C,CAKzC,oBAAAC,CAAqBC,GACjBJ,KAAKK,sBAAwBD,C,CAIjC,qBAAAE,CAAsBF,GAClBJ,KAAKO,iCAAiCH,E,CAGlC,mBAAAI,GACJR,KAAKS,UAAUC,KAAK,CAChBC,QAASX,KAAKY,QAAQZ,KAAKK,uBAC3BQ,SAAUb,KAAKK,sBACfS,YAAad,KAAKe,KAAKf,KAAKK,uBAAuBW,S,CAInD,gCAAAT,CAAiCH,GACrC,IAAK,IAAIa,EAAI,EAAGA,EAAIjB,KAAKe,KAAKG,OAAQD,IAAK,CACvC,MAAME,EAAMnB,KAAKe,KAAKE,GACtB,GAAIE,EAAIH,UAAYZ,EAAU,CAC1BJ,KAAKK,sBAAwBY,C,GAMzC,WAAAG,GACIpB,KAAKqB,gB,CAGT,gBAAAC,GACItB,KAAKuB,kCACLvB,KAAKqB,iBACL,GAAIrB,KAAKwB,cAAe,CACpBxB,KAAKK,sBAAwBL,KAAKwB,a,CAEtC,GAAIxB,KAAKc,YAAa,CAClBd,KAAKO,iCAAiCP,KAAKc,Y,EAK3C,+BAAAS,GACJ,MAAME,EAASzB,KAAK0B,GAAGC,WAAWC,cAAc,aAChD,GAAIH,EAAOG,cAAc,UAAY,KAAM,CACvCC,MAAMC,KAAK9B,KAAK0B,GAAGK,iBAAiB,YAC/BC,QAAOC,GAAQA,EAAKC,aAAeT,IACnCU,SAAQhB,IACL,GAAIA,EAAIiB,cAAcC,YAAYrC,KAAK0B,IAAK,CACxC1B,KAAK0B,GAAGY,YAAYnB,GACpBM,EAAOc,YAAYpB,E,MAMvC,aAAAqB,CAAcC,EAAmB5B,G,QAC7B,MAAM6B,EAASD,EAAGC,OAClB,OAAQD,EAAGE,KACP,IAAK,IACL,IAAK,QAAS,CACV3C,KAAKK,sBAAwBQ,EAC7Bb,KAAKQ,sBACLiC,EAAGG,iBACH,K,CAEJ,IAAK,YAAa,CACd,IAAIC,EAAAH,EAAOI,0BAAsB,MAAAD,SAAA,SAAAA,EAAEE,UAAUC,SAAS,kBAAmB,CACpEN,EAAOI,uBAA0CG,QAClDR,EAAGG,gB,CAEP,K,CAEJ,IAAK,aAAc,CACf,IAAIM,EAAAR,EAAOS,sBAAkB,MAAAD,SAAA,SAAAA,EAAEH,UAAUC,SAAS,kBAAmB,CAChEN,EAAOS,mBAAsCF,QAC9CR,EAAGG,gB,CAEP,K,CAEJ,IAAK,OAAQ,CACT,MAAMQ,EAAWpD,KAAK0B,GAAGC,WAAWC,cAAc,+BAClD,GAAIwB,EAAU,CACTA,EAA4BH,QAC7BR,EAAGG,gB,CAEP,K,CAEJ,IAAK,MAAO,CACR,MAAMS,EAAUrD,KAAK0B,GAAGC,WAAWC,cAAc,8BACjD,GAAIyB,EAAS,CACRA,EAA2BJ,QAC5BR,EAAGG,gB,CAEP,K,GAKJ,cAAAvB,GACJrB,KAAKY,QAAU,GACfZ,KAAKe,KACAoB,SAAQmB,IACLtD,KAAKY,QAAQ2C,KAAKD,EAAEE,aAAa,UAAU,G,CAIvD,QAAYzC,G,MACR,MAAM0C,EAASzD,KAAK0B,GAAGC,WAAWC,cAAc,aAEhD,MAAMb,EAAOf,KAAK0B,GAAGC,WAAWI,iBAAiB,uBAEjD,OAAOhB,EAAKG,SAAW,EACjBH,GACA0C,IAAM,MAANA,SAAM,SAANA,EAAQ7B,cAAc,UAClBiB,EAAAY,IAAM,MAANA,SAAM,SAANA,EAAQ7B,cAAc,WAAO,MAAAiB,SAAA,SAAAA,EAAEa,mBAC/B,E,CAGN,2BAAAC,CAA4BC,GAChC5D,KAAKK,sBAAwBuD,EAC7B5D,KAAKQ,qB,CAGT,mBAAAqD,GACI,IAAK7D,KAAK8D,YAAa,CACnB9D,KAAK+D,qB,KACF,CACH/D,KAAKgE,oB,EAIb,iBAAAC,GACIjE,KAAKC,oBAAmBiE,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBpE,KAAK0B,KAC3B2C,EAAkBrE,KAAK0B,GAAI5B,G,CAKtC,sBAAMwE,CAAiBC,EAAyBC,GAC5CC,EAAqBzE,KAAK0E,cAAeH,EAAMC,E,CAG3C,mBAAAT,GACJ/D,KAAKe,KAAKoB,SAAQ,CAACT,EAAuBiD,KACtC,GAAIA,IAAQ3E,KAAKK,sBAAuB,CACpCqB,EAAGkD,OAAS,I,KACT,CACHlD,EAAGkD,OAAS,K,KAKhB,kBAAAZ,GACJhE,KAAKe,KAAKoB,SAAST,GAA0BA,EAAGkD,OAAS,M,CAG7D,MAAAC,GACI,OACIC,EAACC,EAAI,CAAApC,IAAA,4CACDmC,EAAA,MAAAZ,OAAAC,OAAA,CAAAxB,IAAA,2CAAKqC,MAAM,mBACNC,KAAK,UACLC,IAAMxD,GAAQ1B,KAAK0E,cAAgBhD,EAAG,aAC1B1B,KAAKmF,aACbnF,KAAKC,qBACTD,KAAKY,QAAQwE,KAAI,CAACC,EAAQV,IACvBG,EAAA,OAAKE,MAAO,mBAAqBhF,KAAKK,wBAA0BsE,EAAM,SAAW,IAC5EW,QAAS,IAAMtF,KAAK2D,4BAA4BgB,GAChDY,UAAWC,GAAOxF,KAAKwC,cAAcgD,EAAKb,GAC1C9D,SAAUb,KAAKK,wBAA0BsE,EAAM,GAAK,EACpDM,KAAK,MACLQ,GAAI,WAAWzF,KAAKE,iBAAiByE,IAAK,gBAE3B,WAAW3E,KAAKE,oBAAoByE,IAAK,aAC5CU,EAAM,gBACHrF,KAAKK,wBAA0BsE,EAAM,OAAS,SAE9DG,EAAA,YAAOO,OAInBP,EAAA,OAAAnC,IAAA,2CAAKqC,MAAM,YACPF,EAAA,QAAAnC,IAAA,2CAAM+C,aAAc,IAAM1F,KAAK2F,mBAAoBC,KAAK,a,CAahE,gBAAAD,GACJ,IAAIE,EAAQ,EACZ7F,KAAKe,KAAKoB,SAAQhB,IACdA,EAAI2E,aAAa,aAAc9F,KAAKY,QAAQmF,GAAGF,IAG/C1E,EAAI2E,aAAa,KAAM,WAAW9F,KAAKE,oBAAoB2F,KAC3DA,GAAO,G,sIAKnB,IAAI3F,EAAS,E"}

package/dist/wcs/p-1e5aa960.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["listItemCss","WcsListItemStyle0","ListItem","render","h","Host","key","name","class"],"sources":["src/components/list-item/list-item.scss?tag=wcs-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx"],"sourcesContent":[":host {\n    --wcs-list-item-padding: var(--wcs-semantic-spacing-large);\n    --wcs-list-item-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-list-item-border-color: var(--wcs-semantic-color-border-secondary);\n\n    --wcs-list-item-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-list-item-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-list-item-background-color-active: var(--wcs-semantic-color-background-action-secondary-selected-default);\n    --wcs-list-item-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    --wcs-list-item-title-color: var(--wcs-semantic-color-text-primary);\n    --wcs-list-item-title-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-list-item-title-line-height: var(--wcs-semantic-font-line-height-medium);\n    --wcs-list-item-title-margin-bottom: var(--wcs-semantic-spacing-base);\n\n    --wcs-list-item-icon-color: var(--wcs-semantic-color-text-secondary);\n    --wcs-list-item-icon-margin-right: var(--wcs-semantic-spacing-large);\n\n    --wcs-list-item-actions-margin-left: var(--wcs-semantic-spacing-base);\n\n\n    display: flex;\n    padding: var(--wcs-list-item-padding);\n    border: solid var(--wcs-list-item-border-width) var(--wcs-list-item-border-color);\n    margin-bottom: calc(-1 * var(--wcs-list-item-border-width));\n    background-color: var(--wcs-list-item-background-color-default);\n}\n\n:host(:hover) {\n    background-color: var(--wcs-list-item-background-color-hover);\n    transition: var(--wcs-list-item-transition-duration);\n}\n\n:host([activated]) {\n    background-color: var(--wcs-list-item-background-color-active);\n}\n\n::slotted([slot=title]) {\n    color: var(--wcs-list-item-title-color);\n    margin-bottom: var(--wcs-list-item-title-margin-bottom);\n    line-height: var(--wcs-list-item-title-line-height);\n    font-weight: var(--wcs-list-item-title-font-weight);\n    font-family: inherit;\n}\n\n::slotted([slot=icon]) {\n    color: var(--wcs-list-item-icon-color);\n    margin-right: var(--wcs-list-item-icon-margin-right);\n}\n\n::slotted([slot=actions]) {\n    margin-left: var(--wcs-list-item-actions-margin-left);\n}\n\n.content {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n}\n\n.header {\n    display: flex;\n    justify-content: space-between;\n}\n","import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\n/**\n * Lists are used for grouping a collection of related items.\n * \n * Standard lists can be used either with or without icons. Depending on the context, the list can have one or more\n * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action.\n *\n * @slot title - Slot containing the title of the list item\n * @slot properties - Slot containing the `<wcs-list-item-properties>` element\n * @slot actions - Slot containing the actions of the list item, prefer using some `<wcs-button>` inside\n * @slot description - Slot containing the description of the list item\n * \n * @cssprop --wcs-list-item-padding - Padding of the list item\n * @cssprop --wcs-list-item-border-width - Border width of the list item\n * @cssprop --wcs-list-item-border-color - Border color of the list item\n * @cssprop --wcs-list-item-background-color-default - Background color of the list item\n * @cssprop --wcs-list-item-background-color-hover - Background color of the list item when hovered\n * @cssprop --wcs-list-item-background-color-active - Background color of the list item when active\n * @cssprop --wcs-list-item-transition-duration - Transition duration of the list item\n * @cssprop --wcs-list-item-title-color - Color of the title of the list item\n * @cssprop --wcs-list-item-title-font-weight - Font weight of the title of the list item\n * @cssprop --wcs-list-item-title-line-height - Line height of the title of the list item\n * @cssprop --wcs-list-item-title-margin-bottom - Margin bottom of the title of the list item\n * @cssprop --wcs-list-item-icon-color - Color of the icon of the list item\n * @cssprop --wcs-list-item-icon-margin-right - Margin right of the icon of the list item\n * @cssprop --wcs-list-item-actions-margin-left - Margin left of the actions of the list item\n */\n@Component({\n    tag: 'wcs-list-item',\n    styleUrl: 'list-item.scss',\n    shadow: true\n})\nexport class ListItem implements ComponentInterface {\n    /**\n     * True if the item is active. Adds a background color that highlights it.\n     */\n    @Prop({ mutable: true }) activated: boolean = false;\n\n    render() {\n        return (\n            <Host>\n                <slot name=\"icon\"/>\n                <div class=\"content\">\n                    <div class=\"header\">\n                        <div>\n                            <slot name=\"title\"/>\n                            <slot name=\"properties\"/>\n                        </div>\n                        <slot name=\"actions\"/>\n                    </div>\n                    <slot name=\"description\"/>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"kDAAA,MAAMA,EAAc,mjEACpB,MAAAC,EAAeD,E,MCgCFE,EAAQ,M,wCAI6B,K,CAE9C,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,QAAAE,IAAA,2CAAMC,KAAK,SACXH,EAAA,OAAAE,IAAA,2CAAKE,MAAM,WACPJ,EAAA,OAAAE,IAAA,2CAAKE,MAAM,UACPJ,EAAA,OAAAE,IAAA,4CACIF,EAAA,QAAAE,IAAA,2CAAMC,KAAK,UACXH,EAAA,QAAAE,IAAA,2CAAMC,KAAK,gBAEfH,EAAA,QAAAE,IAAA,2CAAMC,KAAK,aAEfH,EAAA,QAAAE,IAAA,2CAAMC,KAAK,iB"}

package/dist/wcs/p-25b96cde.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["footerCss","WcsFooterStyle0","Footer","render","h","Host","key","class","name"],"sources":["src/components/footer/footer.scss?tag=wcs-footer&encapsulation=shadow","src/components/footer/footer.tsx"],"sourcesContent":[":host {\n    --wcs-footer-background-color: var(--wcs-semantic-color-background-surface-inverse);\n    --wcs-footer-text-color: var(--wcs-semantic-color-text-inverse);\n    --wcs-footer-link-text-color: var(--wcs-semantic-color-text-inverse);\n    --wcs-footer-link-text-color-hover:  var(--wcs-semantic-color-text-inverse);\n    --wcs-footer-link-font-size: var(--wcs-semantic-font-size-label-2);\n    --wcs-footer-link-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-footer-link-gap: calc(4 * var(--wcs-semantic-spacing-base));\n\n    --wcs-footer-gap: var(--wcs-semantic-spacing-large);\n    --wcs-footer-end-gap: var(--wcs-semantic-spacing-large);\n    --wcs-footer-max-width: var(--wcs-semantic-breakpoint-desktop, var(--wcs-com-content-max-width));\n    --wcs-footer-padding: calc(3 * var(--wcs-semantic-spacing-base));\n\n    display: block;\n    width: 100%;\n    background-color: var(--wcs-footer-background-color);\n    color: var(--wcs-footer-text-color);\n\n    .end {\n        margin-top: var(--wcs-footer-gap);\n        gap: var(--wcs-footer-end-gap);\n        width: 100%;\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: space-between;\n        align-items: baseline;\n\n        .end-left, .end-right {\n            display: flex;\n            flex-wrap: wrap;\n            column-gap: var(--wcs-footer-link-gap);\n        }\n\n        @media only screen and (max-width:1024px) {\n            .end-left, .end-right {\n                flex-direction: column;\n            }\n        }\n\n        slot[name=end-left]::slotted(a) {\n            color: var(--wcs-footer-link-text-color, var(--wcs-footer-text-color));\n            font-size: 14px;\n            font-weight: 500;\n            text-decoration: none;\n        }\n\n        slot[name=end-left]::slotted(a:hover) {\n            color: var(--wcs-footer-link-text-color-hover);\n        }\n\n    }\n\n    .container {\n        margin: 0 auto;\n        display: flex;\n        flex-direction: column;\n        max-width: var(--wcs-footer-max-width);\n        padding: var(--wcs-footer-padding);\n    }\n\n}\n","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/**\n * The footer component has been designed to leave as much customization as possible to the developer. The footers are often specific to the application developed.\n * \n * @cssprop --wcs-footer-background-color - Background color of the footer\n * @cssprop --wcs-footer-text-color - Text color of the footer\n * @cssprop --wcs-footer-link-text-color - Text color of the links in the footer\n * @cssprop --wcs-footer-link-text-color-hover - Text color of the links in the footer when hovered\n * @cssprop --wcs-footer-link-font-size - Font size of the links in the footer\n * @cssprop --wcs-footer-link-font-weight - Font weight of the links in the footer\n * @cssprop --wcs-footer-link-gap - Gap between the links in the footer\n * @cssprop --wcs-footer-gap - Vertical gap between the content and the two end slots\n * @cssprop --wcs-footer-end-gap - Horizontal gap between the right and left end slots\n * @cssprop --wcs-footer-max-width - Max width of the footer for responsive purposes \n * @cssprop --wcs-footer-padding - Padding all around the content of the footer\n * \n * @slot <no-name> Main container slot\n * @slot end-left Bottom-left part of the footer\n * @slot end-right Bottom-right part of the footer\n */\n@Component({\n    tag: 'wcs-footer',\n    styleUrl: 'footer.scss',\n    shadow: true,\n})\nexport class Footer implements ComponentInterface {\n    render(): any {\n        return (\n            <Host>\n                <div class=\"container\">\n                    <div>\n                        <slot />\n                    </div>\n                    <div class=\"end\">\n                        <div class=\"end-left\">\n                            <slot name=\"end-left\"/>\n                        </div>\n                        <div class=\"end-right\">\n                            <slot name=\"end-right\"/>\n                        </div>\n                    </div>\n                </div>\n            </Host>\n        )\n    }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,unDAClB,MAAAC,EAAeD,E,MCyBFE,EAAM,M,yBACf,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aACPH,EAAA,OAAAE,IAAA,4CACIF,EAAA,QAAAE,IAAA,8CAEJF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,OACPH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,YACPH,EAAA,QAAAE,IAAA,2CAAME,KAAK,cAEfJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aACPH,EAAA,QAAAE,IAAA,2CAAME,KAAK,iB"}

package/dist/wcs/p-400a71d7.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as s,H as t}from"./p-32e583ea.js";const d=class{constructor(s){e(this,s);this.columnId=undefined;this.rowId=undefined}render(){return s(t,{key:"441a2f06db44cb423da04b165b8fde063d276d67",slot:this.columnId+"-"+this.rowId},s("slot",{key:"6b3e9007560c8b2fef3df9c968fb8659b99bc9e6"}))}};export{d as wcs_grid_custom_cell};
-//# sourceMappingURL=p-400a71d7.entry.js.map

package/dist/wcs/p-4ca7c59f.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as e,H as i,g as o}from"./p-32e583ea.js";import{d as r}from"./p-a3aece7a.js";const t='wcs-nav-item{--wcs-nav-item-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-nav-item-height-desktop:calc(10 * var(--wcs-semantic-size-base));--wcs-nav-item-height-mobile:calc(6 * var(--wcs-semantic-size-base));--wcs-nav-item-gap-desktop:var(--wcs-semantic-spacing-base);--wcs-nav-item-gap-mobile:0;--wcs-nav-item-font-size-desktop:var(--wcs-semantic-font-size-label-3);--wcs-nav-item-font-size-mobile:calc(var(--wcs-semantic-font-size-body-1) / 2);--wcs-nav-item-background-color-default:var(--wcs-semantic-color-background-action-primary-default);--wcs-nav-item-background-color-hover:var(--wcs-semantic-color-background-action-primary-hover);--wcs-nav-item-background-color-press:var(--wcs-semantic-color-background-action-primary-press);--wcs-nav-item-background-color-active:var(--wcs-semantic-color-background-action-primary-selected-default);--wcs-nav-item-color-default:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-nav-item-color-active:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-nav-item-color-hover:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-nav-item-color-press:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-nav-item-border-color-focus:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-nav-item-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-nav-item-indicator-background-color:var(--wcs-semantic-color-background-surface-accent-light);--wcs-nav-item-indicator-width-desktop:calc(0.5 * var(--wcs-semantic-size-base));--wcs-nav-item-indicator-width-mobile:calc(3 * var(--wcs-semantic-size-base));--wcs-nav-item-indicator-height-desktop:calc(3 * var(--wcs-semantic-size-base));--wcs-nav-item-indicator-height-mobile:calc(0.5 * var(--wcs-semantic-size-base));--wcs-nav-item-indicator-border-radius-desktop:var(--wcs-semantic-border-radius-base) 0 0 var(--wcs-semantic-border-radius-base);--wcs-nav-item-indicator-border-radius-mobile:var(--wcs-semantic-border-radius-base) var(--wcs-semantic-border-radius-base) 0 0;--wcs-nav-item-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:block;cursor:pointer;font-weight:var(--wcs-nav-item-font-weight);transition-property:color, background-color, border-color, box-shadow, backdrop-filter;transition-duration:var(--wcs-nav-item-transition-duration);transition-timing-function:ease-in-out;background-color:var(--wcs-nav-item-background-color-default)}wcs-nav-item a{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;text-align:center;background-color:transparent;border:none;text-decoration:none;height:var(--wcs-nav-item-height-desktop);gap:var(--wcs-nav-item-gap-desktop);font-size:var(--wcs-nav-item-font-size-desktop);color:var(--wcs-nav-item-color-default)}@media (max-width: 1199px){wcs-nav-item a{display:flex;flex:1;height:var(--wcs-nav-item-height-mobile);gap:var(--wcs-nav-item-gap-mobile);font-size:var(--wcs-nav-item-font-size-mobile)}}wcs-nav-item a:focus{outline:none}@media (max-width: 1199px){wcs-nav-item:has(a:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-nav-item-border-color-focus);outline-offset:-2px;border-radius:var(--wcs-nav-item-border-width-focus)}@supports not selector(&:has(a:focus-visible)){wcs-nav-item:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-nav-item-border-color-focus);outline-offset:-2px;border-radius:var(--wcs-nav-item-border-width-focus)}}}@media (min-width: 1200px){wcs-nav-item:has(a:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-nav-item-border-color-focus);outline-offset:-2px;border-radius:var(--wcs-nav-item-border-width-focus)}@supports not selector(&:has(a:focus-visible)){wcs-nav-item:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-nav-item-border-color-focus);outline-offset:-2px;border-radius:var(--wcs-nav-item-border-width-focus)}}}wcs-nav-item i{margin-bottom:0.5rem;display:inline-block}@media (max-width: 1199px){wcs-nav-item i{margin-bottom:0.25rem;display:inline-block}}@media (min-width: 1200px){wcs-nav-item[slot=bottom] a{border-top:var(--wcs-nav-item-border-horizontal-width) solid var(--wcs-nav-item-border-horizontal-color);border-bottom:none !important}}wcs-nav-item:hover{background-color:var(--wcs-nav-item-background-color-hover)}wcs-nav-item:hover a{color:var(--wcs-nav-item-color-hover)}wcs-nav-item:active{background-color:var(--wcs-nav-item-background-color-press)}wcs-nav-item:active a{color:var(--wcs-nav-item-color-press)}wcs-nav-item.active,wcs-nav-item:has(>.active){background-color:var(--wcs-nav-item-background-color-active)}wcs-nav-item.active a,wcs-nav-item:has(>.active) a{color:var(--wcs-nav-item-color-active)}wcs-nav-item.active a::after,wcs-nav-item:has(>.active) a::after{position:absolute;right:0;width:var(--wcs-nav-item-indicator-width-desktop);height:var(--wcs-nav-item-indicator-height-desktop);content:"";background-color:var(--wcs-nav-item-indicator-background-color);border-radius:var(--wcs-nav-item-indicator-border-radius-desktop)}@media (max-width: 1199px){wcs-nav-item.active a::after,wcs-nav-item:has(>.active) a::after{right:auto;bottom:0;width:var(--wcs-nav-item-indicator-width-mobile);height:var(--wcs-nav-item-indicator-height-mobile);border-radius:var(--wcs-nav-item-indicator-border-radius-mobile)}}';const c=t;const s=class{constructor(e){a(this,e)}onKeyDown(a){if(r(a)){this.el.click()}}render(){return e(i,{key:"013d857a5e7c718eb08554541b99ba6ca7231561",role:"listitem"},e("slot",{key:"2054563b72fbbefcbc11b69ccaa136864488c3f5"}))}get el(){return o(this)}};s.style=c;export{s as wcs_nav_item};
-//# sourceMappingURL=p-4ca7c59f.entry.js.map

package/dist/wcs/p-4ca7c59f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["navItemCss","WcsNavItemStyle0","NavItem","onKeyDown","_event","isEnterKey","this","el","click","render","h","Host","key","role"],"sources":["src/components/nav-item/nav-item.scss?tag=wcs-nav-item","src/components/nav-item/nav-item.tsx"],"sourcesContent":["@import '../../style/breakpoints';\n@import '../../style/focus-outline.scss';\n\nwcs-nav-item {\n    --wcs-nav-item-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-nav-item-height-desktop: calc(10 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-height-mobile: calc(6 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-gap-desktop: var(--wcs-semantic-spacing-base);\n    --wcs-nav-item-gap-mobile: 0;\n\n    --wcs-nav-item-font-size-desktop: var(--wcs-semantic-font-size-label-3);\n    --wcs-nav-item-font-size-mobile: calc(var(--wcs-semantic-font-size-body-1) / 2);\n\n    --wcs-nav-item-background-color-default: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-nav-item-background-color-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-nav-item-background-color-press: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-nav-item-background-color-active: var(--wcs-semantic-color-background-action-primary-selected-default);\n\n    --wcs-nav-item-color-default: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-nav-item-color-active: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-nav-item-color-hover: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-nav-item-color-press: var(--wcs-semantic-color-foreground-action-primary-default);\n\n    --wcs-nav-item-border-color-focus: var(--wcs-semantic-color-foreground-action-primary-default); // TODO : censé être --wcs-semantic-color-border-focus-base-on-secondary -> pas encore implémenté le \"on-secondary\"\n    --wcs-nav-item-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-nav-item-indicator-background-color: var(--wcs-semantic-color-background-surface-accent-light);\n    --wcs-nav-item-indicator-width-desktop: calc(0.5 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-indicator-width-mobile: calc(3 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-indicator-height-desktop: calc(3 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-indicator-height-mobile: calc(0.5 * var(--wcs-semantic-size-base));\n    --wcs-nav-item-indicator-border-radius-desktop: var(--wcs-semantic-border-radius-base) 0 0 var(--wcs-semantic-border-radius-base);\n    --wcs-nav-item-indicator-border-radius-mobile: var(--wcs-semantic-border-radius-base) var(--wcs-semantic-border-radius-base) 0 0;\n\n    --wcs-nav-item-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    display: block;\n    cursor: pointer;\n    font-weight: var(--wcs-nav-item-font-weight);\n\n    transition-property: color, background-color, border-color, box-shadow, backdrop-filter;\n    transition-duration: var(--wcs-nav-item-transition-duration);\n    transition-timing-function: ease-in-out;\n    background-color: var(--wcs-nav-item-background-color-default);\n\n    a {\n        display: flex;\n        position: relative;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        background-color: transparent;\n        border: none;\n        text-decoration: none;\n        height: var(--wcs-nav-item-height-desktop);\n        gap: var(--wcs-nav-item-gap-desktop);\n        font-size: var(--wcs-nav-item-font-size-desktop);\n        color: var(--wcs-nav-item-color-default);\n\n        @include for-tablet-landscape-down {\n            display: flex;\n            flex: 1;\n            height: var(--wcs-nav-item-height-mobile);\n            gap: var(--wcs-nav-item-gap-mobile);\n            font-size: var(--wcs-nav-item-font-size-mobile);\n        }\n    }\n\n    a:focus {\n        outline: none;\n    }\n\n    @include for-tablet-landscape-down {\n        &:has(a:focus-visible) {\n            @include focus-outline(var(--wcs-nav-item-border-color-focus), var(--wcs-nav-item-border-width-focus), -2px);\n        }\n\n        @supports not selector(&:has(a:focus-visible)){\n            &:focus-within {\n                @include focus-outline(var(--wcs-nav-item-border-color-focus), var(--wcs-nav-item-border-width-focus), -2px);\n            }\n        }\n    }\n\n    @include for-desktop-up {\n        &:has(a:focus-visible) {\n            @include focus-outline(var(--wcs-nav-item-border-color-focus), var(--wcs-nav-item-border-width-focus), -2px);\n        }\n\n        @supports not selector(&:has(a:focus-visible)){\n            &:focus-within {\n                @include focus-outline(var(--wcs-nav-item-border-color-focus), var(--wcs-nav-item-border-width-focus), -2px);\n            }\n        }\n    }\n\n    i {\n        margin-bottom: 0.5rem;\n        display: inline-block;\n        @include for-tablet-landscape-down {\n            margin-bottom: 0.25rem;\n            display: inline-block;\n        }\n    }\n}\n\nwcs-nav-item[slot=bottom] {\n    a {\n        @include for-desktop-up {\n            border-top: var(--wcs-nav-item-border-horizontal-width) solid var(--wcs-nav-item-border-horizontal-color);\n            border-bottom: none !important;\n        }\n    }\n}\n\nwcs-nav-item:hover {\n    a {\n        color: var(--wcs-nav-item-color-hover);\n    }\n\n    background-color: var(--wcs-nav-item-background-color-hover);\n}\n\n/* This selector is for the press state, not to be confused with the active state (.active) */\nwcs-nav-item:active {\n    a {\n        color: var(--wcs-nav-item-color-press);\n    }\n\n    background-color: var(--wcs-nav-item-background-color-press);\n}\n\n\nwcs-nav-item.active,\nwcs-nav-item:has(> .active) {\n    //background-blend-mode: multiply;\n    background-color: var(--wcs-nav-item-background-color-active);\n\n    a {\n        color: var(--wcs-nav-item-color-active);\n    }\n}\n\n// For the indicator on the active nav-item :\nwcs-nav-item.active, wcs-nav-item:has(> .active) {\n    a::after {\n        position: absolute;\n        right: 0;\n        width: var(--wcs-nav-item-indicator-width-desktop);\n        height: var(--wcs-nav-item-indicator-height-desktop);\n        content: \"\";\n        background-color: var(--wcs-nav-item-indicator-background-color);\n        border-radius: var(--wcs-nav-item-indicator-border-radius-desktop);\n    }\n\n    @include for-tablet-landscape-down {\n        a::after {\n            right: auto;\n            bottom: 0;\n            width: var(--wcs-nav-item-indicator-width-mobile);\n            height: var(--wcs-nav-item-indicator-height-mobile);\n            border-radius: var(--wcs-nav-item-indicator-border-radius-mobile);\n        }\n    }\n}\n","import { Element, Component, ComponentInterface, h, Listen, Host } from '@stencil/core';\nimport { isEnterKey } from \"../../utils/helpers\";\n\n/**\n * The nav-item component is a subcomponent of `wcs-nav` and should always be used inside it.  \n * They contain links to navigate to other pages of the website.\n * \n * @cssprop --wcs-nav-item-font-weight - Font weight of the nav item\n * \n * @cssprop --wcs-nav-item-height-desktop - Height of the nav item on desktop\n * @cssprop --wcs-nav-item-height-mobile - Height of the nav item on mobile\n * @cssprop --wcs-nav-item-gap-desktop - Gap between items in nav-item on desktop (e.g. icon and label)\n * @cssprop --wcs-nav-item-gap-mobile - Gap between items in nav-item on mobile (e.g. icon and label)\n * \n * \n * @cssprop --wcs-nav-item-font-size-desktop - Font size of the nav item on desktop\n * @cssprop --wcs-nav-item-font-size-mobile - Font size of the nav item on mobile\n * \n * @cssprop --wcs-nav-item-background-color-default - Default background color of the nav item\n * @cssprop --wcs-nav-item-background-color-hover - Background color of the nav item when hovered\n * @cssprop --wcs-nav-item-background-color-press - Background color of the nav item when pressed\n * @cssprop --wcs-nav-item-background-color-active - Background color of the nav item when active\n * \n * @cssprop --wcs-nav-item-color-default - Color of the nav item when default\n * @cssprop --wcs-nav-item-color-active - Color of the nav item when active\n * @cssprop --wcs-nav-item-color-hover - Color of the nav item when hovered\n * @cssprop --wcs-nav-item-color-press - Color of the nav item when pressed\n * \n * @cssprop --wcs-nav-item-border-color-focus - Border color of the nav item when focused\n * @cssprop --wcs-nav-item-border-width-focus - Border width of the nav item when focused\n * \n * @cssprop --wcs-nav-item-indicator-background-color - Background color of the nav item indicator\n * @cssprop --wcs-nav-item-indicator-width-desktop - Width of the nav item indicator on desktop\n * @cssprop --wcs-nav-item-indicator-width-mobile - Width of the nav item indicator on mobile\n * @cssprop --wcs-nav-item-indicator-height-desktop - Height of the nav item indicator on desktop\n * @cssprop --wcs-nav-item-indicator-height-mobile - Height of the nav item indicator on mobile\n * @cssprop --wcs-nav-item-indicator-border-radius-desktop - Border radius of the nav item indicator on desktop\n * @cssprop --wcs-nav-item-indicator-border-radius-mobile - Border radius of the nav item indicator on mobile\n * \n * @cssprop --wcs-nav-item-transition-duration - Transition duration of the nav item\n */\n@Component({\n    tag: 'wcs-nav-item',\n    styleUrl: 'nav-item.scss'\n})\nexport class NavItem implements ComponentInterface {\n    @Element() private el: HTMLElement;\n    \n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent) {\n        if (isEnterKey(_event)) {\n            this.el.click();\n        }\n    }\n\n    render() {\n        return (\n            <Host role=\"listitem\">\n                <slot/>\n            </Host>\n        );\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAa,mxKACnB,MAAAC,EAAeD,E,MC4CFE,EAAO,M,yBAIhB,SAAAC,CAAUC,GACN,GAAIC,EAAWD,GAAS,CACpBE,KAAKC,GAAGC,O,EAIhB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACPH,EAAA,QAAAE,IAAA,6C"}

package/dist/wcs/p-4d6d1d14.js

@@ -1,2 +0,0 @@
-import{h as e,j as r,l as s,m as t,d as n,c as A,n as a,b as u}from"./p-a3aece7a.js";function i(i){const{key:R}=i;if(i.shiftKey){switch(R){case" ":return"MAJ+SPACE";case"Tab":return"MAJ+TAB"}}else if(i.altKey){switch(R){case"ArrowDown":return"ALT+DOWN_ARROW";case"ArrowUp":return"ALT+UP_ARROW"}}else if(i.ctrlKey){if(e(i)){return"CTRL+HOME"}else if(r(i)){return"CTRL+END"}else if(R==="a"){return"CTRL+A"}}else{switch(R){case"ArrowDown":return"DOWN_ARROW";case"ArrowUp":return"UP_ARROW";case"ArrowLeft":return"LEFT_ARROW";case"ArrowRight":return"RIGHT_ARROW"}if(e(i)){return"HOME"}else if(r(i)){return"END"}else if(s(i)){return"PAGE_UP"}else if(t(i)){return"PAGE_DOWN"}else if(n(i)){return"ENTER"}else if(A(i)){return"SPACE"}else if(a(i)){return"TAB"}else if(u(i)){return"ESCAPE"}}return"UNKNOWN"}export{i as k};
-//# sourceMappingURL=p-4d6d1d14.js.map

package/dist/wcs/p-52cd0abb.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s,H as e,g as r}from"./p-32e583ea.js";import{p as o,i as n,a,s as c,q as d}from"./p-a3aece7a.js";const l=["s","m","l"];function u(t){return l.includes(t)}const h=":host{--wcs-input-icon-color-default:var(--wcs-semantic-color-foreground-brand);--wcs-input-icon-color-focus:var(--wcs-semantic-color-foreground-brand);--wcs-input-icon-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-input-background-color:var(--wcs-semantic-color-background-control-default);--wcs-input-border-radius-left:var(--wcs-semantic-border-radius-base);--wcs-input-border-radius-right:var(--wcs-semantic-border-radius-base);--wcs-input-border-width:var(--wcs-semantic-border-width-default);--wcs-input-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-input-height-l:var(--wcs-semantic-size-l);--wcs-input-height-m:var(--wcs-semantic-size-m);--wcs-input-height-s:var(--wcs-semantic-size-s);--wcs-input-font-size-l:var(--wcs-semantic-font-size-l);--wcs-input-font-size-m:var(--wcs-semantic-font-size-m);--wcs-input-font-size-s:var(--wcs-semantic-font-size-s);--wcs-input-prefix-suffix-background-color:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-input-prefix-suffix-color:var(--wcs-semantic-color-foreground-on-accent);--wcs-input-prefix-suffix-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-input-prefix-suffix-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-input-border-style-default:solid;--wcs-input-border-style-focus:var(--wcs-semantic-border-style-focus-control);--wcs-input-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-input-border-color-disabled:var(--wcs-semantic-color-border-disabled);--wcs-input-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-input-border-color-error:var(--wcs-semantic-color-border-critical);--wcs-input-value-color:var(--wcs-semantic-color-text-primary);--wcs-input-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-input-placeholder-color:var(--wcs-semantic-color-text-tertiary);--wcs-input-placeholder-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-input-placeholder-font-style:var(--wcs-semantic-font-style-control-placeholder);--wcs-input-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-input-min-height:var(--wcs-semantic-size-s);--wcs-input-padding-horizontal-s:calc(1.5 * var(--wcs-semantic-spacing-base));--wcs-input-padding-horizontal-m:var(--wcs-semantic-spacing-large);--wcs-input-padding-horizontal-l:var(--wcs-semantic-spacing-large);--wcs-input-gap:var(--wcs-semantic-spacing-base);display:flex;width:100%;height:var(--wcs-input-host-height);box-sizing:border-box;border-radius:var(--wcs-input-border-radius-left) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-left);background-color:var(--wcs-input-background-color);outline:var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-default);outline-offset:calc(var(--wcs-input-border-width) * -1);background-clip:padding-box;gap:var(--wcs-input-gap)}:host input{overflow:hidden;height:var(--wcs-input-host-height);width:100%;padding:0;background-color:transparent;font-family:var(--wcs-font-sans-serif);color:var(--wcs-input-value-color);font-weight:var(--wcs-input-value-font-weight) !important;border:none;font-size:var(--wcs-input-font-size, 1rem);line-height:1.5}:host input::placeholder{color:var(--wcs-input-placeholder-color);opacity:1;font-weight:var(--wcs-input-placeholder-font-weight);font-style:var(--wcs-input-placeholder-font-style)}:host input:focus{box-shadow:none;outline:0}:host .toggle_password{cursor:pointer}:host .prefix,:host .suffix{color:var(--wcs-input-prefix-suffix-color);display:flex;white-space:nowrap;align-items:center;font-size:var(--wcs-input-font-size, 1rem);padding:0 calc(var(--wcs-input-padding-horizontal-m) / 2);font-weight:var(--wcs-input-prefix-suffix-font-weight) !important;background-color:var(--wcs-input-prefix-suffix-background-color)}:host .prefix{border-radius:var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left)}:host .suffix{border-radius:0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0}:host wcs-mat-icon{color:var(--wcs-input-icon-color-default)}:host([size=l]){--wcs-input-host-height:var(--wcs-input-height-l);--wcs-input-font-size:var(--wcs-input-font-size-l);padding-left:calc(var(--wcs-input-padding-horizontal-l));padding-right:calc(var(--wcs-input-padding-horizontal-l))}:host([size=m]){--wcs-input-host-height:var(--wcs-input-height-m);--wcs-input-font-size:var(--wcs-input-font-size-m);padding-left:calc(var(--wcs-input-padding-horizontal-m));padding-right:calc(var(--wcs-input-padding-horizontal-m))}:host([size=s]){--wcs-input-host-height:var(--wcs-input-height-s);--wcs-input-font-size:var(--wcs-input-font-size-s);padding-left:calc(var(--wcs-input-padding-horizontal-s));padding-right:calc(var(--wcs-input-padding-horizontal-s))}:host([state=error]){outline-color:var(--wcs-input-border-color-error) !important}:host([data-has-prefix]){padding-left:0}:host([data-has-suffix]){padding-right:0}:host([disabled]){cursor:not-allowed;outline:var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-disabled);--wcs-input-background-color:var(--wcs-semantic-color-background-control-disabled)}:host([disabled]) input{cursor:not-allowed;color:var(--wcs-input-text-color-disabled)}:host([disabled]) input::placeholder{color:var(--wcs-input-text-color-disabled)}:host([disabled]) .prefix,:host([disabled]) .suffix{color:var(--wcs-input-prefix-suffix-color-disabled);cursor:text}:host([disabled]) wcs-mat-icon{color:var(--wcs-input-icon-color-disabled);cursor:not-allowed}:host([readonly]){--wcs-input-background-color:var(--wcs-semantic-color-background-control-readonly);--wcs-input-border-width:0}:host(:focus-within){outline:var(--wcs-input-border-style-focus) var(--wcs-input-border-width-focus) var(--wcs-input-border-color-focus);outline-offset:calc(var(--wcs-input-border-width-focus) * -1)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-input-icon-color-focus)}";const p=h;const w=["tabindex","title"];const f=class{constructor(s){t(this,s);this.wcsInput=i(this,"wcsInput",7);this.wcsChange=i(this,"wcsChange",7);this.wcsBlur=i(this,"wcsBlur",7);this.wcsFocus=i(this,"wcsFocus",7);this.inputId=`wcs-input-${b++}`;this.inheritedAttributes={};this.iconPassword="visibility";this.onInput=t=>{const i=t.target;if(i){this.value=i.value||""}this.wcsInput.emit(t)};this.onChange=t=>{this.wcsChange.emit({value:this.nativeInput.value})};this.onBlur=t=>{if(this.fireFocusEvents){this.wcsBlur.emit(t)}};this.onFocus=t=>{if(this.fireFocusEvents){this.wcsFocus.emit(t)}};this.fireFocusEvents=true;this.passwordReveal=false;this.accept=undefined;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.debounce=0;this.prefixLabel=undefined;this.suffixLabel=undefined;this.disabled=false;this.enterkeyhint=undefined;this.size="m";this.icon=undefined;this.inputmode=undefined;this.max=undefined;this.maxlength=undefined;this.min=undefined;this.minlength=undefined;this.multiple=undefined;this.name=this.inputId;this.pattern=undefined;this.placeholder=undefined;this.readonly=false;this.required=false;this.spellcheck=false;this.state="initial";this.step=undefined;this.type="text";this.value=""}debounceChanged(){this.wcsInput=o(this.wcsInput,this.debounce)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),a(this.el,w));if(!u(this.size)){console.warn(`Invalid size value for wcs-input : "${this.size}". Must be one of "${l.join(", ")}"`);this.size="m"}}connectedCallback(){this.debounceChanged();{document.dispatchEvent(new CustomEvent("wcsInputDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("wcsInputDidUnload",{detail:this.el}))}}async setBlur(){if(this.nativeInput){this.nativeInput.blur()}}getInputElement(){return Promise.resolve(this.nativeInput)}async setAriaAttribute(t,i){c(this.nativeInput,t,i)}getValueAsString(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}passwordRevealIconClick(){this.passwordReveal=!this.passwordReveal}onPasswordRevealChange(){this.iconPassword=this.passwordReveal?"visibility_off":"visibility"}render(){const t=this.getValueAsString();const i=this.inputId+"-lbl";const r=d(this.el);if(r){r.id=i}return s(e,{key:"a85c77b11f3ac1e7b4238513f4d8916b74d11245","aria-disabled":this.disabled?"true":null,"data-has-prefix":!!this.prefixLabel,"data-has-suffix":!!this.suffixLabel},this.prefixLabel?s("span",{class:"prefix",part:"prefix"},this.prefixLabel):null,this.icon?s("wcs-mat-icon",{icon:this.icon,size:"m"}):null,s("input",Object.assign({key:"2b71e2ba5fbb92685af6123a8accf72833391bc1",class:"native-input",ref:t=>this.nativeInput=t,"aria-labelledby":r?i:null,disabled:this.disabled,accept:this.accept,autoCapitalize:this.autocapitalize,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:this.placeholder||"",readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,step:this.step,type:this.passwordReveal?"text":this.type,value:t,onInput:this.onInput,onChange:this.onChange,onBlur:this.onBlur,onFocus:this.onFocus},this.inheritedAttributes)),this.type==="password"?s("wcs-mat-icon",{class:"toggle_password",icon:this.iconPassword,size:"m",onClick:()=>this.passwordRevealIconClick()}):null,this.suffixLabel?s("span",{class:"suffix",part:"suffix"},this.suffixLabel):null)}static get delegatesFocus(){return true}get el(){return r(this)}static get watchers(){return{debounce:["debounceChanged"],passwordReveal:["onPasswordRevealChange"]}}};let b=0;f.style=p;export{f as wcs_input};
-//# sourceMappingURL=p-52cd0abb.entry.js.map

package/dist/wcs/p-52cd0abb.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["WcsInputSizeValues","isWcsInputSize","size","includes","inputCss","WcsInputStyle0","INPUT_INHERITED_ATTRS","Input","this","inputId","inputIds","inheritedAttributes","iconPassword","onInput","ev","input","target","value","wcsInput","emit","onChange","_","wcsChange","nativeInput","onBlur","fireFocusEvents","wcsBlur","onFocus","wcsFocus","debounceChanged","debounceEvent","debounce","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","console","warn","join","connectedCallback","document","dispatchEvent","CustomEvent","detail","disconnectedCallback","setBlur","blur","getInputElement","Promise","resolve","setAriaAttribute","attr","setOrRemoveAttribute","getValueAsString","toString","passwordRevealIconClick","passwordReveal","onPasswordRevealChange","render","labelId","label","findItemLabel","id","h","Host","key","disabled","prefixLabel","suffixLabel","class","part","icon","ref","accept","autoCapitalize","autocapitalize","autoComplete","autocomplete","autoCorrect","autocorrect","autoFocus","autofocus","enterKeyHint","enterkeyhint","inputMode","inputmode","min","max","minLength","minlength","maxLength","maxlength","multiple","name","pattern","placeholder","readOnly","readonly","required","spellcheck","step","type","onClick"],"sources":["src/components/input/input-interface.ts","src/components/input/input.scss?tag=wcs-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nimport { WcsSize } from '../../shared-types';\n\nexport type AutocompleteTypes = (\n    | 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix'\n    | 'nickname' | 'email' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization'\n    | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2'\n    | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name'\n    | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount'\n    | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local'\n    | 'tel-extension' | 'impp' | 'url' | 'photo');\n\nexport type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local' | 'file';\n\nexport const WcsInputSizeValues = ['s', 'm', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsInputSize = Extract<WcsSize, typeof WcsInputSizeValues[number]>;\n\nexport function isWcsInputSize(size: string): size is WcsInputSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsInputSizeValues.includes(size);\n}\n\nexport type WcsInputAutocorrect = 'on' | 'off';\n\nexport type WcsInputEnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\nexport type WcsInputInputMode = 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\nexport type WcsInputState = 'initial' | 'error';\n\nexport interface InputChangeEventDetail {\n    value: string | undefined | null;\n}\n","@import '../../style/focus-outline.scss';\n@import '../../style/placeholder.scss';\n\n:host {\n    --wcs-input-icon-color-default: var(--wcs-semantic-color-foreground-brand);\n    --wcs-input-icon-color-focus: var(--wcs-semantic-color-foreground-brand);\n    --wcs-input-icon-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-default);\n\n    --wcs-input-border-radius-left: var(--wcs-semantic-border-radius-base); // Overridden from prefix suffix group in form-field\n    --wcs-input-border-radius-right: var(--wcs-semantic-border-radius-base); // Overridden from prefix suffix group in form-field\n\n    --wcs-input-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-input-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-input-height-l: var(--wcs-semantic-size-l);\n    --wcs-input-height-m: var(--wcs-semantic-size-m);\n    --wcs-input-height-s: var(--wcs-semantic-size-s);\n    --wcs-input-font-size-l: var(--wcs-semantic-font-size-l);\n    --wcs-input-font-size-m: var(--wcs-semantic-font-size-m);\n    --wcs-input-font-size-s: var(--wcs-semantic-font-size-s);\n\n    --wcs-input-prefix-suffix-background-color: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-input-prefix-suffix-color: var(--wcs-semantic-color-foreground-on-accent);\n    --wcs-input-prefix-suffix-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-input-prefix-suffix-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-input-border-style-default: solid;\n    --wcs-input-border-style-focus: var(--wcs-semantic-border-style-focus-control);\n\n    --wcs-input-border-color-default: var(--wcs-semantic-color-border-primary);\n    --wcs-input-border-color-disabled: var(--wcs-semantic-color-border-disabled);\n    --wcs-input-border-color-focus: var(--wcs-semantic-color-border-control-focus);\n    --wcs-input-border-color-error: var(--wcs-semantic-color-border-critical);\n\n    --wcs-input-value-color: var(--wcs-semantic-color-text-primary);\n    --wcs-input-value-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-input-placeholder-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-input-placeholder-font-weight: var(--wcs-semantic-font-weight-roman);\n    --wcs-input-placeholder-font-style: var(--wcs-semantic-font-style-control-placeholder);\n\n    --wcs-input-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-input-min-height: var(--wcs-semantic-size-s);\n    --wcs-input-padding-horizontal-s: calc(1.5 * var(--wcs-semantic-spacing-base));\n    --wcs-input-padding-horizontal-m: var(--wcs-semantic-spacing-large);\n    --wcs-input-padding-horizontal-l: var(--wcs-semantic-spacing-large);\n    --wcs-input-gap: var(--wcs-semantic-spacing-base);\n\n    display: flex;\n    width: 100%;\n    height: var(--wcs-input-host-height);\n    box-sizing: border-box;\n    border-radius: var(--wcs-input-border-radius-left) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-left);\n    background-color: var(--wcs-input-background-color);\n    outline: var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-default);\n    outline-offset: calc(var(--wcs-input-border-width) * -1);\n    background-clip: padding-box;\n\n    gap: var(--wcs-input-gap);\n\n    input {\n        overflow: hidden;\n        height: var(--wcs-input-host-height);\n        width: 100%;\n        padding: 0; // Reset padding from user agent stylesheet, it's the container that will handle padding\n        background-color: transparent;\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-input-value-color);\n        font-weight: var(--wcs-input-value-font-weight) !important;\n        border: none;\n        font-size: var(--wcs-input-font-size, 1rem);\n        line-height: 1.5;\n\n        &::placeholder {\n            @include placeholder(var(--wcs-input-placeholder-color), var(--wcs-input-placeholder-font-weight), var(--wcs-input-placeholder-font-style));\n        }\n    }\n\n    input:focus {\n        box-shadow: none;\n        outline: 0;\n    }\n\n    .toggle_password {\n        cursor: pointer;\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-input-prefix-suffix-color);\n        display: flex;\n        white-space: nowrap;\n        align-items: center;\n        font-size: var(--wcs-input-font-size, 1rem);\n        padding: 0 calc(var(--wcs-input-padding-horizontal-m) / 2);\n        font-weight: var(--wcs-input-prefix-suffix-font-weight) !important;\n        background-color: var(--wcs-input-prefix-suffix-background-color);\n    }\n\n    .prefix {\n        border-radius: var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left);\n    }\n\n    .suffix {\n        border-radius: 0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0;\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-default);\n    }\n}\n\n:host([size=l]) {\n    --wcs-input-host-height: var(--wcs-input-height-l);\n    --wcs-input-font-size: var(--wcs-input-font-size-l);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-l));\n    padding-right: calc(var(--wcs-input-padding-horizontal-l));\n}\n\n:host([size=m]) { // Default\n    --wcs-input-host-height: var(--wcs-input-height-m);\n    --wcs-input-font-size: var(--wcs-input-font-size-m);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-m));\n    padding-right: calc(var(--wcs-input-padding-horizontal-m));\n}\n\n:host([size=s]) {\n    --wcs-input-host-height: var(--wcs-input-height-s);\n    --wcs-input-font-size: var(--wcs-input-font-size-s);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-s));\n    padding-right: calc(var(--wcs-input-padding-horizontal-s));\n}\n\n:host([state=error]) {\n    outline-color: var(--wcs-input-border-color-error) !important;\n}\n\n:host([data-has-prefix]) {\n    padding-left: 0;\n}\n\n:host([data-has-suffix]) {\n    padding-right: 0;\n}\n\n:host([disabled]) {\n    cursor: not-allowed; // padding is handled by the container, so we need to set cursor not allowed on it\n    outline: var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-disabled);\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-disabled);\n\n    input {\n        cursor: not-allowed;\n        color: var(--wcs-input-text-color-disabled);\n\n        &::placeholder {\n            color: var(--wcs-input-text-color-disabled);\n        }\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-input-prefix-suffix-color-disabled);\n        cursor: text; // reset cursor to text for prefix and suffix, to be able to select text\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-disabled);\n        cursor: not-allowed;\n    }\n}\n\n:host([readonly]) {\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-readonly);\n    --wcs-input-border-width: 0;\n}\n\n:host(:focus-within) {\n    outline: var(--wcs-input-border-style-focus) var(--wcs-input-border-width-focus) var(--wcs-input-border-color-focus);\n    outline-offset: calc(var(--wcs-input-border-width-focus) * -1);\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-focus);\n    }\n}\n","import {\n    Build,\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport {\n    debounceEvent,\n    findItemLabel,\n    inheritAriaAttributes,\n    inheritAttributes,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport {\n    AutocompleteTypes,\n    InputChangeEventDetail,\n    isWcsInputSize,\n    TextFieldTypes,\n    WcsInputSize,\n    WcsInputSizeValues,\n    WcsInputAutocorrect,\n    WcsInputEnterKeyHint,\n    WcsInputInputMode,\n    WcsInputState\n} from './input-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst INPUT_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The input component is a form control that accepts a single line of text.\n * Implementation mainly inspired from Ionic Input Component.\n *\n * ## Accessibility guidelines 💡\n * > - If you use wcs-input outside a wcs-form-field, you have to manage the label and the error message yourself.\n * > You can use the `aria-label` attribute to provide a label for screen readers but adds no visual label.\n * \n * @cssprop --wcs-input-icon-color-default - default icon color when the input is not focused\n * @cssprop --wcs-input-icon-color-focus - icon color when the input is focused\n * @cssprop --wcs-input-icon-color-disabled - icon color when the input is disabled\n *\n * @cssprop --wcs-input-background-color - background color of the input\n *\n * @cssprop --wcs-input-border-radius-left - border radius of the left side of the input\n * @cssprop --wcs-input-border-radius-right - border radius of the right side of the input\n * \n * @cssprop --wcs-input-border-width - border width of the input\n * @cssprop --wcs-input-border-width-focus - border width of the input when focused\n *\n * @cssprop --wcs-input-height-l - large height of the input\n * @cssprop --wcs-input-height-m - medium height of the input\n * @cssprop --wcs-input-height-s - small height of the input\n * @cssprop --wcs-input-font-size-l - large font size of the input\n * @cssprop --wcs-input-font-size-m - medium font size of the input\n * @cssprop --wcs-input-font-size-s - small font size of the input\n *\n * @cssprop --wcs-input-border-style-default - default border style of the input\n * @cssprop --wcs-input-border-style-focus - border style of the input when focused\n * \n * @cssprop --wcs-input-prefix-suffix-background-color - background color of the suffix/prefix\n * @cssprop --wcs-input-prefix-suffix-color - color of the suffix/prefix\n * @cssprop --wcs-input-prefix-suffix-color-disabled - color of the suffix/prefix when the input is disabled\n * @cssprop --wcs-input-prefix-suffix-font-weight - font weight of the suffix/prefix\n *\n * @cssprop --wcs-input-border-color-default - default border color of the input when not focused\n * @cssprop --wcs-input-border-color-disabled - border color of the input when disabled\n * @cssprop --wcs-input-border-color-focus - border color of the input when focused\n * @cssprop --wcs-input-border-color-error - border color of the input when in error state\n *\n * @cssprop --wcs-input-value-color - color of the input value\n * @cssprop --wcs-input-value-font-weight - font weight of the input value\n * \n * @cssprop --wcs-input-placeholder-color - color of the input placeholder\n * @cssprop --wcs-input-placeholder-font-weight - font weight of the input placeholder\n * @cssprop --wcs-input-placeholder-font-style - font style of the input placeholder\n * \n * @cssprop --wcs-input-text-color-disabled - color of the input when disabled\n *\n * @cssprop --wcs-input-padding-horizontal-s - horizontal padding of the input in small size\n * @cssprop --wcs-input-padding-horizontal-m - horizontal padding of the input in medium size\n * @cssprop --wcs-input-padding-horizontal-l - horizontal padding of the input in large size\n * \n * @cssprop --wcs-input-gap - gap between text input and icon\n */\n@Component({\n    tag: 'wcs-input',\n    styleUrl: 'input.scss',\n    shadow: { delegatesFocus: true },\n})\nexport class Input implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeInput?: HTMLInputElement;\n    private inputId = `wcs-input-${inputIds++}`;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private iconPassword = \"visibility\";\n\n    /**\n     * This is required for a WebKit bug which requires us to\n     * blur and focus an input to properly focus the input in\n     * an item with delegatesFocus. It will no longer be needed\n     * with iOS 14.\n     *\n     * @internal\n     */\n    @Prop() fireFocusEvents = true;\n\n    @State() private passwordReveal = false;\n\n    /**\n     * If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the\n     * server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n     */\n    @Prop() accept?: string;\n\n    /**\n     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n     * Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n     */\n    @Prop() autocapitalize = 'off';\n\n    /**\n     * Indicates whether the value of the control can be automatically completed by the browser.\n     */\n    @Prop() autocomplete: AutocompleteTypes = 'off';\n\n    /**\n     * Whether auto correction should be enabled when the user is entering/editing the text value.\n     */\n    @Prop() autocorrect: WcsInputAutocorrect = 'off';\n\n    /**\n     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n     */\n    @Prop() autofocus = false;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsInput` event after each keystroke.\n     * This also impacts form bindings such as `ngModel` or `v-model`.\n     */\n    @Prop() debounce = 0;\n\n    @Watch('debounce')\n    protected debounceChanged() {\n        this.wcsInput = debounceEvent(this.wcsInput, this.debounce);\n    }\n\n    /**\n     * Prefix displayed before the text field contents. This is not included in the value.\n     */\n    @Prop() prefixLabel: string;\n\n    /**\n     * Suffix displayed after the text field contents. This is not included in the value.\n     */\n    @Prop() suffixLabel: string;\n\n    /**\n     * If `true`, the user cannot interact with the input.\n     */\n    @Prop() disabled = false;\n\n    /**\n     * A hint to the browser for which enter key to display.\n     */\n    @Prop() enterkeyhint?: WcsInputEnterKeyHint;\n\n    /**\n     * Specify the size (height) of the input.\n     */\n    @Prop({reflect: true}) size: WcsInputSize = 'm';\n\n    /**\n     * Name of the material icon to add to the input\n     */\n    @Prop() icon: string;\n\n    /**\n     * A hint to the browser for which keyboard to display.\n     */\n    @Prop() inputmode?: WcsInputInputMode;\n\n    /**\n     * The maximum value, which must not be less than its minimum (min attribute) value.\n     */\n    @Prop() max?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n     * specifies the maximum number of characters that the user can enter.\n     */\n    @Prop() maxlength?: number;\n\n    /**\n     * The minimum value, which must not be greater than its maximum (max attribute) value.\n     */\n    @Prop() min?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n     * specifies the minimum number of characters that the user can enter.\n     */\n    @Prop() minlength?: number;\n\n    /**\n     * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to\n     * `\"email\"` or `\"file\"`, otherwise it is ignored.\n     */\n    @Prop() multiple?: boolean;\n\n    /**\n     * The name of the control, which is submitted with the form data.\n     */\n    @Prop() name: string = this.inputId;\n\n    /**\n     * A regular expression that the value is checked against. The pattern must match the entire value, not just some\n     * subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value\n     * of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise\n     * it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support\n     * the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for\n     * more information.\n     */\n    @Prop() pattern?: string;\n\n    /**\n     * Instructional text that shows before the input has a value.\n     */\n    @Prop() placeholder?: string | null;\n\n    /**\n     * If `true`, the user cannot modify the value.\n     */\n    @Prop() readonly = false;\n\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     */\n    @Prop() required = false;\n\n    /**\n     * If `true`, the element will have its spelling and grammar checked.\n     */\n    @Prop() spellcheck = false;\n\n    /**\n     * Specifies the state of the input. By default the input is in an normal state but you can to set it to 'error'\n     * state if the data given by the user is not valid.\n     */\n    @Prop({reflect: true}) state: WcsInputState = 'initial';\n\n    /**\n     * Works with the min and max attributes to limit the increments at which a value can be set.\n     * Possible values are: `\"any\"` or a positive floating point number.\n     */\n    @Prop() step?: string;\n\n    /**\n     * The type of control to display. The default type is text.\n     */\n    @Prop() type: TextFieldTypes = 'text';\n\n    /**\n     * The value of the input.\n     */\n    @Prop({mutable: true}) value?: string | number | null = '';\n\n    /**\n     * Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input\n     */\n    @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n    /**\n     * Emitted when the value has changed. See https://developer.mozilla.org/en-US/docs/Web/Events/change\n     */\n    @Event() wcsChange!: EventEmitter<InputChangeEventDetail>;\n\n    /**\n     * Emitted when the input loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the input has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, INPUT_INHERITED_ATTRS)\n        };\n\n        if (!isWcsInputSize(this.size)) {\n            console.warn(`Invalid size value for wcs-input : \"${this.size}\". Must be one of \"${WcsInputSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    connectedCallback() {\n        this.debounceChanged();\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n                detail: this.el\n            }));\n        }\n    }\n\n    disconnectedCallback() {\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n                detail: this.el\n            }));\n        }\n    }\n\n    /**\n     * Sets blur on the native `input` in `wcs-input`. Use this method instead of the global\n     * `input.blur()`.\n     * @internal\n     */\n    @Method()\n    async setBlur() {\n        if (this.nativeInput) {\n            this.nativeInput.blur();\n        }\n    }\n\n    /**\n     * Returns the native `<input>` element used under the hood.\n     */\n    @Method()\n    getInputElement(): Promise<HTMLInputElement> {\n        return Promise.resolve(this.nativeInput!);\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n    \n    private getValueAsString(): string {\n        return typeof this.value === 'number' ? this.value.toString() :\n            (this.value || '').toString();\n    }\n\n    private onInput = (ev: Event) => {\n        const input = ev.target as HTMLInputElement | null;\n        if (input) {\n            this.value = input.value || '';\n        }\n        this.wcsInput.emit(ev as KeyboardEvent);\n    }\n\n    private onChange = (_: Event) => {\n        this.wcsChange.emit({value: this.nativeInput.value});\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    private onFocus = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private passwordRevealIconClick(): void {\n        this.passwordReveal = !this.passwordReveal;\n    }\n\n    @Watch('passwordReveal')\n    onPasswordRevealChange(): void {\n        this.iconPassword = this.passwordReveal ? 'visibility_off' : 'visibility';\n    }\n\n    render() {\n        const value = this.getValueAsString();\n        const labelId = this.inputId + '-lbl';\n        const label = findItemLabel(this.el);\n        if (label) {\n            label.id = labelId;\n        }\n\n        return (\n            <Host\n                aria-disabled={this.disabled ? 'true' : null}\n                data-has-prefix={!!this.prefixLabel}\n                data-has-suffix={!!this.suffixLabel}\n            >\n                {this.prefixLabel ? (<span class=\"prefix\" part=\"prefix\">{this.prefixLabel}</span>) : null}\n                {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n                <input\n                    class=\"native-input\"\n                    ref={input => this.nativeInput = input}\n                    aria-labelledby={label ? labelId : null}\n                    disabled={this.disabled}\n                    accept={this.accept}\n                    autoCapitalize={this.autocapitalize}\n                    autoComplete={this.autocomplete}\n                    autoCorrect={this.autocorrect}\n                    autoFocus={this.autofocus}\n                    enterKeyHint={this.enterkeyhint}\n                    inputMode={this.inputmode}\n                    min={this.min}\n                    max={this.max}\n                    minLength={this.minlength}\n                    maxLength={this.maxlength}\n                    multiple={this.multiple}\n                    name={this.name}\n                    pattern={this.pattern}\n                    placeholder={this.placeholder || ''}\n                    readOnly={this.readonly}\n                    required={this.required}\n                    spellcheck={this.spellcheck}\n                    step={this.step}\n                    type={this.passwordReveal ? 'text' : this.type}\n                    value={value}\n                    onInput={this.onInput}\n                    onChange={this.onChange}\n                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    {...this.inheritedAttributes}\n                />\n                {this.type === \"password\" ? (<wcs-mat-icon class=\"toggle_password\" icon={this.iconPassword} size=\"m\"  onClick={() => this.passwordRevealIconClick()}></wcs-mat-icon>) : null}\n                {this.suffixLabel ? (<span class=\"suffix\" part=\"suffix\">{this.suffixLabel}</span>) : null}\n            </Host>\n        );\n    }\n}\n\nlet inputIds = 0;\n"],"mappings":"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"}

package/dist/wcs/p-5f517eb5.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t,H as a}from"./p-32e583ea.js";const s=class{constructor(t){e(this,t)}render(){return t(a,{key:"c99148e0b9a6b127e4fa731b2305545adb5687ad",slot:"content"},t("slot",{key:"f17d981a7e903f20e5cffe17edbde0e75c0a0abc"}))}};export{s as wcs_field_content};
-//# sourceMappingURL=p-5f517eb5.entry.js.map

package/dist/wcs/p-806315e6.entry.js

@@ -1,2 +0,0 @@
-import{r as s,h as t,g as e}from"./p-32e583ea.js";import{i,a,s as r}from"./p-a3aece7a.js";const c=["title"];const n=class{constructor(t){s(this,t);this.inheritedAttributes={};this.icon=undefined;this.size=undefined}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},i(this.el)),a(this.el,c))}async setAriaAttribute(s,t){r(this.nativeIcon,s,t)}render(){const s={class:{[`icons-${this.icon}`]:true,[`icons-size-${this.size}`]:true}};return t("i",Object.assign({key:"bb5a7a275de88a4c02dbd15899516a860579fa35"},s,{ref:s=>this.nativeIcon=s},this.inheritedAttributes))}get el(){return e(this)}};export{n as wcs_icon};
-//# sourceMappingURL=p-806315e6.entry.js.map

package/dist/wcs/p-8780a429.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as e,H as t,g as c}from"./p-32e583ea.js";import{i as o,a as i,s as r,o as s,b as n}from"./p-a3aece7a.js";import{c as l}from"./p-0f864e86.js";const d=':host{--wcs-galactic-menu-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-galactic-menu-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-gap:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-height:var(--wcs-semantic-size-s);--wcs-galactic-menu-icon-focus-outline-color:var(--wcs-galactic-text-color, white);--wcs-galactic-menu-overlay-color:var(--wcs-semantic-color-text-inverse);--wcs-galactic-menu-overlay-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-galactic-menu-overlay-padding:var(--wcs-semantic-spacing-large);display:flex;align-items:center;box-sizing:border-box;height:var(--wcs-galactic-menu-height);gap:var(--wcs-galactic-menu-gap);padding:0 var(--wcs-galactic-menu-padding-horizontal);background-color:var(--wcs-galactic-menu-background-color)}#menu{display:none;background-color:var(--wcs-galactic-menu-overlay-background-color);color:var(--wcs-galactic-menu-overlay-color);padding:var(--wcs-galactic-menu-overlay-padding)}#menu[data-show]{display:block;z-index:9999}#menu[data-popper-placement^=top]>#arrow{bottom:-4px}#menu[data-popper-placement^=bottom]>#arrow{top:-4px}#menu[data-popper-placement^=left]>#arrow{right:-4px}#menu[data-popper-placement^=right]>#arrow{left:-4px}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit}#arrow{visibility:hidden}#arrow::before{visibility:visible;content:"";transform:rotate(45deg)}button{background:transparent;border:none;color:inherit;cursor:pointer;user-select:none}button:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-galactic-menu-icon-focus-outline-color);outline-offset:0;border-radius:0.1rem}';const u=d;const p=["tabindex","title"];const m=class{constructor(e){a(this,e);this.inheritedAttributes={};this.showPopoverMenu=false;this.text=undefined}componentDidLoad(){this.menu=this.el.shadowRoot.getElementById("toggle-menu-icon");this.tooltip=this.el.shadowRoot.getElementById("menu");this.popper=l(this.menu,this.tooltip,{placement:"bottom-end",modifiers:[{name:"offset",options:{offset:[0,8]}}]})}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},o(this.el)),i(this.el,p))}async setAriaAttribute(a,e){r(this.menuButton,a,e)}onWindowClickEvent(a){if(s(a,this.tooltip)||s(a,this.menu)){return}else{if(this.showPopoverMenu){this.toggleMenu()}}}onKeyDown(a){var e;if(n(a)){a.preventDefault();this.showPopoverMenu=false;(e=this.menuButton)===null||e===void 0?void 0:e.focus()}}toggleMenu(){this.showPopoverMenu=!this.showPopoverMenu}componentDidRender(){if(this.popper){this.popper.update()}}render(){return e(t,{key:"99bff08532f4d0bdd20c44781ab7f1e10bd4fad8"},e("span",{key:"c4827722002c9d558a9a412556be08ff36718a53"},this.text),e("button",Object.assign({key:"fb4eb7c33068169949918b6bd6cc9c96cdde8608","aria-haspopup":"true","aria-controls":"menu",ref:a=>{this.menuButton=a},"aria-expanded":this.showPopoverMenu?"true":"false"},this.inheritedAttributes,{onClick:a=>this.toggleMenu()}),e("wcs-mat-icon",{key:"72b08ab8670569c8911ef041a71782cb14427e84",id:"toggle-menu-icon",icon:"more_horiz",size:"m"})),e("span",{key:"d0491419b48c7fbe0d773f14c541bb5af7912684",id:"menu",role:"menu","data-show":this.showPopoverMenu},e("div",{key:"7f2ba9b81f9041c421f21b9da6c83f0096155161",id:"arrow","data-popper-arrow":true}),e("slot",{key:"c5acecba63143c61982bceca50eea5656130f908"})))}get el(){return c(this)}};m.style=u;export{m as wcs_galactic_menu};
-//# sourceMappingURL=p-8780a429.entry.js.map

package/dist/wcs/p-8780a429.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["galacticMenuCss","WcsGalacticMenuStyle0","GALACTIC_MENU_INHERITED_ATTRS","Galactic","this","inheritedAttributes","componentDidLoad","menu","el","shadowRoot","getElementById","tooltip","popper","createPopper","placement","modifiers","name","options","offset","componentWillLoad","Object","assign","inheritAriaAttributes","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","menuButton","onWindowClickEvent","event","clickInsideElement","showPopoverMenu","toggleMenu","onKeyDown","_event","isEscapeKey","preventDefault","_a","focus","componentDidRender","update","render","h","Host","key","text","ref","onClick","_","id","icon","size","role"],"sources":["src/components/galactic-menu/galactic-menu.scss?tag=wcs-galactic-menu&encapsulation=shadow","src/components/galactic-menu/galactic-menu.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-galactic-menu-background-color: var(--wcs-semantic-color-background-surface-brand);\n    --wcs-galactic-menu-padding-horizontal: var(--wcs-semantic-spacing-large);\n    --wcs-galactic-menu-gap: var(--wcs-semantic-spacing-large);\n    --wcs-galactic-menu-height: var(--wcs-semantic-size-s);\n\n    --wcs-galactic-menu-icon-focus-outline-color: var(--wcs-galactic-text-color, white); /* Inherit from galactic */\n    --wcs-galactic-menu-overlay-color: var(--wcs-semantic-color-text-inverse);\n    --wcs-galactic-menu-overlay-background-color: var(--wcs-semantic-color-background-surface-inverse);\n    --wcs-galactic-menu-overlay-padding: var(--wcs-semantic-spacing-large);\n\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    height: var(--wcs-galactic-menu-height);\n    gap: var(--wcs-galactic-menu-gap);\n    padding: 0 var(--wcs-galactic-menu-padding-horizontal);\n    background-color: var(--wcs-galactic-menu-background-color);\n\n}\n#menu {\n    display: none;\n    background-color: var(--wcs-galactic-menu-overlay-background-color);\n    color: var(--wcs-galactic-menu-overlay-color);\n    padding: var(--wcs-galactic-menu-overlay-padding);\n}\n#menu[data-show] {\n    display: block;\n    z-index: 9999;\n}\n#menu[data-popper-placement^='top'] > #arrow {\n    bottom: -4px;\n}\n\n#menu[data-popper-placement^='bottom'] > #arrow {\n    top: -4px;\n}\n\n#menu[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n#menu[data-popper-placement^='right'] > #arrow {\n    left: -4px;\n}\n\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n}\n\n#arrow {\n    visibility: hidden;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\nbutton {\n    background: transparent;\n    border: none;\n    color: inherit;\n\n    cursor: pointer;\n    user-select: none;\n\n    &:focus-visible {\n        @include focus-outline(var(--wcs-galactic-menu-icon-focus-outline-color), $outline-offset: 0);\n    }\n}\n","import { Component, ComponentInterface, Element, h, Host, Listen, Method, Prop, State } from '@stencil/core';\nimport { Instance, createPopper } from '@popperjs/core';\nimport {\n    clickInsideElement,\n    inheritAriaAttributes,\n    inheritAttributes,\n    isEscapeKey,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { AriaAttributeName } from \"../../utils/mutable-aria-attribute\";\n\n\nconst GALACTIC_MENU_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * *Part of communication design system*\n * You can put a wcs-galactic-menu inside a wcs-galactic component to add an extra menu\n * \n * @slot <no-name> - Main container slot\n * \n * @cssprop --wcs-galactic-menu-background-color - Background color of the menu\n * @cssprop --wcs-galactic-menu-padding-horizontal - Horizontal padding of the menu\n * @cssprop --wcs-galactic-menu-gap - Gap between items in the menu\n * @cssprop --wcs-galactic-menu-height - Height of the menu\n * @cssprop --wcs-galactic-menu-icon-focus-outline-color - Color of the focus outline on the icon\n * @cssprop --wcs-galactic-menu-overlay-background-color - Background color of the overlay\n * @cssprop --wcs-galactic-menu-overlay-padding - Padding of the overlay\n * @cssprop --wcs-galactic-menu-overlay-color - Color of the overlay\n */\n@Component({\n    tag: 'wcs-galactic-menu',\n    styleUrl: 'galactic-menu.scss',\n    shadow: true\n})\nexport class Galactic implements ComponentInterface {\n    @Element() private el: HTMLWcsGalacticMenuElement;\n    private menuButton!: HTMLButtonElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @State() private showPopoverMenu: boolean = false;\n    private popper: Instance;\n    /**\n     * Text to be displayed in the galactic bar\n     */\n    @Prop() text: string;\n    private menu;\n    private tooltip;\n\n    componentDidLoad() {\n        this.menu = this.el.shadowRoot.getElementById('toggle-menu-icon');\n        this.tooltip = this.el.shadowRoot.getElementById('menu');\n        this.popper = createPopper(this.menu, this.tooltip, {\n            placement: 'bottom-end',\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, GALACTIC_MENU_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.menuButton, attr, value);\n    }\n\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        if (clickInsideElement(event, this.tooltip) || clickInsideElement(event, this.menu)) {\n            return;\n        } else {\n            if (this.showPopoverMenu) {\n                this.toggleMenu();\n            }\n        }\n    }\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent) {\n        if (isEscapeKey(_event)) {\n            _event.preventDefault();\n            this.showPopoverMenu = false;\n            this.menuButton?.focus();\n        }\n    }\n    \n    private toggleMenu() {\n        this.showPopoverMenu = !this.showPopoverMenu;\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n    }\n\n    render(): any {\n        return (\n            <Host>\n                <span>{this.text}</span>\n                <button aria-haspopup=\"true\"\n                        aria-controls=\"menu\"\n                        ref={el => {\n                            this.menuButton = el\n                        }}\n                        aria-expanded={this.showPopoverMenu ? \"true\" : \"false\"}\n                        {...this.inheritedAttributes}\n                        onClick={_ => this.toggleMenu()}>\n                    <wcs-mat-icon id=\"toggle-menu-icon\" icon=\"more_horiz\" size=\"m\"></wcs-mat-icon>\n                </button>\n                <span id=\"menu\" role=\"menu\" data-show={this.showPopoverMenu}>\n                    <div id=\"arrow\" data-popper-arrow />\n                    <slot/>\n                </span>\n            </Host>\n        );\n    }\n}\n"],"mappings":"6JAAA,MAAMA,EAAkB,0qDACxB,MAAAC,EAAeD,ECWf,MAAME,EAAgC,CAAC,WAAY,S,MAsBtCC,EAAQ,M,yBAGTC,KAAAC,oBAA4C,G,qBAER,M,oBAS5C,gBAAAC,GACIF,KAAKG,KAAOH,KAAKI,GAAGC,WAAWC,eAAe,oBAC9CN,KAAKO,QAAUP,KAAKI,GAAGC,WAAWC,eAAe,QACjDN,KAAKQ,OAASC,EAAaT,KAAKG,KAAMH,KAAKO,QAAS,CAChDG,UAAW,aACXC,UAAW,CACP,CACIC,KAAM,SACNC,QAAS,CACLC,OAAQ,CAAC,EAAG,O,CAOhC,iBAAAC,GACIf,KAAKC,oBAAmBe,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBlB,KAAKI,KAC3Be,EAAkBnB,KAAKI,GAAIN,G,CAKtC,sBAAMsB,CAAiBC,EAAyBC,GAC5CC,EAAqBvB,KAAKwB,WAAYH,EAAMC,E,CAKhD,kBAAAG,CAAmBC,GACf,GAAIC,EAAmBD,EAAO1B,KAAKO,UAAYoB,EAAmBD,EAAO1B,KAAKG,MAAO,CACjF,M,KACG,CACH,GAAIH,KAAK4B,gBAAiB,CACtB5B,KAAK6B,Y,GAMjB,SAAAC,CAAUC,G,MACN,GAAIC,EAAYD,GAAS,CACrBA,EAAOE,iBACPjC,KAAK4B,gBAAkB,OACvBM,EAAAlC,KAAKwB,cAAU,MAAAU,SAAA,SAAAA,EAAEC,O,EAIjB,UAAAN,GACJ7B,KAAK4B,iBAAmB5B,KAAK4B,e,CAGjC,kBAAAQ,GACI,GAAIpC,KAAKQ,OAAQ,CACbR,KAAKQ,OAAO6B,Q,EAIpB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,QAAAE,IAAA,4CAAOzC,KAAK0C,MACZH,EAAA,SAAAvB,OAAAC,OAAA,CAAAwB,IAAA,2DAAsB,OAAM,gBACN,OACdE,IAAKvC,IACDJ,KAAKwB,WAAapB,CAAE,EACvB,gBACcJ,KAAK4B,gBAAkB,OAAS,SAC3C5B,KAAKC,oBAAmB,CAC5B2C,QAASC,GAAK7C,KAAK6B,eACvBU,EAAA,gBAAAE,IAAA,2CAAcK,GAAG,mBAAmBC,KAAK,aAAaC,KAAK,OAE/DT,EAAA,QAAAE,IAAA,2CAAMK,GAAG,OAAOG,KAAK,OAAM,YAAYjD,KAAK4B,iBACxCW,EAAA,OAAAE,IAAA,2CAAKK,GAAG,QAAO,2BACfP,EAAA,QAAAE,IAAA,8C"}

package/dist/wcs/p-94ff8939.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getActionForKeyboardEvent","event","currentState","keyboardShortcut","keyboardShortcutFromKeyboardEvent","kind","target","Error","dropdownCss","WcsDropdownStyle0","DROPDOWN_INHERITED_ATTRS","Dropdown","this","inheritedAttributes","items","Array","from","el","querySelectorAll","placementChange","popper","setOptions","Object","assign","state","options","placement","then","_","update","onBlur","clearLastFocusedItem","expanded","componentDidLoad","isWcsButtonSize","size","console","warn","WcsButtonSizeValues","join","createPopper","wcsButton","popoverDiv","modifiers","name","offset","fixForFirefoxBelow63","container","querySelector","length","forEach","i","removeChild","appendChild","onButtonClick","focusItem","onWindowClickEvent","clickedOnDropdownOrChildren","clickTargetIsElementOrChildren","dropdownItemClick","nativeButton","focus","onKeyDown","_event","actionsFromKeyboardEvents","preventDefault","actionFromKeyboardEvent","doActionFromKeyboardEventAssociatedAction","setAriaAttribute","attr","value","setOrRemoveAttribute","focusClosestItem","lastFocusedItemElement","tabIndex","indexToFocus","requestAnimationFrame","_a","direction","getClosestActiveItemIndexForDirection","currentIndex","indexOf","MIN_INDEX","MAX_INDEX","componentDidRender","componentWillLoad","inheritAriaAttributes","inheritAttributes","render","h","Host","key","id","disabled","role","ref","onClick","$event","stopImmediatePropagation","mode","shape","tabindex","e","class","noArrow","SelectArrow","up"],"sources":["src/components/dropdown/dropdown-keyboard-event.ts","src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["import { keyboardShortcutFromKeyboardEvent } from \"../../utils/keyboard-event\";\n\n// Possible Shortcuts\n\n// Dropdown button\n// ENTER : open menu, move focus to first item\n// SPACE : open menu, move focus to first item\n// DOWN_ARROW : open menu, move focus to first item\n// UP_ARROW : open menu, move focus to last item\n\n// Dropdown item\n// HOME : focus first item\n// END : focus last item\n// UP_ARROW : move focus to previous item\n// DOWN_ARROW : move focus to previous item\n// ESCAPE : close menu, set focus on the dropdown button\n// ENTER : activate the item, close menu, set focus to menu button (already handled via the wcsDropdownItemClick event)\n\nexport type KeyboardEventAssociatedAction = OpenMenu\n    | CloseMenu\n    | ClearFocus\n    | FocusItem;\n\ntype OpenMenu = {kind: 'OpenMenu'};\ntype CloseMenu = {kind: 'CloseMenu'};\n\n\ntype ClearFocus = {kind: 'ClearFocus'};\ntype FocusItem = {kind: 'FocusItem', target: 'next' | 'previous' | 'first' | 'last'};\n\n/**\n * We follow this pattern https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/\n * @param event\n * @param currentState\n * @param type\n */\nexport function getActionForKeyboardEvent(event: KeyboardEvent, currentState: 'closed' | 'opened'): KeyboardEventAssociatedAction[] {\n    const keyboardShortcut = keyboardShortcutFromKeyboardEvent(event);\n\n    if(keyboardShortcut === 'UNKNOWN') {\n        return [];\n    }\n\n    switch (currentState) {\n        case 'closed':\n            // We handle every available shortcut for the closed state\n            switch (keyboardShortcut) {\n                case 'UP_ARROW':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'last'}];\n                case 'DOWN_ARROW':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n                case 'SPACE':\n                case 'ENTER':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n                default:\n                    break;\n            }\n            break;\n        case 'opened':\n            // We handle every available shortcut for the opened state\n            switch (keyboardShortcut) {\n                case 'UP_ARROW':\n                    return [{kind: 'FocusItem', target: 'previous'}];\n                case 'DOWN_ARROW':\n                    return [{kind: 'FocusItem', target: 'next'}];\n                case 'HOME':\n                    return [{kind: 'FocusItem', target: 'first'}];\n                case 'END':\n                    return [{kind: 'FocusItem', target: 'last'}];\n                case 'ESCAPE':\n                case 'MAJ+TAB':\n                case 'TAB':\n                    return [{kind: 'CloseMenu'}];\n                default:\n                    break;\n            }\n            break;\n        default:\n            throw Error('Unknown error');\n    }\n    return [];\n}\n","@import '../../style/focus-outline.scss';\n\n:host {\n    display: flex;\n\n    --wcs-dropdown-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    // Padding\n    --wcs-dropdown-padding-empty: var(--wcs-semantic-spacing-large);\n\n    // Arrow color\n    --wcs-dropdown-plain-arrow-color: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-dropdown-stroked-arrow-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-dropdown-clear-arrow-color: var(--wcs-semantic-color-foreground-action-tertiary-default);\n\n    --wcs-dropdown-arrow-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    // Overlay\n    --wcs-dropdown-overlay-max-height: 360px;\n    --wcs-dropdown-overlay-padding: var(--wcs-semantic-spacing-base);\n    --wcs-dropdown-overlay-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-dropdown-overlay-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-dropdown-overlay-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-dropdown-overlay-border-color: var(--wcs-semantic-color-border-secondary);\n\n    wcs-button {\n        height: fit-content;\n    }\n\n    svg {\n        margin-right: -0.25rem;\n    }\n}\n\n/* Visually hide the native button */\nbutton {\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    outline: 0;\n    outline-offset: 0;\n}\n\nbutton:focus-visible + wcs-button {\n    @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n}\n\n@supports not selector(button:focus-visible + wcs-button) {\n    button:focus-within + wcs-button {\n        @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n    }\n}\n\n.wcs-button-content-wrapper {\n    display: flex;\n    align-items: center;\n}\n\n.popover {\n    display: none;\n    border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\n    border-radius: var(--wcs-dropdown-overlay-border-radius);\n    background-color: var(--wcs-dropdown-overlay-background-color);\n    z-index: 9999;\n}\n\n.show {\n    display: block;\n}\n\n// XXX: So that item hover background does not overflow\n.container {\n    min-width: calc(10 * var(--wcs-semantic-size-base));\n    border-radius: inherit;\n    overflow: hidden;\n    padding: var(--wcs-dropdown-overlay-padding);\n    background-color: var(--wcs-dropdown-overlay-background-color);\n}\n\n:host([mode=clear]) {\n    // SVG arrow inside the button, on clear background\n    .arrow {\n        fill: var(--wcs-dropdown-clear-arrow-color);\n    }\n}\n\n:host([mode=stroked]) {\n    // SVG arrow inside the button, on stroked background\n    .arrow {\n        fill: var(--wcs-dropdown-stroked-arrow-color);\n    }\n}\n\n:host([mode=plain]) {\n    // SVG arrow inside the button, on primary background\n    .arrow {\n        fill: var(--wcs-dropdown-plain-arrow-color);\n    }\n}\n\n:host([disabled]) {\n    .arrow {\n        fill: var(--wcs-dropdown-arrow-color-disabled);\n    }\n}\n\n// Popover arrow\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n    border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\n}\n\n#arrow {\n    visibility: hidden;\n    z-index: -1;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\n#is-empty {\n    display: block;\n    width: 20ch;\n    padding: 0 var(--wcs-dropdown-padding-empty);\n}\n\n.popover[data-popper-placement^='top'] > #arrow {\n    bottom: -5px;\n}\n\n.popover[data-popper-placement^='bottom'] > #arrow {\n    top: -6px;\n}\n\n.popover[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n.popover[data-popper-placement^='right'] > #arrow {\n    left: -6px;\n}\n","import { Component, ComponentInterface, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport {\n    isWcsButtonSize,\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n    WcsButtonSizeValues\n} from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport {\n    clickTargetIsElementOrChildren,\n    inheritAriaAttributes,\n    inheritAttributes,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { getActionForKeyboardEvent, KeyboardEventAssociatedAction } from \"./dropdown-keyboard-event\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst DROPDOWN_INHERITED_ATTRS = ['tabindex'];\n\n/**\n * The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the\n * dropdown.\n * \n * @slot placeholder - The slot containing the placeholder displayed in button\n * @slot item - The slot container the list of `wcs-dropdown-item` elements\n * \n * @cssprop --wcs-dropdown-outline-color-focus - Outline color of dropdown when focus it\n * \n * @cssprop --wcs-dropdown-plain-arrow-color - Color of the arrow indicator when the dropdown is plain\n * @cssprop --wcs-dropdown-stroked-arrow-color - Color of the arrow indicator when the dropdown is stroked\n * @cssprop --wcs-dropdown-clear-arrow-color - Color of the arrow indicator when the dropdown is not filled\n * @cssprop --wcs-dropdown-arrow-color-disabled - Base color of the arrow indicator when the dropdown is disabled\n * \n * @cssprop --wcs-dropdown-padding-empty - Padding of and empty dropdown\n * \n * @cssprop --wcs-dropdown-overlay-padding - Defines the vertical padding inside the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-max-height - Specifies the maximum height of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-background-color - Determines the background color of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-width - Sets the border width of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-radius - Defines the border radius of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-color - Specifies the border color of the dropdown overlay\n */\n@Component({\n    tag: 'wcs-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Dropdown implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLWcsDropdownElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * This button is visually hidden. It used to carry all aria attributes and acts as the controller of the menu.\n     * The wcs-button could not handle the aria-controls and aria-activedescendant attributes because of the IDREF\n     * not passing from a shadow-dom through another.\n     * @private\n     */\n    private nativeButton!: HTMLButtonElement;\n\n    /**\n     * This button is shown on the user interface, and visually receives focus and catch click events.  \n     * It is hidden to screen readers since the native button carries all the aria informations.\n     * @private\n     */\n    private wcsButton!: HTMLWcsButtonElement;\n\n    /**\n     * This div is shown on the user interface when the dropdown is expanded.\n     * @private\n     */\n    private popoverDiv!: HTMLDivElement;\n\n    /** Hides the arrow in the button */\n    @Prop() noArrow: boolean = false;\n\n    /** Dropdown's button mode */\n    @Prop() mode: WcsButtonMode = 'stroked';\n\n    /** Dropdown's button shape */\n    @Prop() shape: WcsButtonShape = 'normal';\n    \n    /** Dropdown's button size */\n    @Prop() size: WcsButtonSize = 'm';\n\n    /** Specifies whether the dropdown button is clickable or not */\n    @Prop() disabled: boolean = false;\n\n    /** placement of the dropdown's popover */\n    @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n    @State() private expanded = false;\n\n\n    private popper: Instance;\n    \n    private lastFocusedItemElement: HTMLWcsDropdownItemElement | null;\n    \n    private get items(): HTMLWcsDropdownItemElement[] {\n        return Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n    }\n\n    @Watch('placement')\n    protected placementChange() {\n        this.popper.setOptions({\n            ...this.popper.state.options,\n            placement: this.placement\n        }).then(_ => this.popper.update());\n    }\n    \n    @Listen('blur')\n    onBlur() {\n        this.clearLastFocusedItem();\n        this.expanded = false;\n    }\n\n    componentDidLoad() {\n        if (!isWcsButtonSize(this.size)) {\n            console.warn(`Invalid size value for wcs-dropdown : \"${this.size}\". Must be one of \"${WcsButtonSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n\n        this.popper = createPopper(this.wcsButton, this.popoverDiv, {\n            placement: this.placement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n\n        this.fixForFirefoxBelow63();\n    }\n\n    private fixForFirefoxBelow63() {\n        // If the items appear out of the slot we place them back\n        const items = this.el.querySelectorAll('wcs-dropdown-item');\n        const container = this.el.querySelector('.container');\n        if (items.length > 0 && container) {\n            items.forEach(i => {\n                this.el.removeChild(i);\n                container.appendChild(i);\n            });\n        }\n    }\n\n    private onButtonClick(_: MouseEvent): void {\n        this.clearLastFocusedItem();\n        this.expanded = !this.expanded;\n        \n        if (this.expanded) {\n            this.focusItem(0);\n        }\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        const clickedOnDropdownOrChildren = clickTargetIsElementOrChildren(event, this.el);\n        if (this.expanded && !clickedOnDropdownOrChildren) {\n            this.expanded = false;\n        }\n    }\n\n    @Listen('wcsDropdownItemClick')\n    dropdownItemClick(_: CustomEvent<void>) {\n        this.expanded = false;\n        this.nativeButton.focus();\n    }\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent): void {\n        const currentState = this.expanded ? 'opened' : 'closed';\n        const actionsFromKeyboardEvents: KeyboardEventAssociatedAction[] = getActionForKeyboardEvent(_event, currentState);\n\n        // If we have at least one associated actions, we prevent the default behavior of the event. \n        // Except if the action is a focus move (we have to handle the preventDefault behavior ourselves in the action implementation)\n        if (actionsFromKeyboardEvents.length != 0) {\n            _event.preventDefault();\n        }\n\n        for (const actionFromKeyboardEvent of actionsFromKeyboardEvents) {\n            this.doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent);\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent: KeyboardEventAssociatedAction) {\n        switch (actionFromKeyboardEvent.kind) {\n            case 'OpenMenu':\n                this.expanded = true;\n                this.focusItem(0);\n                break;\n            case 'CloseMenu':\n                this.expanded = false;\n                this.nativeButton.focus();\n                break;\n            case 'ClearFocus':\n                this.clearLastFocusedItem();\n                break;\n            case 'FocusItem':\n                switch (actionFromKeyboardEvent.target) {\n                    case 'previous':\n                        this.focusClosestItem('previous');\n                        break;\n                    case 'next':\n                        this.focusClosestItem('next');\n                        break;\n                    case 'first':\n                        this.focusItem(0);\n                        break;\n                    case 'last':\n                        this.focusItem(this.items.length - 1);\n                        break;\n                    default:\n                        break;\n                }\n                break;\n            default:\n                break;\n        }\n    }\n\n    /**\n     * Removes the focus and tabindex 0 of the last focused item if any.\n     * @private\n     */\n    private clearLastFocusedItem() {\n        if (this.lastFocusedItemElement) {\n            this.lastFocusedItemElement.tabIndex = -1;\n            this.lastFocusedItemElement = null;\n        }\n    }\n    \n    private focusItem(indexToFocus: number) {\n        this.clearLastFocusedItem();\n        this.lastFocusedItemElement = this.items[indexToFocus];\n        if (this.lastFocusedItemElement) {\n            this.lastFocusedItemElement.tabIndex = 0;\n            requestAnimationFrame(() => {\n                this.lastFocusedItemElement?.focus();\n            });\n        }\n    }\n    \n    private focusClosestItem(direction: 'next' | 'previous'): void {\n        const indexToFocus = this.getClosestActiveItemIndexForDirection(direction);\n        if (indexToFocus === -1) return;\n        \n        this.focusItem(indexToFocus);\n    }\n    \n    private getClosestActiveItemIndexForDirection(direction: 'next' | 'previous'): number {\n        const items = this.items;\n        let currentIndex = Array.from(items).indexOf(this.lastFocusedItemElement);\n\n        const MIN_INDEX = 0;\n        const MAX_INDEX = items.length - 1;\n\n        if (direction === 'next' && currentIndex < MAX_INDEX) {\n            currentIndex++;\n        } else if (direction === 'previous' && currentIndex > MIN_INDEX) {\n            currentIndex--;\n        } else {\n            // Used to scroll through items infinitely with keyboard\n            if (direction === 'next' && currentIndex >= MAX_INDEX) {\n                currentIndex = 0;\n            }\n            if (direction === 'previous' && currentIndex === MIN_INDEX) {\n                currentIndex = MAX_INDEX;\n            }\n        }\n        \n        return currentIndex;\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, DROPDOWN_INHERITED_ATTRS),\n        };\n    }\n    \n    render() {\n        return (\n            <Host>\n                <button id=\"dropdown-button\"\n                        aria-controls=\"menu\"\n                        disabled={this.disabled}\n                        aria-haspopup=\"true\"\n                        role=\"button\"\n                        aria-expanded={this.expanded ? 'true' : 'false'}\n                        ref={el => this.nativeButton = el}\n                        onClick={($event) => this.onButtonClick($event)}\n                        onBlur={($event) => $event.stopImmediatePropagation()}\n                        {...this.inheritedAttributes}>Dropdown</button>\n                <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled} size={this.size}\n                            ref={el => this.wcsButton = el}\n                            aria-hidden=\"true\"\n                            tabindex={-1}\n                            onClick={($event) => this.onButtonClick($event)}\n                            onBlur={(e) => e.stopImmediatePropagation()}>\n                    <div class=\"wcs-button-content-wrapper\">\n                        <slot name=\"placeholder\"/>\n                        {this.noArrow ? null : (<SelectArrow up={this.expanded}/>)}\n                    </div>\n                </wcs-button>\n                <div class={(this.expanded ? 'show ' : '') + 'popover'}\n                     id=\"menu\"\n                     role=\"menu\"\n                     aria-labelledby=\"dropdown-button\"\n                     tabindex={-1}\n                     ref={el => this.popoverDiv = el}>\n                    <div role=\"presentation\" id=\"arrow\" data-popper-arrow/>\n                    <div role=\"presentation\" class=\"container\">\n                        <slot name=\"item\">\n                            <span id={\"is-empty\"}></span>\n                        </slot>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\n"],"mappings":"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"}

package/dist/wcs/p-985c4cf2.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as e,H as i,g as a}from"./p-32e583ea.js";import{i as n,a as r,s as c,e as o,f as u,h,j as d}from"./p-a3aece7a.js";const l=["m","l"];function f(t){return l.includes(t)}const w="@keyframes spin-animation-up{0%{transform:translateY(0);transform-origin:center;opacity:1}50%{opacity:0.5}100%{transform:translateY(30px);transform-origin:center;opacity:1}}@keyframes spin-animation-down{0%{transform:translateY(0);transform-origin:center;opacity:1}50%{opacity:0.5}100%{transform:translateY(-30px);transform-origin:center;opacity:1}}:host{--wcs-counter-border-radius:var(--wcs-semantic-border-radius-full);--wcs-counter-value-color-default:var(--wcs-semantic-color-text-primary);--wcs-counter-value-color-disabled:var(--wcs-semantic-color-text-tertiary);--wcs-counter-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-counter-height-m:var(--wcs-semantic-size-m);--wcs-counter-height-l:var(--wcs-semantic-size-l);--wcs-counter-font-size-m:var(--wcs-semantic-font-size-m);--wcs-counter-font-size-l:var(--wcs-semantic-font-size-l);--wcs-counter-padding-m:var(--wcs-semantic-spacing-small);--wcs-counter-padding-l:var(--wcs-semantic-spacing-base);--wcs-counter-background-color:var(--wcs-semantic-color-background-surface-secondary);--wcs-counter-gap:var(--wcs-counter-gap-size-m);--wcs-counter-gap-size-m:calc(1.5 * var(--wcs-semantic-spacing-base));--wcs-counter-gap-size-l:calc(2 * var(--wcs-semantic-spacing-base));--wcs-counter-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-counter-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:flex}:host .counter{box-sizing:border-box;height:var(--wcs-counter-height);font-family:var(--wcs-font-sans-serif);font-size:var(--wcs-counter-font-size);font-weight:var(--wcs-counter-font-weight);color:var(--wcs-counter-value-color-default);display:flex;align-items:center;padding:var(--wcs-counter-padding);width:fit-content;overflow:hidden;border-radius:var(--wcs-counter-border-radius);background-color:var(--wcs-counter-background-color);background-clip:padding-box;gap:var(--wcs-counter-gap)}:host .counter:has(.current-value:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-counter-outline-color-focus);outline-offset:0;border-radius:var(--wcs-counter-border-radius)}@supports not selector(&:has(.current-value:focus-visible)){:host .counter:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-counter-outline-color-focus);outline-offset:0;border-radius:var(--wcs-counter-border-radius)}}:host .counter-container{height:var(--wcs-counter-height);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}:host .outliers{position:absolute}:host #outlier-down{top:calc(var(--wcs-counter-height) / 2 * -1)}:host #outlier-up{bottom:calc(var(--wcs-counter-height) / 2 * -1)}:host .current-value{outline:none}:host .animate-up{animation:spin-animation-up var(--wcs-counter-transition-duration) ease-in-out}:host .animate-down{animation:spin-animation-down var(--wcs-counter-transition-duration) ease-in-out}:host [hidden]{opacity:0}:host([size=m]){--wcs-counter-padding:var(--wcs-counter-padding-m);--wcs-counter-height:var(--wcs-counter-height-m);--wcs-counter-font-size:var(--wcs-counter-font-size-m);--wcs-counter-gap:var(--wcs-counter-gap-size-m)}:host([size=l]){--wcs-counter-padding:var(--wcs-counter-padding-l);--wcs-counter-height:var(--wcs-counter-height-l);--wcs-counter-font-size:var(--wcs-counter-font-size-l);--wcs-counter-gap:var(--wcs-counter-gap-size-l)}:host([disabled]){cursor:not-allowed}:host([disabled]) .counter{color:var(--wcs-counter-value-color-disabled)}";const m=w;const v=["tabindex","title"];const b=.175;const p=class{constructor(e){t(this,e);this.wcsChange=s(this,"wcsChange",7);this.wcsBlur=s(this,"wcsBlur",7);this.inheritedAttributes={};this.animateRunning=false;this.handleDecrement=()=>{if(this.disabled)return;if(this.min===undefined||this.value>this.min){this.animateRunning=true;this.value-=this.step;this.notifyChange();this.animate("up")}};this.handleIncrement=()=>{if(this.disabled)return;if(this.max===undefined||this.value<this.max){this.animateRunning=true;this.value+=this.step;this.notifyChange();this.animate("down")}};this.animate=t=>{this.animateRunning=true;const s=Array.from(this.counterContainer.children).filter((t=>t.classList.contains("outliers")));this.counterContainer.classList.add("animate-"+t);s.forEach((t=>{t.hidden=false}));setTimeout((()=>{this.counterContainer.classList.remove("animate-"+t);s.forEach((t=>{t.hidden=true}));this.displayedValue=this.value;this.animateRunning=false}),1e3*b-20)};this.size="m";this.label=undefined;this.disabled=false;this.min=undefined;this.max=undefined;this.step=1;this.value=undefined;this.displayedValue=undefined}componentWillLoad(){this.handleValueChange();if(!f(this.size)){console.warn(`Invalid size value for wcs-counter : "${this.size}". Must be one of "${l.join(", ")}"`);this.size="m"}this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),r(this.el,v))}async setAriaAttribute(t,s){c(this.spinButton,t,s)}valueChange(t,s){if(s===t)return;this.handleValueChange()}handleValueChange(){this.setMinimumIfValueIsUndefinedOrNull();this.ensureValueIsNotOutOfMinMax();this.updateDisplayValueIfNoAnimationRunning()}updateDisplayValueIfNoAnimationRunning(){if(!this.animateRunning){this.displayedValue=this.value}}ensureValueIsNotOutOfMinMax(){if(this.max!==undefined&&this.value>this.max){this.value=this.max}else if(this.min!==undefined&&this.value<this.min){this.value=this.min}}setMinimumIfValueIsUndefinedOrNull(){var t;if(this.value===undefined||this.value===null){this.value=(t=this.min)!==null&&t!==void 0?t:0}}onKeyDown(t){if(this.disabled)return;if(o(t)){t.preventDefault();this.handleIncrement()}if(u(t)){t.preventDefault();this.handleDecrement()}if(h(t)){t.preventDefault();if(this.min!=null){this.value=this.min;this.displayedValue=this.value;this.notifyChange()}}if(d(t)){t.preventDefault();if(this.max!=null){this.value=this.max;this.displayedValue=this.value;this.notifyChange()}}}notifyChange(){this.wcsChange.emit({value:this.value})}render(){return e(i,{key:"d434b2eec575d309f38d01c6e41098d0642e46f8"},e("div",{key:"03b667ad64ca4df8d7c46ac0091abdaff9c99227",class:"counter"},e("wcs-button",{key:"365f153616e5f96d2d00441c535cbe8d6d3014d6",class:"wcs-primary",shape:"round",size:"s",tabindex:-1,onClick:()=>this.handleDecrement(),onBlur:t=>this.wcsBlur.emit(t),disabled:this.disabled||this.value===this.min},e("wcs-mat-icon",{key:"7c8d7c723648ef133cdf2da19dd29daf65a4a997",icon:"remove",size:"s"})),e("div",{key:"c07088653c5a8d08e6cfe039cfa8386ec6daf8cf",class:"counter-container",ref:t=>this.counterContainer=t},e("span",{key:"7f048ddef2bacb1a8c4bd7167afe9e51cd3116e8",id:"outlier-down",class:"outliers",hidden:true,"aria-hidden":"true"},this.displayedValue-this.step),e("span",Object.assign({key:"d1f38d3ca08a2f8ddf6b71c5585e96e1cec9b3b7",tabindex:this.disabled?-1:0,role:"spinbutton",ref:t=>this.spinButton=t,class:"current-value",onBlur:t=>this.wcsBlur.emit(t),onKeyDown:t=>this.onKeyDown(t),"aria-disabled":this.disabled?"true":null,"aria-valuenow":this.value,"aria-valuetext":this.value,"aria-valuemin":this.min,"aria-valuemax":this.max,"aria-label":this.label},this.inheritedAttributes),this.displayedValue),e("span",{key:"ace304e6764d87d3cc774cd4d22cac39b2012c0f",id:"outlier-up",class:"outliers",hidden:true,"aria-hidden":"true"},this.displayedValue+this.step)),e("wcs-button",{key:"ab7241308c768ee562921707ecfffba03b8e57d7",class:"wcs-primary",shape:"round",size:"s",tabindex:-1,onClick:()=>this.handleIncrement(),onBlur:t=>this.wcsBlur.emit(t),disabled:this.disabled||this.value===this.max},e("wcs-mat-icon",{key:"4b3bd5cceb59cfd6b6d4a95c07da1f33c64f6347",icon:"add",size:"s"}))))}static get delegatesFocus(){return true}get el(){return a(this)}static get watchers(){return{value:["valueChange"]}}};p.style=m;export{p as wcs_counter};
-//# sourceMappingURL=p-985c4cf2.entry.js.map

package/dist/wcs/p-985c4cf2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["WcsCounterSizeValues","isWcsCounterSize","size","includes","counterCss","WcsCounterStyle0","COUNTER_INHERITED_ATTRS","ANIMATION_DURATION","Counter","this","inheritedAttributes","animateRunning","handleDecrement","disabled","min","undefined","value","step","notifyChange","animate","handleIncrement","max","direction","outliers","Array","from","counterContainer","children","filter","span","classList","contains","add","forEach","hidden","setTimeout","remove","displayedValue","componentWillLoad","handleValueChange","console","warn","join","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","setOrRemoveAttribute","spinButton","valueChange","newVal","oldVal","setMinimumIfValueIsUndefinedOrNull","ensureValueIsNotOutOfMinMax","updateDisplayValueIfNoAnimationRunning","_a","onKeyDown","_event","isKeyup","preventDefault","isKeydown","isHomeKey","isEndKey","wcsChange","emit","render","h","Host","key","class","shape","tabindex","onClick","onBlur","event","wcsBlur","icon","ref","input","id","role","label"],"sources":["src/components/counter/counter-interface.ts","src/components/counter/counter.scss?tag=wcs-counter&encapsulation=shadow","src/components/counter/counter.tsx"],"sourcesContent":["import { WcsSize } from \"../../shared-types\";\n\nexport interface CounterChangeEventDetail {\n    value: number;\n}\n\nexport const WcsCounterSizeValues = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsCounterSize = Extract<WcsSize, typeof WcsCounterSizeValues[number]>;\n\nexport function isWcsCounterSize(size: string): size is WcsCounterSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsCounterSizeValues.includes(size);\n}\n","@import '../../style/focus-outline.scss';\n\n@keyframes spin-animation-up {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n@keyframes spin-animation-down {\n    0% {\n        transform: translateY(0);\n        transform-origin: center;\n        opacity: 1;\n    }\n    50% {\n        opacity: 0.5;\n    }\n    100% {\n        transform: translateY(-30px);\n        transform-origin: center;\n        opacity: 1;\n    }\n}\n\n:host {\n    --wcs-counter-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-counter-value-color-default: var(--wcs-semantic-color-text-primary);\n    --wcs-counter-value-color-disabled: var(--wcs-semantic-color-text-tertiary);\n    --wcs-counter-font-weight: var(--wcs-semantic-font-weight-heavy);\n\n    --wcs-counter-height-m: var(--wcs-semantic-size-m);\n    --wcs-counter-height-l: var(--wcs-semantic-size-l);\n    --wcs-counter-font-size-m: var(--wcs-semantic-font-size-m);\n    --wcs-counter-font-size-l: var(--wcs-semantic-font-size-l);\n    --wcs-counter-padding-m: var(--wcs-semantic-spacing-small);\n    --wcs-counter-padding-l: var(--wcs-semantic-spacing-base);\n\n    --wcs-counter-background-color: var(--wcs-semantic-color-background-surface-secondary);\n    --wcs-counter-gap: var(--wcs-counter-gap-size-m);\n    --wcs-counter-gap-size-m: calc(1.5 * var(--wcs-semantic-spacing-base));\n    --wcs-counter-gap-size-l: calc(2 * var(--wcs-semantic-spacing-base));\n    --wcs-counter-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-counter-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    display: flex;\n\n\n    .counter {\n        box-sizing: border-box;\n        height: var(--wcs-counter-height);\n        font-family: var(--wcs-font-sans-serif);\n        font-size: var(--wcs-counter-font-size);\n        font-weight: var(--wcs-counter-font-weight);\n        color: var(--wcs-counter-value-color-default);\n        display: flex;\n        align-items: center;\n        padding: var(--wcs-counter-padding);\n        width: fit-content;\n        overflow: hidden;\n        border-radius: var(--wcs-counter-border-radius);\n        background-color: var(--wcs-counter-background-color);\n        background-clip: padding-box;\n        gap: var(--wcs-counter-gap);\n\n        &:has(.current-value:focus-visible) {\n            @include focus-outline($outline-color: var(--wcs-counter-outline-color-focus), $border-radius: var(--wcs-counter-border-radius), $outline-offset: 0);\n        }\n\n        @supports not selector(&:has(.current-value:focus-visible)){\n            &:focus-within {\n                @include focus-outline($outline-color: var(--wcs-counter-outline-color-focus), $border-radius: var(--wcs-counter-border-radius), $outline-offset: 0);\n            }\n        }\n    }\n\n    .counter-container {\n        height: var(--wcs-counter-height);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n    }\n\n    .outliers {\n        position: absolute;\n    }\n\n    #outlier-down {\n        top: calc((var(--wcs-counter-height) / 2) * -1);\n    }\n\n    #outlier-up {\n        bottom: calc((var(--wcs-counter-height) / 2) * -1);\n    }\n\n    .current-value {\n        outline: none;\n    }\n\n    .animate-up {\n        animation: spin-animation-up var(--wcs-counter-transition-duration) ease-in-out;\n    }\n\n    .animate-down {\n        animation: spin-animation-down var(--wcs-counter-transition-duration) ease-in-out;\n    }\n\n    [hidden] {\n        opacity: 0;\n    }\n}\n\n:host([size='m']) { // Default\n    --wcs-counter-padding: var(--wcs-counter-padding-m);\n    --wcs-counter-height: var(--wcs-counter-height-m);\n    --wcs-counter-font-size: var(--wcs-counter-font-size-m);\n    --wcs-counter-gap: var(--wcs-counter-gap-size-m);\n}\n\n:host([size='l']) {\n    --wcs-counter-padding: var(--wcs-counter-padding-l);\n    --wcs-counter-height: var(--wcs-counter-height-l);\n    --wcs-counter-font-size: var(--wcs-counter-font-size-l);\n    --wcs-counter-gap: var(--wcs-counter-gap-size-l);\n}\n\n:host([disabled]) {\n    cursor: not-allowed;\n\n    .counter {\n        color: var(--wcs-counter-value-color-disabled);\n    }\n}\n","import {\n    Component,\n    ComponentInterface, Element,\n    Event,\n    EventEmitter,\n    h,\n    Host, Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport {\n    inheritAriaAttributes,\n    inheritAttributes,\n    isEndKey,\n    isHomeKey,\n    isKeydown,\n    isKeyup,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { CounterChangeEventDetail, isWcsCounterSize, WcsCounterSize, WcsCounterSizeValues } from './counter-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst COUNTER_INHERITED_ATTRS = ['tabindex', 'title'];\n\nconst ANIMATION_DURATION = 0.175 // seconds\n\n/**\n * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>\n * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)\n * \n * @cssprop --wcs-counter-border-radius - Border radius of the counter\n * \n * @cssprop --wcs-counter-value-color-default - Default color of the value \n * @cssprop --wcs-counter-value-color-disabled - Color of the text when the counter is disabled\n * @cssprop --wcs-counter-font-weight - Font weight of the value\n * \n * @cssprop --wcs-counter-height-m - Height medium of the counter\n * @cssprop --wcs-counter-height-l - Height large of the counter\n * @cssprop --wcs-counter-font-size-m - Font size medium of the counter\n * @cssprop --wcs-counter-font-size-l - Font size large of the counter\n * @cssprop --wcs-counter-padding-m - Padding medium of the counter\n * @cssprop --wcs-counter-padding-l - Padding large of the counter\n * \n * @cssprop --wcs-counter-background-color - Background color of the counter\n * @cssprop --wcs-counter-gap - Gap between the buttons and the label\n * @cssprop --wcs-counter-gap-size-m - Gap between the buttons and the label when the size is M\n * @cssprop --wcs-counter-gap-size-l - Gap between the buttons and the label when the size is L\n * @cssprop --wcs-counter-outline-color-focus - Color of the focus outline\n *\n * @cssprop --wcs-counter-transition-duration - Duration of the animation\n * \n */\n@Component({\n    tag: 'wcs-counter',\n    styleUrl: 'counter.scss',\n    shadow: {\n        delegatesFocus: true\n    },\n})\nexport class Counter implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private spinButton!: HTMLSpanElement;\n    private counterContainer!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Specify the size (height) of the counter.\n     */\n    @Prop({reflect: true}) size: WcsCounterSize = 'm';\n\n    /**\n     * The label of the counter.<br/>\n     * e.g. Number of passengers, train carriages, railroad tracks...\n     */\n    @Prop({mutable: false}) label!: string;\n\n    /**\n     * Specify whether the counter is disabled or not.\n     */\n    @Prop() disabled = false;\n\n    /**\n     * The minimum value of the counter.\n     * If the value of the min attribute isn't set, then the element has no minimum value.\n     */\n    @Prop({mutable: true}) min?: number;\n\n    /**\n     * The maximum value of the counter.\n     * If the value of the max attribute isn't set, then the element has no maximum value.\n     */\n    @Prop({mutable: true}) max?: number;\n\n    /**\n     * Defines by how much the counter will be incremented or decremented.\n     */\n    @Prop({mutable: true}) step: number = 1;\n\n    /**\n     * Emitted when the value of the counter has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CounterChangeEventDetail>;\n\n    /**\n     * The current value of the counter.\n     */\n    @Prop({mutable: true}) value!: number;\n\n    /**\n     * Only for animation and display purpose\n     */\n    @State() private displayedValue: number;\n\n    private animateRunning = false;\n\n    /**\n     * Emitted when the counter loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.handleValueChange();\n\n        if (!isWcsCounterSize(this.size)) {\n            console.warn(`Invalid size value for wcs-counter : \"${this.size}\". Must be one of \"${WcsCounterSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, COUNTER_INHERITED_ATTRS),\n        };\n    }\n    \n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.spinButton, attr, value);\n    }\n    \n    /**\n     * Current value change => handle event and interval\n     */\n    @Watch('value')\n    valueChange(newVal: any, oldVal: any) {\n        if(oldVal === newVal) return;\n\n        this.handleValueChange();\n    }\n\n    private handleValueChange() {\n        this.setMinimumIfValueIsUndefinedOrNull();\n        this.ensureValueIsNotOutOfMinMax();\n        this.updateDisplayValueIfNoAnimationRunning();\n    }\n\n    private updateDisplayValueIfNoAnimationRunning() {\n        if (!this.animateRunning) {\n            this.displayedValue = this.value;\n        }\n    }\n\n    private ensureValueIsNotOutOfMinMax() {\n        if (this.max !== undefined && this.value > this.max) {\n            this.value = this.max;\n        } else if (this.min !== undefined && this.value < this.min) {\n            this.value = this.min;\n        }\n    }\n\n    private setMinimumIfValueIsUndefinedOrNull() {\n        if (this.value === undefined || this.value === null) {\n            this.value = this.min ?? 0;\n        }\n    }\n\n    onKeyDown(_event: KeyboardEvent) {\n        if (this.disabled) return; \n        \n        if (isKeyup(_event)) {\n            _event.preventDefault();\n            this.handleIncrement()\n        }\n        if (isKeydown(_event)) {\n            _event.preventDefault();\n            this.handleDecrement()\n        }\n        if (isHomeKey(_event)) {\n            _event.preventDefault();\n            if (this.min != null) {\n                this.value = this.min;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n        if (isEndKey(_event)) {\n            _event.preventDefault();\n            if (this.max != null) {\n                this.value = this.max;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n    }\n\n    private notifyChange() {\n        this.wcsChange.emit({\n            value: this.value\n        });\n    }\n    \n    private handleDecrement = () => {\n        if (this.disabled) return;\n        if (this.min === undefined || this.value > this.min) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value -= this.step;\n            this.notifyChange();\n            this.animate('up');\n        }\n    };\n\n    private handleIncrement = () => {\n        if (this.disabled) return;\n        if (this.max === undefined || this.value < this.max) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value += this.step;\n            this.notifyChange();\n            this.animate('down');\n        }\n    };\n\n    private animate = (direction: 'up' | 'down'): void => {\n        // In case someone call animate function, we want ensured that animateRunning is set to true to prevent other \n        // method to mutate the displayedValue.\n        this.animateRunning = true;  \n\n        const outliers = Array.from(this.counterContainer.children)\n            .filter((span: HTMLSpanElement) => span.classList.contains('outliers'));\n\n        this.counterContainer.classList.add('animate-' + direction);\n        outliers.forEach((span: HTMLSpanElement) => {\n            span.hidden = false;\n        });\n        setTimeout(() => {\n            this.counterContainer.classList.remove('animate-' + direction);\n            outliers.forEach((span: HTMLSpanElement) => {\n                span.hidden = true;\n            });\n            this.displayedValue = this.value;\n\n            this.animateRunning = false;\n        }, 1000 * ANIMATION_DURATION - 20);\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"counter\">\n                    <wcs-button class=\"wcs-primary\"\n                                shape=\"round\"\n                                size=\"s\"\n                                tabindex={-1}\n                                onClick={() => this.handleDecrement()}\n                                onBlur={(event) => this.wcsBlur.emit(event)}\n                                disabled={this.disabled || this.value === this.min}>\n                        <wcs-mat-icon icon=\"remove\" size=\"s\"></wcs-mat-icon>  \n                    </wcs-button>\n                    <div class=\"counter-container\" ref={input => this.counterContainer = input}>\n                        <span id=\"outlier-down\"\n                              class=\"outliers\"\n                              hidden\n                              aria-hidden=\"true\">{this.displayedValue - this.step}</span>\n                        <span tabindex={this.disabled ? -1 : 0}\n                              role=\"spinbutton\"\n                              ref={(el) => this.spinButton = el}\n                              class=\"current-value\"\n                              onBlur={(event) => this.wcsBlur.emit(event)}\n                              onKeyDown={(event) => this.onKeyDown(event)}\n                              aria-disabled={this.disabled ? 'true' : null}\n                              aria-valuenow={this.value}\n                              aria-valuetext={this.value}\n                              aria-valuemin={this.min}\n                              aria-valuemax={this.max}\n                              aria-label={this.label}\n                              {...this.inheritedAttributes}>{this.displayedValue}</span>\n                        <span id=\"outlier-up\"\n                              class=\"outliers\"\n                              hidden\n                              aria-hidden=\"true\">{this.displayedValue + this.step}</span>\n                    </div>\n                    <wcs-button class=\"wcs-primary\"\n                                shape=\"round\"\n                                size=\"s\"\n                                tabindex={-1}\n                                onClick={() => this.handleIncrement()}\n                                onBlur={(event) => this.wcsBlur.emit(event)}\n                                disabled={this.disabled || this.value === this.max}>\n                        <wcs-mat-icon icon=\"add\" size=\"s\"></wcs-mat-icon>\n                    </wcs-button>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"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"}

package/dist/wcs/p-a3aece7a.js

@@ -1,2 +0,0 @@
-function a(a){return"clientWidth"in a&&"clientHeight"in a}function r(a){return!!a.shadowRoot&&!!a.attachShadow}const n=(a,r)=>{const n=a._original||a;return{_original:a,emit:e(n.emit.bind(n),r)}};const e=(a,r=0)=>{let n;return(...e)=>{clearTimeout(n);n=setTimeout(a,r,...e)}};const i=(a,r=[])=>{const n={};r.forEach((r=>{if(a.hasAttribute(r)){const e=a.getAttribute(r);if(e!==null){n[r]=a.getAttribute(r)}a.removeAttribute(r)}}));return n};const t=["role","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-errormessage","aria-expanded","aria-flowto","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext"];const o=(a,r)=>{let n=t;if(r&&r.length>0){n=n.filter((a=>!r.includes(a)))}return i(a,n)};function s(a,r,n){if(a){if(n===undefined||n===null){a.removeAttribute(r)}else{a.setAttribute(r,n)}}}const u=a=>{const r=a.closest("wcs-form-field");if(r){return r.querySelector("wcs-label")}return null};const c=(a,r,n)=>{const e=a.filter((a=>!r.some((r=>n(a,r)))));const i=a.filter((a=>r.some((r=>n(a,r)))));const t=r.filter((r=>!a.some((a=>n(r,a)))));return{removed:e,kept:i,added:t}};const l=a=>{if(typeof __zone_symbol__requestAnimationFrame==="function"){return __zone_symbol__requestAnimationFrame(a)}if(typeof requestAnimationFrame==="function"){return requestAnimationFrame(a)}return setTimeout(a)};const d=(a,r)=>a.x>=r.getBoundingClientRect().x&&a.x<=r.getBoundingClientRect().x+r.getBoundingClientRect().width&&a.y>=r.getBoundingClientRect().y&&a.y<=r.getBoundingClientRect().y+r.getBoundingClientRect().height;const f=(a,r)=>a.target instanceof Node&&r.contains(a.target);function m(a){return a+"-"+Math.random().toString(36)}function p(a){return a.code==="ArrowUp"}function w(a){return a.code==="ArrowDown"}function b(a){return a.code==="Escape"}function v(a){return a.code==="Space"}function x(a){return a.key==="Enter"}function A(a){return a.code==="Home"}function _(a){return a.code==="End"}function h(a){return a.key==="ArrowUp"}function y(a){return a.key==="ArrowDown"}function g(a){return a.key==="ArrowLeft"}function q(a){return a.key==="ArrowRight"}function k(a){return a.key==="PageDown"}function z(a){return a.key==="PageUp"}function F(a){return a.key==="Tab"}function T(a){return window.getComputedStyle(document.body).getPropertyValue(a)||null}export{r as A,i as a,b,v as c,x as d,p as e,w as f,T as g,A as h,o as i,_ as j,f as k,z as l,k as m,F as n,d as o,n as p,u as q,y as r,s,q as t,h as u,g as v,l as w,m as x,c as y,a as z};
-//# sourceMappingURL=p-a3aece7a.js.map

package/dist/wcs/p-a3aece7a.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["isElement","element","hasShadowDom","el","shadowRoot","attachShadow","debounceEvent","event","wait","original","_original","emit","debounce","bind","func","timer","args","clearTimeout","setTimeout","inheritAttributes","attributes","attributeObject","forEach","attr","hasAttribute","value","getAttribute","removeAttribute","ariaAttributes","inheritAriaAttributes","ignoreList","attributesToInherit","length","filter","includes","setOrRemoveAttribute","undefined","setAttribute","findItemLabel","componentEl","itemEl","closest","querySelector","compareLists","sourceList","newList","compareFn","removed","val","some","newVal","kept","added","sourceVal","raf","h","__zone_symbol__requestAnimationFrame","requestAnimationFrame","clickInsideElement","x","getBoundingClientRect","width","y","height","clickTargetIsElementOrChildren","mouseEvent","target","Node","contains","generateUniqueId","componentName","Math","random","toString","isKeyup","evt","code","isKeydown","isEscapeKey","isSpaceKey","isEnterKey","key","isHomeKey","isEndKey","isUpArrowKey","isDownArrowKey","isLeftArrowKey","isRightArrowKey","isPageDownKey","isPageUpKey","isTabKey","getCssRootPropertyValue","name","window","getComputedStyle","document","body","getPropertyValue"],"sources":["src/utils/helpers.ts"],"sourcesContent":["import { EventEmitter } from '@stencil/core';\n\nexport function isElement(element: any): element is Element {\n    return 'clientWidth' in element\n        && 'clientHeight' in element;\n}\n\nexport function hasShadowDom(el: HTMLElement) {\n    return !!el.shadowRoot && !!(el as any).attachShadow;\n}\n\nexport const debounceEvent = (event: EventEmitter, wait: number): EventEmitter => {\n    const original = (event as any)._original || event;\n    return {\n        _original: event,\n        emit: debounce(original.emit.bind(original), wait)\n    } as EventEmitter;\n};\n\nexport const debounce = (func: (...args: any[]) => void, wait = 0) => {\n    let timer: any;\n    return (...args: any[]): any => {\n        clearTimeout(timer);\n        timer = setTimeout(func, wait, ...args);\n    };\n};\n\n/**\n * Elements inside of web components sometimes need to inherit global attributes\n * set on the host. For example, the inner input in `wcs-input` should inherit\n * the `title` attribute that developers set directly on `wcs-input`. This\n * helper function should be called in componentWillLoad and assigned to a variable\n * that is later used in the render function.\n *\n * This does not need to be reactive as changing attributes on the host element\n * does not trigger a re-render.\n */\nexport const inheritAttributes = (el: HTMLElement, attributes: string[] = []) => {\n    const attributeObject: { [k: string]: any } = {};\n\n    attributes.forEach(attr => {\n        if (el.hasAttribute(attr)) {\n            const value = el.getAttribute(attr);\n            if (value !== null) {\n                attributeObject[attr] = el.getAttribute(attr);\n            }\n            el.removeAttribute(attr);\n        }\n    });\n\n    return attributeObject;\n}\n\n/**\n * List of available ARIA attributes + `role`.\n * Removed deprecated attributes.\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes\n */\nconst ariaAttributes = [\n    'role',\n    'aria-activedescendant',\n    'aria-atomic',\n    'aria-autocomplete',\n    'aria-braillelabel',\n    'aria-brailleroledescription',\n    'aria-busy',\n    'aria-checked',\n    'aria-colcount',\n    'aria-colindex',\n    'aria-colindextext',\n    'aria-colspan',\n    'aria-controls',\n    'aria-current',\n    'aria-describedby',\n    'aria-description',\n    'aria-details',\n    'aria-disabled',\n    'aria-errormessage',\n    'aria-expanded',\n    'aria-flowto',\n    'aria-haspopup',\n    'aria-hidden',\n    'aria-invalid',\n    'aria-keyshortcuts',\n    'aria-label',\n    'aria-labelledby',\n    'aria-level',\n    'aria-live',\n    'aria-multiline',\n    'aria-multiselectable',\n    'aria-orientation',\n    'aria-owns',\n    'aria-placeholder',\n    'aria-posinset',\n    'aria-pressed',\n    'aria-readonly',\n    'aria-relevant',\n    'aria-required',\n    'aria-roledescription',\n    'aria-rowcount',\n    'aria-rowindex',\n    'aria-rowindextext',\n    'aria-rowspan',\n    'aria-selected',\n    'aria-setsize',\n    'aria-sort',\n    'aria-valuemax',\n    'aria-valuemin',\n    'aria-valuenow',\n    'aria-valuetext',\n];\n\n/**\n * Returns an array of aria attributes that should be copied from\n * the shadow host element to a target within the light DOM.\n * @param el The element that the attributes should be copied from.\n * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.\n * Use this in instances where we manually specify aria attributes on the `<Host>` element.\n */\nexport const inheritAriaAttributes = (el: HTMLElement, ignoreList?: string[]) => {\n    let attributesToInherit = ariaAttributes;\n    if (ignoreList && ignoreList.length > 0) {\n        attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));\n    }\n    return inheritAttributes(el, attributesToInherit);\n};\n\n/**\n * Dynamically add or remove an attribute on the element.\n * If the value of the attribute is null or undefined, the attribute is removed.\n *\n * @param el - The HTMLElement\n * @param attr - The attribute to be added or removed\n * @param value - The value of the attribute\n */\nexport function setOrRemoveAttribute(el: HTMLElement, attr: string, value: string | null | undefined) {\n    if (el) {\n        if (value === undefined || value === null) {\n            el.removeAttribute(attr);\n        } else {\n            el.setAttribute(attr, value);\n        }\n    }\n}\n\nexport const findItemLabel = (componentEl: HTMLElement): HTMLWcsLabelElement | null => {\n    const itemEl = componentEl.closest('wcs-form-field');\n    if (itemEl) {\n        return itemEl.querySelector('wcs-label');\n    }\n    return null;\n};\n\n/**\n * Given two lists of items, this function will return the items that were removed, kept, and added compared to the source list.\n * @param sourceList - The source list of items\n * @param newList - The target list of items\n * @param compareFn - The function to compare the items\n */\nexport const compareLists: <T>(sourceList: T[], newList: T[], compareFn: (v1: T, v2: T) => boolean) => {\n    removed: T[];\n    kept: T[];\n    added: T[]\n} = <T>(sourceList: T[], newList: T[], compareFn: (v1: T, v2: T) => boolean) => {\n    const removed = sourceList.filter(val => !newList.some(newVal => compareFn(val, newVal)));\n    const kept = sourceList.filter(val => newList.some(newVal => compareFn(val, newVal)));\n    const added = newList.filter(val => !sourceList.some(sourceVal => compareFn(val, sourceVal)));\n\n    return { removed, kept, added };\n};\n\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/**\n * Patched version of requestAnimationFrame that avoids ngzone\n * Use only when you know ngzone should not run\n */\nexport const raf = (h: any) => {\n    if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n        return __zone_symbol__requestAnimationFrame(h);\n    }\n    if (typeof requestAnimationFrame === 'function') {\n        return requestAnimationFrame(h);\n    }\n    return setTimeout(h);\n};\n\n/**\n * Return true if the mouseEvent click is inside the given HTML element\n */\nexport const clickInsideElement = (event: MouseEvent, element: HTMLElement): boolean => {\n    return event.x >= element.getBoundingClientRect().x && event.x <= element.getBoundingClientRect().x + element.getBoundingClientRect().width\n        && event.y >= element.getBoundingClientRect().y && event.y <= element.getBoundingClientRect().y + element.getBoundingClientRect().height;\n}\n\n\nexport const clickTargetIsElementOrChildren = (mouseEvent: MouseEvent, element: HTMLElement) => {\n    return mouseEvent.target instanceof Node\n        && element.contains(mouseEvent.target);\n}\n\nexport function generateUniqueId(componentName: string): string {\n    return componentName + \"-\" + Math.random().toString(36);\n}\n\nexport function isKeyup(evt: KeyboardEvent) {\n    return evt.code === 'ArrowUp';\n}\n\nexport function isKeydown(evt: KeyboardEvent) {\n    return evt.code === 'ArrowDown';\n}\n\nexport function isEscapeKey(evt: KeyboardEvent) {\n    return evt.code === 'Escape';\n}\n\nexport function isSpaceKey(evt: KeyboardEvent) {\n    return evt.code === 'Space';\n}\n\nexport function isEnterKey(evt: KeyboardEvent) {\n    return evt.key === 'Enter';\n}\n\nexport function isHomeKey(evt: KeyboardEvent) {\n    return evt.code === 'Home';\n}\n\nexport function isEndKey(evt: KeyboardEvent) {\n    return evt.code === 'End';\n}\n\nexport function isUpArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowUp';\n}\n\nexport function isDownArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowDown';\n}\n\nexport function isLeftArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowLeft';\n}\n\nexport function isRightArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowRight';\n}\n\nexport function isPageDownKey(evt: KeyboardEvent) {\n    return evt.key === 'PageDown';\n}\n\nexport function isPageUpKey(evt: KeyboardEvent) {\n    return evt.key === 'PageUp';\n}\n\nexport function isTabKey(evt: KeyboardEvent) {\n    return evt.key === 'Tab';\n}\n\nexport function isCtrlA(evt: KeyboardEvent) {\n    return evt.key === 'a' && evt.ctrlKey;\n}\n\nexport function getCssRootPropertyValue(name: string): string | null {\n    return window.getComputedStyle(document.body).getPropertyValue(name) || null;\n}\n"],"mappings":"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"}

package/dist/wcs/p-a66a4289.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as e,h as t,H as o}from"./p-32e583ea.js";const a=":host{display:block}:host([hidden]){display:none}";const c=a;const n=class{constructor(t){s(this,t);this.tabLoaded=e(this,"tabLoaded",7);this.header=undefined;this.itemKey=undefined}componentDidLoad(){this.tabLoaded.emit()}render(){return t(o,{key:"72b042d637339884bb5c788c54b7ebfb039bd155",slot:"wcs-tab",role:"tabpanel"},t("slot",{key:"cab504f0521ec274763c97be0e42719b2a5e5099"}))}};n.style=c;export{n as wcs_tab};
-//# sourceMappingURL=p-a66a4289.entry.js.map

package/dist/wcs/p-bf31245c.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as r,H as s,g as o}from"./p-32e583ea.js";import{i as t}from"./p-a0f32ead.js";const i=":host{--wcs-error-color:var(--wcs-semantic-color-text-critical);--wcs-error-font-size:var(--wcs-semantic-font-size-caption-2);--wcs-error-font-weight:var(--wcs-semantic-font-weight-book);color:var(--wcs-error-color);font-size:var(--wcs-error-font-size);font-weight:var(--wcs-error-font-weight)}";const c=i;const a=class{constructor(r){e(this,r)}render(){return r(s,{key:"2257210c2e97d6c4dc04a87fa05121e203b79619","aria-live":"polite","aria-atomic":"true",slot:"error"},r("slot",{key:"fc76b174cb85991bb4cd899b72605b171f8165e6"}))}};a.style=c;const l=":host{--wcs-form-field-gap:var(--wcs-semantic-spacing-small);--wcs-form-field-prefix-suffix-border-radius:var(--wcs-semantic-border-radius-base);--wcs-form-field-prefix-icon-color:var(--wcs-semantic-color-foreground-primary);--wcs-form-field-prefix-value-color:var(--wcs-semantic-color-text-inverse);--wcs-form-field-prefix-placeholder-color:var(--wcs-semantic-color-text-inverse);display:flex;flex-direction:column;gap:var(--wcs-form-field-gap)}:host ::slotted([slot=prefix]){--wcs-select-value-color:var(--wcs-semantic-color-text-inverse);--wcs-select-placeholder-color:var(--wcs-semantic-color-text-inverse);--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-default);--wcs-select-control-arrow-color:var(--wcs-form-field-prefix-icon-color);--wcs-select-control-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);--wcs-select-control-border-width-default:0;--wcs-select-control-border-style-focus:dashed;--wcs-select-control-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-native-select-value-color:var(--wcs-semantic-color-text-inverse);--wcs-native-select-placeholder-color:var(--wcs-semantic-color-text-inverse);--wcs-native-select-arrow-color:var(--wcs-form-field-prefix-icon-color);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-default);--wcs-native-select-border-width:0;--wcs-native-select-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-native-select-border-style-focus:dashed;--wcs-native-select-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);--wcs-native-select-option-color:var(--wcs-semantic-color-text-inverse)}:host ::slotted([slot=prefix][disabled]),:host ::slotted([slot=prefix]:disabled),:host ::slotted([slot=prefix][aria-disabled=true]),:host ::slotted([slot=prefix][data-disabled]){--wcs-semantic-color-background-control-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-semantic-color-text-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-select-value-color:var(--wcs-semantic-color-text-disabled);--wcs-select-placeholder-color:var(--wcs-semantic-color-text-disabled);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-native-select-placeholder-color:var(--wcs-semantic-color-text-disabled);--wcs-native-select-value-color:var(--wcs-semantic-color-text-disabled)}:host ::slotted([slot=prefix]:hover:not([disabled]):not([data-disabled])){--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-hover);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-hover)}:host ::slotted([slot=prefix]:active:not([disabled]):not([data-disabled])){--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-press);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-press)}.input-container{display:flex}::slotted(wcs-select:not([slot=prefix])){width:100%}::slotted(wcs-native-select:not([slot=prefix])){width:100%}:host(.has-prefix) ::slotted(wcs-input){--wcs-input-border-radius-left:0}:host(.has-suffix) ::slotted(wcs-input){--wcs-input-border-radius-right:0}::slotted([slot=suffix]){--wcs-button-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;--wcs-select-control-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;--wcs-native-select-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0}";const d=l;const n=class{constructor(r){e(this,r);this.isError=false;this.hasPrefix=false;this.hasSuffix=false;this.spiedElement=undefined}componentWillLoad(){this.hasSuffix=this.el.querySelector("wcs-button")!==null;this.hasPrefix=this.el.querySelector("wcs-select")!==null}componentDidLoad(){this.initSpiedElement();this.addRequiredMarkerToLabel();this.updateErrorStateOnInput(this.isError)}isErrorChange(e){this.updateErrorStateOnInput(e);this.updateAriaAttributes()}updateErrorStateOnInput(e){if(this.spiedElementIsOfType("wcs-input","wcs-textarea")){if(e){this.spiedElement.setAttribute("state","error")}else{this.spiedElement.setAttribute("state","initial")}}}spiedElementIsOfType(...e){var r;for(const s of e){if(((r=this.spiedElement)===null||r===void 0?void 0:r.tagName)===s.toUpperCase())return true}return false}addRequiredMarkerToLabel(){var e;const r=this.el.querySelector("wcs-label");this.observer=new MutationObserver((e=>{var s;const o=e.filter((e=>e.attributeName==="required"))[0];if(o){this.updateLabelRequiredFlag((s=this.spiedElement)===null||s===void 0?void 0:s.hasAttribute("required"),r)}}));if(this.spiedElement){this.observer.observe(this.spiedElement,{attributes:true})}const s=(e=this.spiedElement)===null||e===void 0?void 0:e.hasAttribute("required");this.updateLabelRequiredFlag(s,r)}initSpiedElement(){var e,r;const s=["wcs-input","wcs-select","wcs-native-select","wcs-textarea","wcs-radio-group","wcs-switch","wcs-checkbox","wcs-native-select","wcs-counter"];this.spiedElement=(e=this.el.shadowRoot.querySelector("slot:not([name])"))===null||e===void 0?void 0:e.assignedElements().filter((e=>[...s,"SLOT"].map((e=>e.toUpperCase())).indexOf(e.nodeName)!==-1))[0];if(((r=this.spiedElement)===null||r===void 0?void 0:r.tagName)==="SLOT"){this.spiedElement=this.spiedElement.assignedElements().filter((e=>s.map((e=>e.toUpperCase())).indexOf(e.nodeName)!==-1))[0]}if(!this.spiedElement){console.warn("Form-field component support only "+s.toString()+". Some features may not work with the provided component.");return}}updateAriaAttributes(){if(t(this.spiedElement)){this.spiedElement.setAriaAttribute("aria-label",this.label);if(this.isError){if(this.error)this.spiedElement.setAriaAttribute("aria-description",this.error);this.spiedElement.setAriaAttribute("aria-invalid","true")}else{if(this.description)this.spiedElement.setAriaAttribute("aria-description",this.description);this.spiedElement.setAriaAttribute("aria-invalid","false")}}}get label(){var e;return(e=this.el.querySelector("wcs-label"))===null||e===void 0?void 0:e.textContent}get description(){var e;return(e=this.el.querySelector("wcs-hint"))===null||e===void 0?void 0:e.textContent}get error(){var e;return(e=this.el.querySelector("wcs-error"))===null||e===void 0?void 0:e.textContent}updateLabelRequiredFlag(e,r){if(e&&r){r.setAttribute("required","true")}else if(!e&&r){r.removeAttribute("required")}}disconnectedCallback(){var e;(e=this.observer)===null||e===void 0?void 0:e.disconnect()}render(){let e="";const o=this.isError;if(this.hasSuffix){e+=" has-suffix"}if(this.hasPrefix){e+=" has-prefix"}return r(s,{key:"c9f7040c27e964d32f5d39befad34fd2500ad89b",class:e},r("slot",{key:"580960c53f66356e3e8a67436603f3d5d0828409",name:"label"}),r("div",{key:"9f942bf24140c7c3718d4e56b5c356e4471c246b",class:"input-container"},r("slot",{key:"03ac6862d220be32e3c62d6fa6b49d745f77f1f8",name:"prefix"}),r("slot",{key:"476c0419a0269dde5d3b89b025f475c54fa7a1f4",onSlotchange:()=>this.onFormInputSlotChange()}),r("slot",{key:"63e76f50c004442ad27dbdf87c59fdb574a24352",name:"suffix"})),o?r("slot",{name:"error"}):"",r("slot",{key:"d6dd0c622edbaf25c38844f62e46efefb462d616",name:"messages"}))}onFormInputSlotChange(){this.initSpiedElement();this.updateAriaAttributes();this.addRequiredMarkerToLabel();this.updateErrorStateOnInput(this.isError)}get el(){return o(this)}static get watchers(){return{isError:["isErrorChange"]}}};n.style=d;export{a as wcs_error,n as wcs_form_field};
-//# sourceMappingURL=p-bf31245c.entry.js.map