wcs-core 7.3.0 → 7.4.1

package/dist/cjs/wcs-breadcrumb.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-breadcrumb.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,guCAAguC,CAAC;AACvvC,4BAAe,aAAa;;ACmB5B,MAAM,0BAA0B,GAAG,EAAE,CAAC;MA+BzB,UAAU;;;QAKX,wBAAmB,GAAyB,EAAE,CAAC;;mCAajB,CAAC;kCAMF,CAAC;qCAEGA,iDAA6B;+BAK1B,KAAK;;IAKjD,yBAAyB;QACrB,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAClC;IAGD,8BAA8B,CAAC,QAAgB;;QAC3C,MAAA,IAAI,CAAC,WAAW,0CAAE,gBAAgB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;KAC9D;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjBC,6BAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9BC,yBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,0BAA0B,CAAC,CAC5D,CAAC;QACF,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAClC;IAED,gBAAgB;;QACZ,MAAA,IAAI,CAAC,WAAW,0CAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;KAChF;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5EC,4BAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACjD;IAEO,kBAAkB;QACtB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC,CAAC;KACtE;IAEO,mBAAmB;QACvB,QACI,CAAC,CAAC,IAAI,CAAC,QAAQ;YACf,IAAI,CAAC,kBAAkB,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ;YAChD,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,QAAQ,EACrE;KACL;IAEO,uBAAuB;QAC3B,IAAI,IAAI,CAAC,mBAAmB,EAAE,EAAE;YAC5B,IAAI,CAAC,mCAAmC,EAAE,CAAC;SAC9C;aAAM;YACH,IAAI,CAAC,sCAAsC,EAAE,CAAC;SACjD;KACJ;;;;IAKO,mCAAmC;QACvC,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAClD,MAAM,wBAAwB,GAAG,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC;QAC9D,MAAM,uBAAuB,GAAG,eAAe,CAAC,MAAM,GAAG,IAAI,CAAC,kBAAkB,CAAC;QAEjF,eAAe,CAAC,OAAO,CAAC,CAAC,cAAc,EAAE,KAAK;YAC1C,IAAI,KAAK,IAAI,wBAAwB,EAAE;gBACnC,cAAc,CAAC,IAAI,GAAG,yBAAyB,CAAC;gBAChD,cAAc,CAAC,IAAI,GAAG,KAAK,CAAC;aAC/B;iBAAM,IAAI,KAAK,GAAG,wBAAwB,IAAI,KAAK,GAAG,uBAAuB,EAAE;gBAC5E,cAAc,CAAC,IAAI,GAAG,cAAc,CAAC;gBACrC,cAAc,CAAC,IAAI,GAAG,KAAK,CAAC;aAC/B;iBAAM;gBACH,cAAc,CAAC,IAAI,GAAG,wBAAwB,CAAC;gBAC/C,cAAc,CAAC,IAAI,GAAG,KAAK,KAAK,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC;aAC9D;SACJ,CAAC,CAAC;KACN;IAEO,sCAAsC;QAC1C,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAClD,eAAe,CAAC,OAAO,CAAC,CAAC,cAAc,EAAE,KAAK;YAC1C,cAAc,CAAC,IAAI,GAAG,eAAe,CAAC;YACtC,cAAc,CAAC,IAAI,GAAG,KAAK,KAAK,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC;SAC9D,CAAC,CAAC;KACN;IAEO,gBAAgB;QACpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7BC,iBAAW,CAAC,IAAI,CAAC,CAAC;KACrB;IAEO,sBAAsB;;;;;QAK1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;;;QAG5B,qBAAqB,CAAC,MAAM,IAAI,CAAC,yBAAyB,EAAE,CAAC,CAAC;KACjE;;;;;IAMO,yBAAyB;QAC7B,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAClD,MAAM,oBAAoB,GAAG,IAAI,CAAC,mBAAmB,CAAC;QACtD,MAAM,eAAe,GAAG,eAAe,CAAC,oBAAoB,CAAC,CAAC;QAC9D,MAAM,mBAAmB,GACrB,eAAe,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAoB,CAAC;QACxE,MAAM,yBAAyB,GAC3B,mBAAmB,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAsB,CAAC;QACnE,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,KAAK,EAAE,CAAC;KACtC;IAEO,qBAAqB;QACzB,MAAM,mBAAmB,GAAG,IAAI,CAAC,kBAAkB,KAAK,CAAC,CAAC;QAC1D,QACIC,iBAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,kBAAkB,IACzCA,wBACI,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC/C,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,IAElCA,0BAAc,IAAI,EAAC,YAAY,GAAG,CACzB,EACZ,CAAC,mBAAmB,KACjBA,kBAAM,KAAK,EAAC,WAAW,iBAAa,MAAM,IACrCC,8CAA0B,CACxB,CACV,CACC,EACR;KACL;IAED,MAAM;QACF,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;QAC1E,QACID,QAACE,UAAI,uDACDF,gFACI,KAAK,EAAE,2BAA2B,IAAI,CAAC,eAAe,GAAG,oBAAoB,GAAG,EAAE,EAAE,gBACxEG,0CAAsB,IAC9B,IAAI,CAAC,mBAAmB,IAC5B,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAE,KAO5BH,kEAAK,IAAI,EAAC,MAAM,IAEZA,mEAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,EAExDA,mEAAM,IAAI,EAAC,eAAe,GAAQ,EAElCA,mEAAM,IAAI,EAAC,yBAAyB,GAAG,EACvCA,mEAAM,IAAI,EAAC,cAAc,GAAG,EAC3B,aAAa,IAAI,IAAI,CAAC,qBAAqB,EAAE,EAC9CA,mEAAM,IAAI,EAAC,wBAAwB,GAAG,CACpC,CACJ,CACH,EACT;KACL;;;;;;;;;;;;;","names":["EXPAND_BTN_ARIA_LABEL_DEFAULT","inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute","forceUpdate","h","ICONS_FONT_CHEVRON_UNICODE","Host","NAV_ARIA_LABEL_DEFAULT"],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=wcs-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":[":host {\n    --wcs-breadcrumb-icon-color: var(--wcs-semantic-color-foreground-brand);\n    --wcs-breadcrumb-icon-font-size: 0.5rem;\n    --wcs-breadcrumb-gap: var(--wcs-semantic-spacing-base);\n}\n\nnav.wcs-breadcrumb-container {\n    slot[name=\"hidden-items\"] {\n        display: none;\n    }\n    &.show-hidden-items {\n        slot[name=\"hidden-items\"] {\n            display: contents;\n        }\n    }\n\n    div[role=\"list\"] {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        margin: 0;\n        padding: 0;\n        list-style: none;\n\n        ::slotted(wcs-breadcrumb-item) {\n            margin-right: var(--wcs-breadcrumb-gap);\n        }\n\n        ::slotted(wcs-breadcrumb-item:last-child) {\n            margin-right: 0;\n        }\n\n        .item-not-slotted {\n            display: flex;\n            align-items: center;\n            margin-right: var(--wcs-breadcrumb-gap);\n\n            wcs-button[size=\"s\"] {\n                --wcs-button-min-width: 24px;\n                --wcs-button-height: 20px;\n                --wcs-button-border-radius: 2px;\n                transform: translateY(2px);\n            }\n\n            .item-icon {\n                margin-left: calc(var(--wcs-breadcrumb-gap) - 1px);\n                font-family: \"icons\";\n                font-size: var(--wcs-breadcrumb-icon-font-size);\n                color: var(--wcs-breadcrumb-icon-color);\n                transform: translateY(1px);\n            }\n        }\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element, forceUpdate,\n    h,\n    Host,\n    Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\n\nimport { inheritAttributes, inheritAriaAttributes, setOrRemoveAttribute } from '../../utils/helpers';\nimport { AriaAttributeName, MutableAriaAttribute } from '../../utils/mutable-aria-attribute';\nimport {\n    ICONS_FONT_CHEVRON_UNICODE,\n    NAV_ARIA_LABEL_DEFAULT,\n    EXPAND_BTN_ARIA_LABEL_DEFAULT\n} from './breadcrumb-constants';\n\nconst BREADCRUMB_INHERITED_ATTRS = [];\n\n/**\n * A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order.  \n * It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before a page's main content.\n *\n * ## Accessibility guidelines 💡\n * > - If the last item is a link to the current page, you must set the `aria-current` attribute to `page` on `wcs-breadcrumb-item`.\n * > - If the element representing the current page is not a link, `aria-current` is optional.\n * > - You can set the attribute `aria-label` on `wcs-breadcrumb`, it will be passed to the native `nav` element located inside its shadow DOM. \n * >   You can find the `aria-label` default value in the table below. If your application is in English, you can set it to `Breadcrumb`.\n * > - You can do the same thing for the `aria-label` of the expand button when the breadcrumb is collapsed. You can find its default value\n * >   in the table below too.  \n * > - If you need to **dynamically change the `aria-label` attribute of `wcs-breadcrumb` after the first render**, you can use the \n * >   `setAriaAttribute` JS method (example below). For the expand button however, you can update the prop `ariaLabelExpandButton`.  \n * >   Note: we're working on updating the component automatically when attributes change. \n *\n * > ```javascript\n * > const wcsButton = document.querySelector('wcs-button');\n * > await wcsButton.setAriaAttribute('aria-label', 'new label');\n * > ```\n * \n * @cssprop --wcs-breadcrumb-icon-color - Icon color\n * @cssprop --wcs-breadcrumb-icon-font-size - Icon font size\n * @cssprop --wcs-breadcrumb-gap - Gap between breadcrumb items\n */\n@Component({\n    tag: 'wcs-breadcrumb',\n    styleUrl: 'breadcrumb.scss',\n    shadow: true,\n})\nexport class Breadcrumb implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLElement;\n    private navEl?: HTMLElement;\n    private expandBtnEl: HTMLWcsButtonElement;\n\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * If the number of breadcrumb items exceeds this maximum,\n     * the breadcrumb will collapse and show an expand button.  \n     * If this prop is `undefined`, breadcrumb items will never collapse.\n     */\n    @Prop() maxItems?: number;\n    /**\n     * The number of breadcrumb items to show before the expand button.\n     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\n     * the breadcrumb will not be collapsed.\n     */\n    @Prop() itemsBeforeCollapse: number = 1;\n    /**\n     * The number of breadcrumb items to show after the expand button.\n     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\n     * the breadcrumb will not be collapsed.\n     */\n    @Prop() itemsAfterCollapse: number = 2;\n    /** Set `aria-label` for the expand button when the breadcrumb is collapsed. */\n    @Prop() ariaLabelExpandButton?: string = EXPAND_BTN_ARIA_LABEL_DEFAULT;\n\n    /**\n     * Show breadcrumb items that are inside the hidden-items slot.\n     */\n    @State() private showHiddenItems: boolean = false;\n\n    @Watch('maxItems')\n    @Watch('itemsBeforeCollapse')\n    @Watch('itemsAfterCollapse')\n    handleCollapsePropsChange() {\n        this.updateCollapsedViewMode();\n    }\n\n    @Watch('ariaLabelExpandButton')\n    handleAriaLabelExpandBtnChange(newValue: string) {\n        this.expandBtnEl?.setAriaAttribute('aria-label', newValue);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, BREADCRUMB_INHERITED_ATTRS),\n        };\n        this.updateCollapsedViewMode();\n    }\n\n    componentDidLoad(): void {\n        this.expandBtnEl?.setAriaAttribute('aria-label', this.ariaLabelExpandButton);\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.navEl, attr, value);\n    }\n\n    private getBreadcrumbItems(): HTMLWcsBreadcrumbItemElement[] {\n        return Array.from(this.el.querySelectorAll('wcs-breadcrumb-item'));\n    }\n\n    private shouldCollapseItems(): boolean {\n        return (\n            !!this.maxItems &&\n            this.getBreadcrumbItems().length > this.maxItems &&\n            this.itemsBeforeCollapse + this.itemsAfterCollapse <= this.maxItems\n        );\n    }\n\n    private updateCollapsedViewMode(): void {\n        if (this.shouldCollapseItems()) {\n            this.assignSlotNamesForCollapsedViewMode();\n        } else {\n            this.assignSlotNamesForNonCollapsedViewMode();\n        }\n    }\n\n    /**\n     * Setting slot names on breadcrumb items allows to leverage JSX in the render method.\n     */\n    private assignSlotNamesForCollapsedViewMode(): void {\n        const breadcrumbItems = this.getBreadcrumbItems();\n        const itemBeforeExpandBtnIndex = this.itemsBeforeCollapse - 1;\n        const itemAfterExpandBtnIndex = breadcrumbItems.length - this.itemsAfterCollapse;\n\n        breadcrumbItems.forEach((breadcrumbItem, index) => {\n            if (index <= itemBeforeExpandBtnIndex) {\n                breadcrumbItem.slot = 'items-before-expand-btn';\n                breadcrumbItem.last = false;\n            } else if (index > itemBeforeExpandBtnIndex && index < itemAfterExpandBtnIndex) {\n                breadcrumbItem.slot = 'hidden-items';\n                breadcrumbItem.last = false;\n            } else {\n                breadcrumbItem.slot = 'items-after-expand-btn';\n                breadcrumbItem.last = index === breadcrumbItems.length - 1;\n            }\n        });\n    }\n    \n    private assignSlotNamesForNonCollapsedViewMode(): void {\n        const breadcrumbItems = this.getBreadcrumbItems();\n        breadcrumbItems.forEach((breadcrumbItem, index) => {\n            breadcrumbItem.slot = 'non-collapsed';\n            breadcrumbItem.last = index === breadcrumbItems.length - 1;\n        });\n    }\n\n    private handleSlotChange(): void {\n        this.updateCollapsedViewMode();\n        this.showHiddenItems = false;\n        forceUpdate(this);\n    }\n\n    private handleOnExpandBtnClick(): void {\n        // We leave the breadcrumb items in the hidden-items slot, without passing them to\n        // the non-collapsed slot, so that we know which items to hide again later if needed.\n        // For future implementations, the expand button could show or hide hidden items on click,\n        // with a wcs-dropdown for example.\n        this.showHiddenItems = true;\n        // We wait for the first hidden item to be visible in the DOM again\n        // to be able to focus it.\n        requestAnimationFrame(() => this.setFocusToFirstHiddenItem());\n    }\n\n    /**\n     * Avoid losing focus after clicking the expand button.\n     * We need to give focus back to the first breadcrumb item link that was hidden before.\n     */\n    private setFocusToFirstHiddenItem(): void {\n        const breadcrumbItems = this.getBreadcrumbItems();\n        const firstHiddenItemIndex = this.itemsBeforeCollapse;\n        const firstHiddenItem = breadcrumbItems[firstHiddenItemIndex];\n        const firstHiddenItemSlot =\n            firstHiddenItem.shadowRoot.querySelector('slot') as HTMLSlotElement;\n        const breadcrumbItemLinkToFocus =\n            firstHiddenItemSlot.assignedElements()[0] as HTMLAnchorElement;\n        breadcrumbItemLinkToFocus?.focus();\n    }\n\n    private renderExpandAllButton(): JSX.Element {\n        const expandBtnIsLastItem = this.itemsAfterCollapse === 0;\n        return (\n            <div role=\"listitem\" class=\"item-not-slotted\">\n                <wcs-button\n                    mode=\"clear\"\n                    shape=\"square\"\n                    size=\"s\"\n                    onClick={this.handleOnExpandBtnClick.bind(this)}\n                    ref={(el) => this.expandBtnEl = el}\n                >\n                    <wcs-mat-icon icon=\"more_horiz\" />\n                </wcs-button>\n                {!expandBtnIsLastItem && (\n                    <span class=\"item-icon\" aria-hidden=\"true\">\n                        {ICONS_FONT_CHEVRON_UNICODE}\n                    </span>\n                )}\n            </div>\n        );\n    }\n\n    render() {\n        const showExpandBtn = this.shouldCollapseItems() && !this.showHiddenItems;\n        return (\n            <Host>\n                <nav\n                    class={`wcs-breadcrumb-container${this.showHiddenItems ? ' show-hidden-items' : ''}`}\n                    aria-label={NAV_ARIA_LABEL_DEFAULT}\n                    {...this.inheritedAttributes}\n                    ref={(el) => this.navEl = el}\n                >\n                    {/*\n                    * We use aria roles here instead of an <ol> tag\n                    * so that the list can be browsed correctly on Firefox with screen readers.\n                    * There seems to be an issue with Firefox and the Shadow DOM.\n                    */}\n                    <div role=\"list\">\n                        {/* Only the main slot shoud be used by consumers. */}\n                        <slot onSlotchange={this.handleSlotChange.bind(this)} />\n                        {/* Non collapsed view mode */}\n                        <slot name=\"non-collapsed\"></slot>\n                        {/* Collapsed view mode */}\n                        <slot name=\"items-before-expand-btn\" />\n                        <slot name=\"hidden-items\" />\n                        {showExpandBtn && this.renderExpandAllButton()}\n                        <slot name=\"items-after-expand-btn\" />\n                    </div>\n                </nav>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-breadcrumb.entry.cjs.js","mappings":"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","names":["EXPAND_BTN_ARIA_LABEL_DEFAULT","inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute","forceUpdate","h","ICONS_FONT_CHEVRON_UNICODE","Host","NAV_ARIA_LABEL_DEFAULT"],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=wcs-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":[":host {\n    --wcs-breadcrumb-icon-color: var(--wcs-semantic-color-foreground-brand);\n    --wcs-breadcrumb-icon-font-size: 0.5rem;\n    --wcs-breadcrumb-gap: var(--wcs-semantic-spacing-base);\n}\n\nnav.wcs-breadcrumb-container {\n    slot[name=\"hidden-items\"] {\n        display: none;\n    }\n    &.show-hidden-items {\n        slot[name=\"hidden-items\"] {\n            display: contents;\n        }\n    }\n\n    div[role=\"list\"] {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        margin: 0;\n        padding: 0;\n        list-style: none;\n\n        ::slotted(wcs-breadcrumb-item) {\n            margin-right: var(--wcs-breadcrumb-gap);\n        }\n\n        ::slotted(wcs-breadcrumb-item:last-child) {\n            margin-right: 0;\n        }\n\n        .item-not-slotted {\n            display: flex;\n            align-items: center;\n            margin-right: var(--wcs-breadcrumb-gap);\n\n            wcs-button[size=\"s\"] {\n                --wcs-button-min-width: 24px;\n                --wcs-button-height: 20px;\n                --wcs-button-border-radius: 2px;\n                transform: translateY(2px);\n            }\n\n            .item-icon {\n                margin-left: calc(var(--wcs-breadcrumb-gap) - 1px);\n                font-family: \"icons\";\n                font-size: var(--wcs-breadcrumb-icon-font-size);\n                color: var(--wcs-breadcrumb-icon-color);\n                transform: translateY(1px);\n            }\n        }\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element, forceUpdate,\n    h,\n    Host,\n    Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\n\nimport { inheritAttributes, inheritAriaAttributes, setOrRemoveAttribute } from '../../utils/helpers';\nimport { AriaAttributeName, MutableAriaAttribute } from '../../utils/mutable-aria-attribute';\nimport {\n    ICONS_FONT_CHEVRON_UNICODE,\n    NAV_ARIA_LABEL_DEFAULT,\n    EXPAND_BTN_ARIA_LABEL_DEFAULT\n} from './breadcrumb-constants';\n\nconst BREADCRUMB_INHERITED_ATTRS = [];\n\n/**\n * A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order.  \n * It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before a page's main content.\n *\n * ## Accessibility guidelines 💡\n * > - If the last item is a link to the current page, you must set the `aria-current` attribute to `page` on `wcs-breadcrumb-item`.\n * > - If the element representing the current page is not a link, `aria-current` is optional.\n * > - You can set the attribute `aria-label` on `wcs-breadcrumb`, it will be passed to the native `nav` element located inside its shadow DOM. \n * >   You can find the `aria-label` default value in the table below. If your application is in English, you can set it to `Breadcrumb`.\n * > - You can do the same thing for the `aria-label` of the expand button when the breadcrumb is collapsed. You can find its default value\n * >   in the table below too.  \n * > - If you need to **dynamically change the `aria-label` attribute of `wcs-breadcrumb` after the first render**, you can use the \n * >   `setAriaAttribute` JS method (example below). For the expand button however, you can update the prop `ariaLabelExpandButton`.  \n * >   Note: we're working on updating the component automatically when attributes change. \n *\n * > ```javascript\n * > const wcsButton = document.querySelector('wcs-button');\n * > await wcsButton.setAriaAttribute('aria-label', 'new label');\n * > ```\n * \n * @cssprop --wcs-breadcrumb-icon-color - Icon color\n * @cssprop --wcs-breadcrumb-icon-font-size - Icon font size\n * @cssprop --wcs-breadcrumb-gap - Gap between breadcrumb items\n */\n@Component({\n    tag: 'wcs-breadcrumb',\n    styleUrl: 'breadcrumb.scss',\n    shadow: true,\n})\nexport class Breadcrumb implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLElement;\n    private navEl?: HTMLElement;\n    private expandBtnEl: HTMLWcsButtonElement;\n\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * If the number of breadcrumb items exceeds this maximum,\n     * the breadcrumb will collapse and show an expand button.  \n     * If this prop is `undefined`, breadcrumb items will never collapse.\n     */\n    @Prop() maxItems?: number;\n    /**\n     * The number of breadcrumb items to show before the expand button.\n     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\n     * the breadcrumb will not be collapsed.\n     */\n    @Prop() itemsBeforeCollapse: number = 1;\n    /**\n     * The number of breadcrumb items to show after the expand button.\n     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\n     * the breadcrumb will not be collapsed.\n     */\n    @Prop() itemsAfterCollapse: number = 2;\n    /** Set `aria-label` for the expand button when the breadcrumb is collapsed. */\n    @Prop() ariaLabelExpandButton?: string = EXPAND_BTN_ARIA_LABEL_DEFAULT;\n\n    /**\n     * Show breadcrumb items that are inside the hidden-items slot.\n     */\n    @State() private showHiddenItems: boolean = false;\n\n    @Watch('maxItems')\n    @Watch('itemsBeforeCollapse')\n    @Watch('itemsAfterCollapse')\n    handleCollapsePropsChange() {\n        this.updateCollapsedViewMode();\n    }\n\n    @Watch('ariaLabelExpandButton')\n    handleAriaLabelExpandBtnChange(newValue: string) {\n        this.expandBtnEl?.setAriaAttribute('aria-label', newValue);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, BREADCRUMB_INHERITED_ATTRS),\n        };\n        this.updateCollapsedViewMode();\n    }\n\n    componentDidLoad(): void {\n        this.expandBtnEl?.setAriaAttribute('aria-label', this.ariaLabelExpandButton);\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.navEl, attr, value);\n    }\n\n    private getBreadcrumbItems(): HTMLWcsBreadcrumbItemElement[] {\n        return Array.from(this.el.querySelectorAll('wcs-breadcrumb-item'));\n    }\n\n    private shouldCollapseItems(): boolean {\n        return (\n            !!this.maxItems &&\n            this.getBreadcrumbItems().length > this.maxItems &&\n            this.itemsBeforeCollapse + this.itemsAfterCollapse <= this.maxItems\n        );\n    }\n\n    private updateCollapsedViewMode(): void {\n        if (this.shouldCollapseItems()) {\n            this.assignSlotNamesForCollapsedViewMode();\n        } else {\n            this.assignSlotNamesForNonCollapsedViewMode();\n        }\n    }\n\n    /**\n     * Setting slot names on breadcrumb items allows to leverage JSX in the render method.\n     */\n    private assignSlotNamesForCollapsedViewMode(): void {\n        const breadcrumbItems = this.getBreadcrumbItems();\n        const itemBeforeExpandBtnIndex = this.itemsBeforeCollapse - 1;\n        const itemAfterExpandBtnIndex = breadcrumbItems.length - this.itemsAfterCollapse;\n\n        breadcrumbItems.forEach((breadcrumbItem, index) => {\n            if (index <= itemBeforeExpandBtnIndex) {\n                breadcrumbItem.slot = 'items-before-expand-btn';\n                breadcrumbItem.last = false;\n            } else if (index > itemBeforeExpandBtnIndex && index < itemAfterExpandBtnIndex) {\n                breadcrumbItem.slot = 'hidden-items';\n                breadcrumbItem.last = false;\n            } else {\n                breadcrumbItem.slot = 'items-after-expand-btn';\n                breadcrumbItem.last = index === breadcrumbItems.length - 1;\n            }\n        });\n    }\n    \n    private assignSlotNamesForNonCollapsedViewMode(): void {\n        const breadcrumbItems = this.getBreadcrumbItems();\n        breadcrumbItems.forEach((breadcrumbItem, index) => {\n            breadcrumbItem.slot = 'non-collapsed';\n            breadcrumbItem.last = index === breadcrumbItems.length - 1;\n        });\n    }\n\n    private handleSlotChange(): void {\n        this.updateCollapsedViewMode();\n        this.showHiddenItems = false;\n        forceUpdate(this);\n    }\n\n    private handleOnExpandBtnClick(): void {\n        // We leave the breadcrumb items in the hidden-items slot, without passing them to\n        // the non-collapsed slot, so that we know which items to hide again later if needed.\n        // For future implementations, the expand button could show or hide hidden items on click,\n        // with a wcs-dropdown for example.\n        this.showHiddenItems = true;\n        // We wait for the first hidden item to be visible in the DOM again\n        // to be able to focus it.\n        requestAnimationFrame(() => this.setFocusToFirstHiddenItem());\n    }\n\n    /**\n     * Avoid losing focus after clicking the expand button.\n     * We need to give focus back to the first breadcrumb item link that was hidden before.\n     */\n    private setFocusToFirstHiddenItem(): void {\n        const breadcrumbItems = this.getBreadcrumbItems();\n        const firstHiddenItemIndex = this.itemsBeforeCollapse;\n        const firstHiddenItem = breadcrumbItems[firstHiddenItemIndex];\n        const firstHiddenItemSlot =\n            firstHiddenItem.shadowRoot.querySelector('slot') as HTMLSlotElement;\n        const breadcrumbItemLinkToFocus =\n            firstHiddenItemSlot.assignedElements()[0] as HTMLAnchorElement;\n        breadcrumbItemLinkToFocus?.focus();\n    }\n\n    private renderExpandAllButton() {\n        const expandBtnIsLastItem = this.itemsAfterCollapse === 0;\n        return (\n            <div role=\"listitem\" class=\"item-not-slotted\">\n                <wcs-button\n                    mode=\"clear\"\n                    shape=\"square\"\n                    size=\"s\"\n                    onClick={this.handleOnExpandBtnClick.bind(this)}\n                    ref={(el) => this.expandBtnEl = el}\n                >\n                    <wcs-mat-icon icon=\"more_horiz\" />\n                </wcs-button>\n                {!expandBtnIsLastItem && (\n                    <span class=\"item-icon\" aria-hidden=\"true\">\n                        {ICONS_FONT_CHEVRON_UNICODE}\n                    </span>\n                )}\n            </div>\n        );\n    }\n\n    render() {\n        const showExpandBtn = this.shouldCollapseItems() && !this.showHiddenItems;\n        return (\n            <Host>\n                <nav\n                    class={`wcs-breadcrumb-container${this.showHiddenItems ? ' show-hidden-items' : ''}`}\n                    aria-label={NAV_ARIA_LABEL_DEFAULT}\n                    {...this.inheritedAttributes}\n                    ref={(el) => this.navEl = el}\n                >\n                    {/*\n                    * We use aria roles here instead of an <ol> tag\n                    * so that the list can be browsed correctly on Firefox with screen readers.\n                    * There seems to be an issue with Firefox and the Shadow DOM.\n                    */}\n                    <div role=\"list\">\n                        {/* Only the main slot shoud be used by consumers. */}\n                        <slot onSlotchange={this.handleSlotChange.bind(this)} />\n                        {/* Non collapsed view mode */}\n                        <slot name=\"non-collapsed\"></slot>\n                        {/* Collapsed view mode */}\n                        <slot name=\"items-before-expand-btn\" />\n                        <slot name=\"hidden-items\" />\n                        {showExpandBtn && this.renderExpandAllButton()}\n                        <slot name=\"items-after-expand-btn\" />\n                    </div>\n                </nav>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/wcs-com-nav-item.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
 
-const comNavItemCss = ":host{--wcs-com-nav-item-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-item-font-size:var(--wcs-semantic-font-size-label-1);--wcs-com-nav-item-arrow-icon-color:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-com-nav-item-arrow-icon-font-size:0.6rem;--wcs-com-nav-item-arrow-icon-font-family:icons;--wcs-com-nav-item-arrow-icon-line-height:1;--wcs-com-nav-item-focus-outline-color:var(--wcs-semantic-color-border-focus-base);position:relative;display:inline-flex;align-items:center;gap:var(--wcs-com-nav-item-gap);height:fit-content;padding:0 8px;font:inherit;}:host ::slotted(a){user-select:none;cursor:pointer;text-decoration:none;font-size:var(--wcs-com-nav-item-font-size);color:inherit;font-weight:inherit;display:flex;align-items:center}:host .arrow-icon{display:inline-block;font-family:icons;color:var(--wcs-com-nav-item-arrow-icon-color);font-size:var(--wcs-com-nav-item-arrow-icon-font-size);line-height:var(--wcs-com-nav-item-arrow-icon-line-height);box-sizing:border-box}:host .arrow-container{display:unset}:host ::slotted(a:focus-visible){outline:none}:host(:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-item-focus-outline-color);outline-offset:0.5rem;border-radius:2px}@media screen and (min-width: 576px){:host ::slotted(a){display:flex;align-items:center;height:100%;padding-top:unset;padding-bottom:unset;padding-left:unset}}";
+const comNavItemCss = ":host{--wcs-com-nav-item-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-item-font-size:var(--wcs-semantic-font-size-label-1);--wcs-com-nav-item-arrow-icon-color:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-com-nav-item-arrow-icon-font-size:0.6rem;--wcs-com-nav-item-arrow-icon-font-family:icons;--wcs-com-nav-item-arrow-icon-line-height:1;--wcs-com-nav-item-focus-outline-color:var(--wcs-semantic-color-border-focus-base);position:relative;display:inline-flex;align-items:center;gap:var(--wcs-com-nav-item-gap);height:fit-content;padding:0 8px;font:inherit;}:host ::slotted(a){user-select:none;cursor:pointer;text-decoration:none;color:inherit;font-weight:inherit;display:flex;align-items:center}:host .arrow-icon{display:inline-block;font-family:icons;color:var(--wcs-com-nav-item-arrow-icon-color);font-size:var(--wcs-com-nav-item-arrow-icon-font-size);line-height:var(--wcs-com-nav-item-arrow-icon-line-height);box-sizing:border-box}:host .arrow-container{display:unset}:host ::slotted(a:focus-visible){outline:none}:host(:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-item-focus-outline-color);outline-offset:0.5rem;border-radius:2px}@media screen and (min-width: 576px){:host ::slotted(a){display:flex;align-items:center;height:100%;padding-top:unset;padding-bottom:unset;padding-left:unset}}";
 const WcsComNavItemStyle0 = comNavItemCss;
 
 const ComNavItem = class {

package/dist/cjs/wcs-com-nav-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-com-nav-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,g4CAAg4C,CAAC;AACv5C,4BAAe,aAAa;;MCcf,UAAU;;;;;IASnB,OAAO;QACH,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC;KACrC;IAED,MAAM;QACF,QACIA,QAACC,UAAI,qDAAC,IAAI,EAAC,UAAU,IACjBD,oEAAa,EACbA,mEAAM,KAAK,EAAC,iBAAiB,IACrBA,kFAAkB,MAAM,EAAC,KAAK,EAAC,YAAY,aAAgB,CAC5D,CACJ,EACT;KACL;;;;;;","names":["h","Host"],"sources":["src/components/com-nav-item/com-nav-item.scss?tag=wcs-com-nav-item&encapsulation=shadow","src/components/com-nav-item/com-nav-item.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import '../com-nav/com-nav-focus.scss';\n\n/* Default style and mobile behaviour */\n:host {\n    --wcs-com-nav-item-gap: var(--wcs-semantic-spacing-base);\n    --wcs-com-nav-item-font-size: var(--wcs-semantic-font-size-label-1);\n    --wcs-com-nav-item-arrow-icon-color: var(--wcs-semantic-color-foreground-action-neutral-default);\n    --wcs-com-nav-item-arrow-icon-font-size: 0.6rem;\n    --wcs-com-nav-item-arrow-icon-font-family: icons;\n    --wcs-com-nav-item-arrow-icon-line-height: 1;\n\n    --wcs-com-nav-item-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--wcs-com-nav-item-gap);\n    height: fit-content;\n    padding: 0 8px;\n\n    font: inherit;\n\n    ::slotted(a) {\n        /* Default */\n        user-select: none;\n        cursor: pointer;\n        text-decoration: none;\n        font-size: var(--wcs-com-nav-item-font-size);\n        color: inherit;\n        font-weight: inherit;\n\n        display: flex;\n        align-items: center;\n    }\n\n    /* Common behaviour between Large Screen and Small Screens */\n    .arrow-icon {\n        display: inline-block;\n        font-family: icons;\n        color: var(--wcs-com-nav-item-arrow-icon-color);\n        font-size: var(--wcs-com-nav-item-arrow-icon-font-size);\n        line-height: var(--wcs-com-nav-item-arrow-icon-line-height);\n        box-sizing: border-box;\n    }\n\n    .arrow-container {\n        display: unset;\n    }\n\n    /**For mobile*/\n    ::slotted(a:focus-visible) {\n        outline: none;\n    }\n}\n\n:host(:focus-within) {\n    @include com-nav-item-mobile-focus-outline(var(--wcs-com-nav-item-focus-outline-color));\n}\n\n/* Large screen, specific behaviour */\n@media screen and (min-width: 576px) {\n    :host {\n        ::slotted(a) {\n            display: flex;\n            align-items: center;\n            height: 100%;\n\n            /* Reset for pc */\n            padding-top: unset;\n            padding-bottom: unset;\n            padding-left: unset;\n        }\n\n        // Focus outline style is handling by com-nav, com-nav-submenu and com-nav-category in desktop mode\n    }\n}\n","import { Component, Host, h, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * The com-nav-item is a subcomponent of `wcs-com-nav`. It represents a list-item wrapper around a link.\n * \n * @cssprop --wcs-com-nav-item-gap - Gap between text and arrow\n * @cssprop --wcs-com-nav-item-font-weight - Font-weight of item\n * @cssprop --wcs-com-nav-item-arrow-icon-font-size - Arrow size\n * @cssprop --wcs-com-nav-item-focus-outline-color - Focus outline color\n */\n@Component({\n    tag: 'wcs-com-nav-item',\n    styleUrl: './com-nav-item.scss',\n    shadow: true\n})\nexport class ComNavItem {\n    /**\n     * Emitted when a user click on a final navigation action.\n     *\n     * Used by the com-nav component to close the mobile menu overlay when a user click on a final action.\n     */\n    @Event() private wcsClickOnFinalAction: EventEmitter<void>;\n    \n    @Listen('click')\n    onClick() {\n        this.wcsClickOnFinalAction.emit();\n    }\n    \n    render() {\n        return (\n            <Host role=\"listitem\">\n                <slot></slot>\n                <span class=\"arrow-container\">\n                        <span aria-hidden=\"true\" class=\"arrow-icon\">&#xf107;</span>\n                </span>\n            </Host>\n        );\n    }\n\n}\n"],"version":3}
+{"file":"wcs-com-nav-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,o1CAAo1C,CAAC;AAC32C,4BAAe,aAAa;;MCcf,UAAU;;;;;IASnB,OAAO;QACH,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC;KACrC;IAED,MAAM;QACF,QACIA,QAACC,UAAI,qDAAC,IAAI,EAAC,UAAU,IACjBD,oEAAa,EACbA,mEAAM,KAAK,EAAC,iBAAiB,IACrBA,kFAAkB,MAAM,EAAC,KAAK,EAAC,YAAY,aAAgB,CAC5D,CACJ,EACT;KACL;;;;;;","names":["h","Host"],"sources":["src/components/com-nav-item/com-nav-item.scss?tag=wcs-com-nav-item&encapsulation=shadow","src/components/com-nav-item/com-nav-item.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import '../../style/reset.scss';\n@import '../com-nav/com-nav-focus.scss';\n\n/* Default style and mobile behaviour */\n:host {\n    --wcs-com-nav-item-gap: var(--wcs-semantic-spacing-base);\n    --wcs-com-nav-item-font-size: var(--wcs-semantic-font-size-label-1);\n    --wcs-com-nav-item-arrow-icon-color: var(--wcs-semantic-color-foreground-action-neutral-default);\n    --wcs-com-nav-item-arrow-icon-font-size: 0.6rem;\n    --wcs-com-nav-item-arrow-icon-font-family: icons;\n    --wcs-com-nav-item-arrow-icon-line-height: 1;\n\n    --wcs-com-nav-item-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--wcs-com-nav-item-gap);\n    height: fit-content;\n    padding: 0 8px;\n\n    font: inherit;\n\n    ::slotted(a) {\n        /* Default */\n        @include reset-anchor;\n\n        display: flex;\n        align-items: center;\n    }\n\n    /* Common behaviour between Large Screen and Small Screens */\n    .arrow-icon {\n        display: inline-block;\n        font-family: icons;\n        color: var(--wcs-com-nav-item-arrow-icon-color);\n        font-size: var(--wcs-com-nav-item-arrow-icon-font-size);\n        line-height: var(--wcs-com-nav-item-arrow-icon-line-height);\n        box-sizing: border-box;\n    }\n\n    .arrow-container {\n        display: unset;\n    }\n\n    /**For mobile*/\n    ::slotted(a:focus-visible) {\n        outline: none;\n    }\n}\n\n:host(:focus-within) {\n    @include com-nav-item-mobile-focus-outline(var(--wcs-com-nav-item-focus-outline-color));\n}\n\n/* Large screen, specific behaviour */\n@media screen and (min-width: 576px) {\n    :host {\n        ::slotted(a) {\n            display: flex;\n            align-items: center;\n            height: 100%;\n\n            /* Reset for pc */\n            padding-top: unset;\n            padding-bottom: unset;\n            padding-left: unset;\n        }\n\n        // Focus outline style is handling by com-nav, com-nav-submenu and com-nav-category in desktop mode\n    }\n}\n","import { Component, Host, h, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * The com-nav-item is a subcomponent of `wcs-com-nav`. It represents a list-item wrapper around a link.\n * \n * @cssprop --wcs-com-nav-item-gap - Gap between text and arrow\n * @cssprop --wcs-com-nav-item-font-weight - Font-weight of item\n * @cssprop --wcs-com-nav-item-arrow-icon-font-size - Arrow size\n * @cssprop --wcs-com-nav-item-focus-outline-color - Focus outline color\n */\n@Component({\n    tag: 'wcs-com-nav-item',\n    styleUrl: './com-nav-item.scss',\n    shadow: true\n})\nexport class ComNavItem {\n    /**\n     * Emitted when a user click on a final navigation action.\n     *\n     * Used by the com-nav component to close the mobile menu overlay when a user click on a final action.\n     */\n    @Event() private wcsClickOnFinalAction: EventEmitter<void>;\n    \n    @Listen('click')\n    onClick() {\n        this.wcsClickOnFinalAction.emit();\n    }\n    \n    render() {\n        return (\n            <Host role=\"listitem\">\n                <slot></slot>\n                <span class=\"arrow-container\">\n                        <span aria-hidden=\"true\" class=\"arrow-icon\">&#xf107;</span>\n                </span>\n            </Host>\n        );\n    }\n\n}\n"],"version":3}

package/dist/cjs/wcs-com-nav.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-6f0140d8.js');
 const comNavUtils = require('./com-nav-utils-ff4f0bef.js');
 const helpers = require('./helpers-2f1a8ddc.js');
 
-const comNavCss = ":host{--wcs-com-nav-menu-bar-height:calc(var(--wcs-semantic-size-base) * 8);--wcs-com-nav-border-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-border-width:var(--wcs-semantic-border-width-default);--wcs-com-nav-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-com-nav-app-name-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-app-name-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-com-nav-app-name-font-size:var(--wcs-semantic-font-size-heading-5);--wcs-com-nav-app-name-line-height:var(--wcs-semantic-font-line-height-large);--wcs-com-nav-item-color:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-com-nav-item-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-vertical-padding:0;--wcs-com-nav-horizontal-padding:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-overlay-gap:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-overlay-padding:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-menu-icon-border-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-mobile-menu-icon-gap:calc(var(--wcs-semantic-spacing-base) * 2);--wcs-com-nav-mobile-menu-icon-margin-left:var(--wcs-semantic-spacing-base);--wcs-com-nav-mobile-menu-icon-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-com-nav-menu-bar-gap:calc(var(--wcs-semantic-spacing-base) * 5);--wcs-com-nav-menu-bar-margin-left:calc(var(--wcs-semantic-spacing-base) * 6.25);display:block;position:relative;height:var(--wcs-com-nav-menu-bar-height);border-bottom:var(--wcs-com-nav-border-width) solid var(--wcs-com-nav-border-color)}:host .container{padding:var(--wcs-com-nav-vertical-padding) var(--wcs-com-nav-horizontal-padding);height:100%;display:flex;align-items:center;flex-direction:row;justify-content:space-between}:host .container nav{display:flex;align-items:center}:host .container-left{display:flex;height:100%;align-items:center;flex-direction:row}:host .container-right{display:flex;align-items:center}:host .app-name{font-weight:var(--wcs-com-nav-app-name-font-weight);font-size:var(--wcs-com-nav-app-name-font-size);line-height:var(--wcs-com-nav-app-name-line-height);color:var(--wcs-com-nav-app-name-color)}:host .menu-bar{display:none}:host #mobile-menu-icon{display:flex;align-items:center;flex-wrap:nowrap;color:var(--wcs-com-nav-mobile-menu-icon-color);padding-left:var(--wcs-com-nav-mobile-menu-icon-gap);margin-left:var(--wcs-com-nav-mobile-menu-icon-margin-left);border-left:solid 1px var(--wcs-com-nav-mobile-menu-icon-border-color)}:host #mobile-menu-icon:focus{outline:none}:host #mobile-menu-icon:focus-visible::after{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}@supports not selector(#mobile-menu-icon:focus-visible::after){:host #mobile-menu-icon:focus::after{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}}:host button{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host #mobile-menu-icon:after{font-family:icons;font-size:18px;cursor:pointer;content:\"\\f198\";line-height:1;box-sizing:border-box}:host #mobile-menu-icon[aria-expanded=true]:after{content:\"\\f129\"}:host .mobile-overlay{display:none}:host .mobile-overlay[data-mobile-open]{padding:var(--wcs-com-nav-mobile-overlay-padding);position:absolute;top:var(--wcs-com-nav-menu-bar-height);left:0;right:0;display:flex;flex-direction:column;gap:var(--wcs-com-nav-mobile-overlay-gap);z-index:9999;background-color:var(--wcs-com-nav-background-color)}:host .mobile-overlay[data-mobile-open] ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-item-color);font-weight:var(--wcs-com-nav-item-font-weight)}@media (min-width: 576px){:host .container{margin:0 auto;max-width:var(--wcs-com-content-max-width)}:host nav{height:100%}:host .menu-bar{display:flex;align-items:center;height:100%;margin-left:var(--wcs-com-nav-menu-bar-margin-left)}:host .menu-bar ::slotted(*:not(:first-child)){margin-left:var(--wcs-com-nav-menu-bar-gap)}:host .menu-bar ::slotted(wcs-com-nav-item){height:100%;color:var(--wcs-com-nav-item-color);font-weight:var(--wcs-com-nav-item-font-weight)}:host .menu-bar ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:0.1rem;border-radius:2px}:host #mobile-menu-icon{display:none}:host .mobile-overlay{display:none !important}}";
+const comNavCss = ":host{--wcs-com-nav-menu-bar-height:calc(var(--wcs-semantic-size-base) * 8);--wcs-com-nav-border-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-border-width:var(--wcs-semantic-border-width-default);--wcs-com-nav-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-com-nav-app-name-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-app-name-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-com-nav-app-name-font-size:var(--wcs-semantic-font-size-heading-5);--wcs-com-nav-app-name-line-height:var(--wcs-semantic-font-line-height-large);--wcs-com-nav-item-color:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-com-nav-item-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-vertical-padding:0;--wcs-com-nav-horizontal-padding:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-overlay-gap:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-overlay-padding:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-menu-icon-border-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-mobile-menu-icon-gap:calc(var(--wcs-semantic-spacing-base) * 2);--wcs-com-nav-mobile-menu-icon-margin-left:var(--wcs-semantic-spacing-base);--wcs-com-nav-mobile-menu-icon-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-com-nav-menu-bar-gap:calc(var(--wcs-semantic-spacing-base) * 5);--wcs-com-nav-menu-bar-margin-left:calc(var(--wcs-semantic-spacing-base) * 6.25);display:block;position:relative;height:var(--wcs-com-nav-menu-bar-height);border-bottom:var(--wcs-com-nav-border-width) solid var(--wcs-com-nav-border-color)}:host .container{padding:var(--wcs-com-nav-vertical-padding) var(--wcs-com-nav-horizontal-padding);height:100%;display:flex;align-items:center;flex-direction:row;justify-content:space-between}:host .container nav{display:flex;align-items:center}:host .container-left{display:flex;height:100%;align-items:center;flex-direction:row}:host .container-right{display:flex;align-items:center}:host .app-name{font-weight:var(--wcs-com-nav-app-name-font-weight);font-size:var(--wcs-com-nav-app-name-font-size);line-height:var(--wcs-com-nav-app-name-line-height);color:var(--wcs-com-nav-app-name-color)}:host .app-name ::slotted(a){user-select:none;cursor:pointer;text-decoration:none;color:inherit;font-weight:inherit}:host .app-name ::slotted(a:focus-visible){outline:none}:host .app-name:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}:host .menu-bar{display:none}:host #mobile-menu-icon{display:flex;align-items:center;flex-wrap:nowrap;color:var(--wcs-com-nav-mobile-menu-icon-color);padding-left:var(--wcs-com-nav-mobile-menu-icon-gap);margin-left:var(--wcs-com-nav-mobile-menu-icon-margin-left);border-left:solid 1px var(--wcs-com-nav-mobile-menu-icon-border-color)}:host #mobile-menu-icon:focus{outline:none}:host #mobile-menu-icon:focus-visible::after{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}@supports not selector(#mobile-menu-icon:focus-visible::after){:host #mobile-menu-icon:focus::after{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}}:host button{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host #mobile-menu-icon:after{font-family:icons;font-size:18px;cursor:pointer;content:\"\\f198\";line-height:1;box-sizing:border-box}:host #mobile-menu-icon[aria-expanded=true]:after{content:\"\\f129\"}:host .mobile-overlay{display:none}:host .mobile-overlay[data-mobile-open]{padding:var(--wcs-com-nav-mobile-overlay-padding);position:absolute;top:var(--wcs-com-nav-menu-bar-height);left:0;right:0;display:flex;flex-direction:column;gap:var(--wcs-com-nav-mobile-overlay-gap);z-index:9999;background-color:var(--wcs-com-nav-background-color)}:host .mobile-overlay[data-mobile-open] ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-item-color);font-weight:var(--wcs-com-nav-item-font-weight)}@media (min-width: 576px){:host .container{margin:0 auto;max-width:var(--wcs-com-content-max-width)}:host nav{height:100%}:host .menu-bar{display:flex;align-items:center;height:100%;margin-left:var(--wcs-com-nav-menu-bar-margin-left)}:host .menu-bar ::slotted(*:not(:first-child)){margin-left:var(--wcs-com-nav-menu-bar-gap)}:host .menu-bar ::slotted(wcs-com-nav-item){height:100%;color:var(--wcs-com-nav-item-color);font-weight:var(--wcs-com-nav-item-font-weight)}:host .menu-bar ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:0.1rem;border-radius:2px}:host #mobile-menu-icon{display:none}:host .mobile-overlay{display:none !important}}";
 const WcsComNavStyle0 = comNavCss;
 
 const COM_NAV_INHERITED_ATTRS = ['title'];
@@ -57,11 +57,11 @@ const ComNav = class {
     }
     render() {
         const menuAriaLabel = this.inheritedAttributes['aria-label'] || undefined;
-        return (index.h(index.Host, { key: 'b39ff3dbd6d304ad0252e0fcfd2e0c5716b666db' }, index.h("div", { key: 'f84b73c9cee6295a7776576afeb61b65b71ea34e', class: "container" }, index.h("div", { key: 'a39b867e9d102abb4e4c13503a544681cd9b7fd8', class: "container-left" }, index.h("div", { key: '49db5dd80f097a9b2ccaf39fc64be9f6100108be', class: "app-name" }, this.appName, index.h("slot", { key: '2936888d5a805c67a3be4079a7eea62d460d42fe', name: "app-name" })), this.currentActiveSizing === 'desktop' ?
+        return (index.h(index.Host, { key: 'b39ff3dbd6d304ad0252e0fcfd2e0c5716b666db' }, index.h("div", { key: 'f84b73c9cee6295a7776576afeb61b65b71ea34e', class: "container" }, index.h("div", { key: 'a39b867e9d102abb4e4c13503a544681cd9b7fd8', class: "container-left" }, index.h("div", { key: '49db5dd80f097a9b2ccaf39fc64be9f6100108be', class: "app-name" }, this.appName, index.h("slot", { key: '3cfe05e6e510826ffd2168e6edc3380bc92ad459', name: "app-name" })), this.currentActiveSizing === 'desktop' ?
             index.h("nav", Object.assign({ role: "navigation" }, this.inheritedAttributes), index.h("div", { class: "menu-bar", role: "list" }, this.currentActiveSizing === 'desktop'
                 ? index.h("slot", null)
                 : null))
-            : null), index.h("div", { key: 'c2c97d21d21d542a18fb141f90ce7ce91d0b12c0', class: "container-right" }, index.h("slot", { key: '51912b232ac4d51baf1d2c164e90ab59a787924e', name: "actions" }), this.currentActiveSizing === 'mobile' ?
+            : null), index.h("div", { key: '83496cccd32eec07f5a508dbf36b591442e668e2', class: "container-right" }, index.h("slot", { key: 'cf68946afcefa0b77fb57019f9734e5ff1e763aa', name: "actions" }), this.currentActiveSizing === 'mobile' ?
             index.h("nav", Object.assign({ id: "wcs-com-nav-mobile-menu", role: "navigation" }, this.inheritedAttributes), index.h("button", { id: "mobile-menu-icon", "aria-label": menuAriaLabel, "aria-expanded": this.mobileMenuOpen ? "true" : "false", "aria-controls": "wcs-com-nav-mobile-menu", onClick: () => this.mobileMenuIconClick() }), this.currentActiveSizing === 'mobile'
                 ? index.h("div", { class: "mobile-overlay", "data-mobile-open": this.mobileMenuOpen, role: "list" }, index.h("slot", null))
                 : null)

package/dist/cjs/wcs-com-nav.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-com-nav.entry.cjs.js","mappings":"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","names":["inheritAriaAttributes","inheritAttributes","registerCloseHandlerForFocusOutEventOn","comNavDidLoadWithResizeObserver","forceUpdate","h","Host","isEscapeKey"],"sources":["src/components/com-nav/com-nav.scss?tag=wcs-com-nav&encapsulation=shadow","src/components/com-nav/com-nav.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import './com-nav-focus.scss';\n@import '../../style/breakpoints.scss';\n\n:host {\n    --wcs-com-nav-menu-bar-height: calc(var(--wcs-semantic-size-base) * 8);\n    --wcs-com-nav-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-com-nav-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-com-nav-background-color: var(--wcs-semantic-color-background-surface-primary);\n\n    --wcs-com-nav-app-name-color: var(--wcs-semantic-color-text-primary);\n    --wcs-com-nav-app-name-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-com-nav-app-name-font-size: var(--wcs-semantic-font-size-heading-5);\n    --wcs-com-nav-app-name-line-height: var(--wcs-semantic-font-line-height-large);\n\n    --wcs-com-nav-item-color: var(--wcs-semantic-color-foreground-action-neutral-default);\n    --wcs-com-nav-item-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-com-nav-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n\n\n    // Spacings for navbar and mobile overlay\n    --wcs-com-nav-vertical-padding: 0;\n    --wcs-com-nav-horizontal-padding: var(--wcs-semantic-spacing-large);\n    --wcs-com-nav-mobile-overlay-gap: var(--wcs-semantic-spacing-large);\n    --wcs-com-nav-mobile-overlay-padding: var(--wcs-semantic-spacing-large);\n\n    // Burger icon (mobile)\n    --wcs-com-nav-mobile-menu-icon-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-com-nav-mobile-menu-icon-gap: calc(var(--wcs-semantic-spacing-base) * 2);\n    --wcs-com-nav-mobile-menu-icon-margin-left: var(--wcs-semantic-spacing-base);\n    --wcs-com-nav-mobile-menu-icon-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n\n    // Menu bar (desktop)\n    --wcs-com-nav-menu-bar-gap: calc(var(--wcs-semantic-spacing-base) * 5); // 40px\n    --wcs-com-nav-menu-bar-margin-left: calc(var(--wcs-semantic-spacing-base) * 6.25); // 50 px\n\n    display: block;\n    position: relative;\n    height: var(--wcs-com-nav-menu-bar-height);\n    border-bottom: var(--wcs-com-nav-border-width) solid var(--wcs-com-nav-border-color);\n\n    .container {\n        padding: var(--wcs-com-nav-vertical-padding) var(--wcs-com-nav-horizontal-padding);\n        height: 100%;\n        display: flex;\n        align-items: center;\n        flex-direction: row;\n        justify-content: space-between;\n\n        nav {\n            display: flex;\n            align-items: center;\n        }\n    }\n\n    .container-left {\n        display: flex;\n        height: 100%;\n        align-items: center;\n        flex-direction: row;\n    }\n\n    .container-right {\n        display: flex;\n        align-items: center;\n    }\n\n    .app-name {\n        font-weight: var(--wcs-com-nav-app-name-font-weight);\n        font-size: var(--wcs-com-nav-app-name-font-size);\n        line-height: var(--wcs-com-nav-app-name-line-height);\n        color: var(--wcs-com-nav-app-name-color);\n    }\n\n    .menu-bar {\n        display: none;\n    }\n\n    #mobile-menu-icon {\n        display: flex;\n        align-items: center;\n        flex-wrap: nowrap;\n        color: var(--wcs-com-nav-mobile-menu-icon-color);\n        padding-left: var(--wcs-com-nav-mobile-menu-icon-gap);\n        margin-left: var(--wcs-com-nav-mobile-menu-icon-margin-left);\n        border-left: solid 1px var(--wcs-com-nav-mobile-menu-icon-border-color);\n    }\n\n    #mobile-menu-icon:focus {\n        outline: none;\n    }\n\n    #mobile-menu-icon:focus-visible::after {\n        @include focus-outline($outline-color: var(--wcs-com-nav-focus-outline-color));\n    }\n\n    @supports not selector(#mobile-menu-icon:focus-visible::after) {\n        #mobile-menu-icon:focus::after {\n            @include focus-outline($outline-color: var(--wcs-com-nav-focus-outline-color));\n        }\n    }\n\n    button {\n        background: none;\n        border: none;\n        padding: 0;\n        margin: 0;\n        font: inherit;\n        color: inherit;\n        cursor: pointer;\n    }\n\n    #mobile-menu-icon:after {\n        font-family: icons;\n        font-size: 18px;\n        cursor: pointer;\n        content: \"\\f198\";\n        line-height: 1;\n        box-sizing: border-box;\n    }\n\n    #mobile-menu-icon[aria-expanded=\"true\"]:after {\n        content: \"\\f129\";\n    }\n\n    .mobile-overlay {\n        display: none;\n    }\n\n    .mobile-overlay[data-mobile-open] {\n        padding: var(--wcs-com-nav-mobile-overlay-padding);\n        position: absolute;\n        top: var(--wcs-com-nav-menu-bar-height);\n        left: 0;\n        right: 0;\n        display: flex;\n        flex-direction: column;\n        gap: var(--wcs-com-nav-mobile-overlay-gap);\n        z-index: 9999;\n        background-color: var(--wcs-com-nav-background-color);\n\n        ::slotted(wcs-com-nav-item) {\n            color: var(--wcs-com-nav-item-color);\n            font-weight: var(--wcs-com-nav-item-font-weight);\n        }\n    }\n}\n\n@include for-tablet-portrait-up {\n    :host {\n        .container {\n            margin: 0 auto;\n            max-width: var(--wcs-com-content-max-width);\n        }\n\n        nav {\n            height: 100%;\n        }\n\n        .menu-bar {\n            display: flex;\n            align-items: center;\n            height: 100%;\n            margin-left: var(--wcs-com-nav-menu-bar-margin-left);\n\n            ::slotted(*:not(:first-child)) {\n                margin-left: var(--wcs-com-nav-menu-bar-gap);\n            }\n\n            ::slotted(wcs-com-nav-item) {\n                height: 100%;\n                color: var(--wcs-com-nav-item-color);\n                font-weight: var(--wcs-com-nav-item-font-weight);\n            }\n\n            // Focus style for nav item in menu bar\n            ::slotted(wcs-com-nav-item:focus-within) {\n                @include com-nav-item-desktop-focus-outline(var(--wcs-com-nav-focus-outline-color));\n            }\n        }\n\n        #mobile-menu-icon {\n            display: none;\n        }\n\n        .mobile-overlay {\n            display: none !important;\n        }\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    forceUpdate,\n    h,\n    Host,\n    Listen,\n    Method,\n    Prop,\n    State,\n} from '@stencil/core';\nimport { comNavDidLoadWithResizeObserver, registerCloseHandlerForFocusOutEventOn } from \"./com-nav-utils\";\nimport { inheritAriaAttributes, inheritAttributes, isEscapeKey } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { ComNavSize } from \"./com-nav-size\";\n\n\nconst COM_NAV_INHERITED_ATTRS = ['title'];\n\nconst WCS_COM_NAV_SUBMENU_TAG_NAME = 'WCS-COM-NAV-SUBMENU';\n\n/**\n * *Part of communication design system*\n *\n * The com-nav component is a container for navigation links to external or internal pages of the website.\n *\n * @slot <no-name> - Default slot containing all the menu declarations\n * @slot app-name - (Optional) Extra slot for the application name\n * @slot actions - Slot for actions placed on the right part of the container\n * \n * @cssprop --wcs-com-nav-menu-bar-height - Height of the menu bar\n * @cssprop --wcs-com-nav-border-color - Border color of the bottom border of the com-nav\n * @cssprop --wcs-com-nav-border-width - Border width of the border below com-nav\n * @cssprop --wcs-com-nav-background-color - Background color of the com-nav;\n * @cssprop --wcs-com-nav-app-name-color - App name color\n * @cssprop --wcs-com-nav-app-name-font-weight - App name font-weight\n * @cssprop --wcs-com-nav-app-name-font-size - Font size of the App name text\n * @cssprop --wcs-com-nav-app-name-line-height - Line height of the App name text\n * @cssprop --wcs-com-nav-item-color - Color of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-item-font-weight - Font weight of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-focus-outline-color - Focus outline color of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-horizontal-padding - Horizontal padding of wcs-com-nav\n * @cssprop --wcs-com-nav-vertical-padding - Vertical padding of wcs-com-nav\n * @cssprop --wcs-com-nav-mobile-overlay-gap - Gap between each items section in mobile overlay\n * @cssprop --wcs-com-nav-mobile-overlay-padding - Padding inside mobile overlay\n * @cssprop --wcs-com-nav-mobile-menu-icon-border-color - Bar border color on the left of icon mobile menu\n * @cssprop --wcs-com-nav-mobile-menu-icon-gap- Gap between icon mobile menu and separator on the left\n * @cssprop --wcs-com-nav-mobile-menu-icon-margin-left - Margin left of icon mobile menu\n * @cssprop --wcs-com-nav-menu-bar-gap - Gap between each item inside menu-bar\n * @cssprop --wcs-com-nav-menu-bar-margin-left - Margin left between menu bar and the app-name section\n */\n@Component({\n    tag: 'wcs-com-nav',\n    styleUrl: 'com-nav.scss',\n    shadow: true,\n})\nexport class ComNav implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLWcsComNavElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /** Name of the application to be displayed in the menu bar */\n    @Prop() appName: string;\n\n    @State() private mobileMenuOpen: boolean = false;\n    @State() public currentActiveSizing: ComNavSize;\n    private resizeObserver: ResizeObserver;\n\n    private mobileMenuIconClick() {\n        this.mobileMenuOpen = !this.mobileMenuOpen;\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, COM_NAV_INHERITED_ATTRS)\n        };\n\n        const slottedNavigableItems = this.el.querySelectorAll(':scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])');\n        registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavSubmenuElement>(slottedNavigableItems, WCS_COM_NAV_SUBMENU_TAG_NAME);\n    }\n\n    componentDidLoad(): void {\n        if(!this.resizeObserver) {\n            this.resizeObserver = comNavDidLoadWithResizeObserver(this);\n            this.resizeObserver.observe(document.body);\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        // XXX: Special case on this component because of the desktop / mobile mode that re-renders the <nav> element,\n        // making it lose all its attribute\n        this.inheritedAttributes[attr] = value;\n        forceUpdate(this);\n    }\n\n    private closeMobileMenu() {\n        this.mobileMenuOpen = false;\n    }\n\n    // In mobile mode, we have only one global drawer to display the menu, that why we have to listen the clicks events\n    // in the root component (this component). In desktop mode, all submenus and categories manage their drawer its\n    // opening state.\n    //\n    // We listen to the click events fired by the submenu component and we close the mobile menu.\n    // In desktop mode, the submenu itself manages the closing of the menu.\n    @Listen('wcsClickOnFinalAction')\n    onClickOnFinalAction() {\n        this.closeMobileMenu();\n    }\n    \n    render() {\n        const menuAriaLabel = this.inheritedAttributes['aria-label'] || undefined;\n        \n        return (\n            <Host>\n                <div class=\"container\">\n                    <div class=\"container-left\">\n                        <div class=\"app-name\">{this.appName}\n                            <slot name=\"app-name\"/>\n                        </div>\n                        {this.currentActiveSizing === 'desktop' ?\n                            <nav role=\"navigation\" {...this.inheritedAttributes}>\n                                <div class=\"menu-bar\" role=\"list\">\n                                    {this.currentActiveSizing === 'desktop' \n                                        ? <slot/> \n                                        : null}\n                                </div>\n                            </nav>\n                            : null}\n                    </div>\n                    <div class=\"container-right\">\n                        <slot name=\"actions\"/>\n                        {this.currentActiveSizing === 'mobile' ?\n                            <nav id=\"wcs-com-nav-mobile-menu\" role=\"navigation\" {...this.inheritedAttributes}>\n                                <button id=\"mobile-menu-icon\"\n                                    aria-label={menuAriaLabel}\n                                    aria-expanded={this.mobileMenuOpen ? \"true\" : \"false\"}\n                                    aria-controls=\"wcs-com-nav-mobile-menu\"\n                                    onClick={() => this.mobileMenuIconClick()}></button>\n                                {this.currentActiveSizing === 'mobile'\n                                    ? <div class=\"mobile-overlay\" data-mobile-open={this.mobileMenuOpen} role=\"list\"><slot /></div>\n                                    : null}\n                            </nav>\n                            : null}\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n    /**\n     * Close the mobile menu if the user press escape.\n     * @param evt keydown event on window target.\n     */\n    @Listen('keydown', {target: 'window'})\n    exitMobileMenuOnKeyDown(evt: KeyboardEvent) {\n        if (isEscapeKey(evt)) {\n            this.closeMobileMenu();\n        }\n    }\n}\n"],"version":3}
+{"file":"wcs-com-nav.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,67JAA67J,CAAC;AACh9J,wBAAe,SAAS;;ACiBxB,MAAM,uBAAuB,GAAG,CAAC,OAAO,CAAC,CAAC;AAE1C,MAAM,4BAA4B,GAAG,qBAAqB,CAAC;MAqC9C,MAAM;;;QAEP,wBAAmB,GAAyB,EAAE,CAAC;;8BAKZ,KAAK;;;IAIxC,mBAAmB;QACvB,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;KAC9C;IAED,oBAAoB;;QAChB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;KACrC;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjBA,6BAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9BC,yBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,uBAAuB,CAAC,CACzD,CAAC;QAEF,MAAM,qBAAqB,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kEAAkE,CAAC,CAAC;QAC3HC,kDAAsC,CAA8B,qBAAqB,EAAE,4BAA4B,CAAC,CAAC;KAC5H;IAED,gBAAgB;QACZ,IAAG,CAAC,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,cAAc,GAAGC,2CAA+B,CAAC,IAAI,CAAC,CAAC;YAC5D,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;SAC9C;KACJ;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;;;QAG5E,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;QACvCC,iBAAW,CAAC,IAAI,CAAC,CAAC;KACrB;IAEO,eAAe;QACnB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC/B;;;;;;;IASD,oBAAoB;QAChB,IAAI,CAAC,eAAe,EAAE,CAAC;KAC1B;IAED,MAAM;QACF,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,IAAI,SAAS,CAAC;QAE1E,QACIC,QAACC,UAAI,uDACDD,kEAAK,KAAK,EAAC,WAAW,IAClBA,kEAAK,KAAK,EAAC,gBAAgB,IACvBA,kEAAK,KAAK,EAAC,UAAU,IAChB,IAAI,CAAC,OAAO,EACbA,mEAAM,IAAI,EAAC,UAAU,GAAE,CACrB,EACL,IAAI,CAAC,mBAAmB,KAAK,SAAS;YACnCA,+BAAK,IAAI,EAAC,YAAY,IAAK,IAAI,CAAC,mBAAmB,GAC/CA,iBAAK,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,IAC5B,IAAI,CAAC,mBAAmB,KAAK,SAAS;kBACjCA,qBAAO;kBACP,IAAI,CACR,CACJ;cACJ,IAAI,CACR,EACNA,kEAAK,KAAK,EAAC,iBAAiB,IACxBA,mEAAM,IAAI,EAAC,SAAS,GAAE,EACrB,IAAI,CAAC,mBAAmB,KAAK,QAAQ;YAClCA,+BAAK,EAAE,EAAC,yBAAyB,EAAC,IAAI,EAAC,YAAY,IAAK,IAAI,CAAC,mBAAmB,GAC5EA,oBAAQ,EAAE,EAAC,kBAAkB,gBACb,aAAa,mBACV,IAAI,CAAC,cAAc,GAAG,MAAM,GAAG,OAAO,mBACvC,yBAAyB,EACvC,OAAO,EAAE,MAAM,IAAI,CAAC,mBAAmB,EAAE,GAAW,EACvD,IAAI,CAAC,mBAAmB,KAAK,QAAQ;kBAChCA,iBAAK,KAAK,EAAC,gBAAgB,sBAAmB,IAAI,CAAC,cAAc,EAAE,IAAI,EAAC,MAAM,IAACA,qBAAQ,CAAM;kBAC7F,IAAI,CACR;cACJ,IAAI,CACR,CACJ,CACH,EACT;KACL;;;;;IAOD,uBAAuB,CAAC,GAAkB;QACtC,IAAIE,mBAAW,CAAC,GAAG,CAAC,EAAE;YAClB,IAAI,CAAC,eAAe,EAAE,CAAC;SAC1B;KACJ;;;;;;;","names":["inheritAriaAttributes","inheritAttributes","registerCloseHandlerForFocusOutEventOn","comNavDidLoadWithResizeObserver","forceUpdate","h","Host","isEscapeKey"],"sources":["src/components/com-nav/com-nav.scss?tag=wcs-com-nav&encapsulation=shadow","src/components/com-nav/com-nav.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import './com-nav-focus.scss';\n@import '../../style/breakpoints.scss';\n@import '../../style/reset.scss';\n\n:host {\n    --wcs-com-nav-menu-bar-height: calc(var(--wcs-semantic-size-base) * 8);\n    --wcs-com-nav-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-com-nav-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-com-nav-background-color: var(--wcs-semantic-color-background-surface-primary);\n\n    --wcs-com-nav-app-name-color: var(--wcs-semantic-color-text-primary);\n    --wcs-com-nav-app-name-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-com-nav-app-name-font-size: var(--wcs-semantic-font-size-heading-5);\n    --wcs-com-nav-app-name-line-height: var(--wcs-semantic-font-line-height-large);\n\n    --wcs-com-nav-item-color: var(--wcs-semantic-color-foreground-action-neutral-default);\n    --wcs-com-nav-item-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-com-nav-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n\n\n    // Spacings for navbar and mobile overlay\n    --wcs-com-nav-vertical-padding: 0;\n    --wcs-com-nav-horizontal-padding: var(--wcs-semantic-spacing-large);\n    --wcs-com-nav-mobile-overlay-gap: var(--wcs-semantic-spacing-large);\n    --wcs-com-nav-mobile-overlay-padding: var(--wcs-semantic-spacing-large);\n\n    // Burger icon (mobile)\n    --wcs-com-nav-mobile-menu-icon-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-com-nav-mobile-menu-icon-gap: calc(var(--wcs-semantic-spacing-base) * 2);\n    --wcs-com-nav-mobile-menu-icon-margin-left: var(--wcs-semantic-spacing-base);\n    --wcs-com-nav-mobile-menu-icon-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n\n    // Menu bar (desktop)\n    --wcs-com-nav-menu-bar-gap: calc(var(--wcs-semantic-spacing-base) * 5); // 40px\n    --wcs-com-nav-menu-bar-margin-left: calc(var(--wcs-semantic-spacing-base) * 6.25); // 50 px\n\n    display: block;\n    position: relative;\n    height: var(--wcs-com-nav-menu-bar-height);\n    border-bottom: var(--wcs-com-nav-border-width) solid var(--wcs-com-nav-border-color);\n\n    .container {\n        padding: var(--wcs-com-nav-vertical-padding) var(--wcs-com-nav-horizontal-padding);\n        height: 100%;\n        display: flex;\n        align-items: center;\n        flex-direction: row;\n        justify-content: space-between;\n\n        nav {\n            display: flex;\n            align-items: center;\n        }\n    }\n\n    .container-left {\n        display: flex;\n        height: 100%;\n        align-items: center;\n        flex-direction: row;\n    }\n\n    .container-right {\n        display: flex;\n        align-items: center;\n    }\n\n    .app-name {\n        font-weight: var(--wcs-com-nav-app-name-font-weight);\n        font-size: var(--wcs-com-nav-app-name-font-size);\n        line-height: var(--wcs-com-nav-app-name-line-height);\n        color: var(--wcs-com-nav-app-name-color);\n\n        ::slotted(a) {\n            @include reset-anchor;\n        }\n\n        ::slotted(a:focus-visible) {\n            outline: none;\n        }\n    }\n\n    .app-name:focus-within {\n        @include focus-outline($outline-color: var(--wcs-com-nav-focus-outline-color));\n    }\n\n    .menu-bar {\n        display: none;\n    }\n\n    #mobile-menu-icon {\n        display: flex;\n        align-items: center;\n        flex-wrap: nowrap;\n        color: var(--wcs-com-nav-mobile-menu-icon-color);\n        padding-left: var(--wcs-com-nav-mobile-menu-icon-gap);\n        margin-left: var(--wcs-com-nav-mobile-menu-icon-margin-left);\n        border-left: solid 1px var(--wcs-com-nav-mobile-menu-icon-border-color);\n    }\n\n    #mobile-menu-icon:focus {\n        outline: none;\n    }\n\n    #mobile-menu-icon:focus-visible::after {\n        @include focus-outline($outline-color: var(--wcs-com-nav-focus-outline-color));\n    }\n\n    @supports not selector(#mobile-menu-icon:focus-visible::after) {\n        #mobile-menu-icon:focus::after {\n            @include focus-outline($outline-color: var(--wcs-com-nav-focus-outline-color));\n        }\n    }\n\n    button {\n        background: none;\n        border: none;\n        padding: 0;\n        margin: 0;\n        font: inherit;\n        color: inherit;\n        cursor: pointer;\n    }\n\n    #mobile-menu-icon:after {\n        font-family: icons;\n        font-size: 18px;\n        cursor: pointer;\n        content: \"\\f198\";\n        line-height: 1;\n        box-sizing: border-box;\n    }\n\n    #mobile-menu-icon[aria-expanded=\"true\"]:after {\n        content: \"\\f129\";\n    }\n\n    .mobile-overlay {\n        display: none;\n    }\n\n    .mobile-overlay[data-mobile-open] {\n        padding: var(--wcs-com-nav-mobile-overlay-padding);\n        position: absolute;\n        top: var(--wcs-com-nav-menu-bar-height);\n        left: 0;\n        right: 0;\n        display: flex;\n        flex-direction: column;\n        gap: var(--wcs-com-nav-mobile-overlay-gap);\n        z-index: 9999;\n        background-color: var(--wcs-com-nav-background-color);\n\n        ::slotted(wcs-com-nav-item) {\n            color: var(--wcs-com-nav-item-color);\n            font-weight: var(--wcs-com-nav-item-font-weight);\n        }\n    }\n}\n\n@include for-tablet-portrait-up {\n    :host {\n        .container {\n            margin: 0 auto;\n            max-width: var(--wcs-com-content-max-width);\n        }\n\n        nav {\n            height: 100%;\n        }\n\n        .menu-bar {\n            display: flex;\n            align-items: center;\n            height: 100%;\n            margin-left: var(--wcs-com-nav-menu-bar-margin-left);\n\n            ::slotted(*:not(:first-child)) {\n                margin-left: var(--wcs-com-nav-menu-bar-gap);\n            }\n\n            ::slotted(wcs-com-nav-item) {\n                height: 100%;\n                color: var(--wcs-com-nav-item-color);\n                font-weight: var(--wcs-com-nav-item-font-weight);\n            }\n\n            // Focus style for nav item in menu bar\n            ::slotted(wcs-com-nav-item:focus-within) {\n                @include com-nav-item-desktop-focus-outline(var(--wcs-com-nav-focus-outline-color));\n            }\n        }\n\n        #mobile-menu-icon {\n            display: none;\n        }\n\n        .mobile-overlay {\n            display: none !important;\n        }\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    forceUpdate,\n    h,\n    Host,\n    Listen,\n    Method,\n    Prop,\n    State,\n} from '@stencil/core';\nimport { comNavDidLoadWithResizeObserver, registerCloseHandlerForFocusOutEventOn } from \"./com-nav-utils\";\nimport { inheritAriaAttributes, inheritAttributes, isEscapeKey } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { ComNavSize } from \"./com-nav-size\";\n\n\nconst COM_NAV_INHERITED_ATTRS = ['title'];\n\nconst WCS_COM_NAV_SUBMENU_TAG_NAME = 'WCS-COM-NAV-SUBMENU';\n\n/**\n * *Part of communication design system*\n *\n * The com-nav component is a container for navigation links to external or internal pages of the website.\n *\n * @slot <no-name> - Default slot containing all the menu declarations\n * @slot app-name - (Optional) Extra slot for the application name\n * @slot actions - Slot for actions placed on the right part of the container\n * \n * @cssprop --wcs-com-nav-menu-bar-height - Height of the menu bar\n * @cssprop --wcs-com-nav-border-color - Border color of the bottom border of the com-nav\n * @cssprop --wcs-com-nav-border-width - Border width of the border below com-nav\n * @cssprop --wcs-com-nav-background-color - Background color of the com-nav;\n * @cssprop --wcs-com-nav-app-name-color - App name color\n * @cssprop --wcs-com-nav-app-name-font-weight - App name font-weight\n * @cssprop --wcs-com-nav-app-name-font-size - Font size of the App name text\n * @cssprop --wcs-com-nav-app-name-line-height - Line height of the App name text\n * @cssprop --wcs-com-nav-item-color - Color of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-item-font-weight - Font weight of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-focus-outline-color - Focus outline color of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-horizontal-padding - Horizontal padding of wcs-com-nav\n * @cssprop --wcs-com-nav-vertical-padding - Vertical padding of wcs-com-nav\n * @cssprop --wcs-com-nav-mobile-overlay-gap - Gap between each items section in mobile overlay\n * @cssprop --wcs-com-nav-mobile-overlay-padding - Padding inside mobile overlay\n * @cssprop --wcs-com-nav-mobile-menu-icon-border-color - Bar border color on the left of icon mobile menu\n * @cssprop --wcs-com-nav-mobile-menu-icon-gap- Gap between icon mobile menu and separator on the left\n * @cssprop --wcs-com-nav-mobile-menu-icon-margin-left - Margin left of icon mobile menu\n * @cssprop --wcs-com-nav-menu-bar-gap - Gap between each item inside menu-bar\n * @cssprop --wcs-com-nav-menu-bar-margin-left - Margin left between menu bar and the app-name section\n */\n@Component({\n    tag: 'wcs-com-nav',\n    styleUrl: 'com-nav.scss',\n    shadow: true,\n})\nexport class ComNav implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLWcsComNavElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /** Name of the application to be displayed in the menu bar */\n    @Prop() appName: string;\n\n    @State() private mobileMenuOpen: boolean = false;\n    @State() public currentActiveSizing: ComNavSize;\n    private resizeObserver: ResizeObserver;\n\n    private mobileMenuIconClick() {\n        this.mobileMenuOpen = !this.mobileMenuOpen;\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, COM_NAV_INHERITED_ATTRS)\n        };\n\n        const slottedNavigableItems = this.el.querySelectorAll(':scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])');\n        registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavSubmenuElement>(slottedNavigableItems, WCS_COM_NAV_SUBMENU_TAG_NAME);\n    }\n\n    componentDidLoad(): void {\n        if(!this.resizeObserver) {\n            this.resizeObserver = comNavDidLoadWithResizeObserver(this);\n            this.resizeObserver.observe(document.body);\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        // XXX: Special case on this component because of the desktop / mobile mode that re-renders the <nav> element,\n        // making it lose all its attribute\n        this.inheritedAttributes[attr] = value;\n        forceUpdate(this);\n    }\n\n    private closeMobileMenu() {\n        this.mobileMenuOpen = false;\n    }\n\n    // In mobile mode, we have only one global drawer to display the menu, that why we have to listen the clicks events\n    // in the root component (this component). In desktop mode, all submenus and categories manage their drawer its\n    // opening state.\n    //\n    // We listen to the click events fired by the submenu component and we close the mobile menu.\n    // In desktop mode, the submenu itself manages the closing of the menu.\n    @Listen('wcsClickOnFinalAction')\n    onClickOnFinalAction() {\n        this.closeMobileMenu();\n    }\n    \n    render() {\n        const menuAriaLabel = this.inheritedAttributes['aria-label'] || undefined;\n        \n        return (\n            <Host>\n                <div class=\"container\">\n                    <div class=\"container-left\">\n                        <div class=\"app-name\">\n                            {this.appName}\n                            <slot name=\"app-name\"/>\n                        </div>\n                        {this.currentActiveSizing === 'desktop' ?\n                            <nav role=\"navigation\" {...this.inheritedAttributes}>\n                                <div class=\"menu-bar\" role=\"list\">\n                                    {this.currentActiveSizing === 'desktop' \n                                        ? <slot/> \n                                        : null}\n                                </div>\n                            </nav>\n                            : null}\n                    </div>\n                    <div class=\"container-right\">\n                        <slot name=\"actions\"/>\n                        {this.currentActiveSizing === 'mobile' ?\n                            <nav id=\"wcs-com-nav-mobile-menu\" role=\"navigation\" {...this.inheritedAttributes}>\n                                <button id=\"mobile-menu-icon\"\n                                    aria-label={menuAriaLabel}\n                                    aria-expanded={this.mobileMenuOpen ? \"true\" : \"false\"}\n                                    aria-controls=\"wcs-com-nav-mobile-menu\"\n                                    onClick={() => this.mobileMenuIconClick()}></button>\n                                {this.currentActiveSizing === 'mobile'\n                                    ? <div class=\"mobile-overlay\" data-mobile-open={this.mobileMenuOpen} role=\"list\"><slot /></div>\n                                    : null}\n                            </nav>\n                            : null}\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n    /**\n     * Close the mobile menu if the user press escape.\n     * @param evt keydown event on window target.\n     */\n    @Listen('keydown', {target: 'window'})\n    exitMobileMenuOnKeyDown(evt: KeyboardEvent) {\n        if (isEscapeKey(evt)) {\n            this.closeMobileMenu();\n        }\n    }\n}\n"],"version":3}

package/dist/cjs/wcs-dropdown.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-6f0140d8.js');
 const selectArrow = require('./select-arrow-a8a47fe4.js');
 const helpers = require('./helpers-2f1a8ddc.js');
 const keyboardEvent = require('./keyboard-event-40ecdc27.js');
-const popper = require('./popper-8d6e7fca.js');
+const popper = require('./popper-1b61df21.js');
 
 /**
  * We follow this pattern https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/

package/dist/cjs/wcs-error_3.cjs.entry.js

@@ -179,7 +179,7 @@ const FormField = class {
 };
 FormField.style = WcsFormFieldStyle0;
 
-const labelCss = ":host{--wcs-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-label-color:var(--wcs-semantic-color-text-primary);--wcs-label-required-marker-color:var(--wcs-semantic-color-text-critical);--wcs-label-gap:var(--wcs-semantic-spacing-small);font-weight:var(--wcs-label-font-weight)}:host([required])>label::after{font-weight:var(--wcs-label-font-weight);color:var(--wcs-label-required-marker-color);content:\" *\"}label{display:inline-block;color:var(--wcs-label-color);font-weight:var(--wcs-label-font-weight)}label ::slotted(wcs-mat-icon){display:inline;vertical-align:middle;margin-left:var(--wcs-label-gap)}";
+const labelCss = ":host{--wcs-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-label-color:var(--wcs-semantic-color-text-primary);--wcs-label-required-marker-color:var(--wcs-semantic-color-text-critical);--wcs-label-gap:var(--wcs-semantic-spacing-small);font-weight:var(--wcs-label-font-weight)}:host([required])>label::after{font-weight:var(--wcs-label-font-weight);color:var(--wcs-label-required-marker-color);content:\" *\"}label{display:inline-flex;align-items:center;gap:var(--wcs-label-gap);line-height:0;color:var(--wcs-label-color);font-weight:var(--wcs-label-font-weight)}";
 const WcsLabelStyle0 = labelCss;
 
 const LABEL_INHERITED_ATTRS = ['title'];

package/dist/cjs/wcs-error_3.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-error.wcs-form-field.wcs-label.entry.cjs.js","mappings":"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","names":["Label","h","Host","isMutableAriaAttribute","isControlComponentWithLabel","normalizeWhitespace","inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute"],"sources":["src/components/error/error.scss?tag=wcs-error&encapsulation=shadow","src/components/error/error.tsx","src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","src/components/form-field/form-field.tsx","src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":[":host {\n    --wcs-error-color: var(--wcs-semantic-color-text-critical);\n    --wcs-error-font-size: var(--wcs-semantic-font-size-caption-2);\n    --wcs-error-font-weight: var(--wcs-semantic-font-weight-book);\n\n    color: var(--wcs-error-color);\n    font-size: var(--wcs-error-font-size);\n    font-weight: var(--wcs-error-font-weight);\n}\n","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/**\n * The `wcs-error` should always be wrapped in a `wcs-form-field`.\n * It is used to display a red message under the field indicating an incorrect user input.\n * \n * ## Accessibility guidelines 💡\n * - Provide a relevant error message to inform the users what they should change to make the field valid\n * - Always add the error icon, to ensure the visual indication of the error state other than the color\n * - `aria-description` will be automatically added to the field for screen readers\n * - `aria-invalid=\"true\"` will be automatically added to the field for screen readers\n * \n * @cssprop --wcs-error-color - Color of the text\n * @cssprop --wcs-error-font-size - Font size\n * @cssprop --wcs-error-font-weight - Font weight\n */\n@Component({\n    tag: 'wcs-error',\n    styleUrl: 'error.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface {\n    render() {\n        return (\n            <Host role=\"alert\" slot=\"error\">\n                <slot />\n            </Host>\n        );\n    }\n}\n",":host {\n    --wcs-form-field-gap: var(--wcs-semantic-spacing-small);\n\n    --wcs-form-field-prefix-suffix-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-form-field-prefix-icon-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-form-field-prefix-value-color: var(--wcs-semantic-color-text-inverse);\n    --wcs-form-field-prefix-placeholder-color: var(--wcs-semantic-color-text-inverse);\n\n    display: flex;\n    flex-direction: column;\n    gap: var(--wcs-form-field-gap);\n\n    .input-container {\n        display: flex;\n    }\n\n    /* Components in the prefix slot */\n    ::slotted([slot=prefix]) {\n        /* Select */\n        --wcs-select-value-color: var(--wcs-semantic-color-text-inverse);\n        --wcs-select-placeholder-color: var(--wcs-semantic-color-text-inverse);\n        --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-default);\n        --wcs-select-control-arrow-color: var(--wcs-form-field-prefix-icon-color);\n        --wcs-select-control-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n        --wcs-select-control-border-width-default: 0;\n        --wcs-select-control-border-style-focus: dashed;\n        --wcs-select-control-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n        /* Native select */\n        --wcs-native-select-value-color: var(--wcs-semantic-color-text-inverse);\n        --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-inverse);\n        --wcs-native-select-arrow-color: var(--wcs-form-field-prefix-icon-color);\n        --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-default);\n        --wcs-native-select-border-width: 0;\n        --wcs-native-select-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n        --wcs-native-select-border-style-focus: dashed;\n        --wcs-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n        --wcs-native-select-option-color: var(--wcs-semantic-color-text-inverse);\n\n        /* Button */\n        --wcs-button-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n    }\n\n    /* Components in the suffix slot */\n    ::slotted([slot=suffix]) {\n        --wcs-button-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n        --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n        --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n    }\n}\n\n/* Disabled components in the prefix slot */\n::slotted([slot=prefix][disabled]),\n::slotted([slot=prefix]:disabled),\n::slotted([slot=prefix][aria-disabled=true]),\n::slotted([slot=prefix][data-disabled]) {\n    --wcs-semantic-color-background-control-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n    --wcs-semantic-color-text-disabled: var(--wcs-semantic-color-foreground-disabled);\n\n    --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-disabled);\n    --wcs-select-value-color: var(--wcs-semantic-color-text-disabled);\n    --wcs-select-placeholder-color: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-disabled);\n    --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-disabled);\n    --wcs-native-select-value-color: var(--wcs-semantic-color-text-disabled);\n}\n\n/* Hover and press states */\n::slotted([slot=prefix]:hover:not([disabled]):not([data-disabled])) {\n    --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-hover);\n}\n\n::slotted([slot=prefix]:active:not([disabled]):not([data-disabled])) {\n    --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-press);\n}\n\n.input-container {\n    display: flex;\n}\n\n::slotted(wcs-select:not([slot=prefix])) {\n    width: 100%;\n}\n\n::slotted(wcs-native-select:not([slot=prefix])) {\n    width: 100%;\n}\n\n/* Components in the center that are prefixed */\n:host(.has-prefix) {\n    ::slotted(:not([slot=prefix])) {\n        --wcs-input-border-radius-left: 0;\n        --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n        --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n    }\n}\n\n/* Components in the center that are suffixed */\n:host(.has-suffix) {\n    ::slotted(:not([slot=suffix])) {\n        --wcs-input-border-radius-right: 0;\n        --wcs-select-control-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n        --wcs-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n    }\n\n}\n\n/* Components in the center that are prefixed AND suffixed */\n:host(.has-prefix.has-suffix) {\n    ::slotted(:not([slot=prefix]):not([slot=suffix])) {\n        --wcs-input-border-radius-left: 0;\n        --wcs-input-border-radius-right: 0;\n        --wcs-select-control-border-radius: 0;\n        --wcs-native-select-border-radius: 0;\n    }\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { isMutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { normalizeWhitespace } from '../../utils/helpers';\nimport { isControlComponentWithLabel } from \"../../utils/control-component-interface\";\n\n/**\n * Form field component wraps the native input element and add some more functionality on top of it.\n *\n * You can use the `wcs-form-field` to wrap any of these components :\n * - `wcs-input`\n * - `wcs-textarea`\n * - `wcs-radio-group`\n * - `wcs-switch`\n * - `wcs-checkbox`\n * - `wcs-native-select`\n * - `wcs-select`\n * - `wcs-counter`\n *\n * For non-supported slotted component, you can use the `required` attribute on the wrapped component to tell the\n * form-field that it is required. It will add a red star after the label of the form field.\n * \n * ## Accessibility guidelines 💡\n * - Each form control should be identified with a unique `wcs-label`\n * - Don't forget to add form validation to make sure the data is correctly formatted\n * - If the `wcs-label` is required, the form control must have the `required` HTML attribute and vice-versa (this is normally automatically set)\n * - The form should not be submittable if at least one required form control is not filled\n * - Hints are optional and should only be used to add extra information\n * - Additional aria attributes put on `<wcs-form-field>` won't inherit onto the native component : you must use the `setAriaAttribute` method.\n * \n * @slot label - Automatically filled when a `wcs-label` is provided\n * @slot <no-name> - The main slot containing the wrapped component\n * @slot prefix - (Optional) Display a component as prefix. See \"Prefix Suffix Group\" story for more info.\n * @slot suffix - (Optional) Display a component as suffix. See \"Prefix Suffix Group\" story for more info.\n * @slot error - Automatically filled when a `wcs-error` is provided\n * @slot messages - Automatically filled when a `wcs-hint` is provided\n *\n * @cssprop --wcs-form-field-gap - Defines the spacing between the label, input control, and hint messages.\n * @cssprop --wcs-form-field-prefix-suffix-border-radius - Sets the border radius for both prefix and suffix elements.\n * \n * @cssprop --wcs-form-field-prefix-background-color-default - Background color default for prefix elements\n * @cssprop --wcs-form-field-prefix-background-color-disabled - Background color for prefix elements when disabled\n * @cssprop --wcs-form-field-prefix-background-color-hover - Background color for prefix elements when hovered\n * @cssprop --wcs-form-field-prefix-border-color-default - Defines the default border color for prefix\n * @cssprop --wcs-form-field-prefix-border-color-focus - Sets the border color for prefix elements when focused.\n * @cssprop --wcs-form-field-prefix-border-color-disabled - Determines the border color for prefix elements when disabled.\n * \n * @cssprop --wcs-form-field-prefix-icon-color - Specifies the color of icons within prefix elements.\n * @cssprop --wcs-form-field-prefix-value-color - Sets the color of values within prefix elements.\n * @cssprop --wcs-form-field-prefix-placeholder-color - Defines the placeholder text color within prefix elements.\n * @cssprop --wcs-form-field-prefix-color-disabled - Determines the text color for prefix elements when disabled.\n */\n@Component({\n    tag: 'wcs-form-field',\n    styleUrl: 'form-field.scss',\n    shadow: true,\n})\nexport class FormField implements ComponentInterface {\n    @Element() private el!: HTMLWcsFormFieldElement;\n\n    /**\n     * Specifies whether the form field is in an error state. Displays the field border in red and the message contained in the wcs-error component\n     */\n    @Prop({mutable: true, reflect: true}) isError: boolean = false;\n\n    @State() private hasPrefix: boolean = false;\n    @State() private hasSuffix: boolean = false;\n    @State() private spiedElement: Element;\n\n    private observer: MutationObserver;\n\n    componentWillLoad() {\n        this.hasSuffix = this.el.querySelector('[slot=suffix]') !== null;\n        this.hasPrefix = this.el.querySelector('[slot=prefix]') !== null;\n    }\n\n    componentDidLoad() {\n        this.initSpiedElement();\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n\n    @Watch('isError')\n    // @ts-ignore\n    private isErrorChange(newValue: boolean) {\n        this.updateErrorStateOnInput(newValue);\n        this.updateAriaAttributes();\n    }\n\n    private updateErrorStateOnInput(newValue: boolean) {\n        if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {\n            if (newValue) {\n                this.spiedElement.setAttribute('state', 'error');\n            } else {\n                this.spiedElement.setAttribute('state', 'initial');\n            }\n        }\n    }\n\n    /**\n     * This function return true if the form field contains an element with tagName matches a value of the types param\n     * @param types\n     * @private\n     */\n    private spiedElementIsOfType(...types: string[]): boolean {\n        for (const type of types) {\n            if (this.spiedElement?.tagName === type.toUpperCase()) return true;\n        }\n        return false\n    }\n\n\n    private addRequiredMarkerToLabel() {\n        // TODO: deprecate this in favor of the 'required' component attribute\n        const label = this.el.querySelector('wcs-label');\n        this.observer = new MutationObserver(mutations => {\n            const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];\n            if (requiredAttMutation) {\n                this.updateLabelRequiredFlag(this.spiedElement?.hasAttribute('required'), label);\n            }\n        });\n        if (this.spiedElement) {\n            this.observer.observe(this.spiedElement, {attributes: true});\n        }\n\n        const isRequired = this.spiedElement?.hasAttribute('required');\n        this.updateLabelRequiredFlag(isRequired, label);\n    }\n\n\n    private initSpiedElement() {\n        const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-native-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select', 'wcs-counter'];\n\n        this.spiedElement = (this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement)\n            ?.assignedElements()\n            .filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];\n\n        // If the component is used in another web component\n        if (this.spiedElement?.tagName === 'SLOT') {\n            this.spiedElement = ((this.spiedElement as HTMLSlotElement)\n                .assignedElements()\n                .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]) as HTMLElement;\n        }\n\n        if (!this.spiedElement) {\n            // tslint:disable-next-line:no-console\n            console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');\n            return;\n        }\n    }\n    \n    private async updateAriaAttributes(): Promise<void> {\n        if (isMutableAriaAttribute(this.spiedElement)) {\n            const ariaLabelParts: string[] = [];\n            if (isControlComponentWithLabel(this.spiedElement)) {\n                const innerLabel = await this.spiedElement.getLabel();\n                const combinedLabel = `${this.label || ''} ${innerLabel || ''}`.trim();\n                if(combinedLabel) {\n                    ariaLabelParts.push(normalizeWhitespace(combinedLabel));\n                }\n            } else {\n                if(this.label) {\n                    ariaLabelParts.push(normalizeWhitespace(this.label));\n                }\n            }\n\n            if(this.description) {\n                ariaLabelParts.push(normalizeWhitespace(this.description));\n            }\n            \n            // Sur les autres DS, généralement seul l'erreur est affichée et pas avec la description\n            if(this.isError) {\n                this.spiedElement.setAriaAttribute('aria-invalid', 'true');\n                if(this.error) {\n                    ariaLabelParts.push(normalizeWhitespace(this.error));\n                }\n            } else {\n                this.spiedElement.setAriaAttribute('aria-invalid', 'false');\n            }\n\n            this.spiedElement.setAriaAttribute('aria-label', ariaLabelParts.length > 0 ? ariaLabelParts.join(' ') : null);\n        }\n    }\n    \n    private get label(): string | null {\n        return this.el.querySelector('wcs-label')?.textContent || null;\n    }\n    \n    private get description(): string | null {\n        return this.el.querySelector('wcs-hint')?.textContent || null;\n    }\n    \n    private get error(): string | null {\n        return this.el.querySelector('wcs-error')?.textContent || null;\n    }\n\n    private updateLabelRequiredFlag(isRequired: boolean, label: Element) {\n        if (isRequired && label) {\n            label.setAttribute('required', 'true');\n        } else if (!isRequired && label) {\n            label.removeAttribute('required');\n        }\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n    }\n\n    render() {\n        let classes = '';\n        const isError = this.isError;\n\n        if (this.hasSuffix) {\n            classes += ' has-suffix';\n        }\n        if (this.hasPrefix) {\n            classes += ' has-prefix';\n        }\n        return (\n            <Host class={classes}>\n                <slot name=\"label\"/>\n                <div class=\"input-container\">\n                    <slot name=\"prefix\"/>\n                    <slot onSlotchange={() => this.onFormInputSlotChange()}/>\n                    <slot name=\"suffix\"/>\n                </div>\n                {\n                    isError ? (<slot name=\"error\"/>) : ''\n                }\n                <slot name=\"messages\"/>\n            </Host>\n        );\n    }\n\n    private onFormInputSlotChange() {\n        this.initSpiedElement();\n        this.updateAriaAttributes()\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n}\n",":host {\n    --wcs-label-font-weight: var(--wcs-semantic-font-weight-book);\n    --wcs-label-color: var(--wcs-semantic-color-text-primary);\n    --wcs-label-required-marker-color: var(--wcs-semantic-color-text-critical);\n\n    --wcs-label-gap: var(--wcs-semantic-spacing-small);\n\n    font-weight: var(--wcs-label-font-weight);\n}\n\n:host([required]) > label::after {\n    font-weight: var(--wcs-label-font-weight);\n    color: var(--wcs-label-required-marker-color);\n    content: ' *';\n}\n\nlabel {\n    display: inline-block;\n    color: var(--wcs-label-color);\n    font-weight: var(--wcs-label-font-weight);\n\n    // Add margin before tooltip icon\n    ::slotted(wcs-mat-icon) {\n        display: inline;\n        vertical-align: middle;\n        margin-left: var(--wcs-label-gap);\n    }\n}\n","import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/**\n * The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n *\n * ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n */\n@Component({\n    tag: 'wcs-label',\n    styleUrl: 'label.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeLabel?: HTMLLabelElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * If `true`, marks the label with a red star.\n     * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n     */\n    @Prop({ reflect: true }) required: boolean = false;\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeLabel, attr, value);\n    }\n\n    render() {\n        return (\n            <Host slot=\"label\">\n                <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n                    <slot />\n                </label>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-error.wcs-form-field.wcs-label.entry.cjs.js","mappings":"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","names":["Label","h","Host","isMutableAriaAttribute","isControlComponentWithLabel","normalizeWhitespace","inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute"],"sources":["src/components/error/error.scss?tag=wcs-error&encapsulation=shadow","src/components/error/error.tsx","src/components/form-field/form-field.scss?tag=wcs-form-field&encapsulation=shadow","src/components/form-field/form-field.tsx","src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":[":host {\n    --wcs-error-color: var(--wcs-semantic-color-text-critical);\n    --wcs-error-font-size: var(--wcs-semantic-font-size-caption-2);\n    --wcs-error-font-weight: var(--wcs-semantic-font-weight-book);\n\n    color: var(--wcs-error-color);\n    font-size: var(--wcs-error-font-size);\n    font-weight: var(--wcs-error-font-weight);\n}\n","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/**\n * The `wcs-error` should always be wrapped in a `wcs-form-field`.\n * It is used to display a red message under the field indicating an incorrect user input.\n * \n * ## Accessibility guidelines 💡\n * - Provide a relevant error message to inform the users what they should change to make the field valid\n * - Always add the error icon, to ensure the visual indication of the error state other than the color\n * - `aria-description` will be automatically added to the field for screen readers\n * - `aria-invalid=\"true\"` will be automatically added to the field for screen readers\n * \n * @cssprop --wcs-error-color - Color of the text\n * @cssprop --wcs-error-font-size - Font size\n * @cssprop --wcs-error-font-weight - Font weight\n */\n@Component({\n    tag: 'wcs-error',\n    styleUrl: 'error.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface {\n    render() {\n        return (\n            <Host role=\"alert\" slot=\"error\">\n                <slot />\n            </Host>\n        );\n    }\n}\n",":host {\n    --wcs-form-field-gap: var(--wcs-semantic-spacing-small);\n\n    --wcs-form-field-prefix-suffix-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-form-field-prefix-icon-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-form-field-prefix-value-color: var(--wcs-semantic-color-text-inverse);\n    --wcs-form-field-prefix-placeholder-color: var(--wcs-semantic-color-text-inverse);\n\n    display: flex;\n    flex-direction: column;\n    gap: var(--wcs-form-field-gap);\n\n    .input-container {\n        display: flex;\n    }\n\n    /* Components in the prefix slot */\n    ::slotted([slot=prefix]) {\n        /* Select */\n        --wcs-select-value-color: var(--wcs-semantic-color-text-inverse);\n        --wcs-select-placeholder-color: var(--wcs-semantic-color-text-inverse);\n        --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-default);\n        --wcs-select-control-arrow-color: var(--wcs-form-field-prefix-icon-color);\n        --wcs-select-control-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n        --wcs-select-control-border-width-default: 0;\n        --wcs-select-control-border-style-focus: dashed;\n        --wcs-select-control-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n        /* Native select */\n        --wcs-native-select-value-color: var(--wcs-semantic-color-text-inverse);\n        --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-inverse);\n        --wcs-native-select-arrow-color: var(--wcs-form-field-prefix-icon-color);\n        --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-default);\n        --wcs-native-select-border-width: 0;\n        --wcs-native-select-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n        --wcs-native-select-border-style-focus: dashed;\n        --wcs-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n        --wcs-native-select-option-color: var(--wcs-semantic-color-text-inverse);\n\n        /* Button */\n        --wcs-button-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n    }\n\n    /* Components in the suffix slot */\n    ::slotted([slot=suffix]) {\n        --wcs-button-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n        --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n        --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n    }\n}\n\n/* Disabled components in the prefix slot */\n::slotted([slot=prefix][disabled]),\n::slotted([slot=prefix]:disabled),\n::slotted([slot=prefix][aria-disabled=true]),\n::slotted([slot=prefix][data-disabled]) {\n    --wcs-semantic-color-background-control-disabled: var(--wcs-semantic-color-background-action-primary-disabled);\n    --wcs-semantic-color-text-disabled: var(--wcs-semantic-color-foreground-disabled);\n\n    --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-disabled);\n    --wcs-select-value-color: var(--wcs-semantic-color-text-disabled);\n    --wcs-select-placeholder-color: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-disabled);\n    --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-disabled);\n    --wcs-native-select-value-color: var(--wcs-semantic-color-text-disabled);\n}\n\n/* Hover and press states */\n::slotted([slot=prefix]:hover:not([disabled]):not([data-disabled])) {\n    --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-hover);\n    --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-hover);\n}\n\n::slotted([slot=prefix]:active:not([disabled]):not([data-disabled])) {\n    --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-press);\n    --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-press);\n}\n\n.input-container {\n    display: flex;\n}\n\n::slotted(wcs-select:not([slot=prefix])) {\n    width: 100%;\n}\n\n::slotted(wcs-native-select:not([slot=prefix])) {\n    width: 100%;\n}\n\n/* Components in the center that are prefixed */\n:host(.has-prefix) {\n    ::slotted(:not([slot=prefix])) {\n        --wcs-input-border-radius-left: 0;\n        --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n        --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\n    }\n}\n\n/* Components in the center that are suffixed */\n:host(.has-suffix) {\n    ::slotted(:not([slot=suffix])) {\n        --wcs-input-border-radius-right: 0;\n        --wcs-select-control-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n        --wcs-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n    }\n\n}\n\n/* Components in the center that are prefixed AND suffixed */\n:host(.has-prefix.has-suffix) {\n    ::slotted(:not([slot=prefix]):not([slot=suffix])) {\n        --wcs-input-border-radius-left: 0;\n        --wcs-input-border-radius-right: 0;\n        --wcs-select-control-border-radius: 0;\n        --wcs-native-select-border-radius: 0;\n    }\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { isMutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { normalizeWhitespace } from '../../utils/helpers';\nimport { isControlComponentWithLabel } from \"../../utils/control-component-interface\";\n\n/**\n * Form field component wraps the native input element and add some more functionality on top of it.\n *\n * You can use the `wcs-form-field` to wrap any of these components :\n * - `wcs-input`\n * - `wcs-textarea`\n * - `wcs-radio-group`\n * - `wcs-switch`\n * - `wcs-checkbox`\n * - `wcs-native-select`\n * - `wcs-select`\n * - `wcs-counter`\n *\n * For non-supported slotted component, you can use the `required` attribute on the wrapped component to tell the\n * form-field that it is required. It will add a red star after the label of the form field.\n * \n * ## Accessibility guidelines 💡\n * - Each form control should be identified with a unique `wcs-label`\n * - Don't forget to add form validation to make sure the data is correctly formatted\n * - If the `wcs-label` is required, the form control must have the `required` HTML attribute and vice-versa (this is normally automatically set)\n * - The form should not be submittable if at least one required form control is not filled\n * - Hints are optional and should only be used to add extra information\n * - Additional aria attributes put on `<wcs-form-field>` won't inherit onto the native component : you must use the `setAriaAttribute` method.\n * \n * @slot label - Automatically filled when a `wcs-label` is provided\n * @slot <no-name> - The main slot containing the wrapped component\n * @slot prefix - (Optional) Display a component as prefix. See \"Prefix Suffix Group\" story for more info.\n * @slot suffix - (Optional) Display a component as suffix. See \"Prefix Suffix Group\" story for more info.\n * @slot error - Automatically filled when a `wcs-error` is provided\n * @slot messages - Automatically filled when a `wcs-hint` is provided\n *\n * @cssprop --wcs-form-field-gap - Defines the spacing between the label, input control, and hint messages.\n * @cssprop --wcs-form-field-prefix-suffix-border-radius - Sets the border radius for both prefix and suffix elements.\n * \n * @cssprop --wcs-form-field-prefix-background-color-default - Background color default for prefix elements\n * @cssprop --wcs-form-field-prefix-background-color-disabled - Background color for prefix elements when disabled\n * @cssprop --wcs-form-field-prefix-background-color-hover - Background color for prefix elements when hovered\n * @cssprop --wcs-form-field-prefix-border-color-default - Defines the default border color for prefix\n * @cssprop --wcs-form-field-prefix-border-color-focus - Sets the border color for prefix elements when focused.\n * @cssprop --wcs-form-field-prefix-border-color-disabled - Determines the border color for prefix elements when disabled.\n * \n * @cssprop --wcs-form-field-prefix-icon-color - Specifies the color of icons within prefix elements.\n * @cssprop --wcs-form-field-prefix-value-color - Sets the color of values within prefix elements.\n * @cssprop --wcs-form-field-prefix-placeholder-color - Defines the placeholder text color within prefix elements.\n * @cssprop --wcs-form-field-prefix-color-disabled - Determines the text color for prefix elements when disabled.\n */\n@Component({\n    tag: 'wcs-form-field',\n    styleUrl: 'form-field.scss',\n    shadow: true,\n})\nexport class FormField implements ComponentInterface {\n    @Element() private el!: HTMLWcsFormFieldElement;\n\n    /**\n     * Specifies whether the form field is in an error state. Displays the field border in red and the message contained in the wcs-error component\n     */\n    @Prop({mutable: true, reflect: true}) isError: boolean = false;\n\n    @State() private hasPrefix: boolean = false;\n    @State() private hasSuffix: boolean = false;\n    @State() private spiedElement: Element;\n\n    private observer: MutationObserver;\n\n    componentWillLoad() {\n        this.hasSuffix = this.el.querySelector('[slot=suffix]') !== null;\n        this.hasPrefix = this.el.querySelector('[slot=prefix]') !== null;\n    }\n\n    componentDidLoad() {\n        this.initSpiedElement();\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n\n    @Watch('isError')\n    // @ts-ignore\n    private isErrorChange(newValue: boolean) {\n        this.updateErrorStateOnInput(newValue);\n        this.updateAriaAttributes();\n    }\n\n    private updateErrorStateOnInput(newValue: boolean) {\n        if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {\n            if (newValue) {\n                this.spiedElement.setAttribute('state', 'error');\n            } else {\n                this.spiedElement.setAttribute('state', 'initial');\n            }\n        }\n    }\n\n    /**\n     * This function return true if the form field contains an element with tagName matches a value of the types param\n     * @param types\n     * @private\n     */\n    private spiedElementIsOfType(...types: string[]): boolean {\n        for (const type of types) {\n            if (this.spiedElement?.tagName === type.toUpperCase()) return true;\n        }\n        return false\n    }\n\n\n    private addRequiredMarkerToLabel() {\n        // TODO: deprecate this in favor of the 'required' component attribute\n        const label = this.el.querySelector('wcs-label');\n        this.observer = new MutationObserver(mutations => {\n            const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];\n            if (requiredAttMutation) {\n                this.updateLabelRequiredFlag(this.spiedElement?.hasAttribute('required'), label);\n            }\n        });\n        if (this.spiedElement) {\n            this.observer.observe(this.spiedElement, {attributes: true});\n        }\n\n        const isRequired = this.spiedElement?.hasAttribute('required');\n        this.updateLabelRequiredFlag(isRequired, label);\n    }\n\n\n    private initSpiedElement() {\n        const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-native-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select', 'wcs-counter'];\n\n        this.spiedElement = (this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement)\n            ?.assignedElements()\n            .filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];\n\n        // If the component is used in another web component\n        if (this.spiedElement?.tagName === 'SLOT') {\n            this.spiedElement = ((this.spiedElement as HTMLSlotElement)\n                .assignedElements()\n                .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]) as HTMLElement;\n        }\n\n        if (!this.spiedElement) {\n            // tslint:disable-next-line:no-console\n            console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');\n            return;\n        }\n    }\n    \n    private async updateAriaAttributes(): Promise<void> {\n        if (isMutableAriaAttribute(this.spiedElement)) {\n            const ariaLabelParts: string[] = [];\n            if (isControlComponentWithLabel(this.spiedElement)) {\n                const innerLabel = await this.spiedElement.getLabel();\n                const combinedLabel = `${this.label || ''} ${innerLabel || ''}`.trim();\n                if(combinedLabel) {\n                    ariaLabelParts.push(normalizeWhitespace(combinedLabel));\n                }\n            } else {\n                if(this.label) {\n                    ariaLabelParts.push(normalizeWhitespace(this.label));\n                }\n            }\n\n            if(this.description) {\n                ariaLabelParts.push(normalizeWhitespace(this.description));\n            }\n            \n            // Sur les autres DS, généralement seul l'erreur est affichée et pas avec la description\n            if(this.isError) {\n                this.spiedElement.setAriaAttribute('aria-invalid', 'true');\n                if(this.error) {\n                    ariaLabelParts.push(normalizeWhitespace(this.error));\n                }\n            } else {\n                this.spiedElement.setAriaAttribute('aria-invalid', 'false');\n            }\n\n            this.spiedElement.setAriaAttribute('aria-label', ariaLabelParts.length > 0 ? ariaLabelParts.join(' ') : null);\n        }\n    }\n    \n    private get label(): string | null {\n        return this.el.querySelector('wcs-label')?.textContent || null;\n    }\n    \n    private get description(): string | null {\n        return this.el.querySelector('wcs-hint')?.textContent || null;\n    }\n    \n    private get error(): string | null {\n        return this.el.querySelector('wcs-error')?.textContent || null;\n    }\n\n    private updateLabelRequiredFlag(isRequired: boolean, label: Element) {\n        if (isRequired && label) {\n            label.setAttribute('required', 'true');\n        } else if (!isRequired && label) {\n            label.removeAttribute('required');\n        }\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n    }\n\n    render() {\n        let classes = '';\n        const isError = this.isError;\n\n        if (this.hasSuffix) {\n            classes += ' has-suffix';\n        }\n        if (this.hasPrefix) {\n            classes += ' has-prefix';\n        }\n        return (\n            <Host class={classes}>\n                <slot name=\"label\"/>\n                <div class=\"input-container\">\n                    <slot name=\"prefix\"/>\n                    <slot onSlotchange={() => this.onFormInputSlotChange()}/>\n                    <slot name=\"suffix\"/>\n                </div>\n                {\n                    isError ? (<slot name=\"error\"/>) : ''\n                }\n                <slot name=\"messages\"/>\n            </Host>\n        );\n    }\n\n    private onFormInputSlotChange() {\n        this.initSpiedElement();\n        this.updateAriaAttributes()\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n}\n",":host {\n    --wcs-label-font-weight: var(--wcs-semantic-font-weight-book);\n    --wcs-label-color: var(--wcs-semantic-color-text-primary);\n    --wcs-label-required-marker-color: var(--wcs-semantic-color-text-critical);\n\n    --wcs-label-gap: var(--wcs-semantic-spacing-small);\n\n    font-weight: var(--wcs-label-font-weight);\n}\n\n:host([required]) > label::after {\n    font-weight: var(--wcs-label-font-weight);\n    color: var(--wcs-label-required-marker-color);\n    content: ' *';\n}\n\nlabel {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--wcs-label-gap);\n    line-height: 0;\n    \n    color: var(--wcs-label-color);\n    font-weight: var(--wcs-label-font-weight);\n}\n","import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/**\n * The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n *\n * ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n */\n@Component({\n    tag: 'wcs-label',\n    styleUrl: 'label.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeLabel?: HTMLLabelElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * If `true`, marks the label with a red star.\n     * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n     */\n    @Prop({ reflect: true }) required: boolean = false;\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeLabel, attr, value);\n    }\n\n    render() {\n        return (\n            <Host slot=\"label\">\n                <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n                    <slot />\n                </label>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/wcs-galactic-menu.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
 const helpers = require('./helpers-2f1a8ddc.js');
-const popper = require('./popper-8d6e7fca.js');
+const popper = require('./popper-1b61df21.js');
 
 const galacticMenuCss = ":host{--wcs-galactic-menu-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-galactic-menu-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-gap:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-height:var(--wcs-semantic-size-s);--wcs-galactic-menu-icon-focus-outline-color:var(--wcs-galactic-text-color, white);--wcs-galactic-menu-overlay-color:var(--wcs-semantic-color-text-inverse);--wcs-galactic-menu-overlay-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-galactic-menu-overlay-padding:var(--wcs-semantic-spacing-large);display:flex;align-items:center;box-sizing:border-box;height:var(--wcs-galactic-menu-height);gap:var(--wcs-galactic-menu-gap);padding:0 var(--wcs-galactic-menu-padding-horizontal);background-color:var(--wcs-galactic-menu-background-color)}#menu{display:none;background-color:var(--wcs-galactic-menu-overlay-background-color);color:var(--wcs-galactic-menu-overlay-color);padding:var(--wcs-galactic-menu-overlay-padding);--wcs-semantic-color-border-focus-base:var(--wcs-semantic-color-text-inverse, white)}#menu[data-show]{display:block;z-index:9999}#menu[data-popper-placement^=top]>#arrow{bottom:-4px}#menu[data-popper-placement^=bottom]>#arrow{top:-4px}#menu[data-popper-placement^=left]>#arrow{right:-4px}#menu[data-popper-placement^=right]>#arrow{left:-4px}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit}#arrow{visibility:hidden}#arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}button{background:transparent;border:none;color:inherit;cursor:pointer;user-select:none}button:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-galactic-menu-icon-focus-outline-color);outline-offset:0;border-radius:0.1rem}";
 const WcsGalacticMenuStyle0 = galacticMenuCss;

package/dist/cjs/wcs-grid.cjs.entry.js

@@ -1281,6 +1281,7 @@ const Grid = class {
     onDataChange(newValue) {
         this.updateGridRows(newValue);
         this.refreshSort(false);
+        this.updatePageIndex();
     }
     onSelectedItemsPropertyChange(newValue) {
         this.updateSelectionWithValues(newValue);
@@ -1482,7 +1483,6 @@ const Grid = class {
                 rows.push(row);
             }
             this.rows = rows;
-            this.updatePageIndex();
         }
     }
     componentDidLoad() {
@@ -1495,6 +1495,7 @@ const Grid = class {
             this.updateSelectionWithValues(this.selectedItems);
         }
         this.refreshSort(true);
+        this.updatePageIndex();
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, helpers.inheritAriaAttributes(this.el)), helpers.inheritAttributes(this.el, GRID_INHERITED_ATTRS));
@@ -1705,12 +1706,12 @@ const Grid = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (index.h(index.Host, { key: '98d13e7497ec9d9ecd3e149b3f6986e16bc5cc2a' }, index.h("table", Object.assign({ key: 'a44825cf71ff284a5204e9d922c0eba2c2ca23f4', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), index.h("thead", { key: '336578d350ae8082a19fa6798af35f2fdd015ff9' }, index.h("tr", { key: 'fdb38402ea5c58dd77dad7df2ef97d54c521123c', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
+        return (index.h(index.Host, { key: '1e9b1d5dc405c67428750276de3e38e8e163d20e' }, index.h("table", Object.assign({ key: '42e610c403c108f36c2f5e4eb276b9e1c6349b8c', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), index.h("thead", { key: '365bf4de9329c94c5c891040b14ca844c6e8fd99' }, index.h("tr", { key: '9d1e4c4cf0418f585679a055edbb88ca08493d3d', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
             : index.h("th", { class: "wcs-grid-selection-column" }, this.selectionConfig === 'single' ? '' :
                 index.h("wcs-checkbox", { tabIndex: ((_b = this.cursorPosition) === null || _b === void 0 ? void 0 : _b.col) === 0
-                        && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, part: "all-rows-checkbox", checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), index.h("slot", { key: '2d68b72fac0251dab9f519cf84c25c96262c193b', name: "grid-column" }))), index.h("tbody", { key: '4156e796ac5a81170b5dba011159f8e6bb7a7e60' }, this.loading
+                        && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, part: "all-rows-checkbox", checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), index.h("slot", { key: '4c1ed31eeaf61d0f94a156cc97b393abafdfb6e3', name: "grid-column" }))), index.h("tbody", { key: '5758c76c248e9e54759bd008310047a5c670339a' }, this.loading
             ? index.h("tr", { "aria-busy": "true" }, index.h("td", { colSpan: this.totalColumnCount(), class: "loading" }, index.h("wcs-spinner", null)))
-            : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), index.h("slot", { key: 'c683eb883707ffbd1fed22d86ececb595f70c2c0', name: "grid-pagination" })));
+            : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), index.h("slot", { key: '170e79b086e8235ae736c8cc54512b0e3bb0e7ab', name: "grid-pagination" })));
     }
     /**
      * Returns the row with all mapped cells inside.