wcs-core 7.1.0 → 7.2.1

package/dist/wcs/{p-76c92e22.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-294732f7.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-52d77e1f.js";import{r as u,c as l}from"./p-0017d766.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-294732f7.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

package/dist/wcs/{p-796e690d.entry.js → p-86ec9ead.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,c as r,h as e,H as a,g as c}from"./p-32e583ea.js";import{s as t,i,a as d}from"./p-52d77e1f.js";const s=':host{width:fit-content;--wcs-radio-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-radio-text-color-default:var(--wcs-semantic-color-text-secondary);--wcs-radio-text-font-weight-default:var(--wcs-semantic-font-weight-medium);--wcs-radio-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-radio-text-font-weight-selected:var(--wcs-semantic-font-weight-medium);--wcs-radio-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-radio-text-color-hover:var(--wcs-semantic-color-text-primary);--wcs-radio-checkmark-size:1rem;--wcs-radio-gap:var(--wcs-semantic-spacing-base);--wcs-radio-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-radio-checkmark-border-width:var(--wcs-semantic-border-width-large);--wcs-radio-checkmark-border-color-default:var(--wcs-semantic-color-border-control-indicator-default);--wcs-radio-checkmark-border-color-selected:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-radio-checkmark-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-radio-checkmark-border-color-disabled:var(--wcs-semantic-color-border-control-indicator-disabled);--wcs-radio-checkmark-background-color-default:transparent;--wcs-radio-checkmark-background-color-selected:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-radio-checkmark-background-color-selected-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-radio-checkmark-background-color-selected-hover:var(--wcs-semantic-color-background-control-indicator-hover);--wcs-radio-checkmark-outline-distance-with-checkmark-circle:var(--wcs-semantic-spacing-small);--wcs-radio-checkmark-outline-width:var(--wcs-semantic-border-width-large);--wcs-radio-checkmark-outline-color:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-radio-checkmark-border-radius:var(--wcs-semantic-border-radius-full);--wcs-radio-border-radius:var(--wcs-semantic-border-radius-base);--wcs-radio-option-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-hover:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-press:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-disabled:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-selected-default:var(--wcs-semantic-color-background-action-primary-default);--wcs-radio-option-background-color-selected-hover:var(--wcs-semantic-color-background-action-primary-hover);--wcs-radio-option-background-color-selected-press:var(--wcs-semantic-color-background-action-primary-press);--wcs-radio-option-background-color-selected-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-radio-option-text-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-radio-option-text-color-hover:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-radio-option-text-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-radio-option-text-color-selected-default:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-radio-option-text-color-selected-hover:var(--wcs-semantic-color-foreground-action-primary-hover);--wcs-radio-option-text-color-selected-press:var(--wcs-semantic-color-foreground-action-primary-press);--wcs-radio-option-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-radio-option-text-font-weight-default:var(--wcs-semantic-font-weight-roman);--wcs-radio-option-text-font-weight-selected:var(--wcs-semantic-font-weight-roman);--wcs-radio-option-border-radius:var(--wcs-semantic-border-radius-base);--wcs-radio-option-border-width:var(--wcs-semantic-border-width-default);--wcs-radio-option-border-color-hover:var(--wcs-semantic-color-border-action-secondary-hover);--wcs-radio-option-border-color-press:var(--wcs-semantic-color-border-action-secondary-press);--wcs-radio-option-padding-top:var(--wcs-semantic-spacing-base);--wcs-radio-option-padding-right:var(--wcs-semantic-spacing-large);--wcs-radio-option-padding-bottom:var(--wcs-semantic-spacing-base);--wcs-radio-option-padding-left:var(--wcs-semantic-spacing-large)}:host([mode=radio]) input,:host([mode=horizontal]) input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host([mode=radio]) label,:host([mode=horizontal]) label{margin-bottom:0;color:var(--wcs-radio-text-color-default);font-weight:var(--wcs-radio-text-font-weight-default) !important;display:inline-block}:host([mode=radio]) label:before,:host([mode=horizontal]) label:before{border-radius:var(--wcs-radio-checkmark-border-radius);border:var(--wcs-radio-checkmark-border-width) solid var(--wcs-radio-checkmark-border-color-default);position:relative;width:var(--wcs-radio-checkmark-size);height:var(--wcs-radio-checkmark-size);pointer-events:none;content:"";background-color:var(--wcs-radio-checkmark-background-color-default)}:host([mode=radio]) input:focus-visible+label,:host([mode=horizontal]) input:focus-visible+label{transition:none;outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-radio-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-radio-border-radius)}:host([disabled]) label{color:var(--wcs-radio-text-color-disabled);cursor:not-allowed}:host([disabled]) label:before{border-color:var(--wcs-radio-checkmark-border-color-disabled)}:host(:not([disabled])) label{cursor:pointer}:host([mode=radio].checked) label,:host([mode=horizontal].checked) label{color:var(--wcs-radio-text-color-selected);font-weight:var(--wcs-radio-text-font-weight-selected) !important}:host([mode=radio].checked) label:before,:host([mode=horizontal].checked) label:before{border-color:var(--wcs-radio-checkmark-border-color-selected);background-color:var(--wcs-radio-checkmark-background-color-selected);outline:solid var(--wcs-radio-checkmark-outline-width) var(--wcs-radio-checkmark-outline-color);outline-offset:calc(-1 * var(--wcs-radio-checkmark-outline-distance-with-checkmark-circle))}:host([mode=radio][disabled].checked) label,:host([mode=horizontal][disabled].checked) label{color:var(--wcs-radio-text-color-disabled)}:host([mode=radio][disabled].checked) label:before,:host([mode=horizontal][disabled].checked) label:before{border-color:var(--wcs-radio-checkmark-border-color-disabled);background-color:var(--wcs-radio-checkmark-background-color-selected-disabled)}:host([mode=radio]:hover:not([disabled])) label,:host([mode=horizontal]:hover:not([disabled])) label{color:var(--wcs-radio-text-color-hover)}:host([mode=radio]:hover:not([disabled])) label:before,:host([mode=horizontal]:hover:not([disabled])) label:before{border-color:var(--wcs-radio-checkmark-border-color-hover);background-color:var(--wcs-radio-checkmark-background-color-selected-hover)}:host([mode=radio]:hover:not([disabled]):not(.checked)) label:before,:host([mode=horizontal]:hover:not([disabled]):not(.checked)) label:before{background-color:var(--wcs-radio-checkmark-background-color-default)}:host([mode=radio]) label{border:none}:host([mode=radio]) label:before{transition:background-color var(--wcs-radio-transition-duration) ease-in-out;margin-right:var(--wcs-radio-gap);display:inline-block;top:3px;box-sizing:border-box}:host([mode=radio]) label:empty::before{margin-right:0}:host([mode=horizontal]){height:fit-content}:host([mode=horizontal]) label:before{transition:background-color var(--wcs-radio-transition-duration) ease-in-out;margin:auto auto var(--wcs-radio-gap);display:block}:host([mode=horizontal]) label:empty::before{margin-bottom:0}:host([mode=option]){font-weight:var(--wcs-radio-option-text-font-weight-default) !important}:host([mode=option]) input{position:absolute;z-index:-1;opacity:0;box-sizing:border-box;padding:0}:host([mode=option]) label{padding:var(--wcs-radio-option-padding-top) var(--wcs-radio-option-padding-right) var(--wcs-radio-option-padding-bottom) var(--wcs-radio-option-padding-left);margin-bottom:0;color:var(--wcs-radio-option-text-color-default);white-space:nowrap;border-radius:var(--wcs-radio-option-border-radius);transition:background-color var(--wcs-radio-transition-duration) ease-in-out;background-color:var(--wcs-radio-option-background-color-default)}:host([mode=option]) input:focus-visible+label{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-radio-outline-color-focus);outline-offset:0;border-radius:var(--wcs-radio-border-radius)}:host([mode=option][disabled]) label{color:var(--wcs-radio-option-text-color-disabled);background-color:var(--wcs-radio-option-background-color-disabled)}:host([mode=option][disabled].checked) label{color:var(--wcs-radio-option-text-color-disabled);background-color:var(--wcs-radio-option-background-color-selected-disabled)}:host([mode=option].checked) label{font-weight:var(--wcs-radio-option-text-font-weight-selected) !important;color:var(--wcs-radio-option-text-color-selected-default);background-color:var(--wcs-radio-option-background-color-selected-default)}:host([mode=option]:hover.checked:not([disabled])) label{color:var(--wcs-radio-option-text-color-selected-hover);background-color:var(--wcs-radio-option-background-color-selected-hover)}:host([mode=option]:active.checked:not([disabled])) label{color:var(--wcs-radio-option-text-color-selected-press);background-color:var(--wcs-radio-option-background-color-selected-press)}:host([mode=option]:hover:not(.checked):not([disabled])) label{color:var(--wcs-radio-option-text-color-hover);background-color:var(--wcs-radio-option-background-color-hover);outline:var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-hover)}:host([mode=option]:active:not(.checked):not([disabled])) label{color:var(--wcs-radio-option-text-color-press);background-color:var(--wcs-radio-option-background-color-press);outline:var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-press)}';const n=s;const l=["title"];const h=class{constructor(e){o(this,e);this.wcsRadioClick=r(this,"wcsRadioClick",7);this.wcsBlur=r(this,"wcsBlur",7);this.wcsFocus=r(this,"wcsFocus",7);this.inputId=`wcs-rb-${b++}`;this.inheritedAttributes={};this.checked=false;this.radioTabIndex=-1;this.value=undefined;this.label=undefined;this.disabled=false;this.name=undefined;this.mode="radio"}async updateState(){const o=this.getClosestRadioGroup();if(o){this.checked=o.name===this.name&&o.value===this.value}}async setTabIndex(o){this.radioTabIndex=o}async setAriaAttribute(o,r){t(this.nativeRadio,o,r)}onFocus(o){this.wcsFocus.emit(o)}onBlur(o){this.wcsBlur.emit(o)}getClosestRadioGroup(){return this.el.closest("wcs-radio-group")}componentWillLoad(){if(this.value===undefined){this.value=this.el.innerText||""}this.inheritedAttributes=Object.assign(Object.assign({},i(this.el)),d(this.el,l))}onChange(o){if(this.disabled)return;if(!this.checked){this.checked=true;this.emitRadioChangeEvent()}}emitRadioChangeEvent(){this.wcsRadioClick.emit({label:this.label,source:this.el,value:this.value})}render(){return e(a,{key:"07ab36a8de3f5503b21792d29fd384a9412f9c35",slot:"option",tabIndex:this.disabled?-1:this.radioTabIndex,class:this.checked?"checked":""},e("input",Object.assign({key:"a977994ac12b09f5dac114b923cbeea2de437757",id:this.inputId,type:"radio",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,onChange:this.onChange.bind(this),onFocus:this.onFocus.bind(this),onBlur:this.onBlur.bind(this),"aria-disabled":this.disabled?"true":null,"aria-checked":`${this.checked}`,ref:o=>this.nativeRadio=o},this.inheritedAttributes)),e("label",{key:"709e74930fd42435b6ad2ad12e1ab0b3653572d4",htmlFor:`${this.inputId}`},this.label))}static get delegatesFocus(){return true}get el(){return c(this)}};let b=0;h.style=n;export{h as wcs_radio};
-//# sourceMappingURL=p-796e690d.entry.js.map
+import{r as o,c as r,h as e,H as a,g as c}from"./p-32e583ea.js";import{s as t,i,a as d}from"./p-52d77e1f.js";const s=':host{width:fit-content;--wcs-radio-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-radio-text-color-default:var(--wcs-semantic-color-text-secondary);--wcs-radio-text-font-weight-default:var(--wcs-semantic-font-weight-medium);--wcs-radio-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-radio-text-font-weight-selected:var(--wcs-semantic-font-weight-medium);--wcs-radio-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-radio-text-color-hover:var(--wcs-semantic-color-text-primary);--wcs-radio-checkmark-size:1rem;--wcs-radio-gap:var(--wcs-semantic-spacing-base);--wcs-radio-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-radio-checkmark-border-width:var(--wcs-semantic-border-width-large);--wcs-radio-checkmark-border-color-default:var(--wcs-semantic-color-border-control-indicator-default);--wcs-radio-checkmark-border-color-selected:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-radio-checkmark-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-radio-checkmark-border-color-disabled:var(--wcs-semantic-color-border-control-indicator-disabled);--wcs-radio-checkmark-background-color-default:transparent;--wcs-radio-checkmark-background-color-selected:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-radio-checkmark-background-color-selected-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-radio-checkmark-background-color-selected-hover:var(--wcs-semantic-color-background-control-indicator-hover);--wcs-radio-checkmark-outline-distance-with-checkmark-circle:var(--wcs-semantic-spacing-small);--wcs-radio-checkmark-outline-width:var(--wcs-semantic-border-width-large);--wcs-radio-checkmark-outline-color:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-radio-checkmark-border-radius:var(--wcs-semantic-border-radius-full);--wcs-radio-border-radius:var(--wcs-semantic-border-radius-base);--wcs-radio-option-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-hover:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-press:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-disabled:var(--wcs-semantic-color-background-action-secondary-default);--wcs-radio-option-background-color-selected-default:var(--wcs-semantic-color-background-action-primary-default);--wcs-radio-option-background-color-selected-hover:var(--wcs-semantic-color-background-action-primary-hover);--wcs-radio-option-background-color-selected-press:var(--wcs-semantic-color-background-action-primary-press);--wcs-radio-option-background-color-selected-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-radio-option-text-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-radio-option-text-color-hover:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-radio-option-text-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-radio-option-text-color-selected-default:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-radio-option-text-color-selected-hover:var(--wcs-semantic-color-foreground-action-primary-hover);--wcs-radio-option-text-color-selected-press:var(--wcs-semantic-color-foreground-action-primary-press);--wcs-radio-option-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-radio-option-text-font-weight-default:var(--wcs-semantic-font-weight-roman);--wcs-radio-option-text-font-weight-selected:var(--wcs-semantic-font-weight-roman);--wcs-radio-option-border-radius:var(--wcs-semantic-border-radius-base);--wcs-radio-option-border-width:var(--wcs-semantic-border-width-default);--wcs-radio-option-border-color-hover:var(--wcs-semantic-color-border-action-secondary-hover);--wcs-radio-option-border-color-press:var(--wcs-semantic-color-border-action-secondary-press);--wcs-radio-option-padding-top:var(--wcs-semantic-spacing-base);--wcs-radio-option-padding-right:var(--wcs-semantic-spacing-large);--wcs-radio-option-padding-bottom:var(--wcs-semantic-spacing-base);--wcs-radio-option-padding-left:var(--wcs-semantic-spacing-large)}:host([mode=radio]) input,:host([mode=horizontal]) input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host([mode=radio]) label,:host([mode=horizontal]) label{margin-bottom:0;color:var(--wcs-radio-text-color-default);font-weight:var(--wcs-radio-text-font-weight-default) !important;display:inline-block}:host([mode=radio]) label:before,:host([mode=horizontal]) label:before{border-radius:var(--wcs-radio-checkmark-border-radius);border:var(--wcs-radio-checkmark-border-width) solid var(--wcs-radio-checkmark-border-color-default);position:relative;width:var(--wcs-radio-checkmark-size);height:var(--wcs-radio-checkmark-size);pointer-events:none;content:"";background-color:var(--wcs-radio-checkmark-background-color-default)}:host([mode=radio]) input:focus-visible+label,:host([mode=horizontal]) input:focus-visible+label{transition:none;outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-radio-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-radio-border-radius)}:host([disabled]) label{color:var(--wcs-radio-text-color-disabled);cursor:not-allowed}:host([disabled]) label:before{border-color:var(--wcs-radio-checkmark-border-color-disabled)}:host(:not([disabled])) label{cursor:pointer}:host([mode=radio].checked) label,:host([mode=horizontal].checked) label{color:var(--wcs-radio-text-color-selected);font-weight:var(--wcs-radio-text-font-weight-selected) !important}:host([mode=radio].checked) label:before,:host([mode=horizontal].checked) label:before{border-color:var(--wcs-radio-checkmark-border-color-selected);background-color:var(--wcs-radio-checkmark-background-color-selected);outline:solid var(--wcs-radio-checkmark-outline-width) var(--wcs-radio-checkmark-outline-color);outline-offset:calc(-1 * var(--wcs-radio-checkmark-outline-distance-with-checkmark-circle))}:host([mode=radio][disabled].checked) label,:host([mode=horizontal][disabled].checked) label{color:var(--wcs-radio-text-color-disabled)}:host([mode=radio][disabled].checked) label:before,:host([mode=horizontal][disabled].checked) label:before{border-color:var(--wcs-radio-checkmark-border-color-disabled);background-color:var(--wcs-radio-checkmark-background-color-selected-disabled)}:host([mode=radio]:hover:not([disabled])) label,:host([mode=horizontal]:hover:not([disabled])) label{color:var(--wcs-radio-text-color-hover)}:host([mode=radio]:hover:not([disabled])) label:before,:host([mode=horizontal]:hover:not([disabled])) label:before{border-color:var(--wcs-radio-checkmark-border-color-hover);background-color:var(--wcs-radio-checkmark-background-color-selected-hover)}:host([mode=radio]:hover:not([disabled]):not(.checked)) label:before,:host([mode=horizontal]:hover:not([disabled]):not(.checked)) label:before{background-color:var(--wcs-radio-checkmark-background-color-default)}:host([mode=radio]) label{border:none}:host([mode=radio]) label:before{transition:background-color var(--wcs-radio-transition-duration) ease-in-out;margin-right:var(--wcs-radio-gap);display:inline-block;top:3px;box-sizing:border-box}:host([mode=radio]) label:empty::before{margin-right:0}:host([mode=horizontal]){height:fit-content}:host([mode=horizontal]) label:before{transition:background-color var(--wcs-radio-transition-duration) ease-in-out;margin:auto auto var(--wcs-radio-gap);display:block}:host([mode=horizontal]) label:empty::before{margin-bottom:0}:host([mode=option]){font-weight:var(--wcs-radio-option-text-font-weight-default) !important}:host([mode=option]) input{position:absolute;z-index:-1;opacity:0;box-sizing:border-box;padding:0}:host([mode=option]) label{padding:var(--wcs-radio-option-padding-top) var(--wcs-radio-option-padding-right) var(--wcs-radio-option-padding-bottom) var(--wcs-radio-option-padding-left);margin-bottom:0;color:var(--wcs-radio-option-text-color-default);white-space:nowrap;border-radius:var(--wcs-radio-option-border-radius);transition:background-color var(--wcs-radio-transition-duration) ease-in-out;background-color:var(--wcs-radio-option-background-color-default)}:host([mode=option]) input:focus-visible+label{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-radio-outline-color-focus);outline-offset:0;border-radius:var(--wcs-radio-border-radius)}:host([mode=option][disabled]) label{color:var(--wcs-radio-option-text-color-disabled);background-color:var(--wcs-radio-option-background-color-disabled)}:host([mode=option][disabled].checked) label{color:var(--wcs-radio-option-text-color-disabled);background-color:var(--wcs-radio-option-background-color-selected-disabled)}:host([mode=option].checked) label{font-weight:var(--wcs-radio-option-text-font-weight-selected) !important;color:var(--wcs-radio-option-text-color-selected-default);background-color:var(--wcs-radio-option-background-color-selected-default)}:host([mode=option]:hover.checked:not([disabled])) label{color:var(--wcs-radio-option-text-color-selected-hover);background-color:var(--wcs-radio-option-background-color-selected-hover)}:host([mode=option]:active.checked:not([disabled])) label{color:var(--wcs-radio-option-text-color-selected-press);background-color:var(--wcs-radio-option-background-color-selected-press)}:host([mode=option]:hover:not(.checked):not([disabled])) label{color:var(--wcs-radio-option-text-color-hover);background-color:var(--wcs-radio-option-background-color-hover);outline:var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-hover)}:host([mode=option]:active:not(.checked):not([disabled])) label{color:var(--wcs-radio-option-text-color-press);background-color:var(--wcs-radio-option-background-color-press);outline:var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-press)}';const n=s;const l=["title"];const h=class{constructor(e){o(this,e);this.wcsRadioClick=r(this,"wcsRadioClick",7);this.wcsBlur=r(this,"wcsBlur",7);this.wcsFocus=r(this,"wcsFocus",7);this.inputId=`wcs-rb-${b++}`;this.inheritedAttributes={};this.checked=false;this.radioTabIndex=-1;this.value=undefined;this.label=undefined;this.disabled=false;this.name=undefined;this.mode="radio"}async updateState(){const o=this.getClosestRadioGroup();if(o){this.checked=o.name===this.name&&o.value===this.value}}async setTabIndex(o){this.radioTabIndex=o}async setAriaAttribute(o,r){t(this.nativeRadio,o,r)}onFocus(o){this.wcsFocus.emit(o)}onBlur(o){this.wcsBlur.emit(o)}getClosestRadioGroup(){return this.el.closest("wcs-radio-group")}componentWillLoad(){if(this.value===undefined){this.value=this.el.innerText||""}this.inheritedAttributes=Object.assign(Object.assign({},i(this.el)),d(this.el,l))}onChange(o){if(this.disabled)return;if(!this.checked){this.checked=true;this.emitRadioChangeEvent()}}emitRadioChangeEvent(){this.wcsRadioClick.emit({label:this.label,source:this.el,value:this.value})}render(){return e(a,{key:"b753f4673fccbd2f0d7e1636be135da90e1850ef",slot:"option",tabIndex:this.disabled?-1:this.radioTabIndex,class:this.checked?"checked":""},e("input",Object.assign({key:"25ac2afe93bdde452db9226feb11587f76a4fd69",id:this.inputId,type:"radio",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,onChange:this.onChange.bind(this),onFocus:this.onFocus.bind(this),onBlur:this.onBlur.bind(this),"aria-disabled":this.disabled?"true":null,"aria-checked":`${this.checked}`,ref:o=>this.nativeRadio=o},this.inheritedAttributes)),e("label",{key:"13b771ac257bcf81734cee12a85ffdf143e3c329",htmlFor:`${this.inputId}`},this.label))}static get delegatesFocus(){return true}get el(){return c(this)}};let b=0;h.style=n;export{h as wcs_radio};
+//# sourceMappingURL=p-86ec9ead.entry.js.map

package/dist/wcs/{p-796e690d.entry.js.map → p-86ec9ead.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["radioCss","WcsRadioStyle0","RADIO_INHERITED_ATTRS","Radio","this","inputId","radioButtonIds","inheritedAttributes","updateState","radioGroup","getClosestRadioGroup","checked","name","value","setTabIndex","radioTabIndex","setAriaAttribute","attr","setOrRemoveAttribute","nativeRadio","onFocus","ev","wcsFocus","emit","onBlur","wcsBlur","el","closest","componentWillLoad","undefined","innerText","Object","assign","inheritAriaAttributes","inheritAttributes","onChange","_","disabled","emitRadioChangeEvent","wcsRadioClick","label","source","render","h","Host","key","slot","tabIndex","class","id","type","bind","ref","htmlFor"],"sources":["src/components/radio/radio.scss?tag=wcs-radio&encapsulation=shadow","src/components/radio/radio.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    width: fit-content;\n\n    --wcs-radio-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    // region mode Radio\n    --wcs-radio-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-radio-text-font-weight-default: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-radio-text-color-selected: var(--wcs-semantic-color-text-primary);\n    --wcs-radio-text-font-weight-selected: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-radio-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-radio-text-color-hover: var(--wcs-semantic-color-text-primary);\n\n    --wcs-radio-checkmark-size: 1rem; // for now, we let raw value to let adjust the size based on base font size\n\n    --wcs-radio-gap: var(--wcs-semantic-spacing-base);\n\n    --wcs-radio-outline-color-focus: var(--wcs-semantic-color-border-focus-base); // outline color for focus ring\n\n    --wcs-radio-checkmark-border-width: var(--wcs-semantic-border-width-large);\n    --wcs-radio-checkmark-border-color-default: var(--wcs-semantic-color-border-control-indicator-default);\n    --wcs-radio-checkmark-border-color-selected: var(--wcs-semantic-color-border-control-indicator-selected);\n    --wcs-radio-checkmark-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-radio-checkmark-border-color-disabled: var(--wcs-semantic-color-border-control-indicator-disabled);\n\n    --wcs-radio-checkmark-background-color-default: transparent;\n    --wcs-radio-checkmark-background-color-selected: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-radio-checkmark-background-color-selected-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-radio-checkmark-background-color-selected-hover: var(--wcs-semantic-color-background-control-indicator-hover);\n\n    --wcs-radio-checkmark-outline-distance-with-checkmark-circle: var(--wcs-semantic-spacing-small);\n    --wcs-radio-checkmark-outline-width: var(--wcs-semantic-border-width-large);\n    --wcs-radio-checkmark-outline-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n    --wcs-radio-checkmark-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-radio-border-radius: var(--wcs-semantic-border-radius-base);\n    // endregion\n\n    // region mode Option\n    --wcs-radio-option-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-hover: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-press: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-disabled: var(--wcs-semantic-color-background-action-secondary-default);\n\n    --wcs-radio-option-background-color-selected-default: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-radio-option-background-color-selected-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-radio-option-background-color-selected-press: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-radio-option-background-color-selected-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-radio-option-text-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-radio-option-text-color-hover: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-radio-option-text-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n\n    --wcs-radio-option-text-color-selected-default: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-radio-option-text-color-selected-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-radio-option-text-color-selected-press: var(--wcs-semantic-color-foreground-action-primary-press);\n    --wcs-radio-option-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-radio-option-text-font-weight-default: var(--wcs-semantic-font-weight-roman);\n    --wcs-radio-option-text-font-weight-selected: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-radio-option-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-radio-option-border-width: var(--wcs-semantic-border-width-default);\n\n    --wcs-radio-option-border-color-hover: var(--wcs-semantic-color-border-action-secondary-hover);\n    --wcs-radio-option-border-color-press: var(--wcs-semantic-color-border-action-secondary-press);\n\n    --wcs-radio-option-padding-top: var(--wcs-semantic-spacing-base);\n    --wcs-radio-option-padding-right: var(--wcs-semantic-spacing-large);\n    --wcs-radio-option-padding-bottom: var(--wcs-semantic-spacing-base);\n    --wcs-radio-option-padding-left: var(--wcs-semantic-spacing-large);\n    // endregion\n}\n\n:host([mode=radio]),\n:host([mode=horizontal]) {\n    input {\n        position: absolute;\n        opacity: 0;\n        height: 1px;\n        width: 1px;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n    }\n\n    label {\n        margin-bottom: 0;\n        color: var(--wcs-radio-text-color-default);\n        font-weight: var(--wcs-radio-text-font-weight-default) !important;\n        display: inline-block;\n\n        &:before {\n            border-radius: var(--wcs-radio-checkmark-border-radius);\n            border: var(--wcs-radio-checkmark-border-width) solid var(--wcs-radio-checkmark-border-color-default);\n            position: relative;\n            width: var(--wcs-radio-checkmark-size);\n            height: var(--wcs-radio-checkmark-size);\n            pointer-events: none;\n            content: \"\";\n            background-color: var(--wcs-radio-checkmark-background-color-default);\n        }\n    }\n\n    input:focus-visible + label {\n        transition: none;\n        @include focus-outline($outline-color: var(--wcs-radio-outline-color-focus), $border-radius: var(--wcs-radio-border-radius));\n    }\n}\n\n:host([disabled]) {\n    label {\n        color: var(--wcs-radio-text-color-disabled);\n        cursor: not-allowed;\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-disabled);\n        }\n    }\n}\n\n:host(:not([disabled])) {\n    label {\n        cursor: pointer;\n    }\n}\n\n:host([mode=radio].checked),\n:host([mode=horizontal].checked) {\n    label {\n        color: var(--wcs-radio-text-color-selected);\n        font-weight: var(--wcs-radio-text-font-weight-selected) !important;\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-selected);\n            background-color: var(--wcs-radio-checkmark-background-color-selected);\n            outline: solid var(--wcs-radio-checkmark-outline-width) var(--wcs-radio-checkmark-outline-color);\n            outline-offset: calc(-1 * var(--wcs-radio-checkmark-outline-distance-with-checkmark-circle));\n        }\n    }\n}\n\n:host([mode=radio][disabled].checked),\n:host([mode=horizontal][disabled].checked) {\n    label {\n        color: var(--wcs-radio-text-color-disabled);\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-disabled);\n            background-color: var(--wcs-radio-checkmark-background-color-selected-disabled);\n        }\n    }\n}\n\n:host([mode=radio]:hover:not([disabled])),\n:host([mode=horizontal]:hover:not([disabled])) {\n    label {\n        color: var(--wcs-radio-text-color-hover);\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-hover);\n            background-color: var(--wcs-radio-checkmark-background-color-selected-hover);\n        }\n    }\n}\n\n:host([mode=radio]:hover:not([disabled]):not(.checked)),\n:host([mode=horizontal]:hover:not([disabled]):not(.checked)) {\n    label:before {\n        background-color: var(--wcs-radio-checkmark-background-color-default);\n    }\n}\n\n:host([mode=radio]) {\n    label {\n        border: none;\n\n        &:before {\n            transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n            margin-right: var(--wcs-radio-gap);\n            display: inline-block;\n            top: 3px;\n            box-sizing: border-box;\n        }\n\n        &:empty::before {\n            margin-right: 0;\n        }\n    }\n}\n\n:host([mode=horizontal]) {\n    height: fit-content;\n\n    label {\n        &:before {\n            transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n            margin: auto auto var(--wcs-radio-gap);\n            display: block;\n        }\n\n        &:empty::before {\n            margin-bottom: 0;\n        }\n    }\n}\n\n:host([mode=option]) {\n    font-weight: var(--wcs-radio-option-text-font-weight-default) !important;\n\n    input {\n        position: absolute;\n        z-index: -1;\n        opacity: 0;\n        box-sizing: border-box;\n        padding: 0;\n    }\n\n    label {\n        padding: var(--wcs-radio-option-padding-top) var(--wcs-radio-option-padding-right) var(--wcs-radio-option-padding-bottom) var(--wcs-radio-option-padding-left);\n        margin-bottom: 0;\n        color: var(--wcs-radio-option-text-color-default);\n        white-space: nowrap;\n        border-radius: var(--wcs-radio-option-border-radius);\n        transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n        background-color: var(--wcs-radio-option-background-color-default);\n    }\n\n    input:focus-visible + label {\n        @include focus-outline($outline-color: var(--wcs-radio-outline-color-focus), $border-radius: var(--wcs-radio-border-radius), $outline-offset: 0);\n    }\n}\n\n:host([mode=option][disabled]) {\n    label {\n        color: var(--wcs-radio-option-text-color-disabled);\n        background-color: var(--wcs-radio-option-background-color-disabled);\n    }\n}\n\n:host([mode=option][disabled].checked) {\n    label {\n        color: var(--wcs-radio-option-text-color-disabled);\n        background-color: var(--wcs-radio-option-background-color-selected-disabled);\n    }\n}\n\n:host([mode=option].checked) {\n    label {\n        font-weight: var(--wcs-radio-option-text-font-weight-selected) !important;\n        color: var(--wcs-radio-option-text-color-selected-default);\n        background-color: var(--wcs-radio-option-background-color-selected-default);\n    }\n}\n\n:host([mode=option]:hover.checked:not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-selected-hover);\n        background-color: var(--wcs-radio-option-background-color-selected-hover);\n    }\n}\n\n:host([mode=option]:active.checked:not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-selected-press);\n        background-color: var(--wcs-radio-option-background-color-selected-press);\n    }\n}\n\n:host([mode=option]:hover:not(.checked):not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-hover);\n        background-color: var(--wcs-radio-option-background-color-hover);\n        outline: var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-hover);\n    }\n}\n\n:host([mode=option]:active:not(.checked):not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-press);\n        background-color: var(--wcs-radio-option-background-color-press);\n        outline: var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-press);\n\n\n\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State\n} from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst RADIO_INHERITED_ATTRS = ['title'];\n\n/**\n * The radio component should always be wrapped in a `wcs-radio-group`.\n * \n * @cssprop --wcs-radio-transition-duration - Duration of the transition\n * \n * @cssprop --wcs-radio-text-color-default - Color of the text when the radio is not selected\n * @cssprop --wcs-radio-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-text-color-selected - Color of the text when the radio is selected\n * @cssprop --wcs-radio-text-font-weight-selected - Font weight of the text when the radio is selected\n * @cssprop --wcs-radio-text-color-disabled - Color of the text when the radio is disabled\n * @cssprop --wcs-radio-text-color-hover - Color of the text when the radio is hovered\n * \n * @cssprop --wcs-radio-outline-color-focus - Color of the outline when the radio is focused\n * \n * @cssprop --wcs-radio-checkmark-size - Size of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-width - Width of the border of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-color-default - Color of the border of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-border-color-selected - Color of the border of the checkmark circle when the radio is selected\n * @cssprop --wcs-radio-checkmark-border-color-hover - Color of the border of the checkmark circle when the radio is hovered\n * @cssprop --wcs-radio-checkmark-border-color-disabled - Color of the border of the checkmark circle when the radio is disabled\n * @cssprop --wcs-radio-checkmark-background-color-default - Background color of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-background-color-selected - Background color of the checkmark circle when the radio's is selected\n * @cssprop --wcs-radio-checkmark-background-color-selected-disabled - Background color of the checkmark circle when the radio is selected and disabled\n * @cssprop --wcs-radio-checkmark-background-color-selected-hover - Background color of the checkmark circle when the radio is selected and hovered\n *\n * @cssprop --wcs-radio-checkmark-outline-distance-with-checkmark-circle - Distance between the checkmark circle and the outline (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-width - Width of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-color - Color of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-border-radius - Border radius of the checkmark circle\n * \n * @cssprop --wcs-radio-gap - Gap between the radio checkmark circle and the label\n * \n * @cssprop --wcs-radio-border-radius - Border radius of the radio (default mode)\n *\n * @cssprop --wcs-radio-option-background-color-default - Background color of the radio option when not selected\n * @cssprop --wcs-radio-option-background-color-hover - Background color of the radio option not selected when hovered\n * @cssprop --wcs-radio-option-background-color-press - Background color of the radio option when pressed\n * @cssprop --wcs-radio-option-background-color-disabled - Background color of the radio option when disabled\n * \n * @cssprop --wcs-radio-option-background-color-selected-default - Background color of the radio option when selected\n * @cssprop --wcs-radio-option-background-color-selected-hover - Background color of the radio option when selected and hovered\n * @cssprop --wcs-radio-option-background-color-selected-press - Background color of the radio option when selected and pressed\n * @cssprop --wcs-radio-option-background-color-selected-disabled - Background color of the radio option when selected and disabled\n * \n * @cssprop --wcs-radio-option-text-color-default - Color of the text when the radio option is not selected\n * @cssprop --wcs-radio-option-text-color-hover - Color of the text when the radio option not selected is hovered\n * @cssprop --wcs-radio-option-text-color-press - Color of the text when the radio option is pressed\n * \n * @cssprop --wcs-radio-option-text-color-selected-default - Color of the text when the radio option is selected\n * @cssprop --wcs-radio-option-text-color-selected-hover - Color of the text when the radio option is selected and hovered\n * @cssprop --wcs-radio-option-text-color-selected-press - Color of the text when the radio option is selected and pressed\n * @cssprop --wcs-radio-option-text-color-disabled - Color of the text when the radio option's is disabled\n * \n * @cssprop --wcs-radio-option-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-option-text-font-weight-selected - Font weight of the text when the radio option is selected\n *\n * @cssprop --wcs-radio-option-border-radius - Border radius of the radio option\n * @cssprop --wcs-radio-option-border-width - Width of the border of the radio option\n * @cssprop --wcs-radio-option-border-color-hover - Color of the border of the radio option when not selected and hovered\n * @cssprop --wcs-radio-option-border-color-press - Color of the border of the radio option when not selected and pressed\n * \n * @cssprop --wcs-radio-option-padding-top - Padding top of the radio option\n * @cssprop --wcs-radio-option-padding-right - Padding right of the radio option\n * @cssprop --wcs-radio-option-padding-bottom - Padding bottom of the radio option\n * @cssprop --wcs-radio-option-padding-left - Padding left of the radio option\n */\n@Component({\n    tag: 'wcs-radio',\n    styleUrl: 'radio.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Radio implements ComponentInterface, MutableAriaAttribute {\n    private inputId = `wcs-rb-${radioButtonIds++}`;\n    @Element() private el!: HTMLWcsRadioElement;\n    private nativeRadio!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * If `true`, the radio is selected. \n     * @private\n     */\n    @State() private checked = false;\n\n    /**\n     * The tabindex of the radio button\n     * @private\n     */\n    @State() private radioTabIndex = -1;\n\n    /**\n     * Sets a unique value for each radio, used to identify which radio button in a group is selected\n     */\n    @Prop({ mutable: true, reflect: true }) value: any | any[] | undefined | null;\n\n    /**\n     * The label text displayed for the user\n     */\n    @Prop({ mutable: true, reflect: true }) label: string;\n    \n    /**\n     * If `true`, the user cannot interact with the radio.\n     */\n    @Prop({ mutable: true, reflect: true }) disabled = false;\n\n    /**\n     * Emitted when the radio is clicked or Space/Enter is pressed above an unchecked radio\n     */\n    @Event({ eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n\n    /**\n     * Emitted when the radio loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the radio has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * The name of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ mutable: true }) name: string;\n\n\n    /**\n     * The display mode of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n    /**\n     * @internal\n     * Checks of unchecks the radio according to it's radio-group value\n     */\n    @Method()\n    async updateState() {\n        const radioGroup = this.getClosestRadioGroup();\n        if (radioGroup) {\n            this.checked = radioGroup.name === this.name && radioGroup.value === this.value\n        }\n    }\n\n    /** @internal */\n    @Method()\n    async setTabIndex(value: number) {\n        this.radioTabIndex = value;\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeRadio, attr, value);\n    }\n\n    onFocus(ev: FocusEvent) {\n        this.wcsFocus.emit(ev);\n    }\n\n    onBlur(ev: FocusEvent) {\n        this.wcsBlur.emit(ev);\n    }\n    \n    private getClosestRadioGroup(): HTMLWcsRadioGroupElement | null {\n        return this.el.closest('wcs-radio-group');\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (this.value === undefined) {\n            // If no value was given we use the text content instead.\n            this.value = this.el.innerText || '';\n        }\n        \n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, RADIO_INHERITED_ATTRS),\n        };\n    }\n    \n    private onChange(_: Event) {\n        if (this.disabled) return;\n\n        // If the radio is unchecked, then the change represents its transition to the check state.\n        // Only emit the change event when going from unchecked to checked, like the native behavior.\n        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n        if (!this.checked) {\n            this.checked = true;\n            this.emitRadioChangeEvent();\n        }\n    }\n\n    emitRadioChangeEvent() {\n        this.wcsRadioClick.emit({\n            label: this.label,\n            source: this.el,\n            value: this.value\n        });\n    }\n\n    render() {\n        \n        return (\n            <Host slot=\"option\"\n                  tabIndex={this.disabled ? -1 : this.radioTabIndex}\n                  class={this.checked ? 'checked' : ''}>\n                <input\n                    id={this.inputId}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    checked={this.checked} // Initial checked state of native input\n                    disabled={this.disabled}\n                    onChange={this.onChange.bind(this)}\n                    onFocus={this.onFocus.bind(this)}\n                    onBlur={this.onBlur.bind(this)}\n                    aria-disabled={this.disabled ? 'true' : null}\n                    aria-checked={`${this.checked}`}\n                    ref={(el) => (this.nativeRadio = el)}\n                    {...this.inheritedAttributes}\n                />\n                <label htmlFor={`${this.inputId}`}>{this.label}</label>\n            </Host>\n        );\n    }\n}\n\nlet radioButtonIds = 0;\n"],"mappings":"6GAAA,MAAMA,EAAW,02TACjB,MAAAC,EAAeD,ECgBf,MAAME,EAAwB,CAAC,S,MA2ElBC,EAAK,M,0IACNC,KAAAC,QAAU,UAAUC,MAGpBF,KAAAG,oBAA4C,G,aAMzB,M,oBAMO,E,wDAeiB,M,8BA8Ba,O,CAOhE,iBAAMC,GACF,MAAMC,EAAaL,KAAKM,uBACxB,GAAID,EAAY,CACZL,KAAKO,QAAUF,EAAWG,OAASR,KAAKQ,MAAQH,EAAWI,QAAUT,KAAKS,K,EAMlF,iBAAMC,CAAYD,GACdT,KAAKW,cAAgBF,C,CAIzB,sBAAMG,CAAiBC,EAAyBJ,GAC5CK,EAAqBd,KAAKe,YAAaF,EAAMJ,E,CAGjD,OAAAO,CAAQC,GACJjB,KAAKkB,SAASC,KAAKF,E,CAGvB,MAAAG,CAAOH,GACHjB,KAAKqB,QAAQF,KAAKF,E,CAGd,oBAAAX,GACJ,OAAON,KAAKsB,GAAGC,QAAQ,kB,CAG3B,iBAAAC,GACI,GAAIxB,KAAKS,QAAUgB,UAAW,CAE1BzB,KAAKS,MAAQT,KAAKsB,GAAGI,WAAa,E,CAGtC1B,KAAKG,oBAAmBwB,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsB7B,KAAKsB,KAC3BQ,EAAkB9B,KAAKsB,GAAIxB,G,CAI9B,QAAAiC,CAASC,GACb,GAAIhC,KAAKiC,SAAU,OAKnB,IAAKjC,KAAKO,QAAS,CACfP,KAAKO,QAAU,KACfP,KAAKkC,sB,EAIb,oBAAAA,GACIlC,KAAKmC,cAAchB,KAAK,CACpBiB,MAAOpC,KAAKoC,MACZC,OAAQrC,KAAKsB,GACbb,MAAOT,KAAKS,O,CAIpB,MAAA6B,GAEI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SACLC,SAAU3C,KAAKiC,UAAY,EAAIjC,KAAKW,cACpCiC,MAAO5C,KAAKO,QAAU,UAAY,IACpCgC,EAAA,QAAAZ,OAAAC,OAAA,CAAAa,IAAA,2CACII,GAAI7C,KAAKC,QACT6C,KAAK,QACLtC,KAAMR,KAAKQ,KACXC,MAAOT,KAAKS,MACZF,QAASP,KAAKO,QACd0B,SAAUjC,KAAKiC,SACfF,SAAU/B,KAAK+B,SAASgB,KAAK/C,MAC7BgB,QAAShB,KAAKgB,QAAQ+B,KAAK/C,MAC3BoB,OAAQpB,KAAKoB,OAAO2B,KAAK/C,MAAK,gBACfA,KAAKiC,SAAW,OAAS,KAAI,eAC9B,GAAGjC,KAAKO,UACtByC,IAAM1B,GAAQtB,KAAKe,YAAcO,GAC7BtB,KAAKG,sBAEboC,EAAA,SAAAE,IAAA,2CAAOQ,QAAS,GAAGjD,KAAKC,WAAYD,KAAKoC,O,mEAMzD,IAAIlC,EAAiB,E"}
+{"version":3,"names":["radioCss","WcsRadioStyle0","RADIO_INHERITED_ATTRS","Radio","this","inputId","radioButtonIds","inheritedAttributes","updateState","radioGroup","getClosestRadioGroup","checked","name","value","setTabIndex","radioTabIndex","setAriaAttribute","attr","setOrRemoveAttribute","nativeRadio","onFocus","ev","wcsFocus","emit","onBlur","wcsBlur","el","closest","componentWillLoad","undefined","innerText","Object","assign","inheritAriaAttributes","inheritAttributes","onChange","_","disabled","emitRadioChangeEvent","wcsRadioClick","label","source","render","h","Host","key","slot","tabIndex","class","id","type","bind","ref","htmlFor"],"sources":["src/components/radio/radio.scss?tag=wcs-radio&encapsulation=shadow","src/components/radio/radio.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    width: fit-content;\n\n    --wcs-radio-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    // region mode Radio\n    --wcs-radio-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-radio-text-font-weight-default: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-radio-text-color-selected: var(--wcs-semantic-color-text-primary);\n    --wcs-radio-text-font-weight-selected: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-radio-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-radio-text-color-hover: var(--wcs-semantic-color-text-primary);\n\n    --wcs-radio-checkmark-size: 1rem; // for now, we let raw value to let adjust the size based on base font size\n\n    --wcs-radio-gap: var(--wcs-semantic-spacing-base);\n\n    --wcs-radio-outline-color-focus: var(--wcs-semantic-color-border-focus-base); // outline color for focus ring\n\n    --wcs-radio-checkmark-border-width: var(--wcs-semantic-border-width-large);\n    --wcs-radio-checkmark-border-color-default: var(--wcs-semantic-color-border-control-indicator-default);\n    --wcs-radio-checkmark-border-color-selected: var(--wcs-semantic-color-border-control-indicator-selected);\n    --wcs-radio-checkmark-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-radio-checkmark-border-color-disabled: var(--wcs-semantic-color-border-control-indicator-disabled);\n\n    --wcs-radio-checkmark-background-color-default: transparent;\n    --wcs-radio-checkmark-background-color-selected: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-radio-checkmark-background-color-selected-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-radio-checkmark-background-color-selected-hover: var(--wcs-semantic-color-background-control-indicator-hover);\n\n    --wcs-radio-checkmark-outline-distance-with-checkmark-circle: var(--wcs-semantic-spacing-small);\n    --wcs-radio-checkmark-outline-width: var(--wcs-semantic-border-width-large);\n    --wcs-radio-checkmark-outline-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n    --wcs-radio-checkmark-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-radio-border-radius: var(--wcs-semantic-border-radius-base);\n    // endregion\n\n    // region mode Option\n    --wcs-radio-option-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-hover: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-press: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-radio-option-background-color-disabled: var(--wcs-semantic-color-background-action-secondary-default);\n\n    --wcs-radio-option-background-color-selected-default: var(--wcs-semantic-color-background-action-primary-default);\n    --wcs-radio-option-background-color-selected-hover: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-radio-option-background-color-selected-press: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-radio-option-background-color-selected-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n\n    --wcs-radio-option-text-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-radio-option-text-color-hover: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-radio-option-text-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n\n    --wcs-radio-option-text-color-selected-default: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-radio-option-text-color-selected-hover: var(--wcs-semantic-color-foreground-action-primary-hover);\n    --wcs-radio-option-text-color-selected-press: var(--wcs-semantic-color-foreground-action-primary-press);\n    --wcs-radio-option-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-radio-option-text-font-weight-default: var(--wcs-semantic-font-weight-roman);\n    --wcs-radio-option-text-font-weight-selected: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-radio-option-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-radio-option-border-width: var(--wcs-semantic-border-width-default);\n\n    --wcs-radio-option-border-color-hover: var(--wcs-semantic-color-border-action-secondary-hover);\n    --wcs-radio-option-border-color-press: var(--wcs-semantic-color-border-action-secondary-press);\n\n    --wcs-radio-option-padding-top: var(--wcs-semantic-spacing-base);\n    --wcs-radio-option-padding-right: var(--wcs-semantic-spacing-large);\n    --wcs-radio-option-padding-bottom: var(--wcs-semantic-spacing-base);\n    --wcs-radio-option-padding-left: var(--wcs-semantic-spacing-large);\n    // endregion\n}\n\n:host([mode=radio]),\n:host([mode=horizontal]) {\n    input {\n        position: absolute;\n        opacity: 0;\n        height: 1px;\n        width: 1px;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n    }\n\n    label {\n        margin-bottom: 0;\n        color: var(--wcs-radio-text-color-default);\n        font-weight: var(--wcs-radio-text-font-weight-default) !important;\n        display: inline-block;\n\n        &:before {\n            border-radius: var(--wcs-radio-checkmark-border-radius);\n            border: var(--wcs-radio-checkmark-border-width) solid var(--wcs-radio-checkmark-border-color-default);\n            position: relative;\n            width: var(--wcs-radio-checkmark-size);\n            height: var(--wcs-radio-checkmark-size);\n            pointer-events: none;\n            content: \"\";\n            background-color: var(--wcs-radio-checkmark-background-color-default);\n        }\n    }\n\n    input:focus-visible + label {\n        transition: none;\n        @include focus-outline($outline-color: var(--wcs-radio-outline-color-focus), $border-radius: var(--wcs-radio-border-radius));\n    }\n}\n\n:host([disabled]) {\n    label {\n        color: var(--wcs-radio-text-color-disabled);\n        cursor: not-allowed;\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-disabled);\n        }\n    }\n}\n\n:host(:not([disabled])) {\n    label {\n        cursor: pointer;\n    }\n}\n\n:host([mode=radio].checked),\n:host([mode=horizontal].checked) {\n    label {\n        color: var(--wcs-radio-text-color-selected);\n        font-weight: var(--wcs-radio-text-font-weight-selected) !important;\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-selected);\n            background-color: var(--wcs-radio-checkmark-background-color-selected);\n            outline: solid var(--wcs-radio-checkmark-outline-width) var(--wcs-radio-checkmark-outline-color);\n            outline-offset: calc(-1 * var(--wcs-radio-checkmark-outline-distance-with-checkmark-circle));\n        }\n    }\n}\n\n:host([mode=radio][disabled].checked),\n:host([mode=horizontal][disabled].checked) {\n    label {\n        color: var(--wcs-radio-text-color-disabled);\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-disabled);\n            background-color: var(--wcs-radio-checkmark-background-color-selected-disabled);\n        }\n    }\n}\n\n:host([mode=radio]:hover:not([disabled])),\n:host([mode=horizontal]:hover:not([disabled])) {\n    label {\n        color: var(--wcs-radio-text-color-hover);\n\n        &:before {\n            border-color: var(--wcs-radio-checkmark-border-color-hover);\n            background-color: var(--wcs-radio-checkmark-background-color-selected-hover);\n        }\n    }\n}\n\n:host([mode=radio]:hover:not([disabled]):not(.checked)),\n:host([mode=horizontal]:hover:not([disabled]):not(.checked)) {\n    label:before {\n        background-color: var(--wcs-radio-checkmark-background-color-default);\n    }\n}\n\n:host([mode=radio]) {\n    label {\n        border: none;\n\n        &:before {\n            transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n            margin-right: var(--wcs-radio-gap);\n            display: inline-block;\n            top: 3px;\n            box-sizing: border-box;\n        }\n\n        &:empty::before {\n            margin-right: 0;\n        }\n    }\n}\n\n:host([mode=horizontal]) {\n    height: fit-content;\n\n    label {\n        &:before {\n            transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n            margin: auto auto var(--wcs-radio-gap);\n            display: block;\n        }\n\n        &:empty::before {\n            margin-bottom: 0;\n        }\n    }\n}\n\n:host([mode=option]) {\n    font-weight: var(--wcs-radio-option-text-font-weight-default) !important;\n\n    input {\n        position: absolute;\n        z-index: -1;\n        opacity: 0;\n        box-sizing: border-box;\n        padding: 0;\n    }\n\n    label {\n        padding: var(--wcs-radio-option-padding-top) var(--wcs-radio-option-padding-right) var(--wcs-radio-option-padding-bottom) var(--wcs-radio-option-padding-left);\n        margin-bottom: 0;\n        color: var(--wcs-radio-option-text-color-default);\n        white-space: nowrap;\n        border-radius: var(--wcs-radio-option-border-radius);\n        transition: background-color var(--wcs-radio-transition-duration) ease-in-out;\n        background-color: var(--wcs-radio-option-background-color-default);\n    }\n\n    input:focus-visible + label {\n        @include focus-outline($outline-color: var(--wcs-radio-outline-color-focus), $border-radius: var(--wcs-radio-border-radius), $outline-offset: 0);\n    }\n}\n\n:host([mode=option][disabled]) {\n    label {\n        color: var(--wcs-radio-option-text-color-disabled);\n        background-color: var(--wcs-radio-option-background-color-disabled);\n    }\n}\n\n:host([mode=option][disabled].checked) {\n    label {\n        color: var(--wcs-radio-option-text-color-disabled);\n        background-color: var(--wcs-radio-option-background-color-selected-disabled);\n    }\n}\n\n:host([mode=option].checked) {\n    label {\n        font-weight: var(--wcs-radio-option-text-font-weight-selected) !important;\n        color: var(--wcs-radio-option-text-color-selected-default);\n        background-color: var(--wcs-radio-option-background-color-selected-default);\n    }\n}\n\n:host([mode=option]:hover.checked:not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-selected-hover);\n        background-color: var(--wcs-radio-option-background-color-selected-hover);\n    }\n}\n\n:host([mode=option]:active.checked:not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-selected-press);\n        background-color: var(--wcs-radio-option-background-color-selected-press);\n    }\n}\n\n:host([mode=option]:hover:not(.checked):not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-hover);\n        background-color: var(--wcs-radio-option-background-color-hover);\n        outline: var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-hover);\n    }\n}\n\n:host([mode=option]:active:not(.checked):not([disabled])) {\n    label {\n        color: var(--wcs-radio-option-text-color-press);\n        background-color: var(--wcs-radio-option-background-color-press);\n        outline: var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-press);\n\n\n\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State\n} from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst RADIO_INHERITED_ATTRS = ['title'];\n\n/**\n * The radio component should always be wrapped in a `wcs-radio-group`.\n * \n * @cssprop --wcs-radio-transition-duration - Duration of the transition\n * \n * @cssprop --wcs-radio-text-color-default - Color of the text when the radio is not selected\n * @cssprop --wcs-radio-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-text-color-selected - Color of the text when the radio is selected\n * @cssprop --wcs-radio-text-font-weight-selected - Font weight of the text when the radio is selected\n * @cssprop --wcs-radio-text-color-disabled - Color of the text when the radio is disabled\n * @cssprop --wcs-radio-text-color-hover - Color of the text when the radio is hovered\n * \n * @cssprop --wcs-radio-outline-color-focus - Color of the outline when the radio is focused\n * \n * @cssprop --wcs-radio-checkmark-size - Size of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-width - Width of the border of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-color-default - Color of the border of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-border-color-selected - Color of the border of the checkmark circle when the radio is selected\n * @cssprop --wcs-radio-checkmark-border-color-hover - Color of the border of the checkmark circle when the radio is hovered\n * @cssprop --wcs-radio-checkmark-border-color-disabled - Color of the border of the checkmark circle when the radio is disabled\n * @cssprop --wcs-radio-checkmark-background-color-default - Background color of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-background-color-selected - Background color of the checkmark circle when the radio's is selected\n * @cssprop --wcs-radio-checkmark-background-color-selected-disabled - Background color of the checkmark circle when the radio is selected and disabled\n * @cssprop --wcs-radio-checkmark-background-color-selected-hover - Background color of the checkmark circle when the radio is selected and hovered\n *\n * @cssprop --wcs-radio-checkmark-outline-distance-with-checkmark-circle - Distance between the checkmark circle and the outline (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-width - Width of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-color - Color of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-border-radius - Border radius of the checkmark circle\n * \n * @cssprop --wcs-radio-gap - Gap between the radio checkmark circle and the label\n * \n * @cssprop --wcs-radio-border-radius - Border radius of the radio (default mode)\n *\n * @cssprop --wcs-radio-option-background-color-default - Background color of the radio option when not selected\n * @cssprop --wcs-radio-option-background-color-hover - Background color of the radio option not selected when hovered\n * @cssprop --wcs-radio-option-background-color-press - Background color of the radio option when pressed\n * @cssprop --wcs-radio-option-background-color-disabled - Background color of the radio option when disabled\n * \n * @cssprop --wcs-radio-option-background-color-selected-default - Background color of the radio option when selected\n * @cssprop --wcs-radio-option-background-color-selected-hover - Background color of the radio option when selected and hovered\n * @cssprop --wcs-radio-option-background-color-selected-press - Background color of the radio option when selected and pressed\n * @cssprop --wcs-radio-option-background-color-selected-disabled - Background color of the radio option when selected and disabled\n * \n * @cssprop --wcs-radio-option-text-color-default - Color of the text when the radio option is not selected\n * @cssprop --wcs-radio-option-text-color-hover - Color of the text when the radio option not selected is hovered\n * @cssprop --wcs-radio-option-text-color-press - Color of the text when the radio option is pressed\n * \n * @cssprop --wcs-radio-option-text-color-selected-default - Color of the text when the radio option is selected\n * @cssprop --wcs-radio-option-text-color-selected-hover - Color of the text when the radio option is selected and hovered\n * @cssprop --wcs-radio-option-text-color-selected-press - Color of the text when the radio option is selected and pressed\n * @cssprop --wcs-radio-option-text-color-disabled - Color of the text when the radio option's is disabled\n * \n * @cssprop --wcs-radio-option-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-option-text-font-weight-selected - Font weight of the text when the radio option is selected\n *\n * @cssprop --wcs-radio-option-border-radius - Border radius of the radio option\n * @cssprop --wcs-radio-option-border-width - Width of the border of the radio option\n * @cssprop --wcs-radio-option-border-color-hover - Color of the border of the radio option when not selected and hovered\n * @cssprop --wcs-radio-option-border-color-press - Color of the border of the radio option when not selected and pressed\n * \n * @cssprop --wcs-radio-option-padding-top - Padding top of the radio option\n * @cssprop --wcs-radio-option-padding-right - Padding right of the radio option\n * @cssprop --wcs-radio-option-padding-bottom - Padding bottom of the radio option\n * @cssprop --wcs-radio-option-padding-left - Padding left of the radio option\n */\n@Component({\n    tag: 'wcs-radio',\n    styleUrl: 'radio.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Radio implements ComponentInterface, MutableAriaAttribute {\n    private inputId = `wcs-rb-${radioButtonIds++}`;\n    @Element() private el!: HTMLWcsRadioElement;\n    private nativeRadio!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * If `true`, the radio is selected. \n     * @private\n     */\n    @State() private checked: boolean = false;\n\n    /**\n     * The tabindex of the radio button\n     * @private\n     */\n    @State() private radioTabIndex = -1;\n\n    /**\n     * Sets a unique value for each radio, used to identify which radio button in a group is selected\n     */\n    @Prop({ mutable: true, reflect: true }) value: any | any[] | undefined | null;\n\n    /**\n     * The label text displayed for the user\n     */\n    @Prop({ mutable: true, reflect: true }) label: string;\n    \n    /**\n     * If `true`, the user cannot interact with the radio.\n     */\n    @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the radio is clicked or Space/Enter is pressed above an unchecked radio\n     */\n    @Event({ eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n\n    /**\n     * Emitted when the radio loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the radio has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * The name of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ mutable: true }) name: string;\n\n\n    /**\n     * The display mode of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n    /**\n     * @internal\n     * Checks of unchecks the radio according to it's radio-group value\n     */\n    @Method()\n    async updateState() {\n        const radioGroup = this.getClosestRadioGroup();\n        if (radioGroup) {\n            this.checked = radioGroup.name === this.name && radioGroup.value === this.value\n        }\n    }\n\n    /** @internal */\n    @Method()\n    async setTabIndex(value: number) {\n        this.radioTabIndex = value;\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeRadio, attr, value);\n    }\n\n    onFocus(ev: FocusEvent) {\n        this.wcsFocus.emit(ev);\n    }\n\n    onBlur(ev: FocusEvent) {\n        this.wcsBlur.emit(ev);\n    }\n    \n    private getClosestRadioGroup(): HTMLWcsRadioGroupElement | null {\n        return this.el.closest('wcs-radio-group');\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (this.value === undefined) {\n            // If no value was given we use the text content instead.\n            this.value = this.el.innerText || '';\n        }\n        \n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, RADIO_INHERITED_ATTRS),\n        };\n    }\n    \n    private onChange(_: Event) {\n        if (this.disabled) return;\n\n        // If the radio is unchecked, then the change represents its transition to the check state.\n        // Only emit the change event when going from unchecked to checked, like the native behavior.\n        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n        if (!this.checked) {\n            this.checked = true;\n            this.emitRadioChangeEvent();\n        }\n    }\n\n    emitRadioChangeEvent() {\n        this.wcsRadioClick.emit({\n            label: this.label,\n            source: this.el,\n            value: this.value\n        });\n    }\n\n    render() {\n        \n        return (\n            <Host slot=\"option\"\n                  tabIndex={this.disabled ? -1 : this.radioTabIndex}\n                  class={this.checked ? 'checked' : ''}>\n                <input\n                    id={this.inputId}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    checked={this.checked} // Initial checked state of native input\n                    disabled={this.disabled}\n                    onChange={this.onChange.bind(this)}\n                    onFocus={this.onFocus.bind(this)}\n                    onBlur={this.onBlur.bind(this)}\n                    aria-disabled={this.disabled ? 'true' : null}\n                    aria-checked={`${this.checked}`}\n                    ref={(el) => (this.nativeRadio = el)}\n                    {...this.inheritedAttributes}\n                />\n                <label htmlFor={`${this.inputId}`}>{this.label}</label>\n            </Host>\n        );\n    }\n}\n\nlet radioButtonIds = 0;\n"],"mappings":"6GAAA,MAAMA,EAAW,02TACjB,MAAAC,EAAeD,ECgBf,MAAME,EAAwB,CAAC,S,MA2ElBC,EAAK,M,0IACNC,KAAAC,QAAU,UAAUC,MAGpBF,KAAAG,oBAA4C,G,aAMhB,M,oBAMF,E,wDAe0B,M,8BA8BI,O,CAOhE,iBAAMC,GACF,MAAMC,EAAaL,KAAKM,uBACxB,GAAID,EAAY,CACZL,KAAKO,QAAUF,EAAWG,OAASR,KAAKQ,MAAQH,EAAWI,QAAUT,KAAKS,K,EAMlF,iBAAMC,CAAYD,GACdT,KAAKW,cAAgBF,C,CAIzB,sBAAMG,CAAiBC,EAAyBJ,GAC5CK,EAAqBd,KAAKe,YAAaF,EAAMJ,E,CAGjD,OAAAO,CAAQC,GACJjB,KAAKkB,SAASC,KAAKF,E,CAGvB,MAAAG,CAAOH,GACHjB,KAAKqB,QAAQF,KAAKF,E,CAGd,oBAAAX,GACJ,OAAON,KAAKsB,GAAGC,QAAQ,kB,CAG3B,iBAAAC,GACI,GAAIxB,KAAKS,QAAUgB,UAAW,CAE1BzB,KAAKS,MAAQT,KAAKsB,GAAGI,WAAa,E,CAGtC1B,KAAKG,oBAAmBwB,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsB7B,KAAKsB,KAC3BQ,EAAkB9B,KAAKsB,GAAIxB,G,CAI9B,QAAAiC,CAASC,GACb,GAAIhC,KAAKiC,SAAU,OAKnB,IAAKjC,KAAKO,QAAS,CACfP,KAAKO,QAAU,KACfP,KAAKkC,sB,EAIb,oBAAAA,GACIlC,KAAKmC,cAAchB,KAAK,CACpBiB,MAAOpC,KAAKoC,MACZC,OAAQrC,KAAKsB,GACbb,MAAOT,KAAKS,O,CAIpB,MAAA6B,GAEI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SACLC,SAAU3C,KAAKiC,UAAY,EAAIjC,KAAKW,cACpCiC,MAAO5C,KAAKO,QAAU,UAAY,IACpCgC,EAAA,QAAAZ,OAAAC,OAAA,CAAAa,IAAA,2CACII,GAAI7C,KAAKC,QACT6C,KAAK,QACLtC,KAAMR,KAAKQ,KACXC,MAAOT,KAAKS,MACZF,QAASP,KAAKO,QACd0B,SAAUjC,KAAKiC,SACfF,SAAU/B,KAAK+B,SAASgB,KAAK/C,MAC7BgB,QAAShB,KAAKgB,QAAQ+B,KAAK/C,MAC3BoB,OAAQpB,KAAKoB,OAAO2B,KAAK/C,MAAK,gBACfA,KAAKiC,SAAW,OAAS,KAAI,eAC9B,GAAGjC,KAAKO,UACtByC,IAAM1B,GAAQtB,KAAKe,YAAcO,GAC7BtB,KAAKG,sBAEboC,EAAA,SAAAE,IAAA,2CAAOQ,QAAS,GAAGjD,KAAKC,WAAYD,KAAKoC,O,mEAMzD,IAAIlC,EAAiB,E"}

package/dist/wcs/p-8c2605fd.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as o,H as r,g as t}from"./p-32e583ea.js";import{S as s}from"./p-84e22272.js";import{k as a,s as i,i as n,a as c}from"./p-52d77e1f.js";import{k as d}from"./p-89b8c724.js";import{c as l}from"./p-0f864e86.js";function p(e,o){const r=d(e);if(r==="UNKNOWN"){return[]}switch(o){case"closed":switch(r){case"UP_ARROW":return[{kind:"OpenMenu"},{kind:"FocusItem",target:"last"}];case"DOWN_ARROW":return[{kind:"OpenMenu"},{kind:"FocusItem",target:"first"}];case"SPACE":case"ENTER":return[{kind:"OpenMenu"},{kind:"FocusItem",target:"first"}]}break;case"opened":switch(r){case"UP_ARROW":return[{kind:"FocusItem",target:"previous"}];case"DOWN_ARROW":return[{kind:"FocusItem",target:"next"}];case"HOME":return[{kind:"FocusItem",target:"first"}];case"END":return[{kind:"FocusItem",target:"last"}];case"ESCAPE":case"MAJ+TAB":case"TAB":return[{kind:"CloseMenu"}]}break;default:throw Error("Unknown error")}return[]}const w=':host{display:flex;--wcs-dropdown-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-dropdown-padding-empty:var(--wcs-semantic-spacing-large);--wcs-dropdown-plain-arrow-color:var(--wcs-semantic-color-foreground-action-primary-default);--wcs-dropdown-stroked-arrow-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-dropdown-clear-arrow-color:var(--wcs-semantic-color-foreground-action-tertiary-default);--wcs-dropdown-arrow-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-dropdown-overlay-max-height:360px;--wcs-dropdown-overlay-padding:var(--wcs-semantic-spacing-base);--wcs-dropdown-overlay-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-dropdown-overlay-border-width:var(--wcs-semantic-border-width-default);--wcs-dropdown-overlay-border-radius:var(--wcs-semantic-border-radius-base);--wcs-dropdown-overlay-border-color:var(--wcs-semantic-color-border-secondary)}:host wcs-button{height:fit-content}:host svg{margin-right:-0.25rem}button{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;outline:0;outline-offset:0}button:focus-visible+wcs-button{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}@supports not selector(button:focus-visible + wcs-button){button:focus-within+wcs-button{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-button-border-radius)}}.wcs-button-content-wrapper{display:flex;align-items:center}.popover{display:none;border:var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);border-radius:var(--wcs-dropdown-overlay-border-radius);background-color:var(--wcs-dropdown-overlay-background-color);z-index:9999}.show{display:block}.container{min-width:calc(10 * var(--wcs-semantic-size-base));border-radius:inherit;overflow:hidden;padding:var(--wcs-dropdown-overlay-padding);background-color:var(--wcs-dropdown-overlay-background-color)}:host([mode=clear]) .arrow{fill:var(--wcs-dropdown-clear-arrow-color)}:host([mode=stroked]) .arrow{fill:var(--wcs-dropdown-stroked-arrow-color)}:host([mode=plain]) .arrow{fill:var(--wcs-dropdown-plain-arrow-color)}:host([disabled]) .arrow{fill:var(--wcs-dropdown-arrow-color-disabled)}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit;border:var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color)}#arrow{visibility:hidden;z-index:-1}#arrow::before{visibility:visible;content:"";transform:rotate(45deg)}#is-empty{display:block;width:20ch;padding:0 var(--wcs-dropdown-padding-empty)}.popover[data-popper-placement^=top]>#arrow{bottom:-5px}.popover[data-popper-placement^=bottom]>#arrow{top:-6px}.popover[data-popper-placement^=left]>#arrow{right:-4px}.popover[data-popper-placement^=right]>#arrow{left:-6px}';const h=w;const u=["tabindex"];const b=class{constructor(o){e(this,o);this.inheritedAttributes={};this.noArrow=false;this.mode="stroked";this.shape="normal";this.size="m";this.disabled=false;this.placement="bottom-end";this.expanded=false}get items(){return Array.from(this.el.querySelectorAll("wcs-dropdown-item"))}placementChange(){this.popper.setOptions(Object.assign(Object.assign({},this.popper.state.options),{placement:this.placement})).then((e=>this.popper.update()))}onBlur(){this.clearLastFocusedItem();this.expanded=false}componentDidLoad(){this.popper=l(this.wcsButton,this.popoverDiv,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[0,8]}}]});this.fixForFirefoxBelow63()}fixForFirefoxBelow63(){const e=this.el.querySelectorAll("wcs-dropdown-item");const o=this.el.querySelector(".container");if(e.length>0&&o){e.forEach((e=>{this.el.removeChild(e);o.appendChild(e)}))}}onButtonClick(e){this.clearLastFocusedItem();this.expanded=!this.expanded;if(this.expanded){this.focusItem(0)}}onWindowClickEvent(e){const o=a(e,this.el);if(this.expanded&&!o){this.expanded=false}}dropdownItemClick(e){this.expanded=false;this.nativeButton.focus()}onKeyDown(e){const o=this.expanded?"opened":"closed";const r=p(e,o);if(r.length!=0){e.preventDefault()}for(const e of r){this.doActionFromKeyboardEventAssociatedAction(e)}}async setAriaAttribute(e,o){i(this.nativeButton,e,o)}doActionFromKeyboardEventAssociatedAction(e){switch(e.kind){case"OpenMenu":this.expanded=true;this.focusItem(0);break;case"CloseMenu":this.expanded=false;this.nativeButton.focus();break;case"ClearFocus":this.clearLastFocusedItem();break;case"FocusItem":switch(e.target){case"previous":this.focusClosestItem("previous");break;case"next":this.focusClosestItem("next");break;case"first":this.focusItem(0);break;case"last":this.focusItem(this.items.length-1);break}break}}clearLastFocusedItem(){if(this.lastFocusedItemElement){this.lastFocusedItemElement.tabIndex=-1;this.lastFocusedItemElement=null}}focusItem(e){this.clearLastFocusedItem();this.lastFocusedItemElement=this.items[e];if(this.lastFocusedItemElement){this.lastFocusedItemElement.tabIndex=0;requestAnimationFrame((()=>{var e;(e=this.lastFocusedItemElement)===null||e===void 0?void 0:e.focus()}))}}focusClosestItem(e){const o=this.getClosestActiveItemIndexForDirection(e);if(o===-1)return;this.focusItem(o)}getClosestActiveItemIndexForDirection(e){const o=this.items;let r=Array.from(o).indexOf(this.lastFocusedItemElement);const t=0;const s=o.length-1;if(e==="next"&&r<s){r++}else if(e==="previous"&&r>t){r--}else{if(e==="next"&&r>=s){r=0}if(e==="previous"&&r===t){r=s}}return r}componentDidRender(){if(this.popper){this.popper.update()}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),c(this.el,u))}render(){return o(r,{key:"96be2f9df0a80b4d6c88cf15419ff29cb001c695"},o("button",Object.assign({key:"562456822837e6ff61ed23569335e42ad4e36df9",id:"dropdown-button","aria-controls":"menu",disabled:this.disabled,"aria-haspopup":"true",role:"button","aria-expanded":this.expanded?"true":"false",ref:e=>this.nativeButton=e,onClick:e=>this.onButtonClick(e),onBlur:e=>e.stopImmediatePropagation()},this.inheritedAttributes),"Dropdown"),o("wcs-button",{key:"66348725409b810219dd1bd4658611c63bbb5eb8",mode:this.mode,shape:this.shape,disabled:this.disabled,size:this.size,ref:e=>this.wcsButton=e,"aria-hidden":"true",tabindex:-1,onClick:e=>this.onButtonClick(e),onBlur:e=>e.stopImmediatePropagation()},o("div",{key:"028e06637e35ecc14b66cf74fba32dc59d58121a",class:"wcs-button-content-wrapper"},o("slot",{key:"7f7e2db54f9b5d3a20588c48c1d3fd6750187017",name:"placeholder"}),this.noArrow?null:o(s,{up:this.expanded}))),o("div",{key:"7f6f4efe22cab63033b3e7775791856ed8e1b921",class:(this.expanded?"show ":"")+"popover",id:"menu",role:"menu","aria-labelledby":"dropdown-button",tabindex:-1,ref:e=>this.popoverDiv=e},o("div",{key:"ca7ce6adea1005d7126d4ae060ada55e9d3b6d70",role:"presentation",id:"arrow","data-popper-arrow":true}),o("div",{key:"0f2a9e15df898550117743f855e7ee0746157ab1",role:"presentation",class:"container"},o("slot",{key:"688fd29a894bae8aee4c848a9b07380c95302ca2",name:"item"},o("span",{key:"a80c902d26d7afed58e8a17646dac92473042fa4",id:"is-empty"})))))}static get delegatesFocus(){return true}get el(){return t(this)}static get watchers(){return{placement:["placementChange"]}}};b.style=h;export{b as wcs_dropdown};
+//# sourceMappingURL=p-8c2605fd.entry.js.map

