wcs-core 7.0.0 → 7.2.0

package/dist/wcs/{p-ca8f3677.entry.js.map → p-53a395a9.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["breadcrumbItemCss","WcsBreadcrumbItemStyle0","BreadcrumbItem","render","h","Host","key","role","this","last","class","ICONS_FONT_CHEVRON_UNICODE"],"sources":["src/components/breadcrumb-item/breadcrumb-item.scss?tag=wcs-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-breadcrumb-item-max-height: var(--wcs-semantic-size-s);\n    --wcs-breadcrumb-item-line-height: var(--wcs-semantic-font-line-height-large);\n    --wcs-breadcrumb-item-font-size: var(--wcs-semantic-font-size-body-3);\n\n    --wcs-breadcrumb-item-icon-color: var(--wcs-semantic-color-foreground-brand);\n    --wcs-breadcrumb-item-icon-font-size: 0.5rem;\n    --wcs-breadcrumb-item-gap: var(--wcs-semantic-spacing-base);\n\n    --wcs-breadcrumb-item-link-color: var(--wcs-semantic-color-text-link-default);\n    --wcs-breadcrumb-item-link-color-hover: var(--wcs-semantic-color-text-link-hover);\n    --wcs-breadcrumb-item-link-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-breadcrumb-item-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-breadcrumb-item-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-breadcrumb-item-active-color: var(--wcs-semantic-color-text-primary);\n\n    display: flex;\n    align-items: baseline;\n    max-height: var(--wcs-breadcrumb-item-max-height);\n    font-size: var(--wcs-breadcrumb-item-font-size);\n    color: var(--wcs-breadcrumb-item-active-color);\n    line-height: var(--wcs-breadcrumb-item-line-height);\n\n    ::slotted(a) {\n        display: block;\n        height: 100%;\n        padding: 1px 2px;\n        font-weight: var(--wcs-breadcrumb-item-link-font-weight);\n        color: var(--wcs-breadcrumb-item-link-color);\n        text-decoration: none;\n        border-radius: var(--wcs-breadcrumb-item-border-width-focus);\n    }\n    ::slotted(a:focus-visible ) {\n        @include focus-outline($outline-color: var(--wcs-breadcrumb-item-border-color-focus), $outline-offset: 0, $border-width: var(--wcs-breadcrumb-item-border-width-focus));\n    }\n    ::slotted(a:hover) {\n        text-decoration: underline;\n        color: var(--wcs-breadcrumb-item-link-color-hover);\n    }\n\n    .item-icon {\n        margin-left: calc(var(--wcs-breadcrumb-item-gap) - 2px);\n        font-family: \"icons\";\n        font-size: var(--wcs-breadcrumb-item-icon-font-size);\n        color: var(--wcs-breadcrumb-item-icon-color);\n    }\n}\n","import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\nimport { ICONS_FONT_CHEVRON_UNICODE } from '../breadcrumb/breadcrumb-constants';\n\n/**\n * The breadcrumb item represents a link inside a breadcrumb.\n * \n * @slot <no-name> Main container slot\n * \n * @cssprop --wcs-breadcrumb-item-max-height - Maximum height of the breadcrumb item\n * @cssprop --wcs-breadcrumb-item-line-height - Line height of the breadcrumb item\n * @cssprop --wcs-breadcrumb-item-font-size - Font size of the breadcrumb item\n * \n * @cssprop --wcs-breadcrumb-item-icon-color - Color of the breadcrumb item icon\n * @cssprop --wcs-breadcrumb-item-icon-font-size - Font size of the breadcrumb item icon\n * \n * @cssprop --wcs-breadcrumb-item-gap - Gap between text and chevron icon\n * @cssprop --wcs-breadcrumb-item-link-color - Color of the breadcrumb item link\n * @cssprop --wcs-breadcrumb-item-link-color-hover - Color of the breadcrumb item link when hovered\n * @cssprop --wcs-breadcrumb-item-link-font-weight - Font weight of the breadcrumb item link\n * \n * @cssprop --wcs-breadcrumb-item-border-width-focus - Border width of the breadcrumb item when focused\n * @cssprop --wcs-breadcrumb-item-border-color-focus - Border color of the breadcrumb item when focused\n * \n * @cssprop --wcs-breadcrumb-item-active-color - Color of the breadcrumb item when the link is active\n */\n@Component({\n    tag: 'wcs-breadcrumb-item',\n    styleUrl: 'breadcrumb-item.scss',\n    shadow: true,\n})\nexport class BreadcrumbItem implements ComponentInterface {\n    /**\n     * Automatically set by the parent breadcrumb.\n     * True if it is the last breadcrumb item.\n     * (You shouldn't set this prop by yourself) \n     * @internal\n     * @ignore\n     */\n    @Prop() last = false;\n\n    render() {\n        return (\n            <Host role=\"listitem\">\n                <slot />\n                {!this.last && (\n                    <span class=\"item-icon\" aria-hidden=\"true\">\n                        {ICONS_FONT_CHEVRON_UNICODE}\n                    </span>\n                )}\n            </Host>\n        );\n    }\n}\n"],"mappings":"sFAAA,MAAMA,EAAoB,6wDAC1B,MAAAC,EAAeD,E,MC8BFE,EAAc,M,mCAQR,K,CAEf,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACPH,EAAA,QAAAE,IAAA,8CACEE,KAAKC,MACHL,EAAA,QAAAE,IAAA,2CAAMI,MAAM,YAAW,cAAa,QAC/BC,G"}
+{"version":3,"names":["breadcrumbItemCss","WcsBreadcrumbItemStyle0","BreadcrumbItem","render","h","Host","key","role","this","last","class","ICONS_FONT_CHEVRON_UNICODE"],"sources":["src/components/breadcrumb-item/breadcrumb-item.scss?tag=wcs-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-breadcrumb-item-max-height: var(--wcs-semantic-size-s);\n    --wcs-breadcrumb-item-line-height: var(--wcs-semantic-font-line-height-large);\n    --wcs-breadcrumb-item-font-size: var(--wcs-semantic-font-size-body-3);\n\n    --wcs-breadcrumb-item-icon-color: var(--wcs-semantic-color-foreground-brand);\n    --wcs-breadcrumb-item-icon-font-size: 0.5rem;\n    --wcs-breadcrumb-item-gap: var(--wcs-semantic-spacing-base);\n\n    --wcs-breadcrumb-item-link-color: var(--wcs-semantic-color-text-link-default);\n    --wcs-breadcrumb-item-link-color-hover: var(--wcs-semantic-color-text-link-hover);\n    --wcs-breadcrumb-item-link-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-breadcrumb-item-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-breadcrumb-item-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-breadcrumb-item-active-color: var(--wcs-semantic-color-text-primary);\n\n    display: flex;\n    align-items: baseline;\n    max-height: var(--wcs-breadcrumb-item-max-height);\n    font-size: var(--wcs-breadcrumb-item-font-size);\n    color: var(--wcs-breadcrumb-item-active-color);\n    line-height: var(--wcs-breadcrumb-item-line-height);\n\n    ::slotted(a) {\n        display: block;\n        height: 100%;\n        padding: 1px 2px;\n        font-weight: var(--wcs-breadcrumb-item-link-font-weight);\n        color: var(--wcs-breadcrumb-item-link-color);\n        text-decoration: none;\n        border-radius: var(--wcs-breadcrumb-item-border-width-focus);\n    }\n    ::slotted(a:focus-visible ) {\n        @include focus-outline($outline-color: var(--wcs-breadcrumb-item-border-color-focus), $outline-offset: 0, $border-width: var(--wcs-breadcrumb-item-border-width-focus));\n    }\n    ::slotted(a:hover) {\n        text-decoration: underline;\n        color: var(--wcs-breadcrumb-item-link-color-hover);\n    }\n\n    .item-icon {\n        margin-left: calc(var(--wcs-breadcrumb-item-gap) - 2px);\n        font-family: \"icons\";\n        font-size: var(--wcs-breadcrumb-item-icon-font-size);\n        color: var(--wcs-breadcrumb-item-icon-color);\n    }\n}\n","import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\nimport { ICONS_FONT_CHEVRON_UNICODE } from '../breadcrumb/breadcrumb-constants';\n\n/**\n * The breadcrumb item represents a link inside a breadcrumb.\n * \n * @slot <no-name> Main container slot\n * \n * @cssprop --wcs-breadcrumb-item-max-height - Maximum height of the breadcrumb item\n * @cssprop --wcs-breadcrumb-item-line-height - Line height of the breadcrumb item\n * @cssprop --wcs-breadcrumb-item-font-size - Font size of the breadcrumb item\n * \n * @cssprop --wcs-breadcrumb-item-icon-color - Color of the breadcrumb item icon\n * @cssprop --wcs-breadcrumb-item-icon-font-size - Font size of the breadcrumb item icon\n * \n * @cssprop --wcs-breadcrumb-item-gap - Gap between text and chevron icon\n * @cssprop --wcs-breadcrumb-item-link-color - Color of the breadcrumb item link\n * @cssprop --wcs-breadcrumb-item-link-color-hover - Color of the breadcrumb item link when hovered\n * @cssprop --wcs-breadcrumb-item-link-font-weight - Font weight of the breadcrumb item link\n * \n * @cssprop --wcs-breadcrumb-item-border-width-focus - Border width of the breadcrumb item when focused\n * @cssprop --wcs-breadcrumb-item-border-color-focus - Border color of the breadcrumb item when focused\n * \n * @cssprop --wcs-breadcrumb-item-active-color - Color of the breadcrumb item when the link is active\n */\n@Component({\n    tag: 'wcs-breadcrumb-item',\n    styleUrl: 'breadcrumb-item.scss',\n    shadow: true,\n})\nexport class BreadcrumbItem implements ComponentInterface {\n    /**\n     * Automatically set by the parent breadcrumb.\n     * True if it is the last breadcrumb item.\n     * (You shouldn't set this prop by yourself) \n     * @internal\n     * @ignore\n     */\n    @Prop() last: boolean = false;\n\n    render() {\n        return (\n            <Host role=\"listitem\">\n                <slot />\n                {!this.last && (\n                    <span class=\"item-icon\" aria-hidden=\"true\">\n                        {ICONS_FONT_CHEVRON_UNICODE}\n                    </span>\n                )}\n            </Host>\n        );\n    }\n}\n"],"mappings":"sFAAA,MAAMA,EAAoB,6wDAC1B,MAAAC,EAAeD,E,MC8BFE,EAAc,M,mCAQC,K,CAExB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACPH,EAAA,QAAAE,IAAA,8CACEE,KAAKC,MACHL,EAAA,QAAAE,IAAA,2CAAMI,MAAM,YAAW,cAAa,QAC/BC,G"}

package/dist/wcs/p-5607246c.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as s,H as c}from"./p-32e583ea.js";const t=":host{--wcs-card-body-padding:var(--wcs-semantic-spacing-base-300);--wcs-card-body-gap:var(--wcs-semantic-spacing-base);flex:1 1 auto;padding:var(--wcs-card-body-padding)}:host(.horizontal),:host(.vertical){display:flex;flex-direction:column;gap:var(--wcs-card-body-gap)}::slotted(p){margin:0}";const o=t;const r=class{constructor(s){a(this,s);this.orientation=null}async setOrientation(a){this.orientation=a}render(){return s(c,{key:"27547ebfbab0737a4947baf9ff4086d37b494155",class:this.orientation},s("slot",{key:"f9444717438f9981b479b39575c03297b04a5847"}))}};r.style=o;export{r as wcs_card_body};
+//# sourceMappingURL=p-5607246c.entry.js.map

package/dist/wcs/p-5607246c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardBodyCss","WcsCardBodyStyle0","CardBody","setOrientation","orientation","this","render","h","Host","key","class"],"sources":["src/components/card-body/card-body.scss?tag=wcs-card-body&encapsulation=shadow","src/components/card-body/card-body.tsx"],"sourcesContent":[":host {\n    --wcs-card-body-padding: var(--wcs-semantic-spacing-base-300);\n    --wcs-card-body-gap: var(--wcs-semantic-spacing-base);\n\n    flex: 1 1 auto;\n    padding: var(--wcs-card-body-padding);\n}\n\n:host(.horizontal), :host(.vertical) {\n    display: flex;\n    flex-direction: column;\n    gap: var(--wcs-card-body-gap);\n}\n\n::slotted(p) {\n    margin: 0;\n}\n","import { Component, ComponentInterface, h, Host, Method, State } from '@stencil/core';\nimport { CardOrientation } from '../card/card-interface';\n\n/**\n * The card-body is a subcomponent of `wcs-card`. It represents content of the card with an extra padding around.\n *\n * @slot default - Default slot for the card body content. You can put anything you want. If you want a structured card, you can use `wcs-card-header`, `wcs-card-content`, and `wcs-card-footer` as slot\n *\n * @cssprop --wcs-card-body-padding - Padding of the card body\n * @cssprop --wcs-card-body-gap - Gap between each element in the card body\n */\n@Component({\n    tag: 'wcs-card-body',\n    styleUrl: 'card-body.scss',\n    shadow: true\n})\nexport class CardBody implements ComponentInterface {\n    @State() private orientation: CardOrientation = null;\n\n    /**\n     * @internal this method is not intended to be used by the user\n     */\n    @Method()\n    async setOrientation(orientation: CardOrientation) {\n        this.orientation = orientation;\n    }\n\n    render() {\n        return (\n            <Host class={this.orientation}>\n                <slot></slot>\n            </Host>\n        );\n    }\n}\n"],"mappings":"kDAAA,MAAMA,EAAc,wSACpB,MAAAC,EAAeD,E,MCeFE,EAAQ,M,0CAC+B,I,CAMhD,oBAAMC,CAAeC,GACjBC,KAAKD,YAAcA,C,CAGvB,MAAAE,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOL,KAAKD,aACdG,EAAA,QAAAE,IAAA,6C"}

package/dist/wcs/p-580b3142.entry.js

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

package/dist/wcs/{p-806315e6.entry.js.map → p-580b3142.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["ICON_INHERITED_ATTRS","Icon","this","inheritedAttributes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeIcon","render","cssClass","class","icon","size","h","key","ref"],"sources":["src/components/icon/icon.tsx"],"sourcesContent":["import { Component, Prop, ComponentInterface, h, Element, Method } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst ICON_INHERITED_ATTRS = ['title'];\n\n/**\n * The icon component is a graphic symbol designed to visually indicate the purpose of an interface element.\n */\n@Component({\n    tag: 'wcs-icon'\n})\nexport class Icon implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeIcon!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @Prop() icon: string;\n    @Prop() size: 'x5' | 'x75' | '1x' | '1x2' | '1x5' | '1x7' | '2x' | '3x' | '30px' | '50px' | '66px' | '90px' | '96px' | '140px';\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, ICON_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeIcon, attr, value);\n    }\n    \n    render() {\n        const cssClass = {\n            class: {\n                [`icons-${this.icon}`]: true,\n                [`icons-size-${this.size}`]: true\n            }\n        };\n        return (\n            <i {...cssClass} ref={(el) => (this.nativeIcon = el)} {...this.inheritedAttributes}>\n            </i>\n        );\n    }\n}\n"],"mappings":"0FAIA,MAAMA,EAAuB,CAAC,S,MAQjBC,EAAI,M,yBAGLC,KAAAC,oBAA4C,G,wCAKpD,iBAAAC,GACIF,KAAKC,oBAAmBE,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBL,KAAKM,KAC3BC,EAAkBP,KAAKM,GAAIR,G,CAKtC,sBAAMU,CAAiBC,EAAyBC,GAC5CC,EAAqBX,KAAKY,WAAYH,EAAMC,E,CAGhD,MAAAG,GACI,MAAMC,EAAW,CACbC,MAAO,CACH,CAAC,SAASf,KAAKgB,QAAS,KACxB,CAAC,cAAchB,KAAKiB,QAAS,OAGrC,OACIC,EAAA,IAAAf,OAAAC,OAAA,CAAAe,IAAA,4CAAOL,EAAQ,CAAEM,IAAMd,GAAQN,KAAKY,WAAaN,GAASN,KAAKC,qB"}
+{"version":3,"names":["ICON_INHERITED_ATTRS","Icon","this","inheritedAttributes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeIcon","render","cssClass","class","icon","size","h","key","ref"],"sources":["src/components/icon/icon.tsx"],"sourcesContent":["import { Component, Prop, ComponentInterface, h, Element, Method } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst ICON_INHERITED_ATTRS = ['title'];\n\n/**\n * The icon component is a graphic symbol designed to visually indicate the purpose of an interface element.\n */\n@Component({\n    tag: 'wcs-icon'\n})\nexport class Icon implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeIcon!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @Prop() icon: string;\n    @Prop() size: 'x5' | 'x75' | '1x' | '1x2' | '1x5' | '1x7' | '2x' | '3x' | '30px' | '50px' | '66px' | '90px' | '96px' | '140px';\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, ICON_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeIcon, attr, value);\n    }\n    \n    render() {\n        const cssClass = {\n            class: {\n                [`icons-${this.icon}`]: true,\n                [`icons-size-${this.size}`]: true\n            }\n        };\n        return (\n            <i {...cssClass} ref={(el) => (this.nativeIcon = el)} {...this.inheritedAttributes}>\n            </i>\n        );\n    }\n}\n"],"mappings":"+FAIA,MAAMA,EAAuB,CAAC,S,MAQjBC,EAAI,M,yBAGLC,KAAAC,oBAA4C,G,wCAKpD,iBAAAC,GACIF,KAAKC,oBAAmBE,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBL,KAAKM,KAC3BC,EAAkBP,KAAKM,GAAIR,G,CAKtC,sBAAMU,CAAiBC,EAAyBC,GAC5CC,EAAqBX,KAAKY,WAAYH,EAAMC,E,CAGhD,MAAAG,GACI,MAAMC,EAAW,CACbC,MAAO,CACH,CAAC,SAASf,KAAKgB,QAAS,KACxB,CAAC,cAAchB,KAAKiB,QAAS,OAGrC,OACIC,EAAA,IAAAf,OAAAC,OAAA,CAAAe,IAAA,4CAAOL,EAAQ,CAAEM,IAAMd,GAAQN,KAAKY,WAAaN,GAASN,KAAKC,qB"}

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

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

