wcs-core 4.2.0 → 5.0.0

package/dist/wcs/{p-f489793d.entry.js → p-c261353f.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as s,h as e,H as a,g as i}from"./p-a2df3a49.js";const n=':host{--wcs-tabs-padding-bottom:16px}:host([align=start]) .wcs-tabs-headers{justify-content:start}:host([align=end]) .wcs-tabs-headers{justify-content:end}:host([align=center]) .wcs-tabs-headers{justify-content:center}.wcs-tabs-headers{padding-top:4px;overflow-x:auto;display:flex;position:relative}:host([gutter]) .wcs-tabs-headers{border-bottom:var(--wcs-tabs-headers-border-bottom)}.wcs-tab-header{padding:8px 24px 16px 0;display:flex;flex-shrink:0;align-items:center;justify-content:center;cursor:pointer;outline:none}.wcs-tab-header span{text-align:center;color:var(--wcs-text-disabled);font-size:1rem;font-weight:400}.wcs-tab-header:focus span,.wcs-tab-header:hover span{color:var(--wcs-primary)}.wcs-tab-header:focus-visible>span{outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:0.1rem}.active span{font-weight:500;color:var(--wcs-primary);position:relative}.active span::after{position:absolute;bottom:calc(var(--wcs-tabs-padding-bottom) * -1);left:0;width:100%;height:0.3125rem;content:"";background-color:var(--wcs-primary);border-radius:3px}';const r=class{constructor(e){t(this,e);this.tabChange=s(this,"tabChange",7);this.tabsId=h++;this.align="start";this.selectedIndex=0;this.selectedKey=undefined;this.headersOnly=false;this.gutter=undefined;this.description=undefined;this.headers=[];this.currentActiveTabIndex=0}selectedIndexChanged(t){this.currentActiveTabIndex=t}selectedTabkeyChanged(t){this.updateCurrentActiveIndexByTabKey(t)}emitActiveTabChange(){this.tabChange.emit({tabName:this.headers[this.currentActiveTabIndex],tabIndex:this.currentActiveTabIndex,selectedKey:this.tabs[this.currentActiveTabIndex].itemKey})}updateCurrentActiveIndexByTabKey(t){for(let s=0;s<this.tabs.length;s++){const e=this.tabs[s];if(e.itemKey===t){this.currentActiveTabIndex=s}}}onTabLoaded(){this.refreshHeaders()}componentDidLoad(){this.putTabsInCorrectDivIfTheyAreNot();this.refreshHeaders();if(this.selectedIndex){this.currentActiveTabIndex=this.selectedIndex}if(this.selectedKey){this.updateCurrentActiveIndexByTabKey(this.selectedKey)}}putTabsInCorrectDivIfTheyAreNot(){const t=this.el.shadowRoot.querySelector(".wcs-tabs");if(t.querySelector("slot")===null){Array.from(this.el.querySelectorAll("wcs-tab")).filter((s=>s.parentNode!==t)).forEach((s=>{if(s.parentElement.isEqualNode(this.el)){this.el.removeChild(s);t.appendChild(s)}}))}}handleKeyDown(t,s){var e,a;const i=t.target;switch(t.key){case" ":case"Enter":{this.currentActiveTabIndex=s;this.emitActiveTabChange();t.preventDefault();break}case"ArrowLeft":{if((e=i.previousElementSibling)===null||e===void 0?void 0:e.classList.contains("wcs-tab-header")){i.previousElementSibling.focus();t.preventDefault()}break}case"ArrowRight":{if((a=i.nextElementSibling)===null||a===void 0?void 0:a.classList.contains("wcs-tab-header")){i.nextElementSibling.focus();t.preventDefault()}break}case"Home":{const s=this.el.shadowRoot.querySelector(".wcs-tab-header:first-child");if(s){s.focus();t.preventDefault()}break}case"End":{const s=this.el.shadowRoot.querySelector(".wcs-tab-header:last-child");if(s){s.focus();t.preventDefault()}break}}}refreshHeaders(){this.headers=[];this.tabs.forEach((t=>{this.headers.push(t.getAttribute("header"))}))}get tabs(){var t;const s=this.el.shadowRoot.querySelector(".wcs-tabs");const e=this.el.shadowRoot.querySelectorAll(".wcs-tabs > wcs-tab");return e.length!==0?e:(s===null||s===void 0?void 0:s.querySelector("slot"))?(t=s===null||s===void 0?void 0:s.querySelector("slot"))===null||t===void 0?void 0:t.assignedElements():[]}selectTabAndEmitChangeEvent(t){this.currentActiveTabIndex=t;this.emitActiveTabChange()}componentWillUpdate(){if(!this.headersOnly){this.updateTabVisibility()}else{this.hideAllTabsContent()}}updateTabVisibility(){this.tabs.forEach(((t,s)=>{if(s!==this.currentActiveTabIndex){t.setAttribute("style","display: none;")}else{t.setAttribute("style","display: block;")}}))}hideAllTabsContent(){this.tabs.forEach((t=>t.setAttribute("style","display: none;")))}render(){return e(a,null,e("div",{class:"wcs-tabs-headers",role:"tablist","aria-label":this.description},this.headers.map(((t,s)=>e("div",{class:"wcs-tab-header "+(this.currentActiveTabIndex===s?"active":""),onClick:()=>this.selectTabAndEmitChangeEvent(s),onKeyDown:t=>this.handleKeyDown(t,s),tabIndex:this.currentActiveTabIndex===s?0:-1,role:"tab",id:`tabs-id-${this.tabsId}-tab-id-${s}`,"aria-controls":`tabs-id-${this.tabsId}-tab-panel-${s}`,"aria-label":t,"aria-selected":this.currentActiveTabIndex===s?"true":"false"},e("span",null,t))))),e("div",{class:"wcs-tabs"},e("slot",{onSlotchange:()=>this.onTabsSlotChange(),name:"wcs-tab"})))}onTabsSlotChange(){let t=0;this.tabs.forEach((s=>{s.setAttribute("aria-label",this.headers.at(t));s.setAttribute("id",`tabs-id-${this.tabsId}-tab-panel-${t}`);t++}))}get el(){return i(this)}static get watchers(){return{selectedIndex:["selectedIndexChanged"],selectedKey:["selectedTabkeyChanged"]}}};let h=0;r.style=n;export{r as wcs_tabs};
-//# sourceMappingURL=p-f489793d.entry.js.map
+import{r as t,c as s,h as e,H as a,g as i}from"./p-69d1223c.js";const r=':host{--wcs-tabs-padding-bottom:16px}:host([align=start]) .wcs-tabs-headers{justify-content:start}:host([align=end]) .wcs-tabs-headers{justify-content:end}:host([align=center]) .wcs-tabs-headers{justify-content:center}.wcs-tabs-headers{padding-top:4px;overflow-x:auto;display:flex;position:relative}:host([gutter]) .wcs-tabs-headers{border-bottom:var(--wcs-tabs-headers-border-bottom)}.wcs-tab-header{padding:8px 24px 16px 0;display:flex;flex-shrink:0;align-items:center;justify-content:center;cursor:pointer;outline:none}.wcs-tab-header span{text-align:center;color:var(--wcs-text-disabled);font-size:1rem;font-weight:400}.wcs-tab-header:focus span,.wcs-tab-header:hover span{color:var(--wcs-primary)}.wcs-tab-header:focus-visible>span{outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:0.1rem}.active span{font-weight:500;color:var(--wcs-primary);position:relative}.active span::after{position:absolute;bottom:calc(var(--wcs-tabs-padding-bottom) * -1);left:0;width:100%;height:0.3125rem;content:"";background-color:var(--wcs-primary);border-radius:3px}';const h=class{constructor(e){t(this,e);this.tabChange=s(this,"tabChange",7);this.tabsId=n++;this.align="start";this.selectedIndex=0;this.selectedKey=undefined;this.headersOnly=false;this.gutter=undefined;this.description=undefined;this.headers=[];this.currentActiveTabIndex=0}selectedIndexChanged(t){this.currentActiveTabIndex=t}selectedTabkeyChanged(t){this.updateCurrentActiveIndexByTabKey(t)}emitActiveTabChange(){this.tabChange.emit({tabName:this.headers[this.currentActiveTabIndex],tabIndex:this.currentActiveTabIndex,selectedKey:this.tabs[this.currentActiveTabIndex].itemKey})}updateCurrentActiveIndexByTabKey(t){for(let s=0;s<this.tabs.length;s++){const e=this.tabs[s];if(e.itemKey===t){this.currentActiveTabIndex=s}}}onTabLoaded(){this.refreshHeaders()}componentDidLoad(){this.putTabsInCorrectDivIfTheyAreNot();this.refreshHeaders();if(this.selectedIndex){this.currentActiveTabIndex=this.selectedIndex}if(this.selectedKey){this.updateCurrentActiveIndexByTabKey(this.selectedKey)}}putTabsInCorrectDivIfTheyAreNot(){const t=this.el.shadowRoot.querySelector(".wcs-tabs");if(t.querySelector("slot")===null){Array.from(this.el.querySelectorAll("wcs-tab")).filter((s=>s.parentNode!==t)).forEach((s=>{if(s.parentElement.isEqualNode(this.el)){this.el.removeChild(s);t.appendChild(s)}}))}}handleKeyDown(t,s){var e,a;const i=t.target;switch(t.key){case" ":case"Enter":{this.currentActiveTabIndex=s;this.emitActiveTabChange();t.preventDefault();break}case"ArrowLeft":{if((e=i.previousElementSibling)===null||e===void 0?void 0:e.classList.contains("wcs-tab-header")){i.previousElementSibling.focus();t.preventDefault()}break}case"ArrowRight":{if((a=i.nextElementSibling)===null||a===void 0?void 0:a.classList.contains("wcs-tab-header")){i.nextElementSibling.focus();t.preventDefault()}break}case"Home":{const s=this.el.shadowRoot.querySelector(".wcs-tab-header:first-child");if(s){s.focus();t.preventDefault()}break}case"End":{const s=this.el.shadowRoot.querySelector(".wcs-tab-header:last-child");if(s){s.focus();t.preventDefault()}break}}}refreshHeaders(){this.headers=[];this.tabs.forEach((t=>{this.headers.push(t.getAttribute("header"))}))}get tabs(){var t;const s=this.el.shadowRoot.querySelector(".wcs-tabs");const e=this.el.shadowRoot.querySelectorAll(".wcs-tabs > wcs-tab");return e.length!==0?e:(s===null||s===void 0?void 0:s.querySelector("slot"))?(t=s===null||s===void 0?void 0:s.querySelector("slot"))===null||t===void 0?void 0:t.assignedElements():[]}selectTabAndEmitChangeEvent(t){this.currentActiveTabIndex=t;this.emitActiveTabChange()}componentWillUpdate(){if(!this.headersOnly){this.updateTabVisibility()}else{this.hideAllTabsContent()}}updateTabVisibility(){this.tabs.forEach(((t,s)=>{if(s!==this.currentActiveTabIndex){t.hidden=true}else{t.hidden=false}}))}hideAllTabsContent(){this.tabs.forEach((t=>t.hidden=true))}render(){return e(a,null,e("div",{class:"wcs-tabs-headers",role:"tablist","aria-label":this.description},this.headers.map(((t,s)=>e("div",{class:"wcs-tab-header "+(this.currentActiveTabIndex===s?"active":""),onClick:()=>this.selectTabAndEmitChangeEvent(s),onKeyDown:t=>this.handleKeyDown(t,s),tabIndex:this.currentActiveTabIndex===s?0:-1,role:"tab",id:`tabs-id-${this.tabsId}-tab-id-${s}`,"aria-controls":`tabs-id-${this.tabsId}-tab-panel-${s}`,"aria-label":t,"aria-selected":this.currentActiveTabIndex===s?"true":"false"},e("span",null,t))))),e("div",{class:"wcs-tabs"},e("slot",{onSlotchange:()=>this.onTabsSlotChange(),name:"wcs-tab"})))}onTabsSlotChange(){let t=0;this.tabs.forEach((s=>{s.setAttribute("aria-label",this.headers.at(t));s.setAttribute("id",`tabs-id-${this.tabsId}-tab-panel-${t}`);t++}))}get el(){return i(this)}static get watchers(){return{selectedIndex:["selectedIndexChanged"],selectedKey:["selectedTabkeyChanged"]}}};let n=0;h.style=r;export{h as wcs_tabs};
+//# sourceMappingURL=p-c261353f.entry.js.map