package/dist/wcs/p-8c2605fd.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getActionForKeyboardEvent","event","currentState","keyboardShortcut","keyboardShortcutFromKeyboardEvent","kind","target","Error","dropdownCss","WcsDropdownStyle0","DROPDOWN_INHERITED_ATTRS","Dropdown","this","inheritedAttributes","items","Array","from","el","querySelectorAll","placementChange","popper","setOptions","Object","assign","state","options","placement","then","_","update","onBlur","clearLastFocusedItem","expanded","componentDidLoad","createPopper","wcsButton","popoverDiv","modifiers","name","offset","fixForFirefoxBelow63","container","querySelector","length","forEach","i","removeChild","appendChild","onButtonClick","focusItem","onWindowClickEvent","clickedOnDropdownOrChildren","clickTargetIsElementOrChildren","dropdownItemClick","nativeButton","focus","onKeyDown","_event","actionsFromKeyboardEvents","preventDefault","actionFromKeyboardEvent","doActionFromKeyboardEventAssociatedAction","setAriaAttribute","attr","value","setOrRemoveAttribute","focusClosestItem","lastFocusedItemElement","tabIndex","indexToFocus","requestAnimationFrame","_a","direction","getClosestActiveItemIndexForDirection","currentIndex","indexOf","MIN_INDEX","MAX_INDEX","componentDidRender","componentWillLoad","inheritAriaAttributes","inheritAttributes","render","h","Host","key","id","disabled","role","ref","onClick","$event","stopImmediatePropagation","mode","shape","size","tabindex","e","class","noArrow","SelectArrow","up"],"sources":["src/components/dropdown/dropdown-keyboard-event.ts","src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["import { keyboardShortcutFromKeyboardEvent } from \"../../utils/keyboard-event\";\n\n// Possible Shortcuts\n\n// Dropdown button\n// ENTER : open menu, move focus to first item\n// SPACE : open menu, move focus to first item\n// DOWN_ARROW : open menu, move focus to first item\n// UP_ARROW : open menu, move focus to last item\n\n// Dropdown item\n// HOME : focus first item\n// END : focus last item\n// UP_ARROW : move focus to previous item\n// DOWN_ARROW : move focus to previous item\n// ESCAPE : close menu, set focus on the dropdown button\n// ENTER : activate the item, close menu, set focus to menu button (already handled via the wcsDropdownItemClick event)\n\nexport type KeyboardEventAssociatedAction = OpenMenu\n    | CloseMenu\n    | ClearFocus\n    | FocusItem;\n\ntype OpenMenu = {kind: 'OpenMenu'};\ntype CloseMenu = {kind: 'CloseMenu'};\n\n\ntype ClearFocus = {kind: 'ClearFocus'};\ntype FocusItem = {kind: 'FocusItem', target: 'next' | 'previous' | 'first' | 'last'};\n\n/**\n * We follow this pattern https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/\n * @param event\n * @param currentState\n * @param type\n */\nexport function getActionForKeyboardEvent(event: KeyboardEvent, currentState: 'closed' | 'opened'): KeyboardEventAssociatedAction[] {\n    const keyboardShortcut = keyboardShortcutFromKeyboardEvent(event);\n\n    if(keyboardShortcut === 'UNKNOWN') {\n        return [];\n    }\n\n    switch (currentState) {\n        case 'closed':\n            // We handle every available shortcut for the closed state\n            switch (keyboardShortcut) {\n                case 'UP_ARROW':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'last'}];\n                case 'DOWN_ARROW':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n                case 'SPACE':\n                case 'ENTER':\n                    return [{kind: 'OpenMenu'}, {kind: 'FocusItem', target: 'first'}];\n                default:\n                    break;\n            }\n            break;\n        case 'opened':\n            // We handle every available shortcut for the opened state\n            switch (keyboardShortcut) {\n                case 'UP_ARROW':\n                    return [{kind: 'FocusItem', target: 'previous'}];\n                case 'DOWN_ARROW':\n                    return [{kind: 'FocusItem', target: 'next'}];\n                case 'HOME':\n                    return [{kind: 'FocusItem', target: 'first'}];\n                case 'END':\n                    return [{kind: 'FocusItem', target: 'last'}];\n                case 'ESCAPE':\n                case 'MAJ+TAB':\n                case 'TAB':\n                    return [{kind: 'CloseMenu'}];\n                default:\n                    break;\n            }\n            break;\n        default:\n            throw Error('Unknown error');\n    }\n    return [];\n}\n","@import '../../style/focus-outline.scss';\n\n:host {\n    display: flex;\n\n    --wcs-dropdown-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    // Padding\n    --wcs-dropdown-padding-empty: var(--wcs-semantic-spacing-large);\n\n    // Arrow color\n    --wcs-dropdown-plain-arrow-color: var(--wcs-semantic-color-foreground-action-primary-default);\n    --wcs-dropdown-stroked-arrow-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-dropdown-clear-arrow-color: var(--wcs-semantic-color-foreground-action-tertiary-default);\n\n    --wcs-dropdown-arrow-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    // Overlay\n    --wcs-dropdown-overlay-max-height: 360px;\n    --wcs-dropdown-overlay-padding: var(--wcs-semantic-spacing-base);\n    --wcs-dropdown-overlay-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-dropdown-overlay-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-dropdown-overlay-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-dropdown-overlay-border-color: var(--wcs-semantic-color-border-secondary);\n\n    wcs-button {\n        height: fit-content;\n    }\n\n    svg {\n        margin-right: -0.25rem;\n    }\n}\n\n/* Visually hide the native button */\nbutton {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    outline: 0;\n    outline-offset: 0;\n}\n\nbutton:focus-visible + wcs-button {\n    @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n}\n\n@supports not selector(button:focus-visible + wcs-button) {\n    button:focus-within + wcs-button {\n        @include focus-outline($outline-color: var(--wcs-dropdown-outline-color-focus), $border-radius: var(--wcs-button-border-radius));\n    }\n}\n\n.wcs-button-content-wrapper {\n    display: flex;\n    align-items: center;\n}\n\n.popover {\n    display: none;\n    border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\n    border-radius: var(--wcs-dropdown-overlay-border-radius);\n    background-color: var(--wcs-dropdown-overlay-background-color);\n    z-index: 9999;\n}\n\n.show {\n    display: block;\n}\n\n// XXX: So that item hover background does not overflow\n.container {\n    min-width: calc(10 * var(--wcs-semantic-size-base));\n    border-radius: inherit;\n    overflow: hidden;\n    padding: var(--wcs-dropdown-overlay-padding);\n    background-color: var(--wcs-dropdown-overlay-background-color);\n}\n\n:host([mode=clear]) {\n    // SVG arrow inside the button, on clear background\n    .arrow {\n        fill: var(--wcs-dropdown-clear-arrow-color);\n    }\n}\n\n:host([mode=stroked]) {\n    // SVG arrow inside the button, on stroked background\n    .arrow {\n        fill: var(--wcs-dropdown-stroked-arrow-color);\n    }\n}\n\n:host([mode=plain]) {\n    // SVG arrow inside the button, on primary background\n    .arrow {\n        fill: var(--wcs-dropdown-plain-arrow-color);\n    }\n}\n\n:host([disabled]) {\n    .arrow {\n        fill: var(--wcs-dropdown-arrow-color-disabled);\n    }\n}\n\n// Popover arrow\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n    border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);\n}\n\n#arrow {\n    visibility: hidden;\n    z-index: -1;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\n#is-empty {\n    display: block;\n    width: 20ch;\n    padding: 0 var(--wcs-dropdown-padding-empty);\n}\n\n.popover[data-popper-placement^='top'] > #arrow {\n    bottom: -5px;\n}\n\n.popover[data-popper-placement^='bottom'] > #arrow {\n    top: -6px;\n}\n\n.popover[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n.popover[data-popper-placement^='right'] > #arrow {\n    left: -6px;\n}\n","import { Component, ComponentInterface, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport {\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n} from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport {\n    clickTargetIsElementOrChildren,\n    inheritAriaAttributes,\n    inheritAttributes,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { getActionForKeyboardEvent, KeyboardEventAssociatedAction } from \"./dropdown-keyboard-event\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst DROPDOWN_INHERITED_ATTRS = ['tabindex'];\n\n/**\n * The dropdown component use a wcs-button under the hood, so you can use the same css classes as the button to style the\n * dropdown.\n * \n * @slot placeholder - The slot containing the placeholder displayed in button\n * @slot item - The slot container the list of `wcs-dropdown-item` elements\n * \n * @cssprop --wcs-dropdown-outline-color-focus - Outline color of dropdown when focus it\n * \n * @cssprop --wcs-dropdown-plain-arrow-color - Color of the arrow indicator when the dropdown is plain\n * @cssprop --wcs-dropdown-stroked-arrow-color - Color of the arrow indicator when the dropdown is stroked\n * @cssprop --wcs-dropdown-clear-arrow-color - Color of the arrow indicator when the dropdown is not filled\n * @cssprop --wcs-dropdown-arrow-color-disabled - Base color of the arrow indicator when the dropdown is disabled\n * \n * @cssprop --wcs-dropdown-padding-empty - Padding of and empty dropdown\n * \n * @cssprop --wcs-dropdown-overlay-padding - Defines the vertical padding inside the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-max-height - Specifies the maximum height of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-background-color - Determines the background color of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-width - Sets the border width of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-radius - Defines the border radius of the dropdown overlay\n * @cssprop --wcs-dropdown-overlay-border-color - Specifies the border color of the dropdown overlay\n */\n@Component({\n    tag: 'wcs-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Dropdown implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLWcsDropdownElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * This button is visually hidden. It used to carry all aria attributes and acts as the controller of the menu.\n     * The wcs-button could not handle the aria-controls and aria-activedescendant attributes because of the IDREF\n     * not passing from a shadow-dom through another.\n     * @private\n     */\n    private nativeButton!: HTMLButtonElement;\n\n    /**\n     * This button is shown on the user interface, and visually receives focus and catch click events.  \n     * It is hidden to screen readers since the native button carries all the aria informations.\n     * @private\n     */\n    private wcsButton!: HTMLWcsButtonElement;\n\n    /**\n     * This div is shown on the user interface when the dropdown is expanded.\n     * @private\n     */\n    private popoverDiv!: HTMLDivElement;\n\n    /** Hides the arrow in the button */\n    @Prop({ reflect: true }) noArrow: boolean = false;\n\n    /** Dropdown's button mode */\n    @Prop() mode: WcsButtonMode = 'stroked';\n\n    /** Dropdown's button shape */\n    @Prop() shape: WcsButtonShape = 'normal';\n    \n    /** Dropdown's button size */\n    @Prop() size: WcsButtonSize = 'm';\n\n    /** Specifies whether the dropdown button is clickable or not */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /** placement of the dropdown's popover */\n    @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n    @State() private expanded: boolean = false;\n\n\n    private popper: Instance;\n    \n    private lastFocusedItemElement: HTMLWcsDropdownItemElement | null;\n    \n    private get items(): HTMLWcsDropdownItemElement[] {\n        return Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n    }\n\n    @Watch('placement')\n    protected placementChange() {\n        this.popper.setOptions({\n            ...this.popper.state.options,\n            placement: this.placement\n        }).then(_ => this.popper.update());\n    }\n    \n    @Listen('blur')\n    onBlur() {\n        this.clearLastFocusedItem();\n        this.expanded = false;\n    }\n\n    componentDidLoad() {\n        this.popper = createPopper(this.wcsButton, this.popoverDiv, {\n            placement: this.placement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n\n        this.fixForFirefoxBelow63();\n    }\n\n    private fixForFirefoxBelow63() {\n        // If the items appear out of the slot we place them back\n        const items = this.el.querySelectorAll('wcs-dropdown-item');\n        const container = this.el.querySelector('.container');\n        if (items.length > 0 && container) {\n            items.forEach(i => {\n                this.el.removeChild(i);\n                container.appendChild(i);\n            });\n        }\n    }\n\n    private onButtonClick(_: MouseEvent): void {\n        this.clearLastFocusedItem();\n        this.expanded = !this.expanded;\n        \n        if (this.expanded) {\n            this.focusItem(0);\n        }\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        const clickedOnDropdownOrChildren = clickTargetIsElementOrChildren(event, this.el);\n        if (this.expanded && !clickedOnDropdownOrChildren) {\n            this.expanded = false;\n        }\n    }\n\n    @Listen('wcsDropdownItemClick')\n    dropdownItemClick(_: CustomEvent<void>) {\n        this.expanded = false;\n        this.nativeButton.focus();\n    }\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent): void {\n        const currentState = this.expanded ? 'opened' : 'closed';\n        const actionsFromKeyboardEvents: KeyboardEventAssociatedAction[] = getActionForKeyboardEvent(_event, currentState);\n\n        // If we have at least one associated actions, we prevent the default behavior of the event. \n        // Except if the action is a focus move (we have to handle the preventDefault behavior ourselves in the action implementation)\n        if (actionsFromKeyboardEvents.length != 0) {\n            _event.preventDefault();\n        }\n\n        for (const actionFromKeyboardEvent of actionsFromKeyboardEvents) {\n            this.doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent);\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    doActionFromKeyboardEventAssociatedAction(actionFromKeyboardEvent: KeyboardEventAssociatedAction) {\n        switch (actionFromKeyboardEvent.kind) {\n            case 'OpenMenu':\n                this.expanded = true;\n                this.focusItem(0);\n                break;\n            case 'CloseMenu':\n                this.expanded = false;\n                this.nativeButton.focus();\n                break;\n            case 'ClearFocus':\n                this.clearLastFocusedItem();\n                break;\n            case 'FocusItem':\n                switch (actionFromKeyboardEvent.target) {\n                    case 'previous':\n                        this.focusClosestItem('previous');\n                        break;\n                    case 'next':\n                        this.focusClosestItem('next');\n                        break;\n                    case 'first':\n                        this.focusItem(0);\n                        break;\n                    case 'last':\n                        this.focusItem(this.items.length - 1);\n                        break;\n                    default:\n                        break;\n                }\n                break;\n            default:\n                break;\n        }\n    }\n\n    /**\n     * Removes the focus and tabindex 0 of the last focused item if any.\n     * @private\n     */\n    private clearLastFocusedItem() {\n        if (this.lastFocusedItemElement) {\n            this.lastFocusedItemElement.tabIndex = -1;\n            this.lastFocusedItemElement = null;\n        }\n    }\n    \n    private focusItem(indexToFocus: number) {\n        this.clearLastFocusedItem();\n        this.lastFocusedItemElement = this.items[indexToFocus];\n        if (this.lastFocusedItemElement) {\n            this.lastFocusedItemElement.tabIndex = 0;\n            requestAnimationFrame(() => {\n                this.lastFocusedItemElement?.focus();\n            });\n        }\n    }\n    \n    private focusClosestItem(direction: 'next' | 'previous'): void {\n        const indexToFocus = this.getClosestActiveItemIndexForDirection(direction);\n        if (indexToFocus === -1) return;\n        \n        this.focusItem(indexToFocus);\n    }\n    \n    private getClosestActiveItemIndexForDirection(direction: 'next' | 'previous'): number {\n        const items = this.items;\n        let currentIndex = Array.from(items).indexOf(this.lastFocusedItemElement);\n\n        const MIN_INDEX = 0;\n        const MAX_INDEX = items.length - 1;\n\n        if (direction === 'next' && currentIndex < MAX_INDEX) {\n            currentIndex++;\n        } else if (direction === 'previous' && currentIndex > MIN_INDEX) {\n            currentIndex--;\n        } else {\n            // Used to scroll through items infinitely with keyboard\n            if (direction === 'next' && currentIndex >= MAX_INDEX) {\n                currentIndex = 0;\n            }\n            if (direction === 'previous' && currentIndex === MIN_INDEX) {\n                currentIndex = MAX_INDEX;\n            }\n        }\n        \n        return currentIndex;\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, DROPDOWN_INHERITED_ATTRS),\n        };\n    }\n    \n    render() {\n        return (\n            <Host>\n                <button id=\"dropdown-button\"\n                        aria-controls=\"menu\"\n                        disabled={this.disabled}\n                        aria-haspopup=\"true\"\n                        role=\"button\"\n                        aria-expanded={this.expanded ? 'true' : 'false'}\n                        ref={el => this.nativeButton = el}\n                        onClick={($event) => this.onButtonClick($event)}\n                        onBlur={($event) => $event.stopImmediatePropagation()}\n                        {...this.inheritedAttributes}>Dropdown</button>\n                <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled} size={this.size}\n                            ref={el => this.wcsButton = el}\n                            aria-hidden=\"true\"\n                            tabindex={-1}\n                            onClick={($event) => this.onButtonClick($event)}\n                            onBlur={(e) => e.stopImmediatePropagation()}>\n                    <div class=\"wcs-button-content-wrapper\">\n                        <slot name=\"placeholder\"/>\n                        {this.noArrow ? null : (<SelectArrow up={this.expanded}/>)}\n                    </div>\n                </wcs-button>\n                <div class={(this.expanded ? 'show ' : '') + 'popover'}\n                     id=\"menu\"\n                     role=\"menu\"\n                     aria-labelledby=\"dropdown-button\"\n                     tabindex={-1}\n                     ref={el => this.popoverDiv = el}>\n                    <div role=\"presentation\" id=\"arrow\" data-popper-arrow/>\n                    <div role=\"presentation\" class=\"container\">\n                        <slot name=\"item\">\n                            <span id={\"is-empty\"}></span>\n                        </slot>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\n"],"mappings":"uOAoCgBA,EAA0BC,EAAsBC,GAC5D,MAAMC,EAAmBC,EAAkCH,GAE3D,GAAGE,IAAqB,UAAW,CAC/B,MAAO,E,CAGX,OAAQD,GACJ,IAAK,SAED,OAAQC,GACJ,IAAK,WACD,MAAO,CAAC,CAACE,KAAM,YAAa,CAACA,KAAM,YAAaC,OAAQ,SAC5D,IAAK,aACD,MAAO,CAAC,CAACD,KAAM,YAAa,CAACA,KAAM,YAAaC,OAAQ,UAC5D,IAAK,QACL,IAAK,QACD,MAAO,CAAC,CAACD,KAAM,YAAa,CAACA,KAAM,YAAaC,OAAQ,UAIhE,MACJ,IAAK,SAED,OAAQH,GACJ,IAAK,WACD,MAAO,CAAC,CAACE,KAAM,YAAaC,OAAQ,aACxC,IAAK,aACD,MAAO,CAAC,CAACD,KAAM,YAAaC,OAAQ,SACxC,IAAK,OACD,MAAO,CAAC,CAACD,KAAM,YAAaC,OAAQ,UACxC,IAAK,MACD,MAAO,CAAC,CAACD,KAAM,YAAaC,OAAQ,SACxC,IAAK,SACL,IAAK,UACL,IAAK,MACD,MAAO,CAAC,CAACD,KAAM,cAIvB,MACJ,QACI,MAAME,MAAM,iBAEpB,MAAO,EACX,CCjFA,MAAMC,EAAc,s/FACpB,MAAAC,EAAeD,ECiBf,MAAME,EAA2B,CAAC,Y,MAgCrBC,EAAQ,M,yBAETC,KAAAC,oBAA4C,G,aAwBR,M,UAGd,U,WAGE,S,UAGF,I,cAGe,M,eAGH,a,cAEL,K,CAOrC,SAAYC,GACR,OAAOC,MAAMC,KAAKJ,KAAKK,GAAGC,iBAAiB,qB,CAIrC,eAAAC,GACNP,KAAKQ,OAAOC,WAAUC,OAAAC,OAAAD,OAAAC,OAAA,GACfX,KAAKQ,OAAOI,MAAMC,SAAO,CAC5BC,UAAWd,KAAKc,aACjBC,MAAKC,GAAKhB,KAAKQ,OAAOS,U,CAI7B,MAAAC,GACIlB,KAAKmB,uBACLnB,KAAKoB,SAAW,K,CAGpB,gBAAAC,GACIrB,KAAKQ,OAASc,EAAatB,KAAKuB,UAAWvB,KAAKwB,WAAY,CACxDV,UAAWd,KAAKc,UAChBW,UAAW,CACP,CACIC,KAAM,SACNb,QAAS,CACLc,OAAQ,CAAC,EAAG,QAM5B3B,KAAK4B,sB,CAGD,oBAAAA,GAEJ,MAAM1B,EAAQF,KAAKK,GAAGC,iBAAiB,qBACvC,MAAMuB,EAAY7B,KAAKK,GAAGyB,cAAc,cACxC,GAAI5B,EAAM6B,OAAS,GAAKF,EAAW,CAC/B3B,EAAM8B,SAAQC,IACVjC,KAAKK,GAAG6B,YAAYD,GACpBJ,EAAUM,YAAYF,EAAE,G,EAK5B,aAAAG,CAAcpB,GAClBhB,KAAKmB,uBACLnB,KAAKoB,UAAYpB,KAAKoB,SAEtB,GAAIpB,KAAKoB,SAAU,CACfpB,KAAKqC,UAAU,E,EAKvB,kBAAAC,CAAmBjD,GACf,MAAMkD,EAA8BC,EAA+BnD,EAAOW,KAAKK,IAC/E,GAAIL,KAAKoB,WAAamB,EAA6B,CAC/CvC,KAAKoB,SAAW,K,EAKxB,iBAAAqB,CAAkBzB,GACdhB,KAAKoB,SAAW,MAChBpB,KAAK0C,aAAaC,O,CAItB,SAAAC,CAAUC,GACN,MAAMvD,EAAeU,KAAKoB,SAAW,SAAW,SAChD,MAAM0B,EAA6D1D,EAA0ByD,EAAQvD,GAIrG,GAAIwD,EAA0Bf,QAAU,EAAG,CACvCc,EAAOE,gB,CAGX,IAAK,MAAMC,KAA2BF,EAA2B,CAC7D9C,KAAKiD,0CAA0CD,E,EAKvD,sBAAME,CAAiBC,EAAyBC,GAC5CC,EAAqBrD,KAAK0C,aAAcS,EAAMC,E,CAGlD,yCAAAH,CAA0CD,GACtC,OAAQA,EAAwBvD,MAC5B,IAAK,WACDO,KAAKoB,SAAW,KAChBpB,KAAKqC,UAAU,GACf,MACJ,IAAK,YACDrC,KAAKoB,SAAW,MAChBpB,KAAK0C,aAAaC,QAClB,MACJ,IAAK,aACD3C,KAAKmB,uBACL,MACJ,IAAK,YACD,OAAQ6B,EAAwBtD,QAC5B,IAAK,WACDM,KAAKsD,iBAAiB,YACtB,MACJ,IAAK,OACDtD,KAAKsD,iBAAiB,QACtB,MACJ,IAAK,QACDtD,KAAKqC,UAAU,GACf,MACJ,IAAK,OACDrC,KAAKqC,UAAUrC,KAAKE,MAAM6B,OAAS,GACnC,MAIR,M,CAUJ,oBAAAZ,GACJ,GAAInB,KAAKuD,uBAAwB,CAC7BvD,KAAKuD,uBAAuBC,UAAY,EACxCxD,KAAKuD,uBAAyB,I,EAI9B,SAAAlB,CAAUoB,GACdzD,KAAKmB,uBACLnB,KAAKuD,uBAAyBvD,KAAKE,MAAMuD,GACzC,GAAIzD,KAAKuD,uBAAwB,CAC7BvD,KAAKuD,uBAAuBC,SAAW,EACvCE,uBAAsB,K,OAClBC,EAAA3D,KAAKuD,0BAAsB,MAAAI,SAAA,SAAAA,EAAEhB,OAAO,G,EAKxC,gBAAAW,CAAiBM,GACrB,MAAMH,EAAezD,KAAK6D,sCAAsCD,GAChE,GAAIH,KAAkB,EAAG,OAEzBzD,KAAKqC,UAAUoB,E,CAGX,qCAAAI,CAAsCD,GAC1C,MAAM1D,EAAQF,KAAKE,MACnB,IAAI4D,EAAe3D,MAAMC,KAAKF,GAAO6D,QAAQ/D,KAAKuD,wBAElD,MAAMS,EAAY,EAClB,MAAMC,EAAY/D,EAAM6B,OAAS,EAEjC,GAAI6B,IAAc,QAAUE,EAAeG,EAAW,CAClDH,G,MACG,GAAIF,IAAc,YAAcE,EAAeE,EAAW,CAC7DF,G,KACG,CAEH,GAAIF,IAAc,QAAUE,GAAgBG,EAAW,CACnDH,EAAe,C,CAEnB,GAAIF,IAAc,YAAcE,IAAiBE,EAAW,CACxDF,EAAeG,C,EAIvB,OAAOH,C,CAGX,kBAAAI,GACI,GAAIlE,KAAKQ,OAAQ,CACbR,KAAKQ,OAAOS,Q,EAIpB,iBAAAkD,GACInE,KAAKC,oBAAmBS,OAAAC,OAAAD,OAAAC,OAAA,GACjByD,EAAsBpE,KAAKK,KAC3BgE,EAAkBrE,KAAKK,GAAIP,G,CAItC,MAAAwE,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,SAAA7D,OAAAC,OAAA,CAAA8D,IAAA,2CAAQC,GAAG,kBAAiB,gBACN,OACdC,SAAU3E,KAAK2E,SAAQ,gBACT,OACdC,KAAK,SAAQ,gBACE5E,KAAKoB,SAAW,OAAS,QACxCyD,IAAKxE,GAAML,KAAK0C,aAAerC,EAC/ByE,QAAUC,GAAW/E,KAAKoC,cAAc2C,GACxC7D,OAAS6D,GAAWA,EAAOC,4BACvBhF,KAAKC,qBAAmB,YACpCsE,EAAA,cAAAE,IAAA,2CAAYQ,KAAMjF,KAAKiF,KAAMC,MAAOlF,KAAKkF,MAAOP,SAAU3E,KAAK2E,SAAUQ,KAAMnF,KAAKmF,KACxEN,IAAKxE,GAAML,KAAKuB,UAAYlB,EAAE,cAClB,OACZ+E,UAAW,EACXN,QAAUC,GAAW/E,KAAKoC,cAAc2C,GACxC7D,OAASmE,GAAMA,EAAEL,4BACzBT,EAAA,OAAAE,IAAA,2CAAKa,MAAM,8BACPf,EAAA,QAAAE,IAAA,2CAAM/C,KAAK,gBACV1B,KAAKuF,QAAU,KAAQhB,EAACiB,EAAW,CAACC,GAAIzF,KAAKoB,aAGtDmD,EAAA,OAAAE,IAAA,2CAAKa,OAAQtF,KAAKoB,SAAW,QAAU,IAAM,UACxCsD,GAAG,OACHE,KAAK,OAAM,kBACK,kBAChBQ,UAAW,EACXP,IAAKxE,GAAML,KAAKwB,WAAanB,GAC9BkE,EAAA,OAAAE,IAAA,2CAAKG,KAAK,eAAeF,GAAG,QAAO,2BACnCH,EAAA,OAAAE,IAAA,2CAAKG,KAAK,eAAeU,MAAM,aAC3Bf,EAAA,QAAAE,IAAA,2CAAM/C,KAAK,QACP6C,EAAA,QAAAE,IAAA,2CAAMC,GAAI,gB"}