package/dist/wcs/p-5da0534f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["inputCss","WcsInputStyle0","INPUT_INHERITED_ATTRS","Input","this","inputId","inputIds","inheritedAttributes","iconPassword","onInput","ev","input","target","value","wcsInput","emit","onChange","_","wcsChange","nativeInput","onBlur","fireFocusEvents","wcsBlur","onFocus","wcsFocus","debounceChanged","debounceEvent","debounce","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","connectedCallback","document","dispatchEvent","CustomEvent","detail","disconnectedCallback","setBlur","blur","getInputElement","Promise","resolve","setAriaAttribute","attr","setOrRemoveAttribute","getValueAsString","toString","passwordRevealIconClick","passwordReveal","onPasswordRevealChange","render","labelId","label","findItemLabel","id","h","Host","key","disabled","prefixLabel","suffixLabel","class","part","icon","size","ref","accept","autoCapitalize","autocapitalize","autoComplete","autocomplete","autoCorrect","autocorrect","autoFocus","autofocus","enterKeyHint","enterkeyhint","inputMode","inputmode","min","max","minLength","minlength","maxLength","maxlength","multiple","name","pattern","placeholder","readOnly","readonly","required","spellcheck","step","type","title","hidePasswordButtonAriaLabel","showPasswordButtonAriaLabel","onClick"],"sources":["src/components/input/input.scss?tag=wcs-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import '../../style/placeholder.scss';\n\n:host {\n    --wcs-input-icon-color-default: var(--wcs-semantic-color-foreground-brand);\n    --wcs-input-icon-color-focus: var(--wcs-semantic-color-foreground-brand);\n    --wcs-input-icon-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-default);\n\n    --wcs-input-border-radius-left: var(--wcs-semantic-border-radius-base); // Overridden from prefix suffix group in form-field\n    --wcs-input-border-radius-right: var(--wcs-semantic-border-radius-base); // Overridden from prefix suffix group in form-field\n\n    --wcs-input-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-input-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-input-height-l: var(--wcs-semantic-size-l);\n    --wcs-input-height-m: var(--wcs-semantic-size-m);\n    --wcs-input-height-s: var(--wcs-semantic-size-s);\n    --wcs-input-font-size-l: var(--wcs-semantic-font-size-l);\n    --wcs-input-font-size-m: var(--wcs-semantic-font-size-m);\n    --wcs-input-font-size-s: var(--wcs-semantic-font-size-s);\n\n    --wcs-input-prefix-suffix-background-color: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-input-prefix-suffix-color: var(--wcs-semantic-color-foreground-on-accent);\n    --wcs-input-prefix-suffix-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-input-prefix-suffix-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-input-border-style-default: solid;\n    --wcs-input-border-style-focus: var(--wcs-semantic-border-style-focus-control);\n\n    --wcs-input-border-color-default: var(--wcs-semantic-color-border-primary);\n    --wcs-input-border-color-disabled: var(--wcs-semantic-color-border-disabled);\n    --wcs-input-border-color-focus: var(--wcs-semantic-color-border-control-focus);\n    --wcs-input-reveal-password-button-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n    --wcs-input-border-color-error: var(--wcs-semantic-color-border-critical);\n\n    --wcs-input-value-color: var(--wcs-semantic-color-text-primary);\n    --wcs-input-value-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-input-placeholder-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-input-placeholder-font-weight: var(--wcs-semantic-font-weight-roman);\n    --wcs-input-placeholder-font-style: var(--wcs-semantic-font-style-control-placeholder);\n\n    --wcs-input-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-input-min-height: var(--wcs-semantic-size-s);\n    --wcs-input-padding-horizontal-s: calc(1.5 * var(--wcs-semantic-spacing-base));\n    --wcs-input-padding-horizontal-m: var(--wcs-semantic-spacing-large);\n    --wcs-input-padding-horizontal-l: var(--wcs-semantic-spacing-large);\n    --wcs-input-gap: var(--wcs-semantic-spacing-base);\n\n    // Default\n    --wcs-input-host-height: var(--wcs-input-height-m);\n    --wcs-input-font-size: var(--wcs-input-font-size-m);\n    padding-left: calc(var(--wcs-input-padding-horizontal-m));\n    padding-right: calc(var(--wcs-input-padding-horizontal-m));\n\n    display: flex;\n    width: 100%;\n    height: var(--wcs-input-host-height);\n    box-sizing: border-box;\n    border-radius: var(--wcs-input-border-radius-left) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-left);\n    background-color: var(--wcs-input-background-color);\n    outline: var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-default);\n    outline-offset: calc(var(--wcs-input-border-width) * -1);\n    background-clip: padding-box;\n\n    gap: var(--wcs-input-gap);\n\n    input {\n        overflow: hidden;\n        height: var(--wcs-input-host-height);\n        width: 100%;\n        padding: 0; // Reset padding from user agent stylesheet, it's the container that will handle padding\n        background-color: transparent;\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-input-value-color);\n        font-weight: var(--wcs-input-value-font-weight) !important;\n        border: none;\n        font-size: var(--wcs-input-font-size, 1rem);\n        line-height: 1.5;\n\n        &::placeholder {\n            @include placeholder(var(--wcs-input-placeholder-color), var(--wcs-input-placeholder-font-weight), var(--wcs-input-placeholder-font-style));\n        }\n    }\n\n    input:focus {\n        box-shadow: none;\n        outline: 0;\n    }\n\n    button.toggle_password {\n        background: transparent;\n        border: none;\n        color: inherit;\n\n        cursor: pointer;\n\n\n        &:focus-visible {\n            @include focus-outline(var(--wcs-input-reveal-password-button-border-color-focus), $outline-offset: calc(-2 * var(--wcs-input-border-width-focus)));\n        }\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-input-prefix-suffix-color);\n        display: flex;\n        white-space: nowrap;\n        align-items: center;\n        font-size: var(--wcs-input-font-size, 1rem);\n        padding: 0 calc(var(--wcs-input-padding-horizontal-m) / 2);\n        font-weight: var(--wcs-input-prefix-suffix-font-weight) !important;\n        background-color: var(--wcs-input-prefix-suffix-background-color);\n    }\n\n    .prefix {\n        border-radius: var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left);\n    }\n\n    .suffix {\n        border-radius: 0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0;\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-default);\n    }\n}\n\n:host([size=l]) {\n    --wcs-input-host-height: var(--wcs-input-height-l);\n    --wcs-input-font-size: var(--wcs-input-font-size-l);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-l));\n    padding-right: calc(var(--wcs-input-padding-horizontal-l));\n}\n\n:host([size=m]) { // Default\n    --wcs-input-host-height: var(--wcs-input-height-m);\n    --wcs-input-font-size: var(--wcs-input-font-size-m);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-m));\n    padding-right: calc(var(--wcs-input-padding-horizontal-m));\n}\n\n:host([size=s]) {\n    --wcs-input-host-height: var(--wcs-input-height-s);\n    --wcs-input-font-size: var(--wcs-input-font-size-s);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-s));\n    padding-right: calc(var(--wcs-input-padding-horizontal-s));\n}\n\n:host([state=error]) {\n    outline-color: var(--wcs-input-border-color-error) !important;\n}\n\n:host([data-has-prefix]) {\n    padding-left: 0;\n}\n\n:host([data-has-suffix]) {\n    padding-right: 0;\n}\n\n:host([disabled]) {\n    cursor: not-allowed; // padding is handled by the container, so we need to set cursor not allowed on it\n    outline: var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-disabled);\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-disabled);\n\n    input {\n        cursor: not-allowed;\n        color: var(--wcs-input-text-color-disabled);\n\n        &::placeholder {\n            color: var(--wcs-input-text-color-disabled);\n        }\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-input-prefix-suffix-color-disabled);\n        cursor: text; // reset cursor to text for prefix and suffix, to be able to select text\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-disabled);\n        cursor: not-allowed;\n    }\n}\n\n:host([readonly]) {\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-readonly);\n    --wcs-input-border-width: 0;\n}\n\n:host(:focus-within) {\n    outline: var(--wcs-input-border-style-focus) var(--wcs-input-border-width-focus) var(--wcs-input-border-color-focus);\n    outline-offset: calc(var(--wcs-input-border-width-focus) * -1);\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-focus);\n    }\n}\n","import {\n    Build,\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport {\n    debounceEvent,\n    findItemLabel,\n    inheritAriaAttributes,\n    inheritAttributes,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport {\n    AutocompleteTypes,\n    InputChangeEventDetail,\n    TextFieldTypes,\n    WcsInputSize,\n    WcsInputAutocorrect,\n    WcsInputEnterKeyHint,\n    WcsInputInputMode,\n    WcsInputState\n} from './input-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst INPUT_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The input component is a form control that accepts a single line of text.\n * Implementation mainly inspired from Ionic Input Component.\n *\n * ## Accessibility guidelines 💡\n * > - If you use wcs-input outside a wcs-form-field, you have to manage the label and the error message yourself.\n * > You can use the `aria-label` attribute to provide a label for screen readers but adds no visual label.\n * \n * @cssprop --wcs-input-icon-color-default - default icon color when the input is not focused\n * @cssprop --wcs-input-icon-color-focus - icon color when the input is focused\n * @cssprop --wcs-input-icon-color-disabled - icon color when the input is disabled\n *\n * @cssprop --wcs-input-background-color - background color of the input\n *\n * @cssprop --wcs-input-border-radius-left - border radius of the left side of the input\n * @cssprop --wcs-input-border-radius-right - border radius of the right side of the input\n * \n * @cssprop --wcs-input-border-width - border width of the input\n * @cssprop --wcs-input-border-width-focus - border width of the input when focused\n *\n * @cssprop --wcs-input-height-l - large height of the input\n * @cssprop --wcs-input-height-m - medium height of the input\n * @cssprop --wcs-input-height-s - small height of the input\n * @cssprop --wcs-input-font-size-l - large font size of the input\n * @cssprop --wcs-input-font-size-m - medium font size of the input\n * @cssprop --wcs-input-font-size-s - small font size of the input\n *\n * @cssprop --wcs-input-border-style-default - default border style of the input\n * @cssprop --wcs-input-border-style-focus - border style of the input when focused\n * \n * @cssprop --wcs-input-prefix-suffix-background-color - background color of the suffix/prefix\n * @cssprop --wcs-input-prefix-suffix-color - color of the suffix/prefix\n * @cssprop --wcs-input-prefix-suffix-color-disabled - color of the suffix/prefix when the input is disabled\n * @cssprop --wcs-input-prefix-suffix-font-weight - font weight of the suffix/prefix\n *\n * @cssprop --wcs-input-border-color-default - default border color of the input when not focused\n * @cssprop --wcs-input-border-color-disabled - border color of the input when disabled\n * @cssprop --wcs-input-border-color-focus - border color of the input when focused\n * @cssprop --wcs-input-reveal-password-button-border-color-focus - border color of the show/hide password button when focused\n * @cssprop --wcs-input-border-color-error - border color of the input when in error state\n *\n * @cssprop --wcs-input-value-color - color of the input value\n * @cssprop --wcs-input-value-font-weight - font weight of the input value\n * \n * @cssprop --wcs-input-placeholder-color - color of the input placeholder\n * @cssprop --wcs-input-placeholder-font-weight - font weight of the input placeholder\n * @cssprop --wcs-input-placeholder-font-style - font style of the input placeholder\n * \n * @cssprop --wcs-input-text-color-disabled - color of the input when disabled\n *\n * @cssprop --wcs-input-padding-horizontal-s - horizontal padding of the input in small size\n * @cssprop --wcs-input-padding-horizontal-m - horizontal padding of the input in medium size\n * @cssprop --wcs-input-padding-horizontal-l - horizontal padding of the input in large size\n * \n * @cssprop --wcs-input-gap - gap between text input and icon\n */\n@Component({\n    tag: 'wcs-input',\n    styleUrl: 'input.scss',\n    shadow: { delegatesFocus: true },\n})\nexport class Input implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeInput?: HTMLInputElement;\n    private inputId = `wcs-input-${inputIds++}`;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private iconPassword = \"visibility\";\n\n    /**\n     * This is required for a WebKit bug which requires us to\n     * blur and focus an input to properly focus the input in\n     * an item with delegatesFocus. It will no longer be needed\n     * with iOS 14.\n     *\n     * @internal\n     */\n    @Prop() fireFocusEvents: boolean = true;\n\n    @State() private passwordReveal: boolean = false;\n\n    /**\n     * If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the\n     * server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n     */\n    @Prop() accept?: string;\n\n    /**\n     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n     * Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n     */\n    @Prop() autocapitalize = 'off';\n\n    /**\n     * Indicates whether the value of the control can be automatically completed by the browser.\n     */\n    @Prop() autocomplete: AutocompleteTypes = 'off';\n\n    /**\n     * Whether auto correction should be enabled when the user is entering/editing the text value.\n     */\n    @Prop() autocorrect: WcsInputAutocorrect = 'off';\n\n    /**\n     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n     */\n    @Prop() autofocus: boolean = false;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsInput` event after each keystroke.\n     * This also impacts form bindings such as `ngModel` or `v-model`.\n     */\n    @Prop() debounce = 0;\n\n    @Watch('debounce')\n    protected debounceChanged() {\n        this.wcsInput = debounceEvent(this.wcsInput, this.debounce);\n    }\n\n    /**\n     * Prefix displayed before the text field contents. This is not included in the value.\n     */\n    @Prop() prefixLabel: string;\n\n    /**\n     * Suffix displayed after the text field contents. This is not included in the value.\n     */\n    @Prop() suffixLabel: string;\n\n    /**\n     * If `true`, the user cannot interact with the input.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * A hint to the browser for which enter key to display.\n     */\n    @Prop() enterkeyhint?: WcsInputEnterKeyHint;\n\n    /**\n     * Specify the size (height) of the input.\n     */\n    @Prop({reflect: true}) size: WcsInputSize = 'm';\n\n    /**\n     * Name of the material icon to add to the input\n     */\n    @Prop() icon: string;\n\n    /**\n     * A hint to the browser for which keyboard to display.\n     */\n    @Prop() inputmode?: WcsInputInputMode;\n\n    /**\n     * The maximum value, which must not be less than its minimum (min attribute) value.\n     */\n    @Prop() max?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n     * specifies the maximum number of characters that the user can enter.\n     */\n    @Prop() maxlength?: number;\n\n    /**\n     * The minimum value, which must not be greater than its maximum (max attribute) value.\n     */\n    @Prop() min?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n     * specifies the minimum number of characters that the user can enter.\n     */\n    @Prop() minlength?: number;\n\n    /**\n     * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to\n     * `\"email\"` or `\"file\"`, otherwise it is ignored.\n     */\n    @Prop({ reflect: true }) 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    @Prop() hidePasswordButtonAriaLabel: string = \"Cacher le mot de passe\";\n    @Prop() showPasswordButtonAriaLabel: string = \"Afficher le mot de passe\";\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({ reflect: true }) readonly: boolean = false;\n\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     */\n    @Prop({ reflect: true }) required: boolean = false;\n\n    /**\n     * If `true`, the element will have its spelling and grammar checked.\n     */\n    @Prop() spellcheck: boolean = false;\n\n    /**\n     * Specifies the state of the input. By default the input is in an normal state but you can to set it to 'error'\n     * state if the data given by the user is not valid.\n     */\n    @Prop({reflect: true}) state: WcsInputState = 'initial';\n\n    /**\n     * Works with the min and max attributes to limit the increments at which a value can be set.\n     * Possible values are: `\"any\"` or a positive floating point number.\n     */\n    @Prop() step?: string;\n\n    /**\n     * The type of control to display. The default type is text.\n     */\n    @Prop() type: TextFieldTypes = 'text';\n\n    /**\n     * The value of the input.\n     */\n    @Prop({mutable: true}) value?: string | number | null = '';\n\n    /**\n     * Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input\n     */\n    @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n    /**\n     * Emitted when the value has changed. See https://developer.mozilla.org/en-US/docs/Web/Events/change\n     */\n    @Event() wcsChange!: EventEmitter<InputChangeEventDetail>;\n\n    /**\n     * Emitted when the input loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the input has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, INPUT_INHERITED_ATTRS)\n        };\n    }\n\n    connectedCallback() {\n        this.debounceChanged();\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n                detail: this.el\n            }));\n        }\n    }\n\n    disconnectedCallback() {\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n                detail: this.el\n            }));\n        }\n    }\n\n    /**\n     * Sets blur on the native `input` in `wcs-input`. Use this method instead of the global\n     * `input.blur()`.\n     * @internal\n     */\n    @Method()\n    async setBlur() {\n        if (this.nativeInput) {\n            this.nativeInput.blur();\n        }\n    }\n\n    /**\n     * Returns the native `<input>` element used under the hood.\n     */\n    @Method()\n    getInputElement(): Promise<HTMLInputElement> {\n        return Promise.resolve(this.nativeInput!);\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n    \n    private getValueAsString(): string {\n        return typeof this.value === 'number' ? this.value.toString() :\n            (this.value || '').toString();\n    }\n\n    private onInput = (ev: Event) => {\n        const input = ev.target as HTMLInputElement | null;\n        if (input) {\n            this.value = input.value || '';\n        }\n        this.wcsInput.emit(ev as KeyboardEvent);\n    }\n\n    private onChange = (_: Event) => {\n        this.wcsChange.emit({value: this.nativeInput.value});\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    private onFocus = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private passwordRevealIconClick(): void {\n        this.passwordReveal = !this.passwordReveal;\n    }\n\n    @Watch('passwordReveal')\n    onPasswordRevealChange(): void {\n        this.iconPassword = this.passwordReveal ? 'visibility_off' : 'visibility';\n    }\n\n    render() {\n        const value = this.getValueAsString();\n        const labelId = this.inputId + '-lbl';\n        const label = findItemLabel(this.el);\n        if (label) {\n            label.id = labelId;\n        }\n\n        return (\n            <Host\n                aria-disabled={this.disabled ? 'true' : null}\n                data-has-prefix={!!this.prefixLabel}\n                data-has-suffix={!!this.suffixLabel}\n            >\n                {this.prefixLabel ? (<span class=\"prefix\" part=\"prefix\">{this.prefixLabel}</span>) : null}\n                {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n                <input\n                    class=\"native-input\"\n                    ref={input => this.nativeInput = input}\n                    aria-labelledby={label ? labelId : null}\n                    disabled={this.disabled}\n                    accept={this.accept}\n                    autoCapitalize={this.autocapitalize}\n                    autoComplete={this.autocomplete}\n                    autoCorrect={this.autocorrect}\n                    autoFocus={this.autofocus}\n                    enterKeyHint={this.enterkeyhint}\n                    inputMode={this.inputmode}\n                    min={this.min}\n                    max={this.max}\n                    minLength={this.minlength}\n                    maxLength={this.maxlength}\n                    multiple={this.multiple}\n                    name={this.name}\n                    pattern={this.pattern}\n                    placeholder={this.placeholder || ''}\n                    readOnly={this.readonly}\n                    required={this.required}\n                    spellcheck={this.spellcheck}\n                    step={this.step}\n                    type={this.passwordReveal ? 'text' : this.type}\n                    value={value}\n                    onInput={this.onInput}\n                    onChange={this.onChange}\n                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    {...this.inheritedAttributes}\n                />\n                {this.type === \"password\" ? (\n                    <button title={this.passwordReveal ? this.hidePasswordButtonAriaLabel : this.showPasswordButtonAriaLabel} class=\"toggle_password\" onClick={() => this.passwordRevealIconClick()}>\n                        <wcs-mat-icon icon={this.iconPassword} size=\"m\"></wcs-mat-icon>\n                    </button>\n                ) : null}\n                {this.suffixLabel ? (<span class=\"suffix\" part=\"suffix\">{this.suffixLabel}</span>) : null}\n            </Host>\n        );\n    }\n}\n\nlet inputIds = 0;\n"],"mappings":"2HAAA,MAAMA,EAAW,i/MACjB,MAAAC,EAAeD,ECgCf,MAAME,EAAwB,CAAC,WAAY,S,MA+D9BC,EAAK,M,qKAGNC,KAAAC,QAAU,aAAaC,MACvBF,KAAAG,oBAA4C,GAC5CH,KAAAI,aAAe,aAyPfJ,KAAAK,QAAWC,IACf,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACPP,KAAKS,MAAQF,EAAME,OAAS,E,CAEhCT,KAAKU,SAASC,KAAKL,EAAoB,EAGnCN,KAAAY,SAAYC,IAChBb,KAAKc,UAAUH,KAAK,CAACF,MAAOT,KAAKe,YAAYN,OAAO,EAGhDT,KAAAgB,OAAUV,IACd,GAAIN,KAAKiB,gBAAiB,CACtBjB,KAAKkB,QAAQP,KAAKL,E,GAIlBN,KAAAmB,QAAWb,IACf,GAAIN,KAAKiB,gBAAiB,CACtBjB,KAAKoB,SAAST,KAAKL,E,wBAnQQ,K,oBAEQ,M,0CAYlB,M,kBAKiB,M,iBAKC,M,eAKd,M,cAMV,E,oEAoB0B,M,sCAUD,I,uKA2CrBN,KAAKC,Q,iCAEkB,yB,iCACA,2B,gEAoBD,M,cAKA,M,gBAKf,M,WAMgB,U,8BAWf,O,WAKyB,E,CA7H9C,eAAAoB,GACNrB,KAAKU,SAAWY,EAActB,KAAKU,SAAUV,KAAKuB,S,CAkJtD,iBAAAC,GACIxB,KAAKG,oBAAmBsB,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsB3B,KAAK4B,KAC3BC,EAAkB7B,KAAK4B,GAAI9B,G,CAItC,iBAAAgC,GACI9B,KAAKqB,kBACgB,CACjBU,SAASC,cAAc,IAAIC,YAAY,kBAAmB,CACtDC,OAAQlC,KAAK4B,K,EAKzB,oBAAAO,GACyB,CACjBJ,SAASC,cAAc,IAAIC,YAAY,oBAAqB,CACxDC,OAAQlC,KAAK4B,K,EAWzB,aAAMQ,GACF,GAAIpC,KAAKe,YAAa,CAClBf,KAAKe,YAAYsB,M,EAQzB,eAAAC,GACI,OAAOC,QAAQC,QAAQxC,KAAKe,Y,CAIhC,sBAAM0B,CAAiBC,EAAyBjC,GAC5CkC,EAAqB3C,KAAKe,YAAa2B,EAAMjC,E,CAGzC,gBAAAmC,GACJ,cAAc5C,KAAKS,QAAU,SAAWT,KAAKS,MAAMoC,YAC9C7C,KAAKS,OAAS,IAAIoC,U,CA2BnB,uBAAAC,GACJ9C,KAAK+C,gBAAkB/C,KAAK+C,c,CAIhC,sBAAAC,GACIhD,KAAKI,aAAeJ,KAAK+C,eAAiB,iBAAmB,Y,CAGjE,MAAAE,GACI,MAAMxC,EAAQT,KAAK4C,mBACnB,MAAMM,EAAUlD,KAAKC,QAAU,OAC/B,MAAMkD,EAAQC,EAAcpD,KAAK4B,IACjC,GAAIuB,EAAO,CACPA,EAAME,GAAKH,C,CAGf,OACII,EAACC,EAAI,CAAAC,IAAA,2DACcxD,KAAKyD,SAAW,OAAS,KAAI,oBACzBzD,KAAK0D,YAAW,oBAChB1D,KAAK2D,aAEvB3D,KAAK0D,YAAeJ,EAAA,QAAMM,MAAM,SAASC,KAAK,UAAU7D,KAAK0D,aAAuB,KACpF1D,KAAK8D,KAAQR,EAAA,gBAAcQ,KAAM9D,KAAK8D,KAAMC,KAAK,MAAuB,KACzET,EAAA,QAAA7B,OAAAC,OAAA,CAAA8B,IAAA,2CACII,MAAM,eACNI,IAAKzD,GAASP,KAAKe,YAAcR,EAAK,kBACrB4C,EAAQD,EAAU,KACnCO,SAAUzD,KAAKyD,SACfQ,OAAQjE,KAAKiE,OACbC,eAAgBlE,KAAKmE,eACrBC,aAAcpE,KAAKqE,aACnBC,YAAatE,KAAKuE,YAClBC,UAAWxE,KAAKyE,UAChBC,aAAc1E,KAAK2E,aACnBC,UAAW5E,KAAK6E,UAChBC,IAAK9E,KAAK8E,IACVC,IAAK/E,KAAK+E,IACVC,UAAWhF,KAAKiF,UAChBC,UAAWlF,KAAKmF,UAChBC,SAAUpF,KAAKoF,SACfC,KAAMrF,KAAKqF,KACXC,QAAStF,KAAKsF,QACdC,YAAavF,KAAKuF,aAAe,GACjCC,SAAUxF,KAAKyF,SACfC,SAAU1F,KAAK0F,SACfC,WAAY3F,KAAK2F,WACjBC,KAAM5F,KAAK4F,KACXC,KAAM7F,KAAK+C,eAAiB,OAAS/C,KAAK6F,KAC1CpF,MAAOA,EACPJ,QAASL,KAAKK,QACdO,SAAUZ,KAAKY,SACfI,OAAQhB,KAAKgB,OACbG,QAASnB,KAAKmB,SACVnB,KAAKG,sBAEZH,KAAK6F,OAAS,WACXvC,EAAA,UAAQwC,MAAO9F,KAAK+C,eAAiB/C,KAAK+F,4BAA8B/F,KAAKgG,4BAA6BpC,MAAM,kBAAkBqC,QAAS,IAAMjG,KAAK8C,2BAClJQ,EAAA,gBAAcQ,KAAM9D,KAAKI,aAAc2D,KAAK,OAEhD,KACH/D,KAAK2D,YAAeL,EAAA,QAAMM,MAAM,SAASC,KAAK,UAAU7D,KAAK2D,aAAuB,K,wKAMrG,IAAIzD,EAAW,E"}

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