package/dist/wcs/p-c261353f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tabsCss","Tabs","this","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","idx","hidden","render","h","Host","class","role","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-padding-bottom: 16px;\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    padding-top: 4px;\n    overflow-x: auto;\n    display: flex;\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    padding: 8px 24px 16px 0;\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    outline: none;\n\n    span {\n        text-align: center;\n        color: var(--wcs-text-disabled);\n        font-size: 1rem;\n        font-weight: 400;\n    }\n\n\n    &:focus,\n    &:hover {\n        span {\n            color: var(--wcs-primary);\n        }\n    }\n\n    &:focus-visible > span {\n        @include focus-outline;\n    }\n}\n\n\n.active {\n    span {\n        font-weight: 500;\n        color: var(--wcs-primary);\n        position: relative;\n    }\n\n    span::after {\n        position: absolute;\n        bottom: calc(var(--wcs-tabs-padding-bottom) * -1);\n        left: 0;\n        width: 100%;\n        height: 0.3125rem;\n        content: \"\";\n        background-color: var(--wcs-primary);\n        border-radius: 3px;\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\n} from '@stencil/core';\n\nimport { WcsTabsAlignment, WcsTabChangeEvent } from './tabs-interface';\n\n/**\n * Tabs component to switch between tab content.\n * Use in conjuction with `wcs-tab`.\n *\n * @example\n * ```html\n * <wcs-tabs>\n *    <wcs-tab header=\"One\">The content !</wcs-tab>\n *    <wcs-tab header=\"Two\">More content !</wcs-tab>\n * </wcs-tabs>\n * ```\n * \n * @cssprop --wcs-tabs-width - Width of each tab\n * @cssprop --wcs-tabs-padding-horizontal - Width of each tab\n * @cssprop --wcs-tabs-padding-vertical - Vertical padding\n */\n@Component({\n    tag: 'wcs-tabs',\n    styleUrl: 'tabs.scss',\n    shadow: true,\n})\nexport class Tabs implements ComponentInterface {\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    @Element() private el!: HTMLWcsTabsElement;\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    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\" role=\"tablist\" aria-label={this.description}>\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":"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"}

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

@@ -0,0 +1,2 @@
+import{r as t,h as s,H as r,g as i}from"./p-69d1223c.js";const e=":host{margin-top:0.25rem;color:var(--wcs-red)}";const o=class{constructor(s){t(this,s)}render(){return s(r,{"aria-live":"polite","aria-atomic":"true",slot:"error"},s("slot",null))}};o.style=e;function a(t){return"setAriaAttribute"in t}const l=":host{--wcs-form-field-border-radius-left:var(--wcs-border-radius);--wcs-form-field-border-radius-right:var(--wcs-border-radius);display:flex;flex-direction:column}.input-container{display:flex}::slotted(wcs-radio-group){margin-left:var(--wcs-base-margin)}::slotted(wcs-radio-group[mode=option]){margin-left:0}::slotted(wcs-select:not([slot=prefix])){width:100%}::slotted(label){font-weight:500;margin-bottom:8px}:host(.has-prefix){--wcs-input-border-radius-left:0}:host(.has-suffix){--wcs-input-border-radius-right:0}::slotted([slot=prefix]){--wcs-select-border-radius:var(--wcs-border-radius) 0 0 var(--wcs-border-radius);--wcs-select-background-color:var(--wcs-gray-light);--wcs-select-value-color:var(--wcs-white);--wcs-select-placeholder-color:var(--wcs-white);--wcs-select-border-color:var(--wcs-gray-light)}::slotted([slot=suffix]){--wcs-button-border-radius:0 var(--wcs-border-radius) var(--wcs-border-radius) 0;--wcs-select-border-radius:0 var(--wcs-border-radius) var(--wcs-border-radius) 0}";const n=class{constructor(s){t(this,s);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(t){this.updateErrorStateOnInput(t);this.updateAriaAttributes()}updateErrorStateOnInput(t){if(this.spiedElementIsOfType("wcs-input","wcs-textarea")){if(t){this.spiedElement.setAttribute("state","error")}else{this.spiedElement.setAttribute("state","initial")}}}spiedElementIsOfType(...t){var s;for(const r of t){if(((s=this.spiedElement)===null||s===void 0?void 0:s.tagName)===r.toUpperCase())return true}return false}addRequiredMarkerToLabel(){var t;const s=this.el.querySelector("wcs-label");this.observer=new MutationObserver((t=>{var r;const i=t.filter((t=>t.attributeName==="required"))[0];if(i){this.updateLabelRequiredFlag((r=this.spiedElement)===null||r===void 0?void 0:r.hasAttribute("required"),s)}}));if(this.spiedElement){this.observer.observe(this.spiedElement,{attributes:true})}const r=(t=this.spiedElement)===null||t===void 0?void 0:t.hasAttribute("required");this.updateLabelRequiredFlag(r,s)}initSpiedElement(){var t,s;const r=["wcs-input","wcs-select","wcs-textarea","wcs-radio-group","wcs-switch","wcs-checkbox","wcs-native-select","wcs-counter"];this.spiedElement=(t=this.el.shadowRoot.querySelector("slot:not([name])"))===null||t===void 0?void 0:t.assignedElements().filter((t=>[...r,"SLOT"].map((t=>t.toUpperCase())).indexOf(t.nodeName)!==-1))[0];if(((s=this.spiedElement)===null||s===void 0?void 0:s.tagName)==="SLOT"){this.spiedElement=this.spiedElement.assignedElements().filter((t=>r.map((t=>t.toUpperCase())).indexOf(t.nodeName)!==-1))[0]}if(!this.spiedElement){console.warn("Form-field component support only "+r.toString()+". Some features may not work with the provided component.");return}}updateAriaAttributes(){if(a(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 t;return(t=this.el.querySelector("wcs-label"))===null||t===void 0?void 0:t.textContent}get description(){var t;return(t=this.el.querySelector("wcs-hint"))===null||t===void 0?void 0:t.textContent}get error(){var t;return(t=this.el.querySelector("wcs-error"))===null||t===void 0?void 0:t.textContent}updateLabelRequiredFlag(t,s){if(t&&s){s.setAttribute("required","true")}else if(!t&&s){s.removeAttribute("required")}}disconnectedCallback(){var t;(t=this.observer)===null||t===void 0?void 0:t.disconnect()}render(){let t="";const i=this.isError;if(this.hasSuffix){t+=" has-suffix"}if(this.hasPrefix){t+=" has-prefix"}return s(r,{class:t},s("slot",{name:"label"}),s("div",{class:"input-container"},s("slot",{name:"prefix"}),s("slot",{onSlotchange:()=>this.onFormInputSlotChange()}),s("slot",{name:"suffix"})),i?s("slot",{name:"error"}):"",s("slot",{name:"messages"}))}onFormInputSlotChange(){this.initSpiedElement();this.updateAriaAttributes();this.addRequiredMarkerToLabel();this.updateErrorStateOnInput(this.isError)}get el(){return i(this)}static get watchers(){return{isError:["isErrorChange"]}}};n.style=l;export{o as wcs_error,n as wcs_form_field};
+//# sourceMappingURL=p-c3227f01.entry.js.map

package/dist/wcs/p-c3227f01.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["errorCss","Label","render","h","Host","slot","isMutableAriaAttribute","el","formFieldCss","FormField","componentWillLoad","this","hasSuffix","querySelector","hasPrefix","componentDidLoad","initSpiedElement","addRequiredMarkerToLabel","updateErrorStateOnInput","isError","isErrorChange","newValue","updateAriaAttributes","spiedElementIsOfType","spiedElement","setAttribute","types","type","_a","tagName","toUpperCase","label","observer","MutationObserver","mutations","requiredAttMutation","filter","m","attributeName","updateLabelRequiredFlag","hasAttribute","observe","attributes","isRequired","SUPPORTED_COMPONENTS","shadowRoot","assignedElements","n","map","x","indexOf","nodeName","_b","console","warn","toString","setAriaAttribute","error","description","textContent","removeAttribute","disconnectedCallback","disconnect","classes","class","name","onSlotchange","onFormInputSlotChange"],"sources":["./src/components/error/error.scss?tag=wcs-error&encapsulation=shadow","./src/components/error/error.tsx","./src/utils/mutable-aria-attribute.ts","./src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","./src/components/form-field/form-field.tsx"],"sourcesContent":[":host {\n    margin-top: 0.25rem;\n    color: var(--wcs-red);\n}","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n@Component({\n    tag: 'wcs-error',\n    styleUrl: 'error.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface {\n    render() {\n        return (\n            <Host aria-live=\"polite\" aria-atomic=\"true\" slot=\"error\">\n                <slot />\n            </Host>\n        );\n    }\n}\n","export type AriaAttributeName = `aria-${string}` | 'role';\n\nexport interface MutableAriaAttribute {\n    setAriaAttribute(attr: AriaAttributeName, value: string): void;\n}\n\nexport function isMutableAriaAttribute(el: any): el is MutableAriaAttribute {\n    return 'setAriaAttribute' in el;\n}\n",":host {\n    --wcs-form-field-border-radius-left: var(--wcs-border-radius);\n    --wcs-form-field-border-radius-right: var(--wcs-border-radius);\n\n    display: flex;\n    flex-direction: column;\n}\n\n.input-container {\n    display: flex;\n}\n\n::slotted(wcs-radio-group) {\n    margin-left: var(--wcs-base-margin);\n}\n\n::slotted(wcs-radio-group[mode=option]) {\n    margin-left: 0;\n}\n\n::slotted(wcs-select:not([slot=prefix])) {\n    width: 100%;\n}\n\n// Label style\n::slotted(label) {\n    font-weight: 500;\n    margin-bottom: 8px;\n}\n\n// Make input square on left side if there is a prefix\n:host(.has-prefix) {\n    --wcs-input-border-radius-left: 0;\n}\n\n// Make input square on right side if there is a suffix\n:host(.has-suffix) {\n    --wcs-input-border-radius-right: 0;\n}\n\n// Prefixed select\n::slotted([slot=prefix]) {\n    --wcs-select-border-radius: var(--wcs-border-radius) 0 0 var(--wcs-border-radius);\n    --wcs-select-background-color: var(--wcs-gray-light);\n    --wcs-select-value-color: var(--wcs-white);\n    --wcs-select-placeholder-color: var(--wcs-white);\n    --wcs-select-border-color: var(--wcs-gray-light);\n}\n\n::slotted([slot=suffix]) {\n    // Make button square on left side\n    --wcs-button-border-radius: 0 var(--wcs-border-radius) var(--wcs-border-radius) 0;\n\n    // Make select square on left side\n    --wcs-select-border-radius: 0 var(--wcs-border-radius) var(--wcs-border-radius) 0 ;\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { isMutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n/**\n * TODO:\n * - [ ] Suffix button style\n */\n@Component({\n    tag: 'wcs-form-field',\n    styleUrl: 'form-field.scss',\n    shadow: true,\n})\nexport class FormField implements ComponentInterface {\n    @Element() private el!: HTMLWcsFormFieldElement;\n\n    /**\n     * Specifies whether the form field is in an error state. Displays the field border in red and the message contained in the wcs-error component\n     */\n    @Prop({mutable: true, reflect: true}) isError = false;\n\n    @State() private hasPrefix = false;\n    @State() private hasSuffix = false;\n    @State() private spiedElement: Element;\n\n    private observer: MutationObserver;\n\n    componentWillLoad() {\n        this.hasSuffix = this.el.querySelector('wcs-button') !== null;\n        this.hasPrefix = this.el.querySelector('wcs-select') !== null;\n    }\n\n    componentDidLoad() {\n        this.initSpiedElement();\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n\n\n    @Watch('isError')\n    // @ts-ignore\n    private isErrorChange(newValue: boolean) {\n        this.updateErrorStateOnInput(newValue);\n        this.updateAriaAttributes();\n    }\n\n    private updateErrorStateOnInput(newValue: boolean) {\n        if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {\n            if (newValue) {\n                this.spiedElement.setAttribute('state', 'error');\n            } else {\n                this.spiedElement.setAttribute('state', 'initial');\n            }\n        }\n    }\n\n    /**\n     * This function return true if the form field contains an element with tagName matches a value of the types param\n     * @param types\n     * @private\n     */\n    private spiedElementIsOfType(...types: string[]): boolean {\n        for (const type of types) {\n            if (this.spiedElement?.tagName === type.toUpperCase()) return true;\n        }\n        return false\n    }\n\n\n    private addRequiredMarkerToLabel() {\n        // TODO: deprecate this in favor of the 'required' component attribute\n        const label = this.el.querySelector('wcs-label');\n        this.observer = new MutationObserver(mutations => {\n            const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];\n            if (requiredAttMutation) {\n                this.updateLabelRequiredFlag(this.spiedElement?.hasAttribute('required'), label);\n            }\n        });\n        if (this.spiedElement) {\n            this.observer.observe(this.spiedElement, {attributes: true});\n        }\n\n        const isRequired = this.spiedElement?.hasAttribute('required');\n        this.updateLabelRequiredFlag(isRequired, label);\n    }\n\n\n    private initSpiedElement() {\n        const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select', 'wcs-counter'];\n\n        this.spiedElement = (this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement)\n            ?.assignedElements()\n            .filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];\n\n        // If the component is used in another web component\n        if (this.spiedElement?.tagName === 'SLOT') {\n            this.spiedElement = ((this.spiedElement as HTMLSlotElement)\n                .assignedElements()\n                .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]) as HTMLElement;\n        }\n\n        if (!this.spiedElement) {\n            // tslint:disable-next-line:no-console\n            console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');\n            return;\n        }\n    }\n    \n    private updateAriaAttributes(): void {\n        if(isMutableAriaAttribute(this.spiedElement)) {\n            this.spiedElement.setAriaAttribute('aria-label', this.label);\n\n            // Sur les autres DS, généralement seul l'erreur est affichée et pas avec la description\n            if(this.isError) {\n                if(this.error) this.spiedElement.setAriaAttribute('aria-description', this.error);\n                this.spiedElement.setAriaAttribute('aria-invalid', 'true');\n            } else {\n                if(this.description) this.spiedElement.setAriaAttribute('aria-description', this.description);\n                this.spiedElement.setAriaAttribute('aria-invalid', 'false');\n            }\n        }\n    }\n    \n    private get label() {\n        return this.el.querySelector('wcs-label')?.textContent;\n    }\n    \n    private get description() {\n        return this.el.querySelector('wcs-hint')?.textContent;\n    }\n    \n    private get error() {\n        return this.el.querySelector('wcs-error')?.textContent;\n    }\n\n    private updateLabelRequiredFlag(isRequired: boolean, label: Element) {\n        if (isRequired && label) {\n            label.setAttribute('required', 'true');\n        } else if (!isRequired && label) {\n            label.removeAttribute('required');\n        }\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n    }\n\n    render() {\n        let classes = '';\n        const isError = this.isError;\n\n        if (this.hasSuffix) {\n            classes += ' has-suffix';\n        }\n        if (this.hasPrefix) {\n            classes += ' has-prefix';\n        }\n        return (\n            <Host class={classes}>\n                <slot name=\"label\"/>\n                <div class=\"input-container\">\n                    <slot name=\"prefix\"/>\n                    <slot onSlotchange={() => this.onFormInputSlotChange()}/>\n                    <slot name=\"suffix\"/>\n                </div>\n                {\n                    isError ? (<slot name=\"error\"/>) : ''\n                }\n                <slot name=\"messages\"/>\n            </Host>\n        );\n    }\n\n    private onFormInputSlotChange() {\n        this.initSpiedElement();\n        this.updateAriaAttributes()\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n}\n"],"mappings":"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"}

package/dist/wcs/{p-810aff71.entry.js → p-c38adf4b.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,c as t,h as e,H as s}from"./p-a2df3a49.js";import{S as r}from"./p-d6c3e615.js";const a=":host{display:flex;flex-direction:column;cursor:pointer;margin-bottom:16px}:host .header{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-radius:7px;font-weight:500;font-size:16px;color:var(--wcs-primary);background-color:var(--wcs-light);border:none}@media (forced-colors: active){:host .header{border:1px solid ButtonBorder}}:host .header:focus-visible{outline:2px solid var(--wcs-primary)}:host .header-action{display:flex;align-items:center;user-select:none}:host .header-action .arrow{fill:var(--wcs-primary)}:host .content{display:none}:host([open]){margin-bottom:0}:host([open]) .content{display:block}:host([open]):host([group-content-with-header]) .header{border-radius:7px 7px 0 0;padding-bottom:0}:host([open]):host([group-content-with-header]) .content{border-radius:0 0 7px 7px;margin-bottom:14px;background-color:var(--wcs-light)}:host([open]):host([highlight]) .header{background-color:var(--wcs-primary);color:var(--wcs-light)}:host([open]):host([highlight]) .arrow{fill:var(--wcs-light)}:host([open]):host([highlight]):host([group-content-with-header]) .content{background-color:var(--wcs-primary);color:var(--wcs-light)}";const n=class{constructor(e){o(this,e);this.wcsOpenChange=t(this,"wcsOpenChange",7);this.open=false;this.hideActionText=false;this.highlight=false;this.groupContentWithHeader=false}openChange(o){this.wcsOpenChange.emit(o)}async close(){this.open=false}render(){return e(s,null,e("button",{"aria-expanded":this.open?"true":"false","aria-controls":"content",class:"header",onClick:()=>this.open=!this.open},e("slot",{name:"header"}),e("span",{class:"header-action"},!this.hideActionText&&e("span",null,this.open?"Fermez":"Ouvrez"),e(r,{up:this.open}))),e("div",{class:"content",id:"content"},e("slot",{name:"content"})))}static get watchers(){return{open:["openChange"]}}};n.style=a;export{n as wcs_accordion_panel};
-//# sourceMappingURL=p-810aff71.entry.js.map
+import{r as o,c as t,h as e,H as s}from"./p-69d1223c.js";import{S as r}from"./p-24611014.js";const a=":host{display:flex;flex-direction:column;cursor:pointer;margin-bottom:16px}:host .header{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-radius:7px;font-weight:500;font-size:16px;color:var(--wcs-primary);background-color:var(--wcs-light);border:none}@media (forced-colors: active){:host .header{border:1px solid ButtonBorder}}:host .header:focus-visible{outline:2px solid var(--wcs-primary)}:host .header-action{display:flex;align-items:center;user-select:none}:host .header-action .arrow{fill:var(--wcs-primary)}:host .content{display:none}:host([open]){margin-bottom:0}:host([open]) .content{display:block}:host([open]):host([group-content-with-header]) .header{border-radius:7px 7px 0 0;padding-bottom:0}:host([open]):host([group-content-with-header]) .content{border-radius:0 0 7px 7px;margin-bottom:14px;background-color:var(--wcs-light)}:host([open]):host([highlight]) .header{background-color:var(--wcs-primary);color:var(--wcs-light)}:host([open]):host([highlight]) .arrow{fill:var(--wcs-light)}:host([open]):host([highlight]):host([group-content-with-header]) .content{background-color:var(--wcs-primary);color:var(--wcs-light)}";const n=class{constructor(e){o(this,e);this.wcsOpenChange=t(this,"wcsOpenChange",7);this.open=false;this.hideActionText=false;this.highlight=false;this.groupContentWithHeader=false}openChange(o){this.wcsOpenChange.emit(o)}async close(){this.open=false}render(){return e(s,null,e("button",{"aria-expanded":this.open?"true":"false","aria-controls":"content",class:"header",onClick:()=>this.open=!this.open},e("slot",{name:"header"}),e("span",{class:"header-action"},!this.hideActionText&&e("span",null,this.open?"Fermez":"Ouvrez"),e(r,{up:this.open}))),e("div",{class:"content",id:"content"},e("slot",{name:"content"})))}static get watchers(){return{open:["openChange"]}}};n.style=a;export{n as wcs_accordion_panel};
+//# sourceMappingURL=p-c38adf4b.entry.js.map

package/dist/wcs/{p-2185bf8b.entry.js → p-c6a8c6f9.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,g as i}from"./p-a2df3a49.js";import{a as o}from"./p-3dc6b507.js";const a="wcs-nav-item{display:block;cursor:pointer}wcs-nav-item a{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;text-align:center;background-color:transparent;border:none;text-decoration:none;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;height:5rem;font-size:0.75rem;color:var(--wcs-contrast)}wcs-nav-item a:not(.active){border-bottom:1px solid rgba(255, 255, 255, 0.2)}@media (max-width: 1199px){wcs-nav-item a{display:flex;flex:1;height:3.25rem;font-size:0.625rem;color:var(--wcs-text-medium)}}wcs-nav-item a:focus{outline:none}@media (max-width: 1199px){wcs-nav-item:focus-within{outline:2px dashed var(--wcs-primary);outline-offset:1px;border-radius:0.1rem}}@media (min-width: 1200px){wcs-nav-item:focus-within{outline:2px dashed var(--wcs-white);outline-offset:-2px;border-radius:0.1rem}}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:1px solid rgba(255, 255, 255, 0.2);border-bottom:none}}.wcs-nav-item-text{font-weight:500}.active,wcs-nav-item:hover,wcs-nav-item:focus-within{background-blend-mode:multiply;background-color:rgba(0, 0, 0, 0.15);}@media (max-width: 1199px){.active,wcs-nav-item:hover,wcs-nav-item:focus-within{background-color:unset}.active a,wcs-nav-item:hover a,wcs-nav-item:focus-within a{color:var(--wcs-primary)}}";const n=class{constructor(t){e(this,t);this.text="";this.href=undefined}onKeyDown(e){if(o(e)){this.el.click()}}render(){return t("a",{href:this.href,class:"wcs-nav-item-container"},t("slot",null),t("span",{class:"wcs-nav-item-text"},this.text))}get el(){return i(this)}};n.style=a;export{n as wcs_nav_item};
-//# sourceMappingURL=p-2185bf8b.entry.js.map
+import{r as e,h as t,g as i}from"./p-69d1223c.js";import{a as o}from"./p-9cc48d75.js";const a="wcs-nav-item{display:block;cursor:pointer}wcs-nav-item a{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;text-align:center;background-color:transparent;border:none;text-decoration:none;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;height:5rem;font-size:0.75rem;color:var(--wcs-contrast)}wcs-nav-item a:not(.active){border-bottom:1px solid rgba(255, 255, 255, 0.2)}@media (max-width: 1199px){wcs-nav-item a{display:flex;flex:1;height:3.25rem;font-size:0.625rem;color:var(--wcs-text-medium)}}wcs-nav-item a:focus{outline:none}@media (max-width: 1199px){wcs-nav-item:focus-within{outline:2px dashed var(--wcs-primary);outline-offset:1px;border-radius:0.1rem}}@media (min-width: 1200px){wcs-nav-item:focus-within{outline:2px dashed var(--wcs-white);outline-offset:-2px;border-radius:0.1rem}}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:1px solid rgba(255, 255, 255, 0.2);border-bottom:none}}.wcs-nav-item-text{font-weight:500}.active,wcs-nav-item:hover,wcs-nav-item:focus-within{background-blend-mode:multiply;background-color:rgba(0, 0, 0, 0.15);}@media (max-width: 1199px){.active,wcs-nav-item:hover,wcs-nav-item:focus-within{background-color:unset}.active a,wcs-nav-item:hover a,wcs-nav-item:focus-within a{color:var(--wcs-primary)}}";const n=class{constructor(t){e(this,t);this.text="";this.href=undefined}onKeyDown(e){if(o(e)){this.el.click()}}render(){return t("a",{href:this.href,class:"wcs-nav-item-container"},t("slot",null),t("span",{class:"wcs-nav-item-text"},this.text))}get el(){return i(this)}};n.style=a;export{n as wcs_nav_item};
+//# sourceMappingURL=p-c6a8c6f9.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s,H as r,g as e}from"./p-69d1223c.js";import{m as n,n as a,o as h,p as o}from"./p-9cc48d75.js";const d=["s","m","l"];function c(t){return d.includes(t)}const l=":host{--wcs-input-icon-color:var(--wcs-text-medium);--wcs-internal-input-border-radius-left:var(--wcs-input-border-radius-left, var(--wcs-border-radius));--wcs-internal-input-border-radius-right:var(--wcs-input-border-radius-right, var(--wcs-border-radius));--wcs-internal-input-border-width:2px;display:flex;width:100%;height:var(--wcs-input-host-height);box-sizing:border-box;border-radius:var(--wcs-internal-input-border-radius-left) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-left);background-color:var(--wcs-light);border:var(--wcs-internal-input-border-width) solid var(--wcs-light);background-clip:padding-box}:host ::placeholder{font-weight:400;font-style:italic}:host input{overflow:hidden;min-height:var(--wcs-size-xs);width:100%;background-color:transparent;font-family:var(--wcs-font-sans-serif);color:var(--wcs-primary);font-weight:var(--wcs-font-weight-form-value) !important;border:none;padding:0 calc(var(--wcs-padding) - var(--wcs-internal-input-border-width));font-size:var(--wcs-input-font-size, 1rem);line-height:1.5}:host input:focus{box-shadow:none;outline:0}:host wcs-mat-icon{position:relative;margin-left:8px;margin-right:-8px}:host .toggle_password{cursor:pointer;margin-left:-8px;margin-right:8px}:host .prefix,:host .suffix{color:var(--wcs-white);display:flex;white-space:nowrap;align-items:center;font-size:var(--wcs-input-font-size, 1rem);padding:0 calc(var(--wcs-padding) / 2);font-weight:var(--wcs-font-weight-form-value) !important;background-color:var(--wcs-text-disabled)}:host .prefix{border-radius:var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left);margin:calc(-1 * var(--wcs-internal-input-border-width)) 0 calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width));border-left:solid var(--wcs-internal-input-border-width) transparent;border-top:solid var(--wcs-internal-input-border-width) transparent;border-bottom:solid var(--wcs-internal-input-border-width) transparent}:host .suffix{border-radius:0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0;margin:calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width)) 0px;border-right:solid var(--wcs-internal-input-border-width) transparent;border-top:solid var(--wcs-internal-input-border-width) transparent;border-bottom:solid var(--wcs-internal-input-border-width) transparent}:host([size=l]){--wcs-input-host-height:var(--wcs-size-l);--wcs-input-font-size:1.0625rem}:host([size=m]){--wcs-input-host-height:var(--wcs-size-m);--wcs-input-font-size:1rem}:host([size=s]){--wcs-input-host-height:var(--wcs-size-s);--wcs-input-font-size:0.9375rem}:host([state=error]){border-color:var(--wcs-red) !important}:host([data-has-prefix]) input{padding-left:calc(var(--wcs-padding) / 2)}:host([data-has-suffix]) input{padding-left:calc(var(--wcs-padding) / 2)}:host([disabled]) input{color:var(--wcs-text-disabled);cursor:not-allowed}:host([disabled]) .prefix,:host([disabled]) .suffix{color:var(--wcs-light)}:host(:focus-within){border:dashed var(--wcs-internal-input-border-width) var(--wcs-primary)}:host(:focus-within) .prefix{border-left:dashed var(--wcs-internal-input-border-width) var(--wcs-primary);border-top:dashed var(--wcs-internal-input-border-width) var(--wcs-primary);border-bottom:dashed var(--wcs-internal-input-border-width) var(--wcs-primary)}:host(:focus-within) .suffix{border-right:dashed var(--wcs-internal-input-border-width) var(--wcs-primary);border-top:dashed var(--wcs-internal-input-border-width) var(--wcs-primary);border-bottom:dashed var(--wcs-internal-input-border-width) var(--wcs-primary)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-primary)}";const u=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-${p++}`;this.didBlurAfterEdit=false;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=>{this.hasFocus=false;this.focusChanged();if(this.fireFocusEvents){this.wcsBlur.emit(t)}};this.onFocus=t=>{this.hasFocus=true;this.focusChanged();if(this.fireFocusEvents){this.wcsFocus.emit(t)}};this.onKeydown=t=>{if(this.shouldClearOnEdit()){if(this.didBlurAfterEdit&&this.hasValue()&&t.key!=="Enter"){this.clearTextInput()}this.didBlurAfterEdit=false}};this.clearTextInput=t=>{if(this.clearInput&&!this.readonly&&!this.disabled&&t){t.preventDefault();t.stopPropagation();this.setFocus()}this.value="";if(this.nativeInput){this.nativeInput.value=""}};this.fireFocusEvents=true;this.hasFocus=false;this.passwordReveal=false;this.accept=undefined;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.clearInput=false;this.clearOnEdit=undefined;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.wcsChange=n(this.wcsChange,this.debounce)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},a(this.el)),h(this.el,["tabindex","title"]));if(!c(this.size)){console.error(`Invalid size value for wcs-input : "${this.size}". Must be one of "${d.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 setFocus(){if(this.nativeInput){this.nativeInput.focus()}}async setBlur(){if(this.nativeInput){this.nativeInput.blur()}}getInputElement(){return Promise.resolve(this.nativeInput)}async setAriaAttribute(t,i){if(this.nativeInput){this.nativeInput.setAttribute(t,i)}}shouldClearOnEdit(){const{type:t,clearOnEdit:i}=this;return i===undefined?t==="password":i}getValueAsString(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}focusChanged(){if(!this.hasFocus&&this.shouldClearOnEdit()&&this.hasValue()){this.didBlurAfterEdit=true}}hasValue(){return this.getValueAsString().length>0}passwordRevealIconClick(){this.passwordReveal=!this.passwordReveal}onPasswordRevealChange(){this.iconPassword=this.passwordReveal?"visibility_off":"visibility"}render(){const t=this.getValueAsString();const i=this.inputId+"-lbl";const e=o(this.el);if(e){e.id=i}return s(r,{"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({class:"native-input",ref:t=>this.nativeInput=t,"aria-labelledby":e?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,onKeyDown:this.onKeydown},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 e(this)}static get watchers(){return{debounce:["debounceChanged"],passwordReveal:["onPasswordRevealChange"]}}};let p=0;u.style=l;export{u as wcs_input};
+//# sourceMappingURL=p-c9478849.entry.js.map

package/dist/wcs/p-c9478849.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["WcsInputSizeValues","isWcsInputSize","size","includes","inputCss","Input","this","inputId","inputIds","didBlurAfterEdit","inheritedAttributes","iconPassword","onInput","ev","input","target","value","wcsInput","emit","onChange","_","wcsChange","nativeInput","onBlur","hasFocus","focusChanged","fireFocusEvents","wcsBlur","onFocus","wcsFocus","onKeydown","shouldClearOnEdit","hasValue","key","clearTextInput","clearInput","readonly","disabled","preventDefault","stopPropagation","setFocus","debounceChanged","debounceEvent","debounce","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","console","error","join","connectedCallback","document","dispatchEvent","CustomEvent","detail","disconnectedCallback","async","focus","blur","getInputElement","Promise","resolve","attr","setAttribute","type","clearOnEdit","undefined","getValueAsString","toString","length","passwordRevealIconClick","passwordReveal","onPasswordRevealChange","render","labelId","label","findItemLabel","id","h","Host","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","required","spellcheck","step","onKeyDown","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\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 interface InputChangeEventDetail {\n    value: string | undefined | null;\n}\n","@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-input-icon-color: var(--wcs-text-medium);\n    --wcs-internal-input-border-radius-left: var(--wcs-input-border-radius-left, var(--wcs-border-radius));\n    --wcs-internal-input-border-radius-right: var(--wcs-input-border-radius-right, var(--wcs-border-radius));\n    --wcs-internal-input-border-width: 2px;\n    display: flex;\n    width: 100%;\n    height: var(--wcs-input-host-height);\n    box-sizing: border-box;\n    border-radius: var(--wcs-internal-input-border-radius-left) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-left);\n    background-color: var(--wcs-light);\n    border: var(--wcs-internal-input-border-width) solid var(--wcs-light);\n    background-clip: padding-box;\n\n    ::placeholder {\n        font-weight: 400;\n        font-style: italic;\n    }\n\n    input {\n        overflow: hidden;\n        min-height: var(--wcs-size-xs);\n        width: 100%;\n        background-color: transparent;\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-primary);\n        font-weight: var(--wcs-font-weight-form-value) !important;\n        border: none;\n        padding: 0 calc(var(--wcs-padding) - var(--wcs-internal-input-border-width));\n        font-size: var(--wcs-input-font-size, 1rem);\n        line-height: 1.5;\n    }\n\n    input:focus {\n        box-shadow: none;\n        outline: 0;\n    }\n\n    wcs-mat-icon {\n        position: relative;\n        margin-left: 8px;\n        margin-right: -8px;\n    }\n\n    .toggle_password {\n        cursor: pointer;\n        margin-left: -8px;\n        margin-right: 8px;\n    }\n\n\n    .prefix, .suffix {\n        color: var(--wcs-white);\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-padding) / 2);\n        font-weight: var(--wcs-font-weight-form-value) !important;\n        background-color: var(--wcs-text-disabled);\n    }\n\n    .prefix {\n        border-radius: var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left);\n        margin: calc(-1 * var(--wcs-internal-input-border-width)) 0 calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width));\n        border-left: solid var(--wcs-internal-input-border-width) transparent;\n        border-top: solid var(--wcs-internal-input-border-width) transparent;\n        border-bottom: solid var(--wcs-internal-input-border-width) transparent;\n    }\n\n    .suffix {\n        border-radius: 0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0;\n        margin: calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width)) 0px;\n        border-right: solid var(--wcs-internal-input-border-width) transparent;\n        border-top: solid var(--wcs-internal-input-border-width) transparent;\n        border-bottom: solid var(--wcs-internal-input-border-width) transparent;\n    }\n}\n\n:host([size=l]) {\n    --wcs-input-host-height: var(--wcs-size-l);\n    --wcs-input-font-size: 1.0625rem;\n}\n\n:host([size=m]) { // Default\n    --wcs-input-host-height: var(--wcs-size-m);\n    --wcs-input-font-size: 1rem;\n}\n\n:host([size=s]) {\n    --wcs-input-host-height: var(--wcs-size-s);\n    --wcs-input-font-size: 0.9375rem;\n}\n\n:host([state=error]) {\n    border-color: var(--wcs-red) !important;\n}\n\n:host([data-has-prefix]) {\n    input {\n        padding-left: calc(var(--wcs-padding) / 2);\n    }\n}\n\n:host([data-has-suffix]) {\n    input {\n        padding-left: calc(var(--wcs-padding) / 2);\n    }\n}\n\n:host([disabled]) {\n    input {\n        color: var(--wcs-text-disabled);\n        cursor: not-allowed;\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-light);\n    }\n}\n\n:host(:focus-within) {\n    border: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n\n    .prefix {\n        border-left: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-top: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-bottom: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n    }\n\n    .suffix {\n        border-right: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-top: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-bottom: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-primary);\n    }\n}\n","import {\n    Build, Component,\n    ComponentInterface, Element, Event, EventEmitter, h, Host, Method, Prop,\n    State, Watch\n} from '@stencil/core';\nimport { debounceEvent, findItemLabel, inheritAriaAttributes, inheritAttributes } from '../../utils/helpers';\nimport {\n    AutocompleteTypes, InputChangeEventDetail, isWcsInputSize, TextFieldTypes, WcsInputSize, WcsInputSizeValues\n} from './input-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\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 *\n * <details>\n *     <summary>Accessibility guidelines 💡</summary>\n *     > - Provide a `<wcs-label>` next to the input\n *     > - Use the `disabled` prop to add the HTML `disabled` attribute to the `input`\n *     > - Use the `readonly` prop to add the HTML `readonly` attribute to the `input`\n *     > - Use the `autofocus` prop to add the HTML `autofocus` attribute to the `input`. Use it if you want your input focus\n *     automatically when the page load\n *     > - Adapt the `type` to lets user enter information more easily (_ex: `type=\"number\"` for an input which only accept numbers entry_)\n * </details>\n */\n@Component({\n    tag: 'wcs-input',\n    styleUrl: 'input.scss',\n    shadow: {delegatesFocus: true},\n})\nexport class Input implements ComponentInterface, MutableAriaAttribute {\n    private nativeInput?: HTMLInputElement;\n    private inputId = `wcs-input-${inputIds++}`;\n    private didBlurAfterEdit = false;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private iconPassword = \"visibility\";\n\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 hasFocus = false;\n\n    @State() private passwordReveal = false;\n\n    @Element() private el!: HTMLElement;\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: 'on' | 'off' = '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     * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n     */\n    @Prop() clearInput = false;\n\n    /**\n     * If `true`, the value will be cleared after focus upon edit.\n     * Defaults to `true` when `type` is `\"password\"`, `false` for all other types.\n     */\n    @Prop() clearOnEdit?: boolean;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsChange` event after each keystroke.\n     * This also impacts form bindings such as `ngModel` or `v-model`.\n     */\n    @Prop() debounce = 0;\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    @Watch('debounce')\n    protected debounceChanged() {\n        this.wcsChange = debounceEvent(this.wcsChange, this.debounce);\n    }\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     * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n     * `\"previous\"`, `\"search\"`, and `\"send\"`.\n     */\n    @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\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     * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n     * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n     */\n    @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\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: 'initial' | 'error' = '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, ['tabindex', 'title'])\n        };\n\n        if (!isWcsInputSize(this.size)) {\n            console.error(`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     * @deprecated use the native focus method instead\n     * Sets focus on the native `input` in `wcs-input`.\n     */\n    @Method()\n    async setFocus() {\n        if (this.nativeInput) {\n            this.nativeInput.focus();\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) {\n        if (this.nativeInput) {\n            this.nativeInput.setAttribute(attr, value);\n        }\n    }\n\n    private shouldClearOnEdit() {\n        const {type, clearOnEdit} = this;\n        return (clearOnEdit === undefined)\n            ? type === 'password'\n            : clearOnEdit;\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        this.hasFocus = false;\n        this.focusChanged();\n\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    private onFocus = (ev: FocusEvent) => {\n        this.hasFocus = true;\n        this.focusChanged();\n\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private onKeydown = (ev: KeyboardEvent) => {\n        if (this.shouldClearOnEdit()) {\n            // Did the input value change after it was blurred and edited?\n            // Do not clear if user is hitting Enter to submit form\n            if (this.didBlurAfterEdit && this.hasValue() && ev.key !== 'Enter') {\n                // Clear the input\n                this.clearTextInput();\n            }\n\n            // Reset the flag\n            this.didBlurAfterEdit = false;\n        }\n    }\n\n    private clearTextInput = (ev?: Event) => {\n        if (this.clearInput && !this.readonly && !this.disabled && ev) {\n            ev.preventDefault();\n            ev.stopPropagation();\n\n            // Attempt to focus input again after pressing clear button\n            this.setFocus();\n        }\n\n        this.value = '';\n\n        /**\n         * This is needed for clearOnEdit\n         * Otherwise the value will not be cleared\n         * if user is inside the input\n         */\n        if (this.nativeInput) {\n            this.nativeInput.value = '';\n        }\n    }\n\n    private focusChanged() {\n        // If clearOnEdit is enabled and the input blurred but has a value, set a flag\n        if (!this.hasFocus && this.shouldClearOnEdit() && this.hasValue()) {\n            this.didBlurAfterEdit = true;\n        }\n    }\n\n    private hasValue(): boolean {\n        return this.getValueAsString().length > 0;\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                    onKeyDown={this.onKeydown}\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-ce3ef5d0.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,H as s,g as i}from"./p-69d1223c.js";import{S as r}from"./p-24611014.js";const a=":host{box-sizing:border-box}::slotted(select){box-sizing:border-box;-moz-appearance:none !important;-webkit-appearance:none !important;appearance:none !important;--wcs-select-native-ligther-percentage:40;--wcs-select-native-border-radius:var(--wcs-border-radius);--wcs-select-native-background-color:var(--wcs-light);--wcs-select-native-placeholder-color:var(--wcs-text-medium);--wcs-select-native-value-color:var(--wcs-primary);--wcs-select-native-border-color:transparent;--wcs-select-native-overlay-max-height:360px;--wcs-select-native-border-width:1px;background-color:var(--wcs-select-native-background-color);color:var(--wcs-select-native-color);border-radius:var(--wcs-border-radius);border:none;outline:none;user-select:none;cursor:pointer;line-height:1.5;font-size:1rem;max-width:100%;flex-grow:1;padding-right:calc(var(--wcs-base-margin) * 2 + 24px);padding-left:calc(var(--wcs-base-margin) * 2)}::slotted(select:disabled){cursor:not-allowed;color:var(--wcs-text-disabled)}:host([data-disabled]) .select-wrapper .arrow-container .arrow{fill:var(--wcs-text-medium)}:host([data-size=m]) ::slotted(select){height:var(--wcs-size-m)}:host([data-size=l]) ::slotted(select){height:var(--wcs-size-l)}::slotted(select:focus-visible){outline:2px dashed var(--wcs-primary);outline-offset:0;border-radius:var(--wcs-select-border-radius);border-radius:var(--wcs-select-native-border-radius)}.select-wrapper{position:relative;display:flex;flex-wrap:nowrap}svg{flex-shrink:0}.arrow{fill:var(--wcs-primary)}.arrow-container{pointer-events:none;display:flex;align-items:center;vertical-align:center;position:absolute;top:0;bottom:0;right:calc(var(--wcs-padding) - 1px);margin:auto 0}";const o=class{constructor(t){e(this,t);this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST=["disabled"];this.size="m";this.expanded=false;this.disabled=undefined}async setAriaAttribute(e,t){this.selectElement.setAttribute(e,t)}componentWillLoad(){this.selectElement=this.el.querySelector("select");if(!this.selectElement)throw new Error("wcs-native-select must be used with a native slotted select, please refer to the documentation.");this.onSelectedOptionChange();this.selectElement.addEventListener("change",(()=>{this.onSelectedOptionChange()}));this.observer=new MutationObserver((e=>{const t=e.filter((e=>this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(e.attributeName))).length>0;if(t){this.updateHostAttributeWithSlottedSelect()}if(e.filter((e=>e.attributeName==="class")).length>0){this._updateStyles()}}));this.updateHostAttributeWithSlottedSelect();this.observer.observe(this.selectElement,{attributes:true})}onSelectedOptionChange(){this._updateStyles()}_updateStyles(){if(this.isPlaceholderOptionSelected()){this.applyPlaceholderStylesOnNativeSlottedSelectElement()}else{this.applySelectedOptionStylesOnNativeSlottedSelectElement()}}isPlaceholderOptionSelected(){var e;return((e=Array.from(this.selectElement.options).filter((e=>e.selected))[0])===null||e===void 0?void 0:e.disabled)==true}applySelectedOptionStylesOnNativeSlottedSelectElement(){this.selectElement.style.color="var(--wcs-primary)";this.selectElement.style.fontStyle="normal";this.selectElement.style.fontWeight="500";Array.from(this.selectElement.options).forEach((e=>{e.style.fontStyle="normal";if(!e.disabled){e.style.color="black"}}))}applyPlaceholderStylesOnNativeSlottedSelectElement(){this.selectElement.style.color="var(--wcs-text-medium)";this.selectElement.style.fontWeight="400";this.selectElement.style.fontStyle="italic";Array.from(this.selectElement.options).forEach((e=>{e.style.fontStyle="normal";if(!e.disabled){e.style.color="black"}}))}updateHostAttributeWithSlottedSelect(){var e;this.disabled=(e=this.selectElement)===null||e===void 0?void 0:e.hasAttribute("disabled")}disconnectedCallback(){var e,t;(e=this.observer)===null||e===void 0?void 0:e.disconnect();(t=this.selectElement)===null||t===void 0?void 0:t.removeEventListener("change",(()=>{this.onSelectedOptionChange()}))}async updateStyles(){this._updateStyles()}render(){return t(s,{class:`${this.expanded?"expanded":""}`,"data-disabled":this.disabled,"data-size":this.size},t("div",{class:"select-wrapper"},t("slot",null),t("div",{class:"arrow-container"},t(r,{up:this.expanded}))))}get el(){return i(this)}};o.style=a;export{o as wcs_native_select};
+//# sourceMappingURL=p-ce3ef5d0.entry.js.map

package/dist/wcs/p-ce3ef5d0.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nativeSelectCss","NativeSelect","this","SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST","async","attr","value","selectElement","setAttribute","componentWillLoad","el","querySelector","Error","onSelectedOptionChange","addEventListener","observer","MutationObserver","mutations","hasSpiedAttrMutation","filter","m","includes","attributeName","length","updateHostAttributeWithSlottedSelect","_updateStyles","observe","attributes","isPlaceholderOptionSelected","applyPlaceholderStylesOnNativeSlottedSelectElement","applySelectedOptionStylesOnNativeSlottedSelectElement","_a","Array","from","options","o","selected","disabled","style","color","fontStyle","fontWeight","forEach","option","hasAttribute","disconnectedCallback","disconnect","_b","removeEventListener","render","h","Host","class","expanded","size","SelectArrow","up"],"sources":["./src/components/native-select/native-select.scss?tag=wcs-native-select&encapsulation=shadow","./src/components/native-select/native-select.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    box-sizing: border-box;\n}\n\n::slotted(select) {\n    box-sizing: border-box;\n    -moz-appearance:none !important;\n    -webkit-appearance: none !important;\n    appearance: none !important;\n\n    --wcs-select-native-ligther-percentage: 40;\n    --wcs-select-native-border-radius: var(--wcs-border-radius);\n    --wcs-select-native-background-color: var(--wcs-light);\n    --wcs-select-native-placeholder-color: var(--wcs-text-medium);\n    --wcs-select-native-value-color: var(--wcs-primary);\n    --wcs-select-native-border-color: transparent;\n    --wcs-select-native-overlay-max-height: 360px;\n    --wcs-select-native-border-width: 1px;\n\n    background-color: var(--wcs-select-native-background-color);\n\n    color: var(--wcs-select-native-color);\n\n    border-radius: var(--wcs-border-radius);\n    border: none;\n\n    outline: none;\n    user-select: none;\n    cursor: pointer;\n    line-height: 1.5;\n    font-size: 1rem;\n\n    max-width: 100%;\n    flex-grow: 1;\n    padding-right: calc((var(--wcs-base-margin) * 2) + 24px);\n    padding-left: calc(var(--wcs-base-margin) * 2);\n}\n\n::slotted(select:disabled) {\n    cursor: not-allowed;\n    color: var(--wcs-text-disabled);\n}\n\n:host([data-disabled]) {\n    .select-wrapper {\n        .arrow-container {\n            .arrow {\n                fill: var(--wcs-text-medium);\n            }\n        }\n    }\n}\n\n:host([data-size=m])  {\n    ::slotted(select) {\n        height: var(--wcs-size-m);\n    }\n}\n\n:host([data-size=l]) {\n    ::slotted(select) {\n        height: var(--wcs-size-l);\n    }\n}\n\n::slotted(select:focus-visible) {\n    @include focus-outline($border-radius: var(--wcs-select-border-radius), $outline-offset: 0);\n    border-radius: var(--wcs-select-native-border-radius);\n}\n\n.select-wrapper {\n    position: relative;\n\n    display: flex;\n    flex-wrap: nowrap;\n}\n\n// So the arrow on the right doesn't shrink when text overflows.\nsvg {\n    flex-shrink: 0;\n}\n\n.arrow {\n    fill: var(--wcs-primary);\n}\n\n.arrow-container {\n    pointer-events: none;\n    display: flex;\n    align-items: center;\n    vertical-align: center;\n\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: calc(var(--wcs-padding) - 1px);\n    margin: auto 0;\n}\n","import { Component, h, ComponentInterface, State, Prop, Host, Element, Method } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsSize } from \"../../shared-types\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nexport type WcsNativeSelectSize = Extract<WcsSize, 'l' | 'm'>; // todo: move into common file with custom select\n\n/**\n * The `wcs-native-select` component is designed to accept a native `<select>` element as a slotted child. This choice\n * allows developers to bind the `<select>` element using the framework of their choice, without the need to re-expose all the\n * properties of the `<select>` and `<option>` elements in this component.\n *\n * The component wraps the native `<select>` element and provides custom styles and behavior, while preserving the native\n * functionality and accessibility.\n *\n * ### ✅ Guidance\n *\n * - To have a placeholder, you must have an option as child which has `selected` attribute and `disabled`\n * attribute. You can add the `hidden` attribute to don't show the placeholder option in the options overlay.\n *\n * ### Example usage\n *\n * ```html\n * <wcs-native-select>\n *   <select>\n *     <option value=\"option1\">Option 1</option>\n *     <option value=\"option2\">Option 2</option>\n *     <option value=\"option3\">Option 3</option>\n *   </select>\n * </wcs-native-select>\n * ```\n *\n * ### Note\n * - We did not find a way to detect when the select is reset, if you want to apply the placeholder style when the\n * select is reset, you have to call the `updateStyles()` method manually.\n * - It is strongly recommended to use select-native when you don't have to support the multi-selection feature\n */\n@Component({\n    tag: 'wcs-native-select',\n    styleUrl: 'native-select.scss',\n    shadow: true\n})\nexport class NativeSelect implements ComponentInterface, MutableAriaAttribute {\n    /**\n     * The `size` property controls the size of the slotted `select` element by adjusting its padding.\n     * There are two possible size options:\n     * - 'm': medium size\n     * - 'l': large size\n     *\n     * The default value is 'm'.\n     */\n    @Prop({reflect: true}) size: WcsNativeSelectSize = 'm';\n    @Element() private el!: HTMLWcsNativeSelectElement;\n\n    @State() private expanded: boolean = false;\n\n    @State() private disabled: boolean;\n    private selectElement: HTMLSelectElement;\n\n    private observer: MutationObserver;\n    private readonly SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST = ['disabled'];\n\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string) {\n        this.selectElement.setAttribute(attr, value);\n    }\n\n\n    componentWillLoad() {\n        this.selectElement = this.el.querySelector('select');\n        if (!this.selectElement) throw new Error(\"wcs-native-select must be used with a native slotted select, please refer to the documentation.\");\n\n        this.onSelectedOptionChange();\n\n        /**\n         * We use an event listener to apply the default style to the select when user chose an active option\n         */\n        this.selectElement.addEventListener('change', () => {\n            this.onSelectedOptionChange();\n        });\n\n        this.observer = new MutationObserver(mutations => {\n            const hasSpiedAttrMutation = mutations.filter(m => this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(m.attributeName)).length > 0;\n            if (hasSpiedAttrMutation) {\n                this.updateHostAttributeWithSlottedSelect();\n            }\n\n            // A workaround to detect when the select is reset by using a class change on the select element. For example\n            // angular add/remove ng-pristine and ng-dirty classes on the form controls when the form is reset.\n            // Not the best solution but it works since we cannot detect the reset event on the native select element.\n            if (mutations.filter(m => m.attributeName === 'class').length > 0) {\n                this._updateStyles();\n            }\n        });\n        this.updateHostAttributeWithSlottedSelect();\n        this.observer.observe(this.selectElement, {attributes: true});\n    }\n\n    private onSelectedOptionChange(): void {\n        this._updateStyles();\n    }\n\n    private _updateStyles() {\n        if (this.isPlaceholderOptionSelected()) {\n            this.applyPlaceholderStylesOnNativeSlottedSelectElement();\n        } else {\n            this.applySelectedOptionStylesOnNativeSlottedSelectElement();\n        }\n    }\n\n    private isPlaceholderOptionSelected() {\n        return Array.from(this.selectElement.options).filter(o => o.selected)[0]?.disabled == true;\n    }\n\n    /**\n     * This method should always unset all styles modified by the `applyPlaceholderStylesOnNativeSlottedSelectElement()`\n     * @private\n     */\n    private applySelectedOptionStylesOnNativeSlottedSelectElement() {\n        this.selectElement.style.color = \"var(--wcs-primary)\";\n        this.selectElement.style.fontStyle = 'normal';\n        this.selectElement.style.fontWeight = '500';\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = 'normal';\n            if (!option.disabled) {\n                option.style.color = \"black\";\n            }\n        });\n    }\n\n    /**\n     * This method apply styles when the placeholder is shown.\n     *\n     * We use javascript because we cannot achieve that behaviour in pure css when the native select is not required\n     * @private\n     */\n    private applyPlaceholderStylesOnNativeSlottedSelectElement() {\n        this.selectElement.style.color = \"var(--wcs-text-medium)\";\n        this.selectElement.style.fontWeight = '400';\n        this.selectElement.style.fontStyle = 'italic';\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = 'normal';\n            if (!option.disabled) {\n                option.style.color = \"black\";\n            }\n        });\n    }\n\n    private updateHostAttributeWithSlottedSelect() {\n        this.disabled = this.selectElement?.hasAttribute('disabled');\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n        this.selectElement?.removeEventListener(\"change\", () => {\n            this.onSelectedOptionChange();\n        });\n    }\n\n    /**\n     * Use this method to force the component to update its styles. It can be useful when the select is reset (with a placeholder).\n     */\n    @Method()\n    async updateStyles() {\n        // Note : we try to automatically detect if the select is reset with the onreset event and with a mutation\n        // observer on the select element. But it seems that the onreset event is not fired when the select is reset.\n        // and the mutation observer is not fired when the select is reset with the reset() method on the form.\n        // So we have to let the user call this method manually when he reset the select.\n        this._updateStyles();\n    }\n\n    render() {\n        return (\n            <Host class={`${this.expanded ? 'expanded' : ''}`} data-disabled={this.disabled} data-size={this.size}>\n                <div class=\"select-wrapper\">\n                    <slot></slot>\n                    <div class=\"arrow-container\">\n                        <SelectArrow up={this.expanded}></SelectArrow>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAkB,+oD,MC0CXC,EAAY,M,yBAkBJC,KAAAC,uCAAyC,CAAC,Y,UATR,I,cAGd,M,wBAUrCC,uBAAuBC,EAAyBC,GAC5CJ,KAAKK,cAAcC,aAAaH,EAAMC,E,CAI1CG,oBACIP,KAAKK,cAAgBL,KAAKQ,GAAGC,cAAc,UAC3C,IAAKT,KAAKK,cAAe,MAAM,IAAIK,MAAM,mGAEzCV,KAAKW,yBAKLX,KAAKK,cAAcO,iBAAiB,UAAU,KAC1CZ,KAAKW,wBAAwB,IAGjCX,KAAKa,SAAW,IAAIC,kBAAiBC,IACjC,MAAMC,EAAuBD,EAAUE,QAAOC,GAAKlB,KAAKC,uCAAuCkB,SAASD,EAAEE,iBAAgBC,OAAS,EACnI,GAAIL,EAAsB,CACtBhB,KAAKsB,sC,CAMT,GAAIP,EAAUE,QAAOC,GAAKA,EAAEE,gBAAkB,UAASC,OAAS,EAAG,CAC/DrB,KAAKuB,e,KAGbvB,KAAKsB,uCACLtB,KAAKa,SAASW,QAAQxB,KAAKK,cAAe,CAACoB,WAAY,M,CAGnDd,yBACJX,KAAKuB,e,CAGDA,gBACJ,GAAIvB,KAAK0B,8BAA+B,CACpC1B,KAAK2B,oD,KACF,CACH3B,KAAK4B,uD,EAILF,8B,MACJ,QAAOG,EAAAC,MAAMC,KAAK/B,KAAKK,cAAc2B,SAASf,QAAOgB,GAAKA,EAAEC,WAAU,MAAE,MAAAL,SAAA,SAAAA,EAAEM,WAAY,I,CAOlFP,wDACJ5B,KAAKK,cAAc+B,MAAMC,MAAQ,qBACjCrC,KAAKK,cAAc+B,MAAME,UAAY,SACrCtC,KAAKK,cAAc+B,MAAMG,WAAa,MACtCT,MAAMC,KAAK/B,KAAKK,cAAc2B,SAASQ,SAAQC,IAC3CA,EAAOL,MAAME,UAAY,SACzB,IAAKG,EAAON,SAAU,CAClBM,EAAOL,MAAMC,MAAQ,O,KAWzBV,qDACJ3B,KAAKK,cAAc+B,MAAMC,MAAQ,yBACjCrC,KAAKK,cAAc+B,MAAMG,WAAa,MACtCvC,KAAKK,cAAc+B,MAAME,UAAY,SACrCR,MAAMC,KAAK/B,KAAKK,cAAc2B,SAASQ,SAAQC,IAC3CA,EAAOL,MAAME,UAAY,SACzB,IAAKG,EAAON,SAAU,CAClBM,EAAOL,MAAMC,MAAQ,O,KAKzBf,uC,MACJtB,KAAKmC,UAAWN,EAAA7B,KAAKK,iBAAa,MAAAwB,SAAA,SAAAA,EAAEa,aAAa,W,CAGrDC,uB,SACId,EAAA7B,KAAKa,YAAQ,MAAAgB,SAAA,SAAAA,EAAEe,cACfC,EAAA7C,KAAKK,iBAAa,MAAAwC,SAAA,SAAAA,EAAEC,oBAAoB,UAAU,KAC9C9C,KAAKW,wBAAwB,G,CAQrCT,qBAKIF,KAAKuB,e,CAGTwB,SACI,OACIC,EAACC,EAAI,CAACC,MAAO,GAAGlD,KAAKmD,SAAW,WAAa,KAAI,gBAAiBnD,KAAKmC,SAAQ,YAAanC,KAAKoD,MAC7FJ,EAAA,OAAKE,MAAM,kBACPF,EAAA,aACAA,EAAA,OAAKE,MAAM,mBACPF,EAACK,EAAW,CAACC,GAAItD,KAAKmD,a"}

package/dist/wcs/{p-54e29233.entry.js → p-ce40b012.entry.js}

@@ -1,2 +1,2 @@
-import{r as l,h as t,H as a}from"./p-a2df3a49.js";const e=':host{font-weight:500;margin-bottom:8px}:host([required])>label::after{font-weight:500;color:var(--wcs-red);content:" *"}label{display:inline-block}label ::slotted(wcs-mat-icon){display:inline;vertical-align:middle;margin-left:calc(var(--wcs-base-margin) / 2)}';const s=class{constructor(t){l(this,t);this.required=false}render(){return t(a,{slot:"label"},t("label",null,t("slot",null)))}};s.style=e;export{s as wcs_label};
-//# sourceMappingURL=p-54e29233.entry.js.map
+import{r as l,h as t,H as e}from"./p-69d1223c.js";const a=':host{font-weight:500;margin-bottom:8px}:host([required])>label::after{font-weight:500;color:var(--wcs-red);content:" *"}label{display:inline-block}label ::slotted(wcs-mat-icon){display:inline;vertical-align:middle;margin-left:calc(var(--wcs-base-margin) / 2)}';const s=class{constructor(t){l(this,t);this.required=false}render(){return t(e,{slot:"label"},t("label",null,t("slot",null)))}};s.style=a;export{s as wcs_label};
+//# sourceMappingURL=p-ce40b012.entry.js.map

package/dist/wcs/{p-54e29233.entry.js.map → p-ce40b012.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["labelCss","Label","render","h","Host","slot"],"sources":["./src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","./src/components/label/label.tsx"],"sourcesContent":[":host {\n    font-weight: 500;\n    margin-bottom: 8px;\n}\n\n:host([required]) > label::after {\n    font-weight: 500;\n    color: var(--wcs-red);\n    content: ' *';\n}\n\nlabel {\n    display: inline-block;\n\n    // Add margin before tooltip icon\n    ::slotted(wcs-mat-icon) {\n        display: inline;\n        vertical-align: middle;\n        margin-left: calc(var(--wcs-base-margin) / 2);\n    }\n}\n","import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'wcs-label',\n    styleUrl: 'label.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface {\n    @Prop({ reflect: true })\n    required = false;\n\n    render() {\n        return (\n            <Host slot=\"label\">\n                <label>\n                    <slot />\n                </label>\n            </Host>\n        );\n    }\n}"],"mappings":"kDAAA,MAAMA,EAAW,uQ,MCOJC,EAAK,M,uCAEH,K,CAEXC,SACI,OACIC,EAACC,EAAI,CAACC,KAAK,SACPF,EAAA,aACIA,EAAA,c"}
+{"version":3,"names":["labelCss","Label","render","h","Host","slot"],"sources":["./src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","./src/components/label/label.tsx"],"sourcesContent":[":host {\n    font-weight: 500;\n    margin-bottom: 8px;\n}\n\n:host([required]) > label::after {\n    font-weight: 500;\n    color: var(--wcs-red);\n    content: ' *';\n}\n\nlabel {\n    display: inline-block;\n\n    // Add margin before tooltip icon\n    ::slotted(wcs-mat-icon) {\n        display: inline;\n        vertical-align: middle;\n        margin-left: calc(var(--wcs-base-margin) / 2);\n    }\n}\n","import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'wcs-label',\n    styleUrl: 'label.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface {\n    @Prop({ reflect: true })\n    required = false;\n\n    render() {\n        return (\n            <Host slot=\"label\">\n                <label>\n                    <slot />\n                </label>\n            </Host>\n        );\n    }\n}\n"],"mappings":"kDAAA,MAAMA,EAAW,uQ,MCOJC,EAAK,M,uCAEH,K,CAEXC,SACI,OACIC,EAACC,EAAI,CAACC,KAAK,SACPF,EAAA,aACIA,EAAA,c"}

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

@@ -0,0 +1,2 @@
+import{r as t,h as s,H as o,g as i}from"./p-69d1223c.js";import{S as e}from"./p-24611014.js";import{i as r,W as a}from"./p-64855188.js";import{g as n,d as p,c as d,b as c}from"./p-9cc48d75.js";import{i as h}from"./p-0ae177cf.js";import{c as l}from"./p-314d3097.js";const w=':host{display:flex}wcs-button{--wcs-button-padding:8px 10px 8px 16px !important;height:fit-content}:host([no-arrow]) wcs-button{--wcs-button-padding:8px 16px 8px 16px !important}:host([size=s][no-arrow]) wcs-button{--wcs-button-padding:var(--wcs-padding-s) var(--wcs-padding-m) !important}:host([size=s]) wcs-button{--wcs-button-padding:var(--wcs-padding-s) calc(6px - var(--wcs-padding-s)) var(--wcs-padding-s) var(--wcs-padding-m) !important}.wcs-button-content-wrapper{display:flex}.popover{display:none;border:1px solid #d7d7d7;border-radius:var(--wcs-border-radius);background-color:var(--wcs-white);z-index:9999}.show{display:block}.container{border-radius:inherit;overflow:hidden;padding:calc(var(--wcs-padding) / 2) 0;background-color:var(--wcs-white)}:host(:not([mode=plain])) svg g path:first-of-type{fill:var(--wcs-primary) !important}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit;border:solid 1px #d7d7d7}#arrow{visibility:hidden;z-index:-1}#arrow::before{visibility:visible;content:"";transform:rotate(45deg)}#is-empty{display:block;width:20ch;padding:0 var(--wcs-padding)}.popover[data-popper-placement^=top]>#arrow{bottom:-5px}.popover[data-popper-placement^=bottom]>#arrow{top:-6px}.popover[data-popper-placement^=left]>#arrow{right:-4px}.popover[data-popper-placement^=right]>#arrow{left:-6px}';const m=class{constructor(s){t(this,s);this.noArrow=false;this.mode="stroked";this.shape="normal";this.size="m";this.disabled=false;this.placement="bottom-end";this.expanded=false}placementChange(){this.popper.setOptions(Object.assign(Object.assign({},this.popper.state.options),{placement:this.placement})).then((t=>this.popper.update()))}componentDidLoad(){if(!r(this.size)){console.error(`Invalid size value for wcs-dropdown : "${this.size}". Must be one of "${a.join(", ")}"`);this.size="m"}const t=this.el.shadowRoot.querySelector("wcs-button");const s=t.shadowRoot.querySelector("button");this.buttonTextColor=window.getComputedStyle(s).color;const o=this.el.shadowRoot.querySelector(".popover");this.popper=l(t,o,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[0,8]}}]});if(!this.noArrow){this.el.shadowRoot.querySelector(".arrow").style.fill=this.buttonTextColor}this.fixForFirefoxBelow63()}fixForFirefoxBelow63(){const t=this.el.querySelectorAll("wcs-dropdown-item");const s=this.el.querySelector(".container");if(t.length>0&&s){t.forEach((t=>{this.el.removeChild(t);s.appendChild(t)}))}}onButtonClick(t){this.expanded=!this.expanded}onWindowClickEvent(t){const s=n(t,this.el);if(this.expanded&&!s){this.expanded=false}}dropdownItemClick(t){this.expanded=false}onKeyDown(t){if(this.expanded&&(p(t)||d(t))){t.preventDefault();const s=Array.from(this.el.querySelectorAll("wcs-dropdown-item"));const o=s.findIndex((t=>h(t)));if(o===-1&&p(t)){this.focusFirstItemIfPresent(s)}else{this.moveFocusedItemByDirection(s,o,p(t)?"down":"up")}}if(this.expanded&&c(t)){this.closeOverlayAndFocusButton()}}focusFirstItemIfPresent(t){if(t[0]){t[0].focus()}}moveFocusedItemByDirection(t,s,o){const i=t[s+(o==="down"?1:-1)];if(i){i.focus()}}closeOverlayAndFocusButton(){this.expanded=!this.expanded;const t=this.el.shadowRoot.querySelector("wcs-button");t.focus()}componentDidRender(){if(this.popper){this.popper.update()}if(!this.noArrow){this.el.shadowRoot.querySelector(".arrow").style.fill=this.buttonTextColor}}render(){return s(o,null,s("wcs-button",{mode:this.mode,shape:this.shape,disabled:this.disabled,size:this.size,onClick:t=>this.onButtonClick(t)},s("div",{class:"wcs-button-content-wrapper"},s("slot",{name:"placeholder"}),this.noArrow?null:s(e,{up:this.expanded}))),s("div",{class:(this.expanded?"show ":"")+"popover"},s("div",{id:"arrow","data-popper-arrow":true}),s("div",{class:"container"},s("slot",{name:"item"},s("span",{id:"is-empty"})))))}static get delegatesFocus(){return true}get el(){return i(this)}static get watchers(){return{placement:["placementChange"]}}};m.style=w;export{m as wcs_dropdown};
+//# sourceMappingURL=p-d6c482fc.entry.js.map