package/dist/wcs/{p-16dd21cf.entry.js → p-8e9bd0f1.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,f as s,h as t,H as a,g as i}from"./p-32e583ea.js";import{i as n,a as r,s as o}from"./p-52d77e1f.js";import{E as c,I as d,N as l}from"./p-3abf8a42.js";const h=':host{--wcs-breadcrumb-icon-color:var(--wcs-semantic-color-foreground-brand);--wcs-breadcrumb-icon-font-size:0.5rem;--wcs-breadcrumb-gap:var(--wcs-semantic-spacing-base)}nav.wcs-breadcrumb-container slot[name=hidden-items]{display:none}nav.wcs-breadcrumb-container.show-hidden-items slot[name=hidden-items]{display:contents}nav.wcs-breadcrumb-container div[role=list]{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none}nav.wcs-breadcrumb-container div[role=list] ::slotted(wcs-breadcrumb-item){margin-right:var(--wcs-breadcrumb-gap)}nav.wcs-breadcrumb-container div[role=list] ::slotted(wcs-breadcrumb-item:last-child){margin-right:0}nav.wcs-breadcrumb-container div[role=list] .item-not-slotted{display:flex;align-items:center;margin-right:var(--wcs-breadcrumb-gap)}nav.wcs-breadcrumb-container div[role=list] .item-not-slotted wcs-button[size=s]{--wcs-button-min-width:24px;--wcs-button-height:20px;--wcs-button-border-radius:2px;transform:translateY(2px)}nav.wcs-breadcrumb-container div[role=list] .item-not-slotted .item-icon{margin-left:calc(var(--wcs-breadcrumb-gap) - 1px);font-family:"icons";font-size:var(--wcs-breadcrumb-icon-font-size);color:var(--wcs-breadcrumb-icon-color);transform:translateY(1px)}';const b=h;const m=[];const f=class{constructor(s){e(this,s);this.inheritedAttributes={};this.maxItems=undefined;this.itemsBeforeCollapse=1;this.itemsAfterCollapse=2;this.ariaLabelExpandButton=c;this.showHiddenItems=false}handleCollapsePropsChange(){this.updateCollapsedViewMode()}handleAriaLabelExpandBtnChange(e){var s;(s=this.expandBtnEl)===null||s===void 0?void 0:s.setAriaAttribute("aria-label",e)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),r(this.el,m));this.updateCollapsedViewMode()}componentDidLoad(){var e;(e=this.expandBtnEl)===null||e===void 0?void 0:e.setAriaAttribute("aria-label",this.ariaLabelExpandButton)}async setAriaAttribute(e,s){o(this.navEl,e,s)}getBreadcrumbItems(){return Array.from(this.el.querySelectorAll("wcs-breadcrumb-item"))}shouldCollapseItems(){return!!this.maxItems&&this.getBreadcrumbItems().length>this.maxItems&&this.itemsBeforeCollapse+this.itemsAfterCollapse<=this.maxItems}updateCollapsedViewMode(){if(this.shouldCollapseItems()){this.assignSlotNamesForCollapsedViewMode()}else{this.assignSlotNamesForNonCollapsedViewMode()}}assignSlotNamesForCollapsedViewMode(){const e=this.getBreadcrumbItems();const s=this.itemsBeforeCollapse-1;const t=e.length-this.itemsAfterCollapse;e.forEach(((a,i)=>{if(i<=s){a.slot="items-before-expand-btn";a.last=false}else if(i>s&&i<t){a.slot="hidden-items";a.last=false}else{a.slot="items-after-expand-btn";a.last=i===e.length-1}}))}assignSlotNamesForNonCollapsedViewMode(){const e=this.getBreadcrumbItems();e.forEach(((s,t)=>{s.slot="non-collapsed";s.last=t===e.length-1}))}handleSlotChange(){this.updateCollapsedViewMode();this.showHiddenItems=false;s(this)}handleOnExpandBtnClick(){this.showHiddenItems=true;requestAnimationFrame((()=>this.setFocusToFirstHiddenItem()))}setFocusToFirstHiddenItem(){const e=this.getBreadcrumbItems();const s=this.itemsBeforeCollapse;const t=e[s];const a=t.shadowRoot.querySelector("slot");const i=a.assignedElements()[0];i===null||i===void 0?void 0:i.focus()}renderExpandAllButton(){const e=this.itemsAfterCollapse===0;return t("div",{role:"listitem",class:"item-not-slotted"},t("wcs-button",{mode:"clear",shape:"square",size:"s",onClick:this.handleOnExpandBtnClick.bind(this),ref:e=>this.expandBtnEl=e},t("wcs-mat-icon",{icon:"more_horiz"})),!e&&t("span",{class:"item-icon","aria-hidden":"true"},d))}render(){const e=this.shouldCollapseItems()&&!this.showHiddenItems;return t(a,{key:"944e877808887ad3933072e35d0760df00e5ab68"},t("nav",Object.assign({key:"210476d38cf668330fa9ce0f6ab009499d6afe8d",class:`wcs-breadcrumb-container${this.showHiddenItems?" show-hidden-items":""}`,"aria-label":l},this.inheritedAttributes,{ref:e=>this.navEl=e}),t("div",{key:"882146b18d16c9fe5033a6677a6a3281696af183",role:"list"},t("slot",{key:"14491fd9df9d3901ae3c5f4473ddf2ebfe36a1fb",onSlotchange:this.handleSlotChange.bind(this)}),t("slot",{key:"b077183b3a4abec4f40cd87974dac248b743fa13",name:"non-collapsed"}),t("slot",{key:"fb3cb5779492c275cb47619766df150da71f4daa",name:"items-before-expand-btn"}),t("slot",{key:"86889f6be0e843b55cc8868df6abd9d7af4cf7d9",name:"hidden-items"}),e&&this.renderExpandAllButton(),t("slot",{key:"b5c680f8c61d7491ab5f180d566b2718d1fd684a",name:"items-after-expand-btn"}))))}get el(){return i(this)}static get watchers(){return{maxItems:["handleCollapsePropsChange"],itemsBeforeCollapse:["handleCollapsePropsChange"],itemsAfterCollapse:["handleCollapsePropsChange"],ariaLabelExpandButton:["handleAriaLabelExpandBtnChange"]}}};f.style=b;export{f as wcs_breadcrumb};
-//# sourceMappingURL=p-16dd21cf.entry.js.map
+import{r as e,f as s,h as t,H as a,g as i}from"./p-32e583ea.js";import{i as n,a as r,s as o}from"./p-52d77e1f.js";import{E as c,I as d,N as l}from"./p-3abf8a42.js";const h=':host{--wcs-breadcrumb-icon-color:var(--wcs-semantic-color-foreground-brand);--wcs-breadcrumb-icon-font-size:0.5rem;--wcs-breadcrumb-gap:var(--wcs-semantic-spacing-base)}nav.wcs-breadcrumb-container slot[name=hidden-items]{display:none}nav.wcs-breadcrumb-container.show-hidden-items slot[name=hidden-items]{display:contents}nav.wcs-breadcrumb-container div[role=list]{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none}nav.wcs-breadcrumb-container div[role=list] ::slotted(wcs-breadcrumb-item){margin-right:var(--wcs-breadcrumb-gap)}nav.wcs-breadcrumb-container div[role=list] ::slotted(wcs-breadcrumb-item:last-child){margin-right:0}nav.wcs-breadcrumb-container div[role=list] .item-not-slotted{display:flex;align-items:center;margin-right:var(--wcs-breadcrumb-gap)}nav.wcs-breadcrumb-container div[role=list] .item-not-slotted wcs-button[size=s]{--wcs-button-min-width:24px;--wcs-button-height:20px;--wcs-button-border-radius:2px;transform:translateY(2px)}nav.wcs-breadcrumb-container div[role=list] .item-not-slotted .item-icon{margin-left:calc(var(--wcs-breadcrumb-gap) - 1px);font-family:"icons";font-size:var(--wcs-breadcrumb-icon-font-size);color:var(--wcs-breadcrumb-icon-color);transform:translateY(1px)}';const m=h;const b=[];const p=class{constructor(s){e(this,s);this.inheritedAttributes={};this.maxItems=undefined;this.itemsBeforeCollapse=1;this.itemsAfterCollapse=2;this.ariaLabelExpandButton=c;this.showHiddenItems=false}handleCollapsePropsChange(){this.updateCollapsedViewMode()}handleAriaLabelExpandBtnChange(e){var s;(s=this.expandBtnEl)===null||s===void 0?void 0:s.setAriaAttribute("aria-label",e)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),r(this.el,b));this.updateCollapsedViewMode()}componentDidLoad(){var e;(e=this.expandBtnEl)===null||e===void 0?void 0:e.setAriaAttribute("aria-label",this.ariaLabelExpandButton)}async setAriaAttribute(e,s){o(this.navEl,e,s)}getBreadcrumbItems(){return Array.from(this.el.querySelectorAll("wcs-breadcrumb-item"))}shouldCollapseItems(){return!!this.maxItems&&this.getBreadcrumbItems().length>this.maxItems&&this.itemsBeforeCollapse+this.itemsAfterCollapse<=this.maxItems}updateCollapsedViewMode(){if(this.shouldCollapseItems()){this.assignSlotNamesForCollapsedViewMode()}else{this.assignSlotNamesForNonCollapsedViewMode()}}assignSlotNamesForCollapsedViewMode(){const e=this.getBreadcrumbItems();const s=this.itemsBeforeCollapse-1;const t=e.length-this.itemsAfterCollapse;e.forEach(((a,i)=>{if(i<=s){a.slot="items-before-expand-btn";a.last=false}else if(i>s&&i<t){a.slot="hidden-items";a.last=false}else{a.slot="items-after-expand-btn";a.last=i===e.length-1}}))}assignSlotNamesForNonCollapsedViewMode(){const e=this.getBreadcrumbItems();e.forEach(((s,t)=>{s.slot="non-collapsed";s.last=t===e.length-1}))}handleSlotChange(){this.updateCollapsedViewMode();this.showHiddenItems=false;s(this)}handleOnExpandBtnClick(){this.showHiddenItems=true;requestAnimationFrame((()=>this.setFocusToFirstHiddenItem()))}setFocusToFirstHiddenItem(){const e=this.getBreadcrumbItems();const s=this.itemsBeforeCollapse;const t=e[s];const a=t.shadowRoot.querySelector("slot");const i=a.assignedElements()[0];i===null||i===void 0?void 0:i.focus()}renderExpandAllButton(){const e=this.itemsAfterCollapse===0;return t("div",{role:"listitem",class:"item-not-slotted"},t("wcs-button",{mode:"clear",shape:"square",size:"s",onClick:this.handleOnExpandBtnClick.bind(this),ref:e=>this.expandBtnEl=e},t("wcs-mat-icon",{icon:"more_horiz"})),!e&&t("span",{class:"item-icon","aria-hidden":"true"},d))}render(){const e=this.shouldCollapseItems()&&!this.showHiddenItems;return t(a,{key:"f1c0ed14b8806df5c1ba717f6354d2e4c201dcd1"},t("nav",Object.assign({key:"ae39ce6d5af6868105c1cb349d70d04da9931274",class:`wcs-breadcrumb-container${this.showHiddenItems?" show-hidden-items":""}`,"aria-label":l},this.inheritedAttributes,{ref:e=>this.navEl=e}),t("div",{key:"82f4a76da057076e5d7299df7972bb918220b6ac",role:"list"},t("slot",{key:"e3180e059e1467c9821e5d10b0694f39194ce4f4",onSlotchange:this.handleSlotChange.bind(this)}),t("slot",{key:"e865695a1082a503321d519193f47c54f2d86ba5",name:"non-collapsed"}),t("slot",{key:"53a846e67fe320236a8f0b80216c72fa676304bb",name:"items-before-expand-btn"}),t("slot",{key:"a6f9243e94d5f4e05e6e3ca89a574ac37128689a",name:"hidden-items"}),e&&this.renderExpandAllButton(),t("slot",{key:"0ca62fc184565b82a12d1314bdfb51161934775b",name:"items-after-expand-btn"}))))}get el(){return i(this)}static get watchers(){return{maxItems:["handleCollapsePropsChange"],itemsBeforeCollapse:["handleCollapsePropsChange"],itemsAfterCollapse:["handleCollapsePropsChange"],ariaLabelExpandButton:["handleAriaLabelExpandBtnChange"]}}};p.style=m;export{p as wcs_breadcrumb};
+//# sourceMappingURL=p-8e9bd0f1.entry.js.map