@@ -0,0 +1,2 @@
+import{r as e,h as t,H as s,g as a}from"./p-32e583ea.js";import{S as c}from"./p-84e22272.js";const r=":host{--wcs-native-select-line-height:var(--wcs-semantic-font-line-height-large);--wcs-native-select-size-m:var(--wcs-semantic-size-m);--wcs-native-select-font-size-m:var(--wcs-semantic-font-size-m);--wcs-native-select-size-l:var(--wcs-semantic-size-l);--wcs-native-select-font-size-l:var(--wcs-semantic-font-size-l);--wcs-native-select-border-radius:var(--wcs-semantic-border-radius-base);--wcs-native-select-background-color:var(--wcs-semantic-color-background-control-default);--wcs-native-select-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-native-select-border-color-disabled:var(--wcs-semantic-color-border-disabled);--wcs-native-select-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-native-select-border-color-error:var(--wcs-semantic-color-border-critical);--wcs-native-select-border-style-default:solid;--wcs-native-select-border-style-focus:var(--wcs-semantic-border-style-focus-control);--wcs-native-select-border-width:var(--wcs-semantic-border-width-default);--wcs-native-select-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-native-select-value-color:var(--wcs-semantic-color-text-primary);--wcs-native-select-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-native-select-value-font-style:normal;--wcs-native-select-internal-padding-horizontal:var(--wcs-native-select-padding-horizontal-m);--wcs-native-select-padding-horizontal-m:var(--wcs-semantic-spacing-large);--wcs-native-select-padding-horizontal-l:var(--wcs-semantic-spacing-large);--wcs-native-select-arrow-color:var(--wcs-semantic-color-foreground-brand);--wcs-native-select-arrow-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-native-select-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-native-select-placeholder-color:var(--wcs-semantic-color-text-tertiary);--wcs-native-select-placeholder-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-native-select-placeholder-font-style:var(--wcs-semantic-font-style-control-placeholder);--wcs-native-select-option-color:var(--wcs-semantic-color-text-primary);--wcs-native-select-option-font-style:normal;--wcs-native-select-option-selected-color:var(--wcs-semantic-color-text-primary)}::slotted(select){box-sizing:border-box;-moz-appearance:none !important;-webkit-appearance:none !important;appearance:none !important;background-color:var(--wcs-native-select-background-color);color:var(--wcs-native-select-value-color);border-radius:var(--wcs-native-select-border-radius);border:none;outline:var(--wcs-native-select-border-style-default) var(--wcs-native-select-border-width) var(--wcs-native-select-border-color-default);outline-offset:calc(var(--wcs-native-select-border-width) * -1);user-select:none;cursor:pointer;line-height:var(--wcs-native-select-line-height);font-size:inherit;opacity:1;max-width:100%;flex-grow:1;padding-right:calc(var(--wcs-native-select-internal-padding-horizontal) + 24px);padding-left:var(--wcs-native-select-internal-padding-horizontal)}::slotted(select:disabled){cursor:not-allowed;color:var(--wcs-native-select-text-color-disabled);outline:var(--wcs-native-select-border-style-default) var(--wcs-native-select-border-width) var(--wcs-native-select-border-color-disabled);--wcs-native-select-background-color:var(--wcs-semantic-color-background-control-disabled);--wcs-native-select-value-color:var(--wcs-native-select-text-color-disabled)}::slotted(select[aria-invalid=true]){outline-style:var(--wcs-native-select-border-style-default);outline-color:var(--wcs-native-select-border-color-error) !important;outline-offset:calc(var(--wcs-native-select-border-width) * -1)}:host([data-disabled]) .select-wrapper .arrow-container .arrow{fill:var(--wcs-native-select-arrow-color-disabled)}:host,:host([data-size=m]){font-size:var(--wcs-native-select-font-size-m);--wcs-native-select-internal-padding-horizontal:var(--wcs-native-select-padding-horizontal-m)}:host ::slotted(select),:host([data-size=m]) ::slotted(select){height:var(--wcs-native-select-size-m)}:host([data-size=l]){font-size:var(--wcs-native-select-font-size-l);--wcs-native-select-internal-padding-horizontal:var(--wcs-native-select-padding-horizontal-l)}:host([data-size=l]) ::slotted(select){height:var(--wcs-native-select-size-l)}::slotted(select:focus-visible){outline:var(--wcs-native-select-border-style-focus) var(--wcs-native-select-border-width-focus) var(--wcs-native-select-border-color-focus);outline-offset:calc(var(--wcs-native-select-border-width-focus) * -1)}.select-wrapper{position:relative;display:flex;flex-wrap:nowrap}svg{flex-shrink:0}.arrow{fill:var(--wcs-native-select-arrow-color)}.arrow-container{pointer-events:none;display:flex;align-items:center;vertical-align:center;position:absolute;top:0;bottom:0;right:calc(var(--wcs-native-select-internal-padding-horizontal) - 4px);margin:auto 0}";const i=r;const o=class{constructor(t){e(this,t);this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST=["disabled"];this.size="m";this.required=false;this.expanded=false;this.disabled=undefined}requiredChanged(e,t){if(e!==t){if(!this.selectElement)return;this.selectElement.required=this.required}}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})}async setAriaAttribute(e,t){if(!this.selectElement)return;this.selectElement.setAttribute(e,t)}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-native-select-value-color)";this.selectElement.style.fontStyle="var(--wcs-native-select-value-font-style)";this.selectElement.style.fontWeight="var(--wcs-native-select-value-font-weight)";Array.from(this.selectElement.options).forEach((e=>{e.style.fontStyle="var(--wcs-native-select-option-font-style)";if(!e.disabled){e.style.color="var(--wcs-native-select-option-color)"}}))}applyPlaceholderStylesOnNativeSlottedSelectElement(){this.selectElement.style.color="var(--wcs-native-select-placeholder-color)";this.selectElement.style.fontWeight="var(--wcs-native-select-placeholder-font-weight)";this.selectElement.style.fontStyle="var(--wcs-native-select-placeholder-font-style)";Array.from(this.selectElement.options).forEach((e=>{e.style.fontStyle="var(--wcs-native-select-option-font-style)";if(!e.disabled){e.style.color="var(--wcs-native-select-option-color)"}}))}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,{key:"dedd08d93118cc5323b6d2062577275504972b12",class:`${this.expanded?"expanded":""}`,"data-disabled":this.disabled,"data-size":this.size},t("div",{key:"bd211e20d0ab314767729ab54611c3d28fb8cca7",class:"select-wrapper"},t("slot",{key:"b0e58a954d0212c19a05395065ad5ed76efa9f39"}),t("div",{key:"5f70166ee1756180982a43151b9762e1cfec51d4",class:"arrow-container"},t(c,{key:"ed256e18a87ab7cf17af6b5226ee6f10779d5bb1",up:this.expanded}))))}get el(){return a(this)}static get watchers(){return{required:["requiredChanged"]}}};o.style=i;export{o as wcs_native_select};
+//# sourceMappingURL=p-5e8fff73.entry.js.map