package/dist/wcs/p-d6c482fc.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownCss","Dropdown","placementChange","this","popper","setOptions","Object","assign","state","options","placement","then","_","update","componentDidLoad","isWcsButtonSize","size","console","error","WcsButtonSizeValues","join","wcsButtonElement","el","shadowRoot","querySelector","buttonWrapper","buttonTextColor","window","getComputedStyle","color","popoverDiv","createPopper","modifiers","name","offset","noArrow","style","fill","fixForFirefoxBelow63","items","querySelectorAll","container","length","forEach","i","removeChild","appendChild","onButtonClick","expanded","onWindowClickEvent","event","clickedOnDropdownOrChildren","clickTargetIsElementOrChildren","dropdownItemClick","onKeyDown","evt","isKeydown","isKeyup","preventDefault","Array","from","currentFocusedItemIndex","findIndex","item","isElementFocused","focusFirstItemIfPresent","moveFocusedItemByDirection","isEscapeKey","closeOverlayAndFocusButton","focus","direction","itemToFocus","wcsButton","componentDidRender","render","h","Host","mode","shape","disabled","onClick","$event","class","SelectArrow","up","id"],"sources":["./src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":[":host {\n    display: flex;\n}\n\nwcs-button {\n    --wcs-button-padding: 8px 10px 8px 16px !important;\n    height: fit-content;\n}\n:host([no-arrow]) {\n    wcs-button {\n        --wcs-button-padding: 8px 16px 8px 16px !important;\n    }\n}\n\n:host([size=s][no-arrow]) {\n    wcs-button {\n        --wcs-button-padding: var(--wcs-padding-s) var(--wcs-padding-m) !important;\n    }\n}\n\n:host([size=s]) {\n    wcs-button {\n        --wcs-button-padding: var(--wcs-padding-s) calc(6px - var(--wcs-padding-s)) var(--wcs-padding-s) var(--wcs-padding-m) !important;\n    }\n}\n\n.wcs-button-content-wrapper {\n    display: flex;\n}\n\n.popover {\n    display: none;\n    border: 1px solid #d7d7d7;\n    border-radius: var(--wcs-border-radius);\n    background-color: var(--wcs-white);\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    border-radius: inherit;\n    overflow: hidden;\n    padding: calc(var(--wcs-padding) / 2) 0;\n    background-color: var(--wcs-white);\n}\n\n// FIXME : Workaround to display the SelectArrow in blue when the background is white / transparent\n// Remove this when the SelectArrow has its own tokens and background-contrast handling\n:host(:not([mode=plain])) {\n    svg g path:first-of-type {\n        fill: var(--wcs-primary) !important;\n    }\n}\n\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n    border: solid 1px #d7d7d7;\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-padding);\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 {\n    Component,\n    ComponentInterface, Element,\n    h, Host, Listen, Prop, State, Watch\n} 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 { clickTargetIsElementOrChildren, isEscapeKey, isKeydown, isKeyup } from '../../utils/helpers';\nimport { isElementFocused } from \"../../utils/accessibility\";\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@Component({\n    tag: 'wcs-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Dropdown implements ComponentInterface {\n    @Element() private el: HTMLWcsDropdownElement;\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 buttonTextColor: string;\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    componentDidLoad() {\n        if (!isWcsButtonSize(this.size)) {\n            console.error(`Invalid size value for wcs-dropdown : \"${this.size}\". Must be one of \"${WcsButtonSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n        \n        const wcsButtonElement = this.el.shadowRoot.querySelector('wcs-button');\n        const buttonWrapper = wcsButtonElement.shadowRoot.querySelector('button');\n        this.buttonTextColor = window.getComputedStyle(buttonWrapper).color;\n        const popoverDiv = this.el.shadowRoot.querySelector('.popover') as HTMLElement;\n\n\n        this.popper = createPopper(wcsButtonElement, popoverDiv, {\n            placement: this.placement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n\n        if (!this.noArrow) {\n            (this.el.shadowRoot.querySelector('.arrow') as HTMLElement).style.fill = this.buttonTextColor;\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.expanded = !this.expanded;\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    }\n\n    @Listen('keydown')\n    onKeyDown(evt: KeyboardEvent): void {\n        if (this.expanded && (isKeydown(evt) || isKeyup(evt))) {\n            // If the user presses an arrow key (up or down), the browser is prevented from scrolling through\n            evt.preventDefault();\n            const items = Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n            const currentFocusedItemIndex = items.findIndex(item => isElementFocused(item));\n            // If the dropdown is expended by the user, but no item is focused and the keydown is pressed\n            if (currentFocusedItemIndex === -1 && isKeydown(evt)) {\n                this.focusFirstItemIfPresent(items);\n            } else {\n                this.moveFocusedItemByDirection(items, currentFocusedItemIndex, isKeydown(evt) ? 'down' : 'up');\n            }\n        }\n        if (this.expanded && isEscapeKey(evt)) {\n            this.closeOverlayAndFocusButton();\n        }\n    }\n\n\n    private focusFirstItemIfPresent<T extends HTMLElement>(items: T[]) {\n        if (items[0]) {\n            items[0].focus();\n        }\n    }\n\n    private moveFocusedItemByDirection<T extends HTMLElement>(items: T[], currentFocusedItemIndex: number, direction: 'up' | 'down') {\n        const itemToFocus = items[(currentFocusedItemIndex) + (direction === 'down' ? 1 : -1)];\n        if (itemToFocus) {\n            itemToFocus.focus();\n        }\n    }\n\n    private closeOverlayAndFocusButton() {\n        this.expanded = !this.expanded;\n        const wcsButton = this.el.shadowRoot.querySelector('wcs-button') as HTMLWcsButtonElement;\n        wcsButton.focus();\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n        if (!this.noArrow) {\n            (this.el.shadowRoot.querySelector('.arrow') as HTMLElement).style.fill = this.buttonTextColor;\n        }\n    }\n\n    render() {\n        return (\n            <Host>\n                <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled} size={this.size}\n                            onClick={($event) => this.onButtonClick($event)}>\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                    <div id=\"arrow\" data-popper-arrow/>\n                    <div 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-1e43122f.entry.js → p-d84cee70.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,H as n}from"./p-a2df3a49.js";const a=":host{display:block;width:100%;background-color:var(--wcs-gray);color:white}:host .end{margin-top:calc(2 * var(--wcs-base-margin));width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--wcs-base-margin)}:host .end .end-left,:host .end .end-right{display:flex;flex-wrap:wrap}@media only screen and (max-width: 1024px){:host .end .end-left,:host .end .end-right{flex-direction:column}}:host .end slot[name=end-left]::slotted(a){color:var(--wcs-text-disabled);text-decoration:none;font-size:14px;font-weight:500;margin-right:35px}:host .end slot[name=end-left]::slotted(a:hover){color:var(--wcs-white)}:host .container{margin:0 auto;max-width:var(--wcs-com-content-max-width);display:flex;flex-direction:column;padding:20px}";const s=class{constructor(t){e(this,t)}render(){return t(n,null,t("div",{class:"container"},t("div",null,t("slot",null)),t("div",{class:"end"},t("div",{class:"end-left"},t("slot",{name:"end-left"})),t("div",{class:"end-right"},t("slot",{name:"end-right"})))))}};s.style=a;export{s as wcs_footer};
-//# sourceMappingURL=p-1e43122f.entry.js.map
+import{r as e,h as t,H as n}from"./p-69d1223c.js";const s=":host{display:block;width:100%;background-color:var(--wcs-gray);color:white}:host .end{margin-top:calc(2 * var(--wcs-base-margin));width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--wcs-base-margin)}:host .end .end-left,:host .end .end-right{display:flex;flex-wrap:wrap}@media only screen and (max-width: 1024px){:host .end .end-left,:host .end .end-right{flex-direction:column}}:host .end slot[name=end-left]::slotted(a){color:var(--wcs-text-disabled);text-decoration:none;font-size:14px;font-weight:500;margin-right:35px}:host .end slot[name=end-left]::slotted(a:hover){color:var(--wcs-white)}:host .container{margin:0 auto;max-width:var(--wcs-com-content-max-width);display:flex;flex-direction:column;padding:20px}";const a=class{constructor(t){e(this,t)}render(){return t(n,null,t("div",{class:"container"},t("div",null,t("slot",null)),t("div",{class:"end"},t("div",{class:"end-left"},t("slot",{name:"end-left"})),t("div",{class:"end-right"},t("slot",{name:"end-right"})))))}};a.style=s;export{a as wcs_footer};
+//# sourceMappingURL=p-d84cee70.entry.js.map