package/dist/wcs/p-98a8b806.entry.js

@@ -0,0 +1,2 @@
+import{r as c,h as t,H as o}from"./p-32e583ea.js";const s=":host{--wcs-card-content-color:var(--wcs-semantic-color-text-tertiary);--wcs-card-content-font-size:var(--wcs-semantic-font-size-body-3);display:block;overflow:hidden}::slotted(*){color:var(--wcs-card-content-color);font-size:var(--wcs-card-content-font-size);margin:0}";const e=s;const r=class{constructor(t){c(this,t)}render(){return t(o,{key:"970e45353d35495c5a4500e168f6b9fda970c7a0"},t("slot",{key:"26f30084a71090b8894593f8c57f35a7e9f60f65"}))}};r.style=e;export{r as wcs_card_content};
+//# sourceMappingURL=p-98a8b806.entry.js.map

package/dist/wcs/p-98a8b806.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardContentCss","WcsCardContentStyle0","CardContent","render","h","Host","key"],"sources":["src/components/card-content/card-content.scss?tag=wcs-card-content&encapsulation=shadow","src/components/card-content/card-content.tsx"],"sourcesContent":[":host {\n    --wcs-card-content-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-card-content-font-size: var(--wcs-semantic-font-size-body-3);\n\n    display: block;\n    overflow: hidden;\n}\n\n::slotted(*) {\n    color: var(--wcs-card-content-color);\n    font-size: var(--wcs-card-content-font-size);\n    margin: 0;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * A content for a card inside card-body. Commonly used to provide more details about the card content. \n * The information provided should be concise and easy to read.\n * \n * By default, the margin is removed from the top and bottom of the card description.\n * \n * @slot - The content of the card description.\n * \n * @cssprop --wcs-card-content-color - The color of the card description.\n * @cssprop --wcs-card-content-font-size - The font size of the card description.\n */\n@Component({\n  tag: 'wcs-card-content',\n  styleUrl: 'card-content.scss',\n  shadow: true,\n})\nexport class CardContent {\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAiB,gRACvB,MAAAC,EAAeD,E,MCiBFE,EAAW,M,yBAEtB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C"}

package/dist/wcs/p-9c73744c.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,g as a}from"./p-32e583ea.js";import{i as o,a as s,s as i}from"./p-52d77e1f.js";const c=":host{--wcs-nav-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-nav-width-desktop:calc(12 * var(--wcs-semantic-size-base));--wcs-nav-height-mobile:calc(6 * var(--wcs-semantic-size-base))}nav{background-color:var(--wcs-nav-background-color);display:flex;z-index:1055;flex-direction:column;width:var(--wcs-nav-width-desktop);height:100%;overflow:auto;scrollbar-width:thin}nav div[role=list]{list-style-type:none;display:flex;flex-direction:column;flex-grow:1}@media (max-width: 1199px){nav div[role=list]{flex-direction:row}}@media (max-width: 1199px){nav{flex-direction:row;width:100%;height:var(--wcs-nav-height-mobile)}}@media (max-width: 1199px){::slotted(wcs-nav-item){flex:1}}@media (min-width: 1200px){slot[name=bottom],wcs-nav-item:not([slot=bottom])+wcs-nav-item[slot=bottom]{display:block;margin-top:auto}}";const n=c;const r=["title"];const d=class{constructor(e){t(this,e);this.inheritedAttributes={}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},o(this.el)),s(this.el,r))}async setAriaAttribute(t,e){i(this.nativeNav,t,e)}render(){return e("nav",Object.assign({key:"3461a64de9b036b1a970e58a26a70f70772491c8",role:"navigation",class:"wcs-nav-container",ref:t=>this.nativeNav=t},this.inheritedAttributes),e("div",{key:"aa68166f70a54e44e78c0fe8a61c224bed4bcb3e",role:"list"},e("slot",{key:"9e6315dafb2038e8577b2402dae1a646587dbb5f"}),e("slot",{key:"8dcddd80f189c8ade3ceb24cd5e36b8d03083a80",name:"bottom"})))}get el(){return a(this)}};d.style=n;export{d as wcs_nav};
+//# sourceMappingURL=p-9c73744c.entry.js.map