package/dist/wcs/p-5e8fff73.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nativeSelectCss","WcsNativeSelectStyle0","NativeSelect","this","SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST","requiredChanged","newValue","oldValue","selectElement","required","componentWillLoad","el","querySelector","Error","onSelectedOptionChange","addEventListener","observer","MutationObserver","mutations","hasSpiedAttrMutation","filter","m","includes","attributeName","length","updateHostAttributeWithSlottedSelect","_updateStyles","observe","attributes","setAriaAttribute","attr","value","setAttribute","isPlaceholderOptionSelected","applyPlaceholderStylesOnNativeSlottedSelectElement","applySelectedOptionStylesOnNativeSlottedSelectElement","_a","Array","from","options","o","selected","disabled","style","color","fontStyle","fontWeight","forEach","option","hasAttribute","disconnectedCallback","disconnect","_b","removeEventListener","updateStyles","render","h","Host","key","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":[":host {\n    --wcs-native-select-line-height: var(--wcs-semantic-font-line-height-large);\n\n    --wcs-native-select-size-m: var(--wcs-semantic-size-m);\n    --wcs-native-select-font-size-m: var(--wcs-semantic-font-size-m);\n    --wcs-native-select-size-l: var(--wcs-semantic-size-l);\n    --wcs-native-select-font-size-l: var(--wcs-semantic-font-size-l);\n\n    --wcs-native-select-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-native-select-background-color: var(--wcs-semantic-color-background-control-default);\n\n    --wcs-native-select-border-color-default: var(--wcs-semantic-color-border-primary);\n    --wcs-native-select-border-color-disabled: var(--wcs-semantic-color-border-disabled);\n    --wcs-native-select-border-color-focus: var(--wcs-semantic-color-border-control-focus);\n    --wcs-native-select-border-color-error: var(--wcs-semantic-color-border-critical);\n\n    --wcs-native-select-border-style-default: solid;\n    --wcs-native-select-border-style-focus: var(--wcs-semantic-border-style-focus-control);\n\n    --wcs-native-select-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-native-select-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-native-select-value-color: var(--wcs-semantic-color-text-primary);\n    --wcs-native-select-value-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-native-select-value-font-style: normal; // ⚠️ UPDATE IN JS, IF REFACTOR THE NAME REFACTOR IN THE JS CODE\n\n    --wcs-native-select-internal-padding-horizontal: var(--wcs-native-select-padding-horizontal-m);\n    --wcs-native-select-padding-horizontal-m: var(--wcs-semantic-spacing-large);\n    --wcs-native-select-padding-horizontal-l: var(--wcs-semantic-spacing-large);\n\n    --wcs-native-select-arrow-color: var(--wcs-semantic-color-foreground-brand);\n    --wcs-native-select-arrow-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n\n    --wcs-native-select-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-native-select-placeholder-font-weight: var(--wcs-semantic-font-weight-roman);\n    --wcs-native-select-placeholder-font-style: var(--wcs-semantic-font-style-control-placeholder);\n\n    --wcs-native-select-option-color: var(--wcs-semantic-color-text-primary);\n    --wcs-native-select-option-font-style: normal;\n\n    --wcs-native-select-option-selected-color: var(--wcs-semantic-color-text-primary);\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    background-color: var(--wcs-native-select-background-color);\n\n    color: var(--wcs-native-select-value-color);\n\n    border-radius: var(--wcs-native-select-border-radius);\n    border: none;\n\n    outline: var(--wcs-native-select-border-style-default) var(--wcs-native-select-border-width) var(--wcs-native-select-border-color-default);\n    outline-offset: calc(var(--wcs-native-select-border-width) * -1);\n    user-select: none;\n    cursor: pointer;\n    line-height: var(--wcs-native-select-line-height);\n    font-size: inherit;\n    opacity: 1; // user agent set 0.7 opacity on select by default when disabled (https://github.com/tailwindlabs/tailwindcss/discussions/11792#discussioncomment-6696015)\n\n    max-width: 100%;\n    flex-grow: 1;\n    padding-right: calc(var(--wcs-native-select-internal-padding-horizontal) + 24px); // To not let text overflow on arrow icon, we add 24px of padding\n    padding-left: var(--wcs-native-select-internal-padding-horizontal);\n}\n\n::slotted(select:disabled) {\n    cursor: not-allowed;\n    color: var(--wcs-native-select-text-color-disabled);\n    outline: var(--wcs-native-select-border-style-default) var(--wcs-native-select-border-width) var(--wcs-native-select-border-color-disabled);\n    --wcs-native-select-background-color: var(--wcs-semantic-color-background-control-disabled);\n    --wcs-native-select-value-color: var(--wcs-native-select-text-color-disabled);\n}\n\n::slotted(select[aria-invalid=true]) {\n    outline-style: var(--wcs-native-select-border-style-default);\n    outline-color: var(--wcs-native-select-border-color-error) !important;\n    outline-offset: calc(var(--wcs-native-select-border-width) * -1);\n}\n\n:host([data-disabled]) {\n    .select-wrapper {\n        .arrow-container {\n            .arrow {\n                fill: var(--wcs-native-select-arrow-color-disabled);\n            }\n        }\n    }\n}\n\n:host, :host([data-size=m])  { // Default\n    font-size: var(--wcs-native-select-font-size-m);\n    --wcs-native-select-internal-padding-horizontal: var(--wcs-native-select-padding-horizontal-m);\n\n    ::slotted(select) {\n        height: var(--wcs-native-select-size-m);\n    }\n}\n\n:host([data-size=l]) {\n    font-size: var(--wcs-native-select-font-size-l);\n    --wcs-native-select-internal-padding-horizontal: var(--wcs-native-select-padding-horizontal-l);\n\n    ::slotted(select) {\n        height: var(--wcs-native-select-size-l);\n    }\n}\n\n::slotted(select:focus-visible) {\n    outline: var(--wcs-native-select-border-style-focus) var(--wcs-native-select-border-width-focus) var(--wcs-native-select-border-color-focus);\n    outline-offset: calc(var(--wcs-native-select-border-width-focus) * -1);\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-native-select-arrow-color);\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-native-select-internal-padding-horizontal) - 4px); // 4px is the blank space inside the arrow svg on the right\n    margin: auto 0;\n}\n","import { Component, h, ComponentInterface, State, Prop, Host, Element, Method, Watch } from '@stencil/core';\n\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsNativeSelectSize } from './native-select-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\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 native-select when you don't have to support the multi-selection feature\n * - Use a native-select instead of a wcs-select if your application is mainly on mobile / tablet. The native behavior of the device will be used.\n *\n * @cssprop --wcs-native-select-line-height - Line height of the select\n * \n * @cssprop --wcs-native-select-size-m - Height of the select when size is 'm'\n * @cssprop --wcs-native-select-font-size-m - Font size of the select when size is 'm'\n * @cssprop --wcs-native-select-size-l - Height of the select when size is 'l'\n * @cssprop --wcs-native-select-font-size-l - Font size of the select when size is 'l'\n * \n * @cssprop --wcs-native-select-border-radius - Border radius of the select\n * \n * @cssprop --wcs-native-select-background-color - Background color of the select\n * \n * @cssprop --wcs-native-select-border-color-default - Border color of the select when not focused\n * @cssprop --wcs-native-select-border-color-disabled - Border color of the select when disabled\n * @cssprop --wcs-native-select-border-color-focus - Border color of the select when focused\n * @cssprop --wcs-native-select-border-color-error - Border color of the select when in error state\n * \n * @cssprop --wcs-native-select-border-style-default - Border style of the select when not focused\n * @cssprop --wcs-native-select-border-style-focus - Border style of the select when focused\n * \n * @cssprop --wcs-native-select-border-width - Border width of the select when not focused\n * @cssprop --wcs-native-select-border-width-focus - Border width of the select when focused\n * \n * @cssprop --wcs-native-select-value-color - Color of the selected value\n * @cssprop --wcs-native-select-value-font-weight - Font weight of the selected value\n * @cssprop --wcs-native-select-value-font-style - Font style of the selected value\n * \n * @cssprop --wcs-native-select-padding-horizontal-m - Padding horizontal of the select when size is 'm'\n * @cssprop --wcs-native-select-padding-horizontal-l - Padding horizontal of the select when size is 'l'\n * \n * @cssprop --wcs-native-select-arrow-color - Color of the select arrow\n * @cssprop --wcs-native-select-arrow-color-disabled - Color of the select arrow when the select is disabled\n * \n * @cssprop --wcs-native-select-text-color-disabled - Color of the text when the select is disabled\n *\n * @cssprop --wcs-native-select-placeholder-color - Color of the placeholder\n * @cssprop --wcs-native-select-placeholder-font-weight - Font weight of the placeholder\n * @cssprop --wcs-native-select-placeholder-font-style - Font style of the placeholder\n *\n * @cssprop --wcs-native-select-option-color - Text color of the options\n * @cssprop --wcs-native-select-option-font-style - Font style of the options\n * @cssprop --wcs-native-select-option-selected-color - Text color of the selected option\n *\n * \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    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     * It is propagated to the slotted select element\n     */\n    @Prop({ reflect: true }) required: boolean = false;\n    \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    @Watch('required')\n    requiredChanged(newValue: boolean, oldValue: boolean) {\n        if(newValue !== oldValue) {\n            if(!this.selectElement) return;\n            this.selectElement.required = this.required;\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    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        if(!this.selectElement) return;\n        this.selectElement.setAttribute(attr, value);\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-native-select-value-color)\";\n        this.selectElement.style.fontStyle = \"var(--wcs-native-select-value-font-style)\";\n        this.selectElement.style.fontWeight = \"var(--wcs-native-select-value-font-weight)\";\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = \"var(--wcs-native-select-option-font-style)\";\n            if (!option.disabled) {\n                option.style.color = \"var(--wcs-native-select-option-color)\";\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-native-select-placeholder-color)\";\n        this.selectElement.style.fontWeight = \"var(--wcs-native-select-placeholder-font-weight)\";\n        this.selectElement.style.fontStyle = \"var(--wcs-native-select-placeholder-font-style)\";\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = \"var(--wcs-native-select-option-font-style)\";\n            if (!option.disabled) {\n                option.style.color = \"var(--wcs-native-select-option-color)\";\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,wvJACxB,MAAAC,EAAeD,E,MCqFFE,EAAY,M,yBAwBJC,KAAAC,uCAAyC,CAAC,Y,UAfR,I,cAKN,M,cAIR,M,wBASrC,eAAAC,CAAgBC,EAAmBC,GAC/B,GAAGD,IAAaC,EAAU,CACtB,IAAIJ,KAAKK,cAAe,OACxBL,KAAKK,cAAcC,SAAWN,KAAKM,Q,EAI3C,iBAAAC,GACIP,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,CAI3D,sBAAMC,CAAiBC,EAAyBC,GAC5C,IAAI5B,KAAKK,cAAe,OACxBL,KAAKK,cAAcwB,aAAaF,EAAMC,E,CAGlC,sBAAAjB,GACJX,KAAKuB,e,CAGD,aAAAA,GACJ,GAAIvB,KAAK8B,8BAA+B,CACpC9B,KAAK+B,oD,KACF,CACH/B,KAAKgC,uD,EAIL,2BAAAF,G,MACJ,QAAOG,EAAAC,MAAMC,KAAKnC,KAAKK,cAAc+B,SAASnB,QAAOoB,GAAKA,EAAEC,WAAU,MAAE,MAAAL,SAAA,SAAAA,EAAEM,WAAY,I,CAOlF,qDAAAP,GACJhC,KAAKK,cAAcmC,MAAMC,MAAQ,uCACjCzC,KAAKK,cAAcmC,MAAME,UAAY,4CACrC1C,KAAKK,cAAcmC,MAAMG,WAAa,6CACtCT,MAAMC,KAAKnC,KAAKK,cAAc+B,SAASQ,SAAQC,IAC3CA,EAAOL,MAAME,UAAY,6CACzB,IAAKG,EAAON,SAAU,CAClBM,EAAOL,MAAMC,MAAQ,uC,KAWzB,kDAAAV,GACJ/B,KAAKK,cAAcmC,MAAMC,MAAQ,6CACjCzC,KAAKK,cAAcmC,MAAMG,WAAa,mDACtC3C,KAAKK,cAAcmC,MAAME,UAAY,kDACrCR,MAAMC,KAAKnC,KAAKK,cAAc+B,SAASQ,SAAQC,IAC3CA,EAAOL,MAAME,UAAY,6CACzB,IAAKG,EAAON,SAAU,CAClBM,EAAOL,MAAMC,MAAQ,uC,KAKzB,oCAAAnB,G,MACJtB,KAAKuC,UAAWN,EAAAjC,KAAKK,iBAAa,MAAA4B,SAAA,SAAAA,EAAEa,aAAa,W,CAGrD,oBAAAC,G,SACId,EAAAjC,KAAKa,YAAQ,MAAAoB,SAAA,SAAAA,EAAEe,cACfC,EAAAjD,KAAKK,iBAAa,MAAA4C,SAAA,SAAAA,EAAEC,oBAAoB,UAAU,KAC9ClD,KAAKW,wBAAwB,G,CAQrC,kBAAMwC,GAKFnD,KAAKuB,e,CAGT,MAAA6B,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,GAAGxD,KAAKyD,SAAW,WAAa,KAAI,gBAAiBzD,KAAKuC,SAAQ,YAAavC,KAAK0D,MAC7FL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACPH,EAAA,QAAAE,IAAA,6CACAF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACPH,EAACM,EAAW,CAAAJ,IAAA,2CAACK,GAAI5D,KAAKyD,a"}

package/dist/wcs/p-622f7403.entry.js

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

package/dist/wcs/p-622f7403.entry.js.map

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

package/dist/wcs/p-637ec45a.entry.js

@@ -0,0 +1,2 @@
+import{r,h as o,g as a}from"./p-32e583ea.js";const t=":host{--wcs-card-border-color:var(--wcs-semantic-color-border-secondary);--wcs-card-border-radius:var(--wcs-semantic-border-radius-base);--wcs-card-border-width:var(--wcs-semantic-border-width-default);--wcs-card-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-card-text-color:var(--wcs-semantic-color-text-primary);--wcs-card-horizontal-min-height:160px;position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-clip:border-box;border-radius:var(--wcs-card-border-radius);background-color:var(--wcs-card-background-color);color:var(--wcs-card-text-color)}:host([mode=raised]){box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2)}:host([mode=flat]){border:solid var(--wcs-card-border-width) var(--wcs-card-border-color)}:host([orientation=horizontal]){flex-direction:row;min-height:var(--wcs-card-horizontal-height)}:host([orientation=vertical]){flex-direction:column}";const c=t;const i=class{constructor(o){r(this,o);this.mode="flat";this.orientation=null}orientationChanged(){this.updateWcsCardImageOrientation()}onSlotChange(){if(this.orientation){this.updateWcsCardBodyOrientation();this.updateWcsCardImageOrientation()}}updateWcsCardImageOrientation(){var r;(r=this.findWcsCardMedia())===null||r===void 0?void 0:r.setOrientation(this.orientation)}updateWcsCardBodyOrientation(){var r;(r=this.findWcsCardBody())===null||r===void 0?void 0:r.setOrientation(this.orientation)}findWcsCardMedia(){return this.el.querySelector("wcs-card-media")}findWcsCardBody(){return this.el.querySelector("wcs-card-body")}render(){return o("slot",{key:"20a57cf8fc64155e65a98bdb69618ec013ea5a7f",onSlotchange:()=>this.onSlotChange()})}get el(){return a(this)}static get watchers(){return{orientation:["orientationChanged"]}}};i.style=c;export{i as wcs_card};
+//# sourceMappingURL=p-637ec45a.entry.js.map

package/dist/wcs/p-637ec45a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardCss","WcsCardStyle0","Card","orientationChanged","this","updateWcsCardImageOrientation","onSlotChange","orientation","updateWcsCardBodyOrientation","_a","findWcsCardMedia","setOrientation","findWcsCardBody","el","querySelector","render","h","key","onSlotchange"],"sources":["src/components/card/card.scss?tag=wcs-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":[":host {\n    --wcs-card-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-card-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-card-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-card-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-card-text-color: var(--wcs-semantic-color-text-primary);\n\n    --wcs-card-horizontal-min-height: 160px;\n\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    word-wrap: break-word;\n    background-clip: border-box;\n    border-radius: var(--wcs-card-border-radius);\n    background-color: var(--wcs-card-background-color);\n    color: var(--wcs-card-text-color);\n}\n\n:host([mode=\"raised\"]) {\n    /* Card mode raised is deprecated in the new design system */\n    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .20)\n}\n\n:host([mode=\"flat\"]) {\n    border: solid var(--wcs-card-border-width) var(--wcs-card-border-color);\n}\n\n:host([orientation=\"horizontal\"]) {\n    flex-direction: row;\n    min-height: var(--wcs-card-horizontal-height);\n}\n\n:host([orientation=\"vertical\"]) {\n    flex-direction: column;\n}\n","import { Component, ComponentInterface, h, Prop, Element, Watch } from '@stencil/core';\nimport { CardMode, CardOrientation } from './card-interface';\n\n/**\n * The card component is a container that display content such as text, images, buttons, and lists.  \n * A card can be a single component, but is often made up of a header, title, subtitle, and content.\n * \n * While they're very flexible, it's important to use them consistently. You may use `wcs-card-media` outside `wcs-card-body`\n * and `wcs-card-header` `wcs-card-content` `wcs-card-footer` within `wcs-card-body` to make sure the card is well-designed.\n *\n * @slot - Default slot for the card content\n * \n * @cssprop --wcs-card-border-color - Border color of the card\n * @cssprop --wcs-card-border-radius - Border radius of the card\n * @cssprop --wcs-card-border-width - Border width of the card\n * @cssprop --wcs-card-background-color - Background color of the card\n * @cssprop --wcs-card-text-color - Text color of the card\n * @cssprop --wcs-card-horizontal-min-height - Min height of the card when horizontal\n */\n@Component({\n    tag: 'wcs-card',\n    styleUrl: 'card.scss',\n    shadow: true\n})\nexport class Card implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n    @Prop({reflect: true, mutable: true})\n    mode: CardMode = 'flat';\n    /**\n     * The orientation of the card, can be horizontal or vertical\n     */\n    @Prop({reflect: true})\n    orientation: CardOrientation = null;\n\n    @Watch('orientation')\n    orientationChanged() {\n        this.updateWcsCardImageOrientation();\n    }\n\n    private onSlotChange() {\n        if(this.orientation) {\n            this.updateWcsCardBodyOrientation();\n            this.updateWcsCardImageOrientation();\n        }\n    }\n\n    private updateWcsCardImageOrientation() {\n        this.findWcsCardMedia()?.setOrientation(this.orientation);\n    }\n\n    private updateWcsCardBodyOrientation() {\n        this.findWcsCardBody()?.setOrientation(this.orientation);\n    }\n\n    private findWcsCardMedia(): HTMLWcsCardMediaElement {\n        return this.el.querySelector('wcs-card-media');\n    }\n\n    private findWcsCardBody(): HTMLWcsCardBodyElement {\n        return this.el.querySelector('wcs-card-body');\n    }\n\n    render() {\n        return (\n            <slot onSlotchange={() => this.onSlotChange()}/>\n        );\n    }\n}\n"],"mappings":"6CAAA,MAAMA,EAAU,o+BAChB,MAAAC,EAAeD,E,MCuBFE,EAAI,M,mCAGI,O,iBAKc,I,CAG/B,kBAAAC,GACIC,KAAKC,+B,CAGD,YAAAC,GACJ,GAAGF,KAAKG,YAAa,CACjBH,KAAKI,+BACLJ,KAAKC,+B,EAIL,6BAAAA,G,OACJI,EAAAL,KAAKM,sBAAkB,MAAAD,SAAA,SAAAA,EAAEE,eAAeP,KAAKG,Y,CAGzC,4BAAAC,G,OACJC,EAAAL,KAAKQ,qBAAiB,MAAAH,SAAA,SAAAA,EAAEE,eAAeP,KAAKG,Y,CAGxC,gBAAAG,GACJ,OAAON,KAAKS,GAAGC,cAAc,iB,CAGzB,eAAAF,GACJ,OAAOR,KAAKS,GAAGC,cAAc,gB,CAGjC,MAAAC,GACI,OACIC,EAAA,QAAAC,IAAA,2CAAMC,aAAc,IAAMd,KAAKE,gB"}

package/dist/wcs/p-6aededc6.entry.js

@@ -0,0 +1,2 @@
+import{r as c,h as e,H as a}from"./p-32e583ea.js";const s=":host{--wcs-card-footer-gap:var(--wcs-semantic-spacing-base);display:flex;flex-direction:row;align-items:center;gap:var(--wcs-card-footer-gap)}";const r=s;const o=class{constructor(e){c(this,e)}render(){return e(a,{key:"8b600e63a3178bbf9c3d577053b927ff6ea9a48f"},e("slot",{key:"1ce0728f66cd296c44dcc4d85c9e9d9dcbae853a"}))}};o.style=r;export{o as wcs_card_footer};
+//# sourceMappingURL=p-6aededc6.entry.js.map

package/dist/wcs/p-6aededc6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardFooterCss","WcsCardFooterStyle0","CardFooter","render","h","Host","key"],"sources":["src/components/card-footer/card-footer.scss?tag=wcs-card-footer&encapsulation=shadow","src/components/card-footer/card-footer.tsx"],"sourcesContent":[":host {\n    --wcs-card-footer-gap: var(--wcs-semantic-spacing-base);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--wcs-card-footer-gap);\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * The card footer component is a container that display content at the bottom of the card.\n * It uses a flex layout to organize actions the user can take with a card\n * \n * @cssprop --wcs-card-footer-gap - Gap of the card footer\n */\n@Component({\n    tag: 'wcs-card-footer',\n    styleUrl: 'card-footer.scss',\n    shadow: true,\n})\nexport class CardFooter {\n\n    render() {\n        return (\n            <Host>\n                <slot></slot>\n            </Host>\n        );\n    }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAgB,kJACtB,MAAAC,EAAeD,E,MCYFE,EAAU,M,yBAEnB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,QAAAE,IAAA,6C"}

package/dist/wcs/p-6c6079ee.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as a,h as c,H as r,g as e}from"./p-32e583ea.js";import{S as n}from"./p-84e22272.js";import{i as s,a as i,s as d}from"./p-52d77e1f.js";const t=":host{display:flex;flex-direction:column;cursor:pointer;--wcs-accordion-panel-color-default:var(--wcs-semantic-color-text-primary);--wcs-accordion-panel-color-highlight:var(--wcs-semantic-color-text-primary);--wcs-accordion-panel-color-hover:var(--wcs-semantic-color-text-primary);--wcs-accordion-panel-color-press:var(--wcs-semantic-color-text-primary);--wcs-accordion-panel-action-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-accordion-panel-action-color-highlight:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-accordion-panel-action-color-hover:var(--wcs-semantic-color-foreground-action-secondary-hover);--wcs-accordion-panel-action-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-accordion-panel-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-accordion-panel-background-color-highlight:var(--wcs-semantic-color-background-action-secondary-press);--wcs-accordion-panel-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-accordion-panel-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-accordion-panel-header-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-accordion-panel-header-font-size:var(--wcs-semantic-font-size-heading-6);--wcs-accordion-panel-header-gap:calc(3 * var(--wcs-semantic-spacing-base));--wcs-accordion-panel-border-radius:var(--wcs-semantic-border-radius-base);--wcs-accordion-panel-border-radius-open:var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius) 0 0;--wcs-accordion-panel-padding-vertical:var(--wcs-semantic-spacing-large);--wcs-accordion-panel-padding-horizontal:calc(var(--wcs-semantic-spacing-base) * 3);--wcs-accordion-panel-header-border-width:var(--wcs-semantic-border-width-default);--wcs-accordion-panel-border-width:var(--wcs-semantic-border-width-default);--wcs-accordion-panel-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-accordion-panel-border-color:var(--wcs-semantic-color-border-secondary);--wcs-accordion-panel-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-accordion-panel-border-style-focus:var(--wcs-semantic-border-style-focus-base);--wcs-accordion-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);border:var(--wcs-accordion-panel-border-width) solid var(--wcs-accordion-panel-border-color);border-radius:var(--wcs-accordion-panel-border-radius)}:host .header{display:flex;align-items:center;justify-content:space-between;gap:var(--wcs-accordion-panel-header-gap);padding:var(--wcs-accordion-panel-padding-vertical) var(--wcs-accordion-panel-padding-horizontal);border-radius:var(--wcs-accordion-panel-border-radius);font-weight:var(--wcs-accordion-panel-header-font-weight);font-size:var(--wcs-accordion-panel-header-font-size);font-family:var(--wcs-font-sans-serif);color:var(--wcs-accordion-panel-color-default);background-color:var(--wcs-accordion-panel-background-color-default);border:none;transition:background-color var(--wcs-accordion-transition-duration)}@media (forced-colors: active){:host .header{border:var(--wcs-accordion-panel-header-border-width) solid ButtonBorder}}:host .header:focus-visible{outline:var(--wcs-accordion-panel-border-width-focus) var(--wcs-accordion-panel-border-style-focus) var(--wcs-accordion-panel-border-color-focus)}:host .header:hover{cursor:pointer;color:var(--wcs-accordion-panel-color-hover);background-color:var(--wcs-accordion-panel-background-color-hover)}:host .header:hover .header-action{color:var(--wcs-accordion-panel-action-color-hover)}:host .header:hover .header-action .arrow{fill:var(--wcs-accordion-panel-action-color-hover)}:host .header:active{background-color:var(--wcs-accordion-panel-background-color-press)}:host .header-action{display:flex;align-items:center;user-select:none;color:var(--wcs-accordion-panel-action-color-default)}:host .header-action .arrow{fill:var(--wcs-accordion-panel-action-color-default)}:host .content{display:none}:host([open]){margin-bottom:0;}:host([open]) .header{border-radius:var(--wcs-accordion-panel-border-radius-open)}:host([open]) .content{display:block}:host([open]):host([highlight]){}:host([open]):host([highlight]) .header{background-color:var(--wcs-accordion-panel-background-color-highlight);color:var(--wcs-accordion-panel-color-highlight)}:host([open]):host([highlight]) .header-action{color:var(--wcs-accordion-panel-action-color-highlight)}:host([open]):host([highlight]) .header-action .arrow{fill:var(--wcs-accordion-panel-action-color-highlight)}";const l=t;const h=["tabindex","title"];const p=class{constructor(c){o(this,c);this.wcsOpenChange=a(this,"wcsOpenChange",7);this.inheritedAttributes={};this.open=false;this.hideActionText=false;this.highlight=false;this.groupContentWithHeader=false}openChange(o){this.wcsOpenChange.emit(o)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},s(this.el)),i(this.el,h))}async setAriaAttribute(o,a){d(this.nativeButton,o,a)}async close(){this.open=false}render(){return c(r,{key:"72253126a8cf58f763fd07bff54c0cf2c446afdc"},c("button",Object.assign({key:"97b70c995180acbd0fcfc97a43ea9208fdc464ff","aria-expanded":this.open?"true":"false","aria-controls":"content",class:"header",ref:o=>this.nativeButton=o,onClick:()=>this.open=!this.open},this.inheritedAttributes),c("slot",{key:"1b2d8ad5d8ee9a30f5e3d90aad3888f2061cfab8",name:"header"}),c("span",{key:"27867e5c690c771735f63115661e2e4949aac3f3",class:"header-action"},!this.hideActionText&&c("span",{key:"3ca56e1a94f8366117bb3cdeabeab8ee6ead8da8"},this.open?"Fermez":"Ouvrez"),c(n,{key:"eddb7be148606307d13b785aae423b72410495c3",up:this.open}))),c("div",{key:"2be057b4461c0c969fd4285509dab6514487edb6",class:"content",id:"content"},c("slot",{key:"5be6f3677c52dde4f2f64058d1a378e455da3d27",name:"content"})))}get el(){return e(this)}static get watchers(){return{open:["openChange"]}}};p.style=l;export{p as wcs_accordion_panel};
+//# sourceMappingURL=p-6c6079ee.entry.js.map

package/dist/wcs/{p-209145de.entry.js.map → p-6c6079ee.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["accordionPanelCss","WcsAccordionPanelStyle0","ACCORDION_INHERITED_ATTRS","AccordionPanel","this","inheritedAttributes","openChange","newValue","wcsOpenChange","emit","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeButton","close","open","render","h","Host","key","class","ref","onClick","name","hideActionText","SelectArrow","up","id"],"sources":["src/components/accordion-panel/accordion-panel.scss?tag=wcs-accordion-panel&encapsulation=shadow","src/components/accordion-panel/accordion-panel.tsx"],"sourcesContent":["@mixin accordion-panel-focus {\n    outline: var(--wcs-accordion-panel-border-width-focus) var(--wcs-accordion-panel-border-style-focus) var(--wcs-accordion-panel-border-color-focus);\n}\n\n:host {\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n\n    --wcs-accordion-panel-color-default: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-highlight: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-hover: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-press: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-action-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-accordion-panel-action-color-highlight: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-accordion-panel-action-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);\n    --wcs-accordion-panel-action-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-accordion-panel-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-accordion-panel-background-color-highlight: var(--wcs-semantic-color-background-action-secondary-press);\n    --wcs-accordion-panel-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-accordion-panel-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);\n\n    --wcs-accordion-panel-header-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-accordion-panel-header-font-size: var(--wcs-semantic-font-size-heading-6);\n    --wcs-accordion-panel-header-gap: calc(3 * var(--wcs-semantic-spacing-base));\n    --wcs-accordion-panel-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-accordion-panel-border-radius-open: var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius) 0 0;\n    --wcs-accordion-panel-padding-vertical: var(--wcs-semantic-spacing-large);\n    --wcs-accordion-panel-padding-horizontal: calc(var(--wcs-semantic-spacing-base) * 3);\n\n    --wcs-accordion-panel-header-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-accordion-panel-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-accordion-panel-border-width-focus: var(--wcs-semantic-border-width-large);\n    --wcs-accordion-panel-border-color: var(--wcs-semantic-color-border-secondary);\n\n    --wcs-accordion-panel-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n    --wcs-accordion-panel-border-style-focus: var(--wcs-semantic-border-style-focus-base);\n\n    --wcs-accordion-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    border: var(--wcs-accordion-panel-border-width) solid var(--wcs-accordion-panel-border-color);\n    border-radius: var(--wcs-accordion-panel-border-radius);\n\n    .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--wcs-accordion-panel-header-gap);\n        padding: var(--wcs-accordion-panel-padding-vertical) var(--wcs-accordion-panel-padding-horizontal);\n        border-radius: var(--wcs-accordion-panel-border-radius);\n        font-weight: var(--wcs-accordion-panel-header-font-weight);\n        // TODO replace px to rem\n        font-size: var(--wcs-accordion-panel-header-font-size);\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-accordion-panel-color-default);\n        background-color: var(--wcs-accordion-panel-background-color-default);\n        border: none;\n\n        transition: background-color var(--wcs-accordion-transition-duration);\n\n        @media (forced-colors: active) {\n            // for WHCM\n            border: var(--wcs-accordion-panel-header-border-width) solid ButtonBorder;\n        }\n        &:focus-visible {\n            @include accordion-panel-focus;\n        }\n\n        &:hover {\n            cursor: pointer;\n\n            color: var(--wcs-accordion-panel-color-hover);\n            background-color: var(--wcs-accordion-panel-background-color-hover);\n\n            .header-action {\n                color: var(--wcs-accordion-panel-action-color-hover);\n\n                .arrow {\n                    fill: var(--wcs-accordion-panel-action-color-hover);\n                }\n            }\n        }\n\n        &:active {\n            background-color: var(--wcs-accordion-panel-background-color-press);\n        }\n    }\n\n    .header-action {\n        display: flex;\n        align-items: center;\n        user-select: none;\n\n        color: var(--wcs-accordion-panel-action-color-default);\n\n        .arrow {\n            fill: var(--wcs-accordion-panel-action-color-default);\n        }\n    }\n\n    .content {\n        display: none;\n    }\n\n}\n\n:host([open]) {\n    margin-bottom: 0;\n\n    .header {\n        border-radius: var(--wcs-accordion-panel-border-radius-open);\n    }\n\n    .content {\n        display: block;\n    }\n\n\n    /* FIXME GroupContentWithHeader is deprecated. Remove this.\n    &:host([group-content-with-header]) {\n        .header {\n            border-radius: var(--wcs-accordion-panel-border-radius-open);\n            padding-bottom: 0;\n        }\n\n        .content {\n            border-radius: 0 0 var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius);\n            margin-bottom: var(--wcs-);\n            background-color: var(--wcs-accordion-panel-background-color-default);\n        }\n    }\n    */\n\n    &:host([highlight]) {\n        .header {\n            background-color: var(--wcs-accordion-panel-background-color-highlight);\n            color: var(--wcs-accordion-panel-color-highlight);\n        }\n\n        .header-action {\n            color: var(--wcs-accordion-panel-action-color-highlight);\n\n            .arrow {\n                fill: var(--wcs-accordion-panel-action-color-highlight);\n            }\n        }\n\n        /* FIXME GroupContentWithHeader is deprecated. Remove this.\n        &:host([group-content-with-header]) {\n            .content {\n                background-color: var(--wcs-accordion-panel-background-color-highlight);\n                color: var(--wcs-accordion-panel-color-highlight);\n            }\n        }\n        */\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst ACCORDION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The accordion-panel is a subcomponent of `wcs-accordion`. It represents every panel of the accordion that can be expanded.\n * \n *\n * @cssprop --wcs-accordion-panel-color-default - Default color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-highlight - Highlight color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-hover - Hover color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-press - Press color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-default - Default action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-highlight - Highlight action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-hover - Hovered action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-press - Pressed action color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-default - Default background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-highlight - Highlight background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-hover - Hover background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-press - Press background color of the accordion panel\n * @cssprop --wcs-accordion-panel-header-font-size - Font size of the accordion panel header\n * @cssprop --wcs-accordion-panel-header-font-weight - Font weight of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-radius - Border radius of the accordion panel\n * @cssprop --wcs-accordion-panel-border-radius-open - Border radius of the open accordion panel\n * @cssprop --wcs-accordion-panel-padding-vertical - Vertical padding of the accordion panel\n * @cssprop --wcs-accordion-panel-padding-horizontal - Horizontal padding of the accordion panel\n * @cssprop --wcs-accordion-panel-header-border-width - Border width of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-width - Border width of the accordion panel\n * @cssprop --wcs-accordion-panel-border-width-focus - Border width of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-color - Border color of the accordion panel\n * @cssprop --wcs-accordion-panel-border-color-focus - Border color of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-style-focus - Border style of the accordion panel when focused\n * @cssprop --wcs-accordion-transition-duration - Transition duration of the accordion panel\n */\n@Component({\n    tag: 'wcs-accordion-panel',\n    styleUrl: 'accordion-panel.scss',\n    shadow: true\n})\nexport class AccordionPanel implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeButton?: HTMLButtonElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @Prop({reflect: true, mutable: true}) open = false;\n\n    /**\n     * Specifies whether the component should display the open/close text.\n     * if false, it won't show the open/close text.\n     */\n    @Prop({reflect: true}) hideActionText: boolean = false;\n\n    /**\n     * Specifies whether the component should highlight when open with primary color.\n     * if true, the background color will be the primary color.\n     * if false, the background color will be wcs-light.\n     */\n    @Prop({reflect: true}) highlight: boolean = false;\n\n    /**\n     * Specifies wether the component should group the content with header in one card\n     * if true, there will be only one card with the header and the content\n     * Nothing change when the panel is close\n     */\n    @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n    @Event() wcsOpenChange!: EventEmitter<boolean>;\n\n    @Watch('open')\n    openChange(newValue: boolean) {\n        this.wcsOpenChange.emit(newValue);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, ACCORDION_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    @Method()\n    async close() {\n        this.open = false;\n    }\n\n    render() {\n  \n  \n  \n        return (\n            <Host>\n                <button aria-expanded={this.open ? \"true\": \"false\"}\n                        aria-controls=\"content\"\n                        class=\"header\"\n                        ref={(el) => this.nativeButton = el}\n                        onClick={() => this.open = !this.open}\n                        {...this.inheritedAttributes}>\n                    <slot name=\"header\"/>\n                    <span class=\"header-action\">\n                        {!this.hideActionText && (\n                            <span>{this.open ? 'Fermez' : 'Ouvrez'}</span>)\n                        }\n                        <SelectArrow up={this.open}/>\n                    </span>\n                </button>\n                <div class=\"content\" id=\"content\">\n                    <slot name=\"content\"/>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"iJAAA,MAAMA,EAAoB,mhJAC1B,MAAAC,EAAeD,ECef,MAAME,EAA4B,CAAC,WAAY,S,MAqClCC,EAAc,M,sEAGfC,KAAAC,oBAA4C,G,UAEP,M,oBAMI,M,eAOL,M,4BAOa,K,CAKzD,UAAAC,CAAWC,GACPH,KAAKI,cAAcC,KAAKF,E,CAG5B,iBAAAG,GACIN,KAAKC,oBAAmBM,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBT,KAAKU,KAC3BC,EAAkBX,KAAKU,GAAIZ,G,CAKtC,sBAAMc,CAAiBC,EAAyBC,GAC5CC,EAAqBf,KAAKgB,aAAcH,EAAMC,E,CAIlD,WAAMG,GACFjB,KAAKkB,KAAO,K,CAGhB,MAAAC,GAII,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,SAAAb,OAAAC,OAAA,CAAAc,IAAA,2DAAuBtB,KAAKkB,KAAO,OAAQ,QAAO,gBAC5B,UACdK,MAAM,SACNC,IAAMd,GAAOV,KAAKgB,aAAeN,EACjCe,QAAS,IAAMzB,KAAKkB,MAAQlB,KAAKkB,MAC7BlB,KAAKC,qBACbmB,EAAA,QAAAE,IAAA,2CAAMI,KAAK,WACXN,EAAA,QAAAE,IAAA,2CAAMC,MAAM,kBACNvB,KAAK2B,gBACHP,EAAA,QAAAE,IAAA,4CAAOtB,KAAKkB,KAAO,SAAW,UAElCE,EAACQ,EAAW,CAAAN,IAAA,2CAACO,GAAI7B,KAAKkB,SAG9BE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UAAUO,GAAG,WACpBV,EAAA,QAAAE,IAAA,2CAAMI,KAAK,a"}
+{"version":3,"names":["accordionPanelCss","WcsAccordionPanelStyle0","ACCORDION_INHERITED_ATTRS","AccordionPanel","this","inheritedAttributes","openChange","newValue","wcsOpenChange","emit","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeButton","close","open","render","h","Host","key","class","ref","onClick","name","hideActionText","SelectArrow","up","id"],"sources":["src/components/accordion-panel/accordion-panel.scss?tag=wcs-accordion-panel&encapsulation=shadow","src/components/accordion-panel/accordion-panel.tsx"],"sourcesContent":["@mixin accordion-panel-focus {\n    outline: var(--wcs-accordion-panel-border-width-focus) var(--wcs-accordion-panel-border-style-focus) var(--wcs-accordion-panel-border-color-focus);\n}\n\n:host {\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n\n    --wcs-accordion-panel-color-default: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-highlight: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-hover: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-press: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-action-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-accordion-panel-action-color-highlight: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-accordion-panel-action-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);\n    --wcs-accordion-panel-action-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-accordion-panel-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-accordion-panel-background-color-highlight: var(--wcs-semantic-color-background-action-secondary-press);\n    --wcs-accordion-panel-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-accordion-panel-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);\n\n    --wcs-accordion-panel-header-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-accordion-panel-header-font-size: var(--wcs-semantic-font-size-heading-6);\n    --wcs-accordion-panel-header-gap: calc(3 * var(--wcs-semantic-spacing-base));\n    --wcs-accordion-panel-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-accordion-panel-border-radius-open: var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius) 0 0;\n    --wcs-accordion-panel-padding-vertical: var(--wcs-semantic-spacing-large);\n    --wcs-accordion-panel-padding-horizontal: calc(var(--wcs-semantic-spacing-base) * 3);\n\n    --wcs-accordion-panel-header-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-accordion-panel-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-accordion-panel-border-width-focus: var(--wcs-semantic-border-width-large);\n    --wcs-accordion-panel-border-color: var(--wcs-semantic-color-border-secondary);\n\n    --wcs-accordion-panel-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n    --wcs-accordion-panel-border-style-focus: var(--wcs-semantic-border-style-focus-base);\n\n    --wcs-accordion-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    border: var(--wcs-accordion-panel-border-width) solid var(--wcs-accordion-panel-border-color);\n    border-radius: var(--wcs-accordion-panel-border-radius);\n\n    .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--wcs-accordion-panel-header-gap);\n        padding: var(--wcs-accordion-panel-padding-vertical) var(--wcs-accordion-panel-padding-horizontal);\n        border-radius: var(--wcs-accordion-panel-border-radius);\n        font-weight: var(--wcs-accordion-panel-header-font-weight);\n        // TODO replace px to rem\n        font-size: var(--wcs-accordion-panel-header-font-size);\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-accordion-panel-color-default);\n        background-color: var(--wcs-accordion-panel-background-color-default);\n        border: none;\n\n        transition: background-color var(--wcs-accordion-transition-duration);\n\n        @media (forced-colors: active) {\n            // for WHCM\n            border: var(--wcs-accordion-panel-header-border-width) solid ButtonBorder;\n        }\n        &:focus-visible {\n            @include accordion-panel-focus;\n        }\n\n        &:hover {\n            cursor: pointer;\n\n            color: var(--wcs-accordion-panel-color-hover);\n            background-color: var(--wcs-accordion-panel-background-color-hover);\n\n            .header-action {\n                color: var(--wcs-accordion-panel-action-color-hover);\n\n                .arrow {\n                    fill: var(--wcs-accordion-panel-action-color-hover);\n                }\n            }\n        }\n\n        &:active {\n            background-color: var(--wcs-accordion-panel-background-color-press);\n        }\n    }\n\n    .header-action {\n        display: flex;\n        align-items: center;\n        user-select: none;\n\n        color: var(--wcs-accordion-panel-action-color-default);\n\n        .arrow {\n            fill: var(--wcs-accordion-panel-action-color-default);\n        }\n    }\n\n    .content {\n        display: none;\n    }\n\n}\n\n:host([open]) {\n    margin-bottom: 0;\n\n    .header {\n        border-radius: var(--wcs-accordion-panel-border-radius-open);\n    }\n\n    .content {\n        display: block;\n    }\n\n\n    /* FIXME GroupContentWithHeader is deprecated. Remove this.\n    &:host([group-content-with-header]) {\n        .header {\n            border-radius: var(--wcs-accordion-panel-border-radius-open);\n            padding-bottom: 0;\n        }\n\n        .content {\n            border-radius: 0 0 var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius);\n            margin-bottom: var(--wcs-);\n            background-color: var(--wcs-accordion-panel-background-color-default);\n        }\n    }\n    */\n\n    &:host([highlight]) {\n        .header {\n            background-color: var(--wcs-accordion-panel-background-color-highlight);\n            color: var(--wcs-accordion-panel-color-highlight);\n        }\n\n        .header-action {\n            color: var(--wcs-accordion-panel-action-color-highlight);\n\n            .arrow {\n                fill: var(--wcs-accordion-panel-action-color-highlight);\n            }\n        }\n\n        /* FIXME GroupContentWithHeader is deprecated. Remove this.\n        &:host([group-content-with-header]) {\n            .content {\n                background-color: var(--wcs-accordion-panel-background-color-highlight);\n                color: var(--wcs-accordion-panel-color-highlight);\n            }\n        }\n        */\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst ACCORDION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The accordion-panel is a subcomponent of `wcs-accordion`. It represents every panel of the accordion that can be expanded.\n * \n *\n * @cssprop --wcs-accordion-panel-color-default - Default color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-highlight - Highlight color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-hover - Hover color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-press - Press color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-default - Default action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-highlight - Highlight action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-hover - Hovered action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-press - Pressed action color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-default - Default background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-highlight - Highlight background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-hover - Hover background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-press - Press background color of the accordion panel\n * @cssprop --wcs-accordion-panel-header-font-size - Font size of the accordion panel header\n * @cssprop --wcs-accordion-panel-header-font-weight - Font weight of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-radius - Border radius of the accordion panel\n * @cssprop --wcs-accordion-panel-border-radius-open - Border radius of the open accordion panel\n * @cssprop --wcs-accordion-panel-padding-vertical - Vertical padding of the accordion panel\n * @cssprop --wcs-accordion-panel-padding-horizontal - Horizontal padding of the accordion panel\n * @cssprop --wcs-accordion-panel-header-border-width - Border width of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-width - Border width of the accordion panel\n * @cssprop --wcs-accordion-panel-border-width-focus - Border width of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-color - Border color of the accordion panel\n * @cssprop --wcs-accordion-panel-border-color-focus - Border color of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-style-focus - Border style of the accordion panel when focused\n * @cssprop --wcs-accordion-transition-duration - Transition duration of the accordion panel\n */\n@Component({\n    tag: 'wcs-accordion-panel',\n    styleUrl: 'accordion-panel.scss',\n    shadow: true\n})\nexport class AccordionPanel implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeButton?: HTMLButtonElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @Prop({reflect: true, mutable: true}) open: boolean = false;\n\n    /**\n     * Specifies whether the component should display the open/close text.\n     * if false, it won't show the open/close text.\n     */\n    @Prop({reflect: true}) hideActionText: boolean = false;\n\n    /**\n     * Specifies whether the component should highlight when open with primary color.\n     * if true, the background color will be the primary color.\n     * if false, the background color will be wcs-light.\n     */\n    @Prop({reflect: true}) highlight: boolean = false;\n\n    /**\n     * Specifies wether the component should group the content with header in one card\n     * if true, there will be only one card with the header and the content\n     * Nothing change when the panel is close\n     */\n    @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n    @Event() wcsOpenChange!: EventEmitter<boolean>;\n\n    @Watch('open')\n    openChange(newValue: boolean) {\n        this.wcsOpenChange.emit(newValue);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, ACCORDION_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    @Method()\n    async close() {\n        this.open = false;\n    }\n\n    render() {\n  \n  \n  \n        return (\n            <Host>\n                <button aria-expanded={this.open ? \"true\": \"false\"}\n                        aria-controls=\"content\"\n                        class=\"header\"\n                        ref={(el) => this.nativeButton = el}\n                        onClick={() => this.open = !this.open}\n                        {...this.inheritedAttributes}>\n                    <slot name=\"header\"/>\n                    <span class=\"header-action\">\n                        {!this.hideActionText && (\n                            <span>{this.open ? 'Fermez' : 'Ouvrez'}</span>)\n                        }\n                        <SelectArrow up={this.open}/>\n                    </span>\n                </button>\n                <div class=\"content\" id=\"content\">\n                    <slot name=\"content\"/>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"sJAAA,MAAMA,EAAoB,mhJAC1B,MAAAC,EAAeD,ECef,MAAME,EAA4B,CAAC,WAAY,S,MAqClCC,EAAc,M,sEAGfC,KAAAC,oBAA4C,G,UAEE,M,oBAML,M,eAOL,M,4BAOa,K,CAKzD,UAAAC,CAAWC,GACPH,KAAKI,cAAcC,KAAKF,E,CAG5B,iBAAAG,GACIN,KAAKC,oBAAmBM,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBT,KAAKU,KAC3BC,EAAkBX,KAAKU,GAAIZ,G,CAKtC,sBAAMc,CAAiBC,EAAyBC,GAC5CC,EAAqBf,KAAKgB,aAAcH,EAAMC,E,CAIlD,WAAMG,GACFjB,KAAKkB,KAAO,K,CAGhB,MAAAC,GAII,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,SAAAb,OAAAC,OAAA,CAAAc,IAAA,2DAAuBtB,KAAKkB,KAAO,OAAQ,QAAO,gBAC5B,UACdK,MAAM,SACNC,IAAMd,GAAOV,KAAKgB,aAAeN,EACjCe,QAAS,IAAMzB,KAAKkB,MAAQlB,KAAKkB,MAC7BlB,KAAKC,qBACbmB,EAAA,QAAAE,IAAA,2CAAMI,KAAK,WACXN,EAAA,QAAAE,IAAA,2CAAMC,MAAM,kBACNvB,KAAK2B,gBACHP,EAAA,QAAAE,IAAA,4CAAOtB,KAAKkB,KAAO,SAAW,UAElCE,EAACQ,EAAW,CAAAN,IAAA,2CAACO,GAAI7B,KAAKkB,SAG9BE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UAAUO,GAAG,WACpBV,EAAA,QAAAE,IAAA,2CAAMI,KAAK,a"}

package/dist/wcs/{p-e5c057c4.entry.js → p-781a956e.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as a}from"./p-32e583ea.js";const t=':host{background-color:var(--wcs-semantic-color-background-surface-secondary);margin:0;display:grid;grid-template-areas:"header header" "sidebar content";grid-template-columns:min-content auto;overflow-y:hidden}::slotted(main){padding:8px;grid-area:content;overflow-y:scroll;height:calc(100vh - 64px)}::slotted(wcs-header){grid-area:header}@media screen and (max-width: 768px){:host{grid-template-areas:"header" "sidebar" "content";grid-template-columns:auto}::slotted(header){position:relative}::slotted(main){overflow-y:visible;height:initial}}';const r=t;const o=class{constructor(a){e(this,a)}render(){return[a("slot",{key:"5655ce9854ae1038dac8b4402eb8ac5d9da440bf",name:"header"}),a("slot",{key:"613126c7ae2b38cf7704dcef94e67c638027bcee",name:"sidebar"}),a("slot",{key:"e845a127c56be76787b6902a4ad11aebc1d3fc87",name:"content"})]}};o.style=r;export{o as wcs_app};
-//# sourceMappingURL=p-e5c057c4.entry.js.map
+import{r as e,h as a}from"./p-32e583ea.js";const t=':host{background-color:var(--wcs-semantic-color-background-surface-secondary);margin:0;display:grid;grid-template-areas:"header header" "sidebar content";grid-template-columns:min-content auto;overflow-y:hidden}::slotted(main){padding:8px;grid-area:content;overflow-y:scroll;height:calc(100vh - 64px)}::slotted(wcs-header){grid-area:header}@media screen and (max-width: 768px){:host{grid-template-areas:"header" "sidebar" "content";grid-template-columns:auto}::slotted(header){position:relative}::slotted(main){overflow-y:visible;height:initial}}';const r=t;const o=class{constructor(a){e(this,a)}render(){return[a("slot",{key:"615427e4b1e7219b1b78fbca36f8385f64119314",name:"header"}),a("slot",{key:"da5fbe3b8d0eb3963d9e42a9e3396f9bf3d49c0d",name:"sidebar"}),a("slot",{key:"3227284afd347f4af0c47ad0f9b46712502df225",name:"content"})]}};o.style=r;export{o as wcs_app};
+//# sourceMappingURL=p-781a956e.entry.js.map

package/dist/wcs/p-7de847e0.entry.js

@@ -0,0 +1,2 @@
+import{r,h as d,H as o}from"./p-32e583ea.js";const s=":host{--wcs-dropdown-divider-margin:var(--wcs-semantic-spacing-base) 0;--wcs-dropdown-divider-color:var(--wcs-semantic-color-border-secondary);display:block;margin:var(--wcs-dropdown-divider-margin);overflow:hidden;border-top:1px solid var(--wcs-dropdown-divider-color)}";const e=s;const i=class{constructor(d){r(this,d)}render(){return d(o,{key:"52d90154f003445f1d62badde51df437a38d6f19",slot:"item",tabindex:"-1","aria-hidden":"true"})}};i.style=e;export{i as wcs_dropdown_divider};
+//# sourceMappingURL=p-7de847e0.entry.js.map

package/dist/wcs/p-8152d360.entry.js

@@ -0,0 +1,2 @@
+import{r,c as e,h as t,H as a,g as s}from"./p-32e583ea.js";const c="@keyframes progress-bar-slide{0%{width:0}100%{width:100%}}:host{--wcs-alert-background-color:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-alert-icon-background-color:var(--wcs-semantic-color-background-surface-brand-default);--wcs-alert-title-color:var(--wcs-semantic-color-text-primary);--wcs-alert-subtitle-color:var(--wcs-semantic-color-text-secondary);--wcs-alert-dismiss-button-color:var(--wcs-semantic-color-foreground-inverse);--wcs-alert-title-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-alert-subtitle-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-alert-title-font-size:var(--wcs-semantic-font-size-base);--wcs-alert-subtitle-font-size:var(--wcs-semantic-font-size-caption-2);--wcs-alert-border-width:var(--wcs-semantic-border-width-default);--wcs-alert-border-color:var(--wcs-semantic-color-border-primary);--wcs-alert-border-radius:var(--wcs-semantic-border-radius-base);--wcs-alert-padding:var(--wcs-semantic-spacing-base-150);--wcs-alert-gap:var(--wcs-semantic-spacing-base-150);--wcs-alert-min-width:100%;--wcs-alert-progress-bar-height:0.25rem;--wcs-alert-progress-bar-background-color:var(--wcs-alert-icon-background-color);--wcs-alert-internal-progress-bar-animation-duration:5s;box-sizing:border-box;background-color:var(--wcs-alert-background-color);border-radius:var(--wcs-alert-border-radius);padding:var(--wcs-alert-padding);width:100%;min-width:var(--wcs-alert-min-width);position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--wcs-alert-gap);border:solid var(--wcs-alert-border-width) var(--wcs-alert-border-color);overflow:hidden}:host .content{display:flex;flex-direction:column}:host .announcement-icon{color:var(--wcs-alert-icon-background-color)}:host ::slotted([slot=title]){color:var(--wcs-alert-title-color);font-size:var(--wcs-alert-title-font-size);font-weight:var(--wcs-alert-title-font-weight)}:host ::slotted([slot=subtitle]){font-weight:var(--wcs-alert-subtitle-font-weight);color:var(--wcs-alert-subtitle-color);font-size:var(--wcs-alert-subtitle-font-size)}:host .progress-bar{bottom:0;left:0;width:100%;height:var(--wcs-alert-progress-bar-height);position:absolute}:host .progress-bar-track{background-color:var(--wcs-alert-progress-bar-background-color);height:100%;animation:progress-bar-slide var(--wcs-alert-internal-progress-bar-animation-duration) linear;border-bottom-left-radius:var(--wcs-alert-border-radius);border-bottom-right-radius:var(--wcs-alert-border-radius);border-top-right-radius:var(--wcs-alert-border-radius)}:host([intent=success]){--wcs-alert-border-color:var(--wcs-semantic-color-border-success);--wcs-alert-background-color:var(--wcs-semantic-color-background-surface-success-lighter);--wcs-alert-icon-background-color:var(--wcs-semantic-color-background-surface-success-default)}:host([intent=information]){--wcs-alert-border-color:var(--wcs-semantic-color-border-information);--wcs-alert-background-color:var(--wcs-semantic-color-background-surface-information-lighter);--wcs-alert-icon-background-color:var(--wcs-semantic-color-background-surface-information-default)}:host([intent=warning]){--wcs-alert-border-color:var(--wcs-semantic-color-border-warning);--wcs-alert-background-color:var(--wcs-semantic-color-background-surface-warning-lighter);--wcs-alert-icon-background-color:var(--wcs-semantic-color-background-surface-warning-default)}:host([intent=error]){--wcs-alert-border-color:var(--wcs-semantic-color-border-critical);--wcs-alert-background-color:var(--wcs-semantic-color-background-surface-critical-lightest);--wcs-alert-icon-background-color:var(--wcs-semantic-color-background-surface-critical-default)}:host>*{box-sizing:border-box}.icon-content-container{display:flex;gap:var(--wcs-alert-gap);align-items:center}.close-button wcs-mat-icon{color:var(--wcs-alert-dismiss-button-color)}.hidden{display:none}";const o=c;const i=class{constructor(t){r(this,t);this.wcsAlertDismiss=e(this,"wcsAlertDismiss",7);this.isTimedOut=false;this.isMouseHover=false;this.timeoutId=undefined;this.show=true;this.intent="success";this.timeout=5e3;this.showProgressBar=false}mouseOverHandler(){this.mouseHover(true)}mouseOutHandler(){this.mouseHover(false)}mouseHover(r){this.isMouseHover=r;if(this.isTimedOut&&!this.isMouseHover){this.close()}}async componentWillLoad(){await this.showAlertAndRunTimeout()}async componentDidLoad(){var r;(r=this.annoucementIconHtmlElement)===null||r===void 0?void 0:r.setAriaAttribute("aria-hidden","false");if(this.showProgressBar){this.el.style.setProperty("--wcs-alert-internal-progress-bar-animation-duration",this.timeout/1e3+"s")}else{this.el.style.setProperty("--wcs-alert-internal-progress-bar-animation-duration","0s")}}async showAlertAndRunTimeout(){if(this.timeout===0)return;this.show=true;this.timeoutId=setTimeout((()=>{if(!this.isMouseHover){this.close()}this.isTimedOut=true}),this.timeout)}onCloseButtonClick(r){this.close()}close(){this.show=false;this.wcsAlertDismiss.emit()}getMaterialIcon(){switch(this.intent){case"success":return"check_circle";case"information":return"info";case"error":return"error";case"warning":return"warning"}}getAriaLabel(){switch(this.intent){case"success":return"Succès";case"information":return"Information";case"error":return"Erreur";case"warning":return"Attention"}}disconnectedCallback(){clearTimeout(this.timeoutId)}render(){return t(a,{key:"82c9f5879eae7adef41c921ef34b2b9d891c0d6b"},t("div",{key:"b46424dfb6b620b62767b6bb8048827f83d116a7",class:"icon-content-container"},t("wcs-mat-icon",{key:"ff3a0bc91a73e275936bbe8f77c904f397296551",class:"announcement-icon",ref:r=>this.annoucementIconHtmlElement=r,icon:this.getMaterialIcon(),"aria-label":this.getAriaLabel(),role:"img","aria-hidden":false}),t("div",{key:"ea866940416ddaf5eaf73cec83f30c71b01c41d8",class:"content"},t("slot",{key:"d14c321ebdb78b646bb4fc19e613dbd2cc61ed31",name:"title"}),t("slot",{key:"569d6556ea823f82e1d6164ac20361e27c85b592",name:"subtitle"}))),t("wcs-button",{key:"f13afc31116b7b6fe04e0186128d0288725ace98",shape:"round",size:"s",mode:"clear",class:"close-button wcs-dark","aria-label":"Fermer cette notification",onClick:r=>this.onCloseButtonClick(r)},t("wcs-mat-icon",{key:"02557c896159ec1a7fdab853a07f7c79c17dd5d7",icon:"close"})),t("div",{key:"9e90e95009da575ca693e5ba4e92b3916ad4ee6f",class:"progress-bar"+(!this.showProgressBar?" hidden":"")},t("div",{key:"c8858551592bb0b1622e2ee19c67a662f31ce068",class:"progress-bar-track"})))}get el(){return s(this)}};i.style=o;export{i as wcs_alert};
+//# sourceMappingURL=p-8152d360.entry.js.map

package/dist/wcs/p-8152d360.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["alertCss","WcsAlertStyle0","Alert","this","isTimedOut","isMouseHover","timeoutId","undefined","mouseOverHandler","mouseHover","mouseOutHandler","hover","close","componentWillLoad","showAlertAndRunTimeout","componentDidLoad","_a","annoucementIconHtmlElement","setAriaAttribute","showProgressBar","el","style","setProperty","timeout","show","setTimeout","onCloseButtonClick","_","wcsAlertDismiss","emit","getMaterialIcon","intent","getAriaLabel","disconnectedCallback","clearTimeout","render","h","Host","key","class","ref","icon","role","name","shape","size","mode","onClick","$event"],"sources":["src/components/alert/alert.scss?tag=wcs-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@import './alert-keyframes.scss';\n\n:host {\n    --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-brand-default);\n\n    --wcs-alert-title-color: var(--wcs-semantic-color-text-primary);\n    --wcs-alert-subtitle-color: var(--wcs-semantic-color-text-secondary);\n    --wcs-alert-dismiss-button-color: var(--wcs-semantic-color-foreground-inverse);\n\n    --wcs-alert-title-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-alert-subtitle-font-weight: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-alert-title-font-size: var(--wcs-semantic-font-size-base);\n    --wcs-alert-subtitle-font-size: var(--wcs-semantic-font-size-caption-2);\n\n    --wcs-alert-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-alert-border-color: var(--wcs-semantic-color-border-primary);\n    --wcs-alert-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-alert-padding: var(--wcs-semantic-spacing-base-150);\n    --wcs-alert-gap: var(--wcs-semantic-spacing-base-150);\n    --wcs-alert-min-width: 100%;\n\n    --wcs-alert-progress-bar-height: 0.25rem;\n    --wcs-alert-progress-bar-background-color: var(--wcs-alert-icon-background-color);\n\n    --wcs-alert-internal-progress-bar-animation-duration: 5s;\n\n    box-sizing: border-box;\n\n    background-color: var(--wcs-alert-background-color);\n    border-radius: var(--wcs-alert-border-radius);\n    padding: var(--wcs-alert-padding);\n    width: 100%;\n    min-width: var(--wcs-alert-min-width);\n\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--wcs-alert-gap);\n    border: solid var(--wcs-alert-border-width) var(--wcs-alert-border-color);\n\n    overflow: hidden; // to avoid overflow of progress bar especially with voyageurs theme\n\n    .content {\n        display: flex;\n        flex-direction: column;\n    }\n\n    .announcement-icon {\n        color: var(--wcs-alert-icon-background-color);\n    }\n\n    ::slotted([slot=title]) {\n        color: var(--wcs-alert-title-color);\n        font-size: var(--wcs-alert-title-font-size);\n        font-weight: var(--wcs-alert-title-font-weight);\n    }\n\n    ::slotted([slot=subtitle]) {\n        font-weight: var(--wcs-alert-subtitle-font-weight);\n        color: var(--wcs-alert-subtitle-color);\n        font-size: var(--wcs-alert-subtitle-font-size);\n    }\n\n    .progress-bar {\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        height: var(--wcs-alert-progress-bar-height);\n        position: absolute;\n    }\n\n    .progress-bar-track {\n        background-color: var(--wcs-alert-progress-bar-background-color);\n        height: 100%;\n        animation: progress-bar-slide var(--wcs-alert-internal-progress-bar-animation-duration) linear;\n        border-bottom-left-radius: var(--wcs-alert-border-radius);\n        border-bottom-right-radius: var(--wcs-alert-border-radius);\n        border-top-right-radius: var(--wcs-alert-border-radius); // to avoid a visual glitch, it's bizarre to have only radius on the bottom\n    }\n}\n\n:host([intent=success]) {\n    --wcs-alert-border-color: var(--wcs-semantic-color-border-success);\n    --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-success-lighter);\n    --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-success-default);\n}\n\n:host([intent=information]) {\n    --wcs-alert-border-color: var(--wcs-semantic-color-border-information);\n    --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-information-lighter);\n    --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-information-default);\n}\n\n:host([intent=warning]) {\n    --wcs-alert-border-color: var(--wcs-semantic-color-border-warning);\n    --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-warning-lighter);\n    --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-warning-default);\n}\n\n:host([intent=error]) {\n    --wcs-alert-border-color: var(--wcs-semantic-color-border-critical);\n    --wcs-alert-background-color: var(--wcs-semantic-color-background-surface-critical-lightest);\n    --wcs-alert-icon-background-color: var(--wcs-semantic-color-background-surface-critical-default);\n}\n\n:host > * {\n    box-sizing: border-box;\n}\n\n.icon-content-container {\n    display: flex;\n    gap: var(--wcs-alert-gap);\n    align-items: center;\n}\n\n.close-button {\n    wcs-mat-icon {\n        color: var(--wcs-alert-dismiss-button-color);\n    }\n}\n\n.hidden {\n    display: none;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, Element, Listen } from '@stencil/core';\nimport { WcsAlertIntent } from \"./alert-interface\";\n\n/**\n * Alerts are used to communicate a state or an action that has been performed.\n * It has to be used conjunction with the `wcs-alert-drawer` component, or you can use it independently by taking care of \n * the alert visibility\n * \n * @cssprop --wcs-alert-background-color - Background color of the alert\n * @cssprop --wcs-alert-icon-background-color - Background color of the icon\n * @cssprop --wcs-alert-title-color - Color of the title\n * @cssprop --wcs-alert-subtitle-color - Color of the subtitle\n * @cssprop --wcs-alert-dismiss-button-color - Color of the dismiss button\n * @cssprop --wcs-alert-title-font-weight - Font weight of the title\n * @cssprop --wcs-alert-subtitle-font-weight - Font weight of the subtitle\n * @cssprop --wcs-alert-title-font-size - Font size of the title\n * @cssprop --wcs-alert-subtitle-font-size - Font size of the subtitle\n * @cssprop --wcs-alert-border-width - Border width of the alert\n * @cssprop --wcs-alert-border-color - Border color of the alert\n * @cssprop --wcs-alert-border-radius - Border radius of the alert\n * @cssprop --wcs-alert-padding - Padding of the alert\n * @cssprop --wcs-alert-gap - Gap between each element of the alert, icon content and close button\n * @cssprop --wcs-alert-min-width - Minimum width of the alert, default to 100% and it is set by alert-drawer component\n * @cssprop --wcs-alert-progress-bar-height - Height of the progress bar if `showProgressBar` is set to true\n * @cssprop --wcs-alert-progress-bar-background-color - Background color of the progress bar\n */\n@Component({\n    tag: 'wcs-alert',\n    styleUrl: 'alert.scss',\n    shadow: true,\n})\nexport class Alert {\n    @Element() private el: HTMLElement;\n\n    /**\n     * Controls the visibility state of the alert.\n     * This property is exposed to allow control of the alert's display state and animation timing:\n     * - Used by wcs-alert-drawer to coordinate exit animations when the alert is dismissed\n     * - Can be used directly for custom implementations (though using wcs-alert-drawer is recommended)\n     * - When set to false, it triggers the exit animation if implemented\n     * \n     * Note: While direct usage is possible for custom implementations, it's recommended to use\n     * wcs-alert-drawer for consistent alert management and animations.\n     */\n    @Prop({ mutable: true, reflect: true }) show: boolean = true;\n\n    @Prop({ reflect: true })\n    intent: WcsAlertIntent = 'success';\n\n    /**\n     * Event emitted when the alert is dismissed\n     */\n    @Event() wcsAlertDismiss: EventEmitter<void>;\n\n    /**\n     * Time duration of the alert visibility\n     * \n     * 5000ms by default\n     * If 0, the alert will not emit `wcsAlertDismiss` event automatically\n     */\n    @Prop() timeout = 5000;\n    @Prop() showProgressBar: boolean = false;\n\n    /** Only active if timeout > 0, becomes true when the alert reaches its maximum display time */\n    private isTimedOut: boolean = false;\n\n    /** Indicates if the mouse cursor is hovering over the alert */\n    private isMouseHover: boolean = false;\n    /**\n     * ID of the setTimeout used to manage the alert's lifetime\n     * https://developer.mozilla.org/en-US/docs/Web/API/Window/clearTimeout#notes\n     */\n    private timeoutId = undefined;\n\n    /** Reference to the alert's information icon for managing its aria-label */\n    private annoucementIconHtmlElement!: HTMLWcsMatIconElement;\n\n\n    @Listen('mouseover')\n    mouseOverHandler() {\n        this.mouseHover(true)\n    }\n\n    @Listen('mouseout')\n    mouseOutHandler() {\n        this.mouseHover(false);\n    }\n\n    /**\n     * Handles the mouse hover state of the alert\n     * @param hover - true if the mouse is hovering over the alert, false otherwise\n     */\n    private mouseHover(hover: boolean) {\n        this.isMouseHover = hover;\n\n        // If the timeout has passed (i.e. the user had the mouse on the component when it expired), we close the alert.\n        if (this.isTimedOut && !this.isMouseHover) {\n            this.close();\n        }\n    }\n\n    async componentWillLoad() {\n        await this.showAlertAndRunTimeout();\n    }\n\n    async componentDidLoad() {\n        /*\n        Because icon serves also to announce the state of the alert based on the type. We set aria-label on the icon based\n        on the type\n         */\n        this.annoucementIconHtmlElement?.setAriaAttribute('aria-hidden', 'false');\n\n        if (this.showProgressBar) {\n            this.el.style.setProperty('--wcs-alert-internal-progress-bar-animation-duration', this.timeout / 1000 + 's');\n        } else {\n            this.el.style.setProperty('--wcs-alert-internal-progress-bar-animation-duration', '0s');\n        }\n    }\n\n    async showAlertAndRunTimeout() {\n        if (this.timeout === 0) return;\n        this.show = true;\n        this.timeoutId = setTimeout(() => {\n            // If the user has the mouse over the alert, we only indicate that the timemout has expired, and the method that handles the mousehover event will close it\n            if (!this.isMouseHover) {\n                this.close();\n            }\n            this.isTimedOut = true;\n        }, this.timeout);\n    }\n\n    private onCloseButtonClick(_: MouseEvent) {\n        this.close();\n    }\n\n    private close() {\n        this.show = false;\n        this.wcsAlertDismiss.emit();\n    }\n\n    private getMaterialIcon() {\n        switch (this.intent) {\n            case \"success\":\n                return 'check_circle'\n            case \"information\":\n                return 'info'\n            case \"error\":\n                return 'error'\n            case \"warning\":\n                return 'warning'\n        }\n    }\n\n    private getAriaLabel() {\n        switch (this.intent) {\n            case \"success\":\n                return 'Succès';\n            case \"information\":\n                return 'Information';\n            case \"error\":\n                return 'Erreur';\n            case \"warning\":\n                return 'Attention';\n        }\n    }\n\n    disconnectedCallback() {\n        /*\n         https://developer.mozilla.org/en-US/docs/Web/API/Window/clearTimeout#notes \n         (Passing an invalid ID to clearTimeout() silently does nothing; no exception is thrown.)\n         */\n        clearTimeout(this.timeoutId);\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"icon-content-container\">\n                    <wcs-mat-icon class=\"announcement-icon\"\n                        ref={(el) => this.annoucementIconHtmlElement = el}\n                        icon={this.getMaterialIcon()}\n                        aria-label={this.getAriaLabel()}\n                        role=\"img\"\n                        aria-hidden={false}></wcs-mat-icon>\n                    <div class=\"content\">\n                        <slot name=\"title\"></slot>\n                        <slot name=\"subtitle\"></slot>\n                    </div>\n                </div>\n                <wcs-button shape=\"round\" size=\"s\" mode=\"clear\" class=\"close-button wcs-dark\"\n                    aria-label=\"Fermer cette notification\"\n                    onClick={($event) => this.onCloseButtonClick($event)}>\n                    <wcs-mat-icon icon=\"close\"></wcs-mat-icon>\n                </wcs-button>\n                <div class={'progress-bar' + (!this.showProgressBar ? ' hidden' : '')}>\n                    <div class=\"progress-bar-track\"></div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"2DAAA,MAAMA,EAAW,iyHACjB,MAAAC,EAAeD,E,MC8BFE,EAAK,M,0EAiCNC,KAAAC,WAAsB,MAGtBD,KAAAE,aAAwB,MAKxBF,KAAAG,UAAYC,U,UA5BoC,K,YAG/B,U,aAaP,I,qBACiB,K,CAkBnC,gBAAAC,GACIL,KAAKM,WAAW,K,CAIpB,eAAAC,GACIP,KAAKM,WAAW,M,CAOZ,UAAAA,CAAWE,GACfR,KAAKE,aAAeM,EAGpB,GAAIR,KAAKC,aAAeD,KAAKE,aAAc,CACvCF,KAAKS,O,EAIb,uBAAMC,SACIV,KAAKW,wB,CAGf,sBAAMC,G,OAKFC,EAAAb,KAAKc,8BAA0B,MAAAD,SAAA,SAAAA,EAAEE,iBAAiB,cAAe,SAEjE,GAAIf,KAAKgB,gBAAiB,CACtBhB,KAAKiB,GAAGC,MAAMC,YAAY,uDAAwDnB,KAAKoB,QAAU,IAAO,I,KACrG,CACHpB,KAAKiB,GAAGC,MAAMC,YAAY,uDAAwD,K,EAI1F,4BAAMR,GACF,GAAIX,KAAKoB,UAAY,EAAG,OACxBpB,KAAKqB,KAAO,KACZrB,KAAKG,UAAYmB,YAAW,KAExB,IAAKtB,KAAKE,aAAc,CACpBF,KAAKS,O,CAETT,KAAKC,WAAa,IAAI,GACvBD,KAAKoB,Q,CAGJ,kBAAAG,CAAmBC,GACvBxB,KAAKS,O,CAGD,KAAAA,GACJT,KAAKqB,KAAO,MACZrB,KAAKyB,gBAAgBC,M,CAGjB,eAAAC,GACJ,OAAQ3B,KAAK4B,QACT,IAAK,UACD,MAAO,eACX,IAAK,cACD,MAAO,OACX,IAAK,QACD,MAAO,QACX,IAAK,UACD,MAAO,U,CAIX,YAAAC,GACJ,OAAQ7B,KAAK4B,QACT,IAAK,UACD,MAAO,SACX,IAAK,cACD,MAAO,cACX,IAAK,QACD,MAAO,SACX,IAAK,UACD,MAAO,Y,CAInB,oBAAAE,GAKIC,aAAa/B,KAAKG,U,CAGtB,MAAA6B,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACPH,EAAA,gBAAAE,IAAA,2CAAcC,MAAM,oBAChBC,IAAMpB,GAAOjB,KAAKc,2BAA6BG,EAC/CqB,KAAMtC,KAAK2B,kBAAiB,aAChB3B,KAAK6B,eACjBU,KAAK,MAAK,cACG,QACjBN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACPH,EAAA,QAAAE,IAAA,2CAAMK,KAAK,UACXP,EAAA,QAAAE,IAAA,2CAAMK,KAAK,eAGnBP,EAAA,cAAAE,IAAA,2CAAYM,MAAM,QAAQC,KAAK,IAAIC,KAAK,QAAQP,MAAM,wBAAuB,aAC9D,4BACXQ,QAAUC,GAAW7C,KAAKuB,mBAAmBsB,IAC7CZ,EAAA,gBAAAE,IAAA,2CAAcG,KAAK,WAEvBL,EAAA,OAAAE,IAAA,2CAAKC,MAAO,iBAAmBpC,KAAKgB,gBAAkB,UAAY,KAC9DiB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,wB"}

package/dist/wcs/{p-2c9e20c1.entry.js → p-850fa9c9.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as s,h as t,H as n,g as o}from"./p-32e583ea.js";import{i as a,a as i,b as c,s as r,c as m,d}from"./p-a3aece7a.js";import{r as u,c as l}from"./p-d7acbf01.js";const h=":host{--wcs-com-nav-submenu-button-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-button-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-submenu-button-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-submenu-button-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-submenu-desktop-menu-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-com-nav-submenu-desktop-menu-text-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-desktop-menu-link-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-desktop-menu-heading-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-com-nav-submenu-desktop-menu-description-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-desktop-menu-description-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-submenu-desktop-menu-padding:50px;--wcs-com-nav-submenu-desktop-menu-items-padding-left:50px;--wcs-com-nav-submenu-desktop-menu-items-padding-right:80px;--wcs-com-nav-submenu-mobile-text-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-mobile-link-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-mobile-spacing-top:var(--wcs-semantic-spacing-large);--wcs-com-nav-submenu-mobile-spacing-bottom:var(--wcs-semantic-spacing-large);--wcs-com-nav-submenu-mobile-spacing-left:calc(var(--wcs-semantic-spacing-base) * 3);--wcs-com-nav-submenu-mobile-gap:calc(var(--wcs-semantic-spacing-base) * 3);display:block;padding-bottom:var(--wcs-com-nav-submenu-mobile-spacing-bottom)}:host button{display:block;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host .arrow-icon{display:none}:host .arrow-container{display:none}:host .label{text-transform:uppercase;font-size:16px;cursor:unset;font-weight:var(--wcs-com-nav-submenu-button-font-weight);color:var(--wcs-com-nav-submenu-button-color);text-decoration:none}:host .drawer{display:contents}:host .drawer-container{display:contents}:host .drawer-description{display:none}:host .menu-items{display:flex;flex-direction:column;gap:var(--wcs-com-nav-submenu-mobile-gap)}:host .menu-items ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-submenu-mobile-text-color);font-weight:var(--wcs-com-nav-submenu-mobile-link-font-weight)}@media (max-width: 575px){:host .menu-button{margin:0}:host .menu-items{margin-top:var(--wcs-com-nav-submenu-mobile-spacing-top);margin-left:var(--wcs-com-nav-submenu-mobile-spacing-left)}}@media (min-width: 576px){:host{height:100%;padding-bottom:unset}:host .menu-button{display:flex;align-items:center;height:100%;cursor:pointer;user-select:none;font-weight:unset;padding-left:unset}:host .menu-button:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-button-focus-outline-color);outline-offset:0.1rem;border-radius:2px}@supports not selector(.menu-button:focus-visible){:host{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-button-focus-outline-color);outline-offset:0.1rem;border-radius:2px}}:host .label{text-transform:unset;cursor:pointer}:host .arrow-icon{display:inline-block;font-family:icons;font-size:0.6rem;line-height:1;box-sizing:border-box}:host .arrow-container{display:unset;margin-left:var(--wcs-com-nav-submenu-button-gap)}:host .arrow-icon:not([data-open]){transform:rotate(90deg)}:host .arrow-icon[data-open]{transform:rotate(-90deg)}:host .drawer{display:none;position:absolute;top:calc(var(--wcs-com-nav-menu-bar-height) + var(--wcs-com-nav-border-width));z-index:8888;left:0;width:100%;box-sizing:border-box;padding:var(--wcs-com-nav-submenu-desktop-menu-padding);background-color:var(--wcs-com-nav-submenu-desktop-menu-background-color);color:var(--wcs-com-nav-submenu-desktop-menu-text-color);box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.08)}:host .drawer-content{display:flex;justify-content:space-between;max-width:62.5%;flex:1}:host .drawer-content div:first-child{flex:0.8}:host .drawer-content div{max-width:260px}:host .menu-items{padding:0 var(--wcs-com-nav-submenu-desktop-menu-items-padding-right) 0 var(--wcs-com-nav-submenu-desktop-menu-items-padding-left);display:flex;flex-direction:column;align-items:flex-end}:host .menu-items ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-submenu-desktop-menu-text-color);font-weight:var(--wcs-com-nav-submenu-desktop-menu-link-font-weight)}:host .menu-items ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-desktop-menu-text-color);outline-offset:0.1rem;border-radius:2px}:host .drawer-container{display:flex;max-width:var(--wcs-com-content-max-width);margin:0 auto}:host .drawer-container h3{margin:0 0 var(--wcs-com-nav-submenu-desktop-menu-description-gap) 0;font-size:1.5rem;line-height:1.25;font-weight:var(--wcs-com-nav-submenu-desktop-menu-heading-font-weight)}:host .drawer-container p{margin-top:0;margin-bottom:1rem;font-weight:var(--wcs-com-nav-submenu-desktop-menu-description-font-weight);font-size:1rem;line-height:1.375}:host .drawer[data-open]{display:block}:host .drawer-description{display:block}}";const b=h;const p=["title"];const w="WCS-COM-NAV-CATEGORY";const f=class{constructor(t){e(this,t);this.wcsSubmenuOpened=s(this,"wcsSubmenuOpened",7);this.inheritedAttributes={};this.menuItemsId=`wcs-com-nav-submenu-items`;this.label=undefined;this.panelTitle=undefined;this.panelDescription=undefined;this.menuOpen=false;this.currentActiveSizing="desktop"}componentWillLoad(){const e=this.el.querySelectorAll(":scope > wcs-com-nav-category:not([slot])");u(e,w);this.inheritedAttributes=Object.assign(Object.assign({},a(this.el)),i(this.el,p))}componentDidLoad(){if(!this.resizeObserver){this.resizeObserver=l(this);this.resizeObserver.observe(document.body)}}onWindowClickEvent(e){if(this.menuOpen)this.menuOpen=false}onSubmenuOpened(e){if(e.detail.menuElement!==this.el){this.menuOpen=false}}onEscapeKeyDown(e){if(c(e)&&this.menuOpen){this.menuOpen=false}}async setAriaAttribute(e,s){r(this.nativeButton,e,s)}async close(){this.menuOpen=false}async open(){this.menuOpen=true}onClick(e){e.stopPropagation();this.wcsSubmenuOpened.emit({menuElement:this.el})}handleMenuItemsKeyDown(e){if(m(e)||d(e)){this.handleMenuItemsClick(e)}}handleMenuItemsClick(e){if(e.target.tagName==="A"){this.close()}}wcsCategoryItemClickedHandler(e){this.close()}disconnectedCallback(){var e;(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect()}render(){return t(n,{key:"0da088c42404db11beb214d4a16c8526771e3e2a",onClick:e=>this.onClick(e),role:"listitem","data-open":this.menuOpen},this.currentActiveSizing==="mobile"?t("h2",{role:"presentation",class:"menu-button"},t("span",{class:"label"},this.label),t("span",{class:"arrow-container"},t("span",{class:"arrow-icon","data-open":this.menuOpen},""))):t("button",Object.assign({onClick:e=>this.menuOpen=!this.menuOpen,"aria-expanded":this.menuOpen?"true":"false","aria-controls":this.menuItemsId,class:"menu-button",ref:e=>this.nativeButton=e},this.inheritedAttributes),t("span",{class:"label"},this.label),t("span",{class:"arrow-container"},t("span",{"aria-hidden":"true",class:"arrow-icon","data-open":this.menuOpen},""))),t("div",{key:"de27fc80404612471d359ff1eafd4958f78679c7",class:"drawer","data-open":this.menuOpen,tabIndex:-1},t("div",{key:"7d90bef599ee51aa5af9d4bd1a6dc9a62a959b2f",class:"drawer-container"},t("div",{key:"4a8896393732017a6084be1df1af5e4d938326d7",class:"drawer-content"},t("div",{key:"92559e9ba3f21ddce21aa4c5d84de33aa8c7b59c",class:"drawer-description"},t("h3",{key:"a8b4f0865ab5ac5396669372c32020feea08c37a"},this.panelTitle),t("p",{key:"f2f778c761bf171204eb4fda3b376bdd92724b73"},this.panelDescription)),t("div",{key:"640e6d45453c46469116a0f2d34e9bdaa2d9372f",role:"list","aria-label":this.label,id:this.menuItemsId,class:"menu-items",onClick:e=>this.handleMenuItemsClick(e),onKeyDown:e=>this.handleMenuItemsKeyDown(e)},t("slot",{key:"92e67731f2da01db2852a49b7ff255d384881157"}))))))}get el(){return o(this)}};f.style=b;export{f as wcs_com_nav_submenu};
-//# sourceMappingURL=p-2c9e20c1.entry.js.map
+import{r as e,c as s,h as t,H as n,g as o}from"./p-32e583ea.js";import{i as a,a as i,b as c,s as r,c as m,d}from"./p-52d77e1f.js";import{r as u,c as l}from"./p-0017d766.js";const b=":host{--wcs-com-nav-submenu-button-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-button-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-submenu-button-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-submenu-button-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-submenu-desktop-menu-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-com-nav-submenu-desktop-menu-text-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-desktop-menu-link-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-desktop-menu-heading-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-com-nav-submenu-desktop-menu-description-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-desktop-menu-description-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-submenu-desktop-menu-padding:50px;--wcs-com-nav-submenu-desktop-menu-items-padding-left:50px;--wcs-com-nav-submenu-desktop-menu-items-padding-right:80px;--wcs-com-nav-submenu-mobile-text-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-mobile-link-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-mobile-spacing-top:var(--wcs-semantic-spacing-large);--wcs-com-nav-submenu-mobile-spacing-bottom:var(--wcs-semantic-spacing-large);--wcs-com-nav-submenu-mobile-spacing-left:calc(var(--wcs-semantic-spacing-base) * 3);--wcs-com-nav-submenu-mobile-gap:calc(var(--wcs-semantic-spacing-base) * 3);display:block;padding-bottom:var(--wcs-com-nav-submenu-mobile-spacing-bottom)}:host button{display:block;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host .arrow-icon{display:none}:host .arrow-container{display:none}:host .label{text-transform:uppercase;font-size:16px;cursor:unset;font-weight:var(--wcs-com-nav-submenu-button-font-weight);color:var(--wcs-com-nav-submenu-button-color);text-decoration:none}:host .drawer{display:contents}:host .drawer-container{display:contents}:host .drawer-description{display:none}:host .menu-items{display:flex;flex-direction:column;gap:var(--wcs-com-nav-submenu-mobile-gap)}:host .menu-items ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-submenu-mobile-text-color);font-weight:var(--wcs-com-nav-submenu-mobile-link-font-weight)}@media (max-width: 575px){:host .menu-button{margin:0}:host .menu-items{margin-top:var(--wcs-com-nav-submenu-mobile-spacing-top);margin-left:var(--wcs-com-nav-submenu-mobile-spacing-left)}}@media (min-width: 576px){:host{height:100%;padding-bottom:unset}:host .menu-button{display:flex;align-items:center;height:100%;cursor:pointer;user-select:none;font-weight:unset;padding-left:unset}:host .menu-button:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-button-focus-outline-color);outline-offset:0.1rem;border-radius:2px}@supports not selector(.menu-button:focus-visible){:host{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-button-focus-outline-color);outline-offset:0.1rem;border-radius:2px}}:host .label{text-transform:unset;cursor:pointer}:host .arrow-icon{display:inline-block;font-family:icons;font-size:0.6rem;line-height:1;box-sizing:border-box}:host .arrow-container{display:unset;margin-left:var(--wcs-com-nav-submenu-button-gap)}:host .arrow-icon:not([data-open]){transform:rotate(90deg)}:host .arrow-icon[data-open]{transform:rotate(-90deg)}:host .drawer{display:none;position:absolute;top:calc(var(--wcs-com-nav-menu-bar-height) + var(--wcs-com-nav-border-width));z-index:8888;left:0;width:100%;box-sizing:border-box;padding:var(--wcs-com-nav-submenu-desktop-menu-padding);background-color:var(--wcs-com-nav-submenu-desktop-menu-background-color);color:var(--wcs-com-nav-submenu-desktop-menu-text-color);box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.08)}:host .drawer-content{display:flex;justify-content:space-between;max-width:62.5%;flex:1}:host .drawer-content div:first-child{flex:0.8}:host .drawer-content div{max-width:260px}:host .menu-items{padding:0 var(--wcs-com-nav-submenu-desktop-menu-items-padding-right) 0 var(--wcs-com-nav-submenu-desktop-menu-items-padding-left);display:flex;flex-direction:column;align-items:flex-end}:host .menu-items ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-submenu-desktop-menu-text-color);font-weight:var(--wcs-com-nav-submenu-desktop-menu-link-font-weight)}:host .menu-items ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-desktop-menu-text-color);outline-offset:0.1rem;border-radius:2px}:host .drawer-container{display:flex;max-width:var(--wcs-com-content-max-width);margin:0 auto}:host .drawer-container h3{margin:0 0 var(--wcs-com-nav-submenu-desktop-menu-description-gap) 0;font-size:1.5rem;line-height:1.25;font-weight:var(--wcs-com-nav-submenu-desktop-menu-heading-font-weight)}:host .drawer-container p{margin-top:0;margin-bottom:1rem;font-weight:var(--wcs-com-nav-submenu-desktop-menu-description-font-weight);font-size:1rem;line-height:1.375}:host .drawer[data-open]{display:block}:host .drawer-description{display:block}}";const h=b;const p=["title"];const w="WCS-COM-NAV-CATEGORY";const f=class{constructor(t){e(this,t);this.wcsSubmenuOpened=s(this,"wcsSubmenuOpened",7);this.inheritedAttributes={};this.menuItemsId=`wcs-com-nav-submenu-items`;this.label=undefined;this.panelTitle=undefined;this.panelDescription=undefined;this.menuOpen=false;this.currentActiveSizing="desktop"}componentWillLoad(){const e=this.el.querySelectorAll(":scope > wcs-com-nav-category:not([slot])");u(e,w);this.inheritedAttributes=Object.assign(Object.assign({},a(this.el)),i(this.el,p))}componentDidLoad(){if(!this.resizeObserver){this.resizeObserver=l(this);this.resizeObserver.observe(document.body)}}onWindowClickEvent(e){if(this.menuOpen)this.menuOpen=false}onSubmenuOpened(e){if(e.detail.menuElement!==this.el){this.menuOpen=false}}onEscapeKeyDown(e){if(c(e)&&this.menuOpen){this.menuOpen=false}}async setAriaAttribute(e,s){r(this.nativeButton,e,s)}async close(){this.menuOpen=false}async open(){this.menuOpen=true}onClick(e){e.stopPropagation();this.wcsSubmenuOpened.emit({menuElement:this.el})}handleMenuItemsKeyDown(e){if(m(e)||d(e)){this.handleMenuItemsClick(e)}}handleMenuItemsClick(e){if(e.target.tagName==="A"){this.close()}}wcsCategoryItemClickedHandler(e){this.close()}disconnectedCallback(){var e;(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect()}render(){return t(n,{key:"935e78a3daf751160c21e7375e86be186bcfdec9",onClick:e=>this.onClick(e),role:"listitem","data-open":this.menuOpen},this.currentActiveSizing==="mobile"?t("h2",{role:"presentation",class:"menu-button"},t("span",{class:"label"},this.label),t("span",{class:"arrow-container"},t("span",{class:"arrow-icon","data-open":this.menuOpen},""))):t("button",Object.assign({onClick:e=>this.menuOpen=!this.menuOpen,"aria-expanded":this.menuOpen?"true":"false","aria-controls":this.menuItemsId,class:"menu-button",ref:e=>this.nativeButton=e},this.inheritedAttributes),t("span",{class:"label"},this.label),t("span",{class:"arrow-container"},t("span",{"aria-hidden":"true",class:"arrow-icon","data-open":this.menuOpen},""))),t("div",{key:"1e654c7f9a74f3e6bb92e9cd3589ea3b7ee9ed99",class:"drawer","data-open":this.menuOpen,tabIndex:-1},t("div",{key:"1c2d8a56d7e91071fcb43f537173850ecf62fb28",class:"drawer-container"},t("div",{key:"4880e09bcf8e06464db2984ac43dbd01ee9a0af3",class:"drawer-content"},t("div",{key:"d2e6e97442a73ff8d24ba4165587fd544b2ff853",class:"drawer-description"},t("h3",{key:"04b20b11befc1dc63e719fda8dda51fe248e93cd"},this.panelTitle),t("p",{key:"69810728510063a77b97845d91f684fe2abfa347"},this.panelDescription)),t("div",{key:"ed35406cc3a5ced0155181239dc96b4afcaa2871",role:"list","aria-label":this.label,id:this.menuItemsId,class:"menu-items",onClick:e=>this.handleMenuItemsClick(e),onKeyDown:e=>this.handleMenuItemsKeyDown(e)},t("slot",{key:"3059b3ccbef8b9483e05e4d400b1643d9ab23273"}))))))}get el(){return o(this)}};f.style=h;export{f as wcs_com_nav_submenu};
+//# sourceMappingURL=p-850fa9c9.entry.js.map