package/dist/wcs/p-9c73744c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["navCss","WcsNavStyle0","NAV_ARIA_INHERITED_ATTRS","Nav","constructor","hostRef","this","inheritedAttributes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeNav","render","h","key","role","class","ref","name"],"sources":["src/components/nav/nav.scss?tag=wcs-nav&encapsulation=shadow","src/components/nav/nav.tsx"],"sourcesContent":["@import '../../style/breakpoints';\n\n:host {\n    --wcs-nav-background-color: var(--wcs-semantic-color-background-surface-brand);\n    --wcs-nav-width-desktop: calc(12 * var(--wcs-semantic-size-base));\n    --wcs-nav-height-mobile: calc(6 * var(--wcs-semantic-size-base));\n}\n\nnav {\n    background-color: var(--wcs-nav-background-color);\n    display: flex;\n    z-index: 1055;\n    flex-direction: column;\n    width: var(--wcs-nav-width-desktop);\n    height: 100%;\n    overflow: auto;\n    scrollbar-width: thin;\n\n    div[role=\"list\"] {\n        list-style-type: none;\n        display: flex;\n        flex-direction: column;\n        flex-grow: 1;\n\n        @include for-tablet-landscape-down {\n            flex-direction: row;\n        }\n    }\n\n    @include for-tablet-landscape-down {\n        flex-direction: row;\n        width: 100%;\n        height: var(--wcs-nav-height-mobile);\n    }\n}\n\n::slotted(wcs-nav-item) {\n    @include for-tablet-landscape-down {\n        flex: 1;\n    }\n}\n\n// Place bottom items at the bottom\nslot[name=bottom],\n// Same for ff < 63\nwcs-nav-item:not([slot=bottom]) + wcs-nav-item[slot=bottom] {\n    @include for-desktop-up {\n        display: block;\n        margin-top: auto;\n    }\n}\n","import { Component, ComponentInterface, Element, h, Method } from '@stencil/core';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst NAV_ARIA_INHERITED_ATTRS = ['title'];\n\n/**\n * The nav component is a container for navigation links to other pages of the website.\n * \n * @slot bottom Bottom part of the nav to put to nav-items at the end\n * \n * @cssprop --wcs-nav-background-color - Background color of the nav\n * @cssprop --wcs-nav-width-desktop - Width of the nav on desktop\n * @cssprop --wcs-nav-height-mobile - Height of the nav on mobile\n */\n@Component({\n    tag: 'wcs-nav',\n    styleUrl: 'nav.scss',\n    shadow: true\n})\nexport class Nav implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLWcsProgressBarElement;\n    private nativeNav!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, NAV_ARIA_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeNav, attr, value);\n    }\n    \n    render() {\n        return (\n            <nav role=\"navigation\"\n                 class=\"wcs-nav-container\"\n                 ref={(el) => (this.nativeNav = el)}\n                 {...this.inheritedAttributes}>\n                <div role=\"list\">\n                    <slot/>\n                    <slot name=\"bottom\"/>\n                </div>\n            </nav>\n        );\n    }\n}\n"],"mappings":"oGAAA,MAAMA,EAAS,20BACf,MAAAC,EAAeD,ECGf,MAAME,EAA2B,CAAC,S,MAgBrBC,EAAG,MALhB,WAAAC,CAAAC,G,UAQYC,KAAAC,oBAA4C,E,CAEpD,iBAAAC,GACIF,KAAKC,oBAAmBE,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBL,KAAKM,KAC3BC,EAAkBP,KAAKM,GAAIV,G,CAKtC,sBAAMY,CAAiBC,EAAyBC,GAC5CC,EAAqBX,KAAKY,UAAWH,EAAMC,E,CAG/C,MAAAG,GACI,OACIC,EAAA,MAAAX,OAAAC,OAAA,CAAAW,IAAA,2CAAKC,KAAK,aACLC,MAAM,oBACNC,IAAMZ,GAAQN,KAAKY,UAAYN,GAC3BN,KAAKC,qBACVa,EAAA,OAAAC,IAAA,2CAAKC,KAAK,QACNF,EAAA,QAAAC,IAAA,6CACAD,EAAA,QAAAC,IAAA,2CAAMI,KAAK,Y"}

package/dist/wcs/p-9fd3366c.entry.js

@@ -0,0 +1,2 @@
+import{r,h as s,g as a}from"./p-32e583ea.js";import{i as e,a as o,s as c}from"./p-52d77e1f.js";const t=":host{--wcs-progress-bar-border-radius:var(--wcs-semantic-border-radius-full);--wcs-progress-bar-border-radius-small:var(--wcs-semantic-border-radius-small);--wcs-internal-progress-bar-animation-duration:var(--wcs-progress-bar-animation-duration, var(--wcs-semantic-motion-duration-feedback-slower));--wcs-progress-bar-height-m:calc(var(--wcs-semantic-size-m) / 4);--wcs-progress-bar-height-s:calc(var(--wcs-semantic-size-s) / 6);--wcs-progress-bar-background-color:transparent;--wcs-progress-bar-rail-color:var(--wcs-semantic-color-background-surface-tertiary);--wcs-progress-bar-rail-spacing:var(--wcs-semantic-spacing-small);--wcs-progress-bar-gap-s:var(--wcs-semantic-spacing-small);--wcs-progress-bar-gap-m:var(--wcs-semantic-spacing-base);--wcs-progress-bar-indicator-color:var(--wcs-semantic-color-background-surface-brand);--wcs-progress-bar-label-color:var(--wcs-semantic-color-text-primary);--wcs-progress-bar-label-font-size-s:var(--wcs-semantic-font-size-s);--wcs-progress-bar-label-font-size-m:calc(1.5 * var(--wcs-semantic-font-size-m));--wcs-progress-bar-label-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-progress-bar-label-percentage-font-size-s:calc(var(--wcs-semantic-font-size-s) * 0.7);--wcs-progress-bar-label-percentage-font-size-m:calc(var(--wcs-semantic-font-size-m) * 0.7);--wcs-progress-bar-label-top-space:var(--wcs-semantic-spacing-large)}:host([size=s]) .progress{height:var(--wcs-progress-bar-height-s);background-color:var(--wcs-progress-bar-background-color);background-image:none;background-size:auto;border-radius:var(--wcs-progress-bar-border-radius-small)}:host([size=s]) .progress .progress-label{font-size:var(--wcs-progress-bar-label-font-size-s);bottom:calc(100% + var(--wcs-progress-bar-gap-s))}:host([size=s]) .progress .progress-label sup{font-size:var(--wcs-progress-bar-label-percentage-font-size-s)}.progress{display:flex;height:var(--wcs-progress-bar-height-m);color:var(--wcs-progress-bar-label-color);background-color:var(--wcs-progress-bar-background-color);background-image:linear-gradient(90deg, var(--wcs-progress-bar-rail-color), 50%, transparent 50%);background-size:var(--wcs-progress-bar-rail-spacing) var(--wcs-progress-bar-height-m);border-radius:var(--wcs-progress-bar-border-radius)}.progress.has-label{margin-top:var(--wcs-progress-bar-label-top-space)}.progress.value-zero>.progress-bar>.progress-label{right:unset}.progress-bar{position:relative;display:flex;flex-direction:column;justify-content:center;color:var(--wcs-progress-bar-label-color);text-align:center;background-color:var(--wcs-progress-bar-indicator-color);border-radius:var(--wcs-progress-bar-border-radius);transition:width var(--wcs-internal-progress-bar-animation-duration) ease-out}.progress-label{line-height:1;position:absolute;right:0;bottom:calc(100% + var(--wcs-progress-bar-gap-m));display:flex;flex-direction:row;align-items:flex-start;font-size:var(--wcs-progress-bar-label-font-size-m);font-weight:var(--wcs-progress-bar-label-font-weight)}.progress-label sup{font-size:var(--wcs-progress-bar-label-percentage-font-size-m)}";const i=t;const l=["title"];const b=class{constructor(s){r(this,s);this.inheritedAttributes={};this.size="m";this.showLabel=false;this.value=0}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},e(this.el)),o(this.el,l))}async setAriaAttribute(r,s){c(this.nativeProgress,r,s)}render(){const r={width:this.value+"%"};return s("div",Object.assign({key:"5fe4671aeaaf799d336e38c4bd49f021b4fbb27b",class:this.rootClasses(),role:"progressbar","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":this.value,"aria-valuetext":this.value+"%",ref:r=>this.nativeProgress=r},this.inheritedAttributes),s("div",{key:"9278d7110c3fed850ddcf1a06ff29a60fb4ebbd8",class:"progress-bar",style:r},this.showLabel&&s("span",{key:"ac5758b7b685fc08ecf4592b7194666d751c4b87",class:"progress-label"},this.value,s("sup",{key:"313cec9fb8df686b3affb9a9002e1c6055249f0b"},"%"))))}rootClasses(){let r="progress";if(this.showLabel)r+=" has-label";if(this.value===0)r+=" value-zero";return r}get el(){return a(this)}};b.style=i;export{b as wcs_progress_bar};
+//# sourceMappingURL=p-9fd3366c.entry.js.map

package/dist/wcs/p-9fd3366c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["progressBarCss","WcsProgressBarStyle0","PROGRESS_BAR_ARIA_INHERITED_ATTRS","ProgressBar","this","inheritedAttributes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeProgress","render","style","width","h","key","class","rootClasses","role","ref","showLabel","classes"],"sources":["src/components/progress-bar/progress-bar.scss?tag=wcs-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":[":host {\n    --wcs-progress-bar-border-radius: var(--wcs-semantic-border-radius-full);\n    --wcs-progress-bar-border-radius-small: var(--wcs-semantic-border-radius-small);\n    --wcs-internal-progress-bar-animation-duration: var(--wcs-progress-bar-animation-duration, var(--wcs-semantic-motion-duration-feedback-slower)); /* internal used by horizontal-stepper */\n\n    --wcs-progress-bar-height-m: calc(var(--wcs-semantic-size-m) / 4);\n    --wcs-progress-bar-height-s: calc(var(--wcs-semantic-size-s) / 6);\n    --wcs-progress-bar-background-color: transparent;\n\n    --wcs-progress-bar-rail-color: var(--wcs-semantic-color-background-surface-tertiary);\n    --wcs-progress-bar-rail-spacing: var(--wcs-semantic-spacing-small);\n\n    --wcs-progress-bar-gap-s: var(--wcs-semantic-spacing-small);\n    --wcs-progress-bar-gap-m: var(--wcs-semantic-spacing-base);\n\n    --wcs-progress-bar-indicator-color: var(--wcs-semantic-color-background-surface-brand);\n    --wcs-progress-bar-label-color: var(--wcs-semantic-color-text-primary);\n    --wcs-progress-bar-label-font-size-s: var(--wcs-semantic-font-size-s);\n    --wcs-progress-bar-label-font-size-m: calc(1.5 * var(--wcs-semantic-font-size-m));\n    --wcs-progress-bar-label-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-progress-bar-label-percentage-font-size-s: calc(var(--wcs-semantic-font-size-s) * 0.7);\n    --wcs-progress-bar-label-percentage-font-size-m: calc(var(--wcs-semantic-font-size-m) * 0.7);\n    --wcs-progress-bar-label-top-space: var(--wcs-semantic-spacing-large);\n}\n\n:host([size=s]) {\n    .progress {\n        height: var(--wcs-progress-bar-height-s);\n        background-color: var(--wcs-progress-bar-background-color);\n        background-image: none;\n        background-size: auto;\n        border-radius: var(--wcs-progress-bar-border-radius-small);\n\n        .progress-label {\n            font-size: var(--wcs-progress-bar-label-font-size-s);\n            bottom: calc(100% + var(--wcs-progress-bar-gap-s));\n\n            sup {\n                font-size: var(--wcs-progress-bar-label-percentage-font-size-s);\n            }\n        }\n    }\n}\n\n.progress {\n    display: flex;\n    height: var(--wcs-progress-bar-height-m);\n    color: var(--wcs-progress-bar-label-color);\n    background-color: var(--wcs-progress-bar-background-color);\n    background-image: linear-gradient(90deg, var(--wcs-progress-bar-rail-color), 50%, transparent 50%);\n    background-size: var(--wcs-progress-bar-rail-spacing) var(--wcs-progress-bar-height-m);\n    border-radius: var(--wcs-progress-bar-border-radius);\n\n    &.has-label {\n        margin-top: var(--wcs-progress-bar-label-top-space);\n    }\n\n    // FIXME: Temporary fix so the label doesn't appear before the bar\n    &.value-zero > .progress-bar > .progress-label {\n        right: unset;\n    }\n}\n\n.progress-bar {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    color: var(--wcs-progress-bar-label-color);\n    text-align: center;\n    background-color: var(--wcs-progress-bar-indicator-color);\n    border-radius: var(--wcs-progress-bar-border-radius);\n    transition: width var(--wcs-internal-progress-bar-animation-duration) ease-out;\n}\n\n.progress-label {\n    line-height: 1; // to remove extra-space (https://www.reddit.com/r/css/comments/z5zazq/mysterious_spacing_around_all_text_not_padding_or/\n    position: absolute;\n    right: 0;\n    bottom: calc(100% + var(--wcs-progress-bar-gap-m));\n\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n\n    font-size: var(--wcs-progress-bar-label-font-size-m);\n    font-weight: var(--wcs-progress-bar-label-font-weight);\n\n    sup {\n        font-size: var(--wcs-progress-bar-label-percentage-font-size-m);\n    }\n}\n","import { Component, ComponentInterface, Element, h, Method, Prop } from '@stencil/core';\nimport { WcsSize } from \"../../shared-types\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n\nconst PROGRESS_BAR_ARIA_INHERITED_ATTRS = ['title'];\n\n/**\n * The progress-bar component is a horizontal bar that indicates the current completion of a task.\n *\n * ## Accessibility guidelines 💡\n * > Aria attributes and how to display the progress-bar depend on the use case in your application :\n * >\n * > - **Case 1 : decorative**\n * > If the progress-bar is used as a decoration _(if removed, the user doesn't lose any relevant information)_ or in the\n * > context of another component _(such as progress-bar in a card, stepper, ...)_ => **you don't need to show the label nor add an aria-label**.\n * >\n * > - **Case 2 : informative**\n * > If the progress-bar is used to convey important information _(e.g., form completion status, dashboard KPI)_, you need to :\n * >   - **Provide a visible label** that describes the purpose of the progress-bar.\n * >   - **Set the `showLabel` property to `true`** to show the percentage above the progress-bar.\n * >   - Optionally, use aria-label to provide an accessible name if a visible label is not present.\n *\n * @cssprop --wcs-progress-bar-border-radius - Border radius\n * @cssprop --wcs-progress-bar-border-radius-small - Border radius for size small\n * @cssprop --wcs-progress-bar-animation-duration - Animation duration\n * \n * @cssprop --wcs-progress-bar-height-m - Height for size medium\n * @cssprop --wcs-progress-bar-height-s - Height for size small\n * @cssprop --wcs-progress-bar-background-color - Background color of the progress bar\n * @cssprop --wcs-progress-bar-rail-color - Rail color (dashed line)\n * @cssprop --wcs-progress-bar-rail-spacing - Space between the rail dashes\n * @cssprop --wcs-progress-bar-gap-s - Gap between the progress bar and the label for size small\n * @cssprop --wcs-progress-bar-gap-m - Gap between the progress bar and the label for size medium\n * @cssprop --wcs-progress-bar-indicator-color - Color of the progress bar indicator (bar on top of the rail)\n * @cssprop --wcs-progress-bar-label-color - Color of the label\n * @cssprop --wcs-progress-bar-label-font-size-s - Font size of the label for size small\n * @cssprop --wcs-progress-bar-label-font-size-m - Font size of the label for size medium\n * @cssprop --wcs-progress-bar-label-font-weight - Font weight of the label\n * @cssprop --wcs-progress-bar-label-percentage-font-size-s - Font size of the percentage for size small\n * @cssprop --wcs-progress-bar-label-percentage-font-size-m - Font size of the percentage for size medium\n * @cssprop --wcs-progress-bar-label-top-space - Space on top of the progress bar when label is displayed\n */\n@Component({\n    tag: 'wcs-progress-bar',\n    styleUrl: 'progress-bar.scss',\n    shadow: true\n})\nexport class ProgressBar implements ComponentInterface, MutableAriaAttribute {\n\n    @Element() private el!: HTMLWcsProgressBarElement;\n    private nativeProgress!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n\n    /**\n     * Specify the size of the progress bar.\n     * m = default, s = smaller\n     */\n    @Prop() size: Extract<WcsSize, 'm' | 's'> = 'm';\n\n    /**\n     * Whether it displays a label indicating the percentage of progress above the bar.\n     */\n    @Prop({ reflect: true }) showLabel: boolean = false;\n\n    /**\n     * The actual value of the progress.\n     * Ranging from 0 to 100.\n     */\n    @Prop() value: number = 0;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, PROGRESS_BAR_ARIA_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeProgress, attr, value);\n    }\n\n    render() {\n        const style = {\n            width: this.value + '%'\n        };\n\n        return (\n            <div class={this.rootClasses()}\n                 role=\"progressbar\"\n                 aria-valuemin=\"0\"\n                 aria-valuemax=\"100\"\n                 aria-valuenow={this.value}\n                 aria-valuetext={this.value + '%'}\n                 ref={(el) => (this.nativeProgress = el)}\n                 {...this.inheritedAttributes}>\n                <div class=\"progress-bar\" style={style}>\n                    {this.showLabel &&\n                        <span class=\"progress-label\">\n              {this.value}<sup>%</sup>\n            </span>\n                    }\n                </div>\n            </div>\n        );\n    }\n\n    rootClasses(): string {\n        let classes = 'progress';\n        if (this.showLabel) classes += ' has-label';\n        // FIXME: Temporary fix so the label doesn't appear before the bar.\n        if (this.value === 0) classes += ' value-zero';\n        return classes;\n    }\n}\n"],"mappings":"+FAAA,MAAMA,EAAiB,ygGACvB,MAAAC,EAAeD,ECKf,MAAME,EAAoC,CAAC,S,MA2C9BC,EAAW,M,yBAIZC,KAAAC,oBAA4C,G,UAOR,I,eAKE,M,WAMtB,C,CAExB,iBAAAC,GACIF,KAAKC,oBAAmBE,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBL,KAAKM,KAC3BC,EAAkBP,KAAKM,GAAIR,G,CAKtC,sBAAMU,CAAiBC,EAAyBC,GAC5CC,EAAqBX,KAAKY,eAAgBH,EAAMC,E,CAGpD,MAAAG,GACI,MAAMC,EAAQ,CACVC,MAAOf,KAAKU,MAAQ,KAGxB,OACIM,EAAA,MAAAb,OAAAC,OAAA,CAAAa,IAAA,2CAAKC,MAAOlB,KAAKmB,cACZC,KAAK,cAAa,gBACJ,IAAG,gBACH,MAAK,gBACJpB,KAAKU,MAAK,iBACTV,KAAKU,MAAQ,IAC7BW,IAAMf,GAAQN,KAAKY,eAAiBN,GAChCN,KAAKC,qBACVe,EAAA,OAAAC,IAAA,2CAAKC,MAAM,eAAeJ,MAAOA,GAC5Bd,KAAKsB,WACFN,EAAA,QAAAC,IAAA,2CAAMC,MAAM,kBACrBlB,KAAKU,MAAMM,EAAA,OAAAC,IAAA,mD,CAQtB,WAAAE,GACI,IAAII,EAAU,WACd,GAAIvB,KAAKsB,UAAWC,GAAW,aAE/B,GAAIvB,KAAKU,QAAU,EAAGa,GAAW,cACjC,OAAOA,C"}