wcs-core 7.3.0 → 7.4.0

package/dist/esm/wcs-tabs.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-d9de61ce.js';
 import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute } from './helpers-ece6a2d3.js';
 import { S as SelectArrow } from './select-arrow-e62de386.js';
-import { c as createPopper } from './popper-e491c314.js';
+import { c as createPopper } from './popper-ac238961.js';
 
 const tabsCss = ":host{--wcs-tabs-indicator-height:calc(var(--wcs-semantic-size-base) / 2);--wcs-tabs-indicator-background-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-indicator-border-radius:var(--wcs-semantic-border-radius-full);--wcs-tabs-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-color-hover:var(--wcs-semantic-color-foreground-action-secondary-hover);--wcs-tabs-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-tabs-color-selected:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-background-color-focus:var(--wcs-semantic-color-background-action-secondary-focus);--wcs-tabs-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-tabs-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-tabs-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-tabs-font-weight-default:var(--wcs-semantic-font-weight-roman);--wcs-tabs-font-weight-selected:var(--wcs-semantic-font-weight-roman);--wcs-tabs-padding-top:var(--wcs-semantic-spacing-base);--wcs-tabs-padding-right:var(--wcs-semantic-spacing-large);--wcs-tabs-padding-bottom:calc(var(--wcs-semantic-spacing-base) + var(--wcs-tabs-indicator-height));--wcs-tabs-padding-left:var(--wcs-semantic-spacing-large);--wcs-tabs-gutter-border-width:var(--wcs-semantic-border-width-default);--wcs-tabs-gutter-background-color:var(--wcs-semantic-color-border-secondary);--wcs-tabs-headers-border-bottom:var(--wcs-tabs-gutter-border-width) solid var(--wcs-tabs-gutter-background-color);--wcs-tabs-mobile-breakpoint:var(--wcs-phone-breakpoint-max-width, 575px);--wcs-tabs-mobile-overlay-border-width:var(--wcs-semantic-border-width-default);--wcs-tabs-mobile-overlay-border-color:var(--wcs-semantic-color-border-secondary);--wcs-tabs-mobile-overlay-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-tabs-mobile-overlay-padding:var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-overlay-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-mobile-gap:var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-padding:0 var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-height:var(--wcs-semantic-size-m);--wcs-tabs-mobile-font-weight-default:var(--wcs-semantic-font-weight-medium);--wcs-tabs-mobile-font-weight-active:var(--wcs-semantic-font-weight-black);--wcs-tabs-mobile-font-size:var(--wcs-semantic-font-size-base);--wcs-tabs-mobile-color:var(--wcs-semantic-color-text-primary);--wcs-tabs-mobile-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-tabs-mobile-background-color-focus:var(--wcs-semantic-color-background-action-secondary-focus);--wcs-tabs-mobile-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-tabs-mobile-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-tabs-mobile-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:block}:host([align=start]) .wcs-tabs-headers{justify-content:start}:host([align=end]) .wcs-tabs-headers{justify-content:end}:host([align=center]) .wcs-tabs-headers{justify-content:center}.wcs-tabs-headers{overflow-x:auto;display:flex;flex-direction:row;position:relative}:host([gutter]) .wcs-tabs-headers{border-bottom:var(--wcs-tabs-headers-border-bottom)}.wcs-tab-header{position:relative;padding:var(--wcs-tabs-padding-top) var(--wcs-tabs-padding-right) var(--wcs-tabs-padding-bottom) var(--wcs-tabs-padding-left);border-radius:var(--wcs-tabs-border-radius) var(--wcs-tabs-border-radius) 0 0;display:flex;flex-shrink:0;align-items:center;justify-content:center;cursor:pointer;outline:none;transition:all var(--wcs-tabs-transition-duration) ease-out}.wcs-tab-header span{text-align:center;color:var(--wcs-tabs-color-default);font-size:1rem;font-weight:var(--wcs-tabs-font-weight-default)}.wcs-tab-header:hover{background-color:var(--wcs-tabs-background-color-hover)}.wcs-tab-header:hover span{color:var(--wcs-tabs-color-hover)}.wcs-tab-header:focus-visible>span{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-tabs-border-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}.wcs-tab-header:active{background-color:var(--wcs-tabs-background-color-press)}.wcs-tab-header:active span{color:var(--wcs-tabs-color-press)}.active span{font-weight:var(--wcs-tabs-font-weight-selected);color:var(--wcs-tabs-color-selected)}.active::after{position:absolute;bottom:0;left:0;width:100%;content:\"\";height:var(--wcs-tabs-indicator-height);background-color:var(--wcs-tabs-indicator-background-color);border-radius:var(--wcs-tabs-indicator-border-radius)}button{background-color:inherit}#mobile-button{border:0;font-family:var(--wcs-font-sans-serif), sans-serif;text-align:center;color:var(--wcs-tabs-color-default);font-size:1rem;font-weight:var(--wcs-tabs-font-weight-default);padding-right:calc(0.75 * var(--wcs-tabs-padding-right));}#mobile-button span{display:flex;align-items:center}#mobile-button .arrow{fill:var(--wcs-tabs-color-default)}#mobile-button:hover .arrow{fill:var(--wcs-tabs-color-hover)}#mobile-button:active .arrow{fill:var(--wcs-tabs-color-press)}.popover{display:none;z-index:9999;overflow:hidden;border:var(--wcs-tabs-mobile-overlay-border-width) solid var(--wcs-tabs-mobile-overlay-border-color);border-radius:var(--wcs-tabs-mobile-overlay-border-radius);padding:var(--wcs-tabs-mobile-overlay-padding);background-color:var(--wcs-tabs-mobile-overlay-background-color)}.popover [role=tab]{display:flex;flex-direction:row;align-items:center;cursor:pointer;user-select:none;gap:var(--wcs-tabs-mobile-gap);padding:var(--wcs-tabs-mobile-padding);height:var(--wcs-tabs-mobile-height);font-weight:var(--wcs-tabs-mobile-font-weight-default);font-size:var(--wcs-tabs-mobile-font-size);color:var(--wcs-tabs-mobile-color);background-color:var(--wcs-tabs-mobile-background-color);border-radius:var(--wcs-tabs-mobile-border-radius);transition-duration:var(--wcs-tabs-transition-duration);transition-property:background-color, color;transition-timing-function:ease;overflow:hidden;white-space:nowrap}.popover [role=tab]:focus{background-color:var(--wcs-tabs-mobile-background-color-focus)}.popover [role=tab]:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-semantic-color-border-focus-base);outline-offset:0;border-radius:var(--wcs-tabs-mobile-border-radius)}.popover [role=tab]:hover{background-color:var(--wcs-tabs-mobile-background-color-hover)}.popover [role=tab]:active{background-color:var(--wcs-tabs-mobile-background-color-press)}.popover .mobile-active{font-weight:var(--wcs-tabs-mobile-font-weight-active)}.show{display:block}";
 const WcsTabsStyle0 = tabsCss;

package/dist/esm/wcs-tooltip.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-d9de61ce.js';
-import { a as applyStyles, c as createPopper } from './popper-e491c314.js';
+import { a as applyStyles, c as createPopper } from './popper-ac238961.js';
 import { b as isEscapeKey } from './helpers-ece6a2d3.js';
 import { i as isMutableAriaAttribute } from './mutable-aria-attribute-e225edc1.js';
 

package/dist/types/components/accordion/accordion.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/alert/alert.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/alert-drawer/alert-drawer.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/breadcrumb/breadcrumb.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/button/button.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/checkbox/checkbox.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/chip/chip.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/com-nav/com-nav.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/counter/counter.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/dropdown/dropdown.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/editable-field/editable-field.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/form-field/form-field.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/grid/grid.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/horizontal-stepper/horizontal-stepper-interface.d.ts

@@ -5,6 +5,8 @@ import { MaterialIconFamily } from '../mat-icon/mat-icon-interface';
 export interface HorizontalStepConfig {
     /** Text displayed below the step button */
     text?: string;
+    /** Accessibility name applied on the step button **/
+    ariaLabel?: string;
     /** Specifies if the step is clickable or not */
     disable?: boolean;
     /** Specifies if the step is completed */

package/dist/types/components/horizontal-stepper/horizontal-stepper.d.ts

@@ -3,6 +3,10 @@ import { HorizontalStepClickEvent, HorizontalStepConfig, HorizontalStepperMode }
 /**
  * The horizontal-stepper is a representation of a user’s progress through a series of discrete steps.
  *
+ * ## Accessibility guidelines 💡
+ * > - The `ariaLabel` property is available for every step to provide a more descriptive label for screen readers.
+ * > - It is **mandatory** in `linear` mode if the step's content is not descriptive enough (e.g., only a number).
+ *
  * @cssprop --wcs-horizontal-step-text-color-default - Text color of the step by default
  * @cssprop --wcs-horizontal-step-text-color-active - Text color of the step when active
  * @cssprop --wcs-horizontal-step-text-color-disabled - Text color of step when disabled

package/dist/types/components/input/input.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/modal/modal.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/radio-group/radio-group.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/select/select.d.ts

@@ -222,6 +222,12 @@ export declare class Select implements ComponentInterface, MutableAriaAttribute
     selectedOptionChanged(event: CustomEvent<SelectOptionChosedEvent>): void;
     sendOptionSelectedToStateMachine(event: SelectOptionChosedEvent, fromKeyboard?: boolean): void;
     onSlotchange(): void;
+    /**
+     * This method only affect the option's selected state
+     *
+     * Set the selected state of each option to match the current selected value of the select
+     */
+    private syncOptionsElementsStateWithCurrentSelectedValue;
     removeChip(v: SelectOptionValue): void;
     private highlightOption;
     private highlightFirstOption;
@@ -239,6 +245,7 @@ export declare class Select implements ComponentInterface, MutableAriaAttribute
      * @param filter - The new filter value
      * @param isReset - If true, the filter is reset and the select is closed
      * @param fromUserInteraction - If true, the change comes from user interaction (typing), if false it's programmatic
+     * @param shouldEmitFilterChangeEvent
      * @private
      */
     private setAutocompleteValue;
@@ -247,6 +254,5 @@ export declare class Select implements ComponentInterface, MutableAriaAttribute
     onBlur(event: FocusEvent): void;
     componentDidRender(): void;
     private focusedAttributes;
-    private onAutocompleteFieldBlur;
     render(): any;
 }

package/dist/types/components/select/select.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/switch/switch.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/tabs/tabs.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/textarea/textarea.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components.d.ts

@@ -1310,6 +1310,9 @@ export namespace Components {
     }
     /**
      * The horizontal-stepper is a representation of a user’s progress through a series of discrete steps.
+     * ## Accessibility guidelines 💡
+     * > - The `ariaLabel` property is available for every step to provide a more descriptive label for screen readers.
+     * > - It is **mandatory** in `linear` mode if the step's content is not descriptive enough (e.g., only a number).
      * @cssprop --wcs-horizontal-step-text-color-default - Text color of the step by default
      * @cssprop --wcs-horizontal-step-text-color-active - Text color of the step when active
      * @cssprop --wcs-horizontal-step-text-color-disabled - Text color of step when disabled
@@ -3811,6 +3814,9 @@ declare global {
     }
     /**
      * The horizontal-stepper is a representation of a user’s progress through a series of discrete steps.
+     * ## Accessibility guidelines 💡
+     * > - The `ariaLabel` property is available for every step to provide a more descriptive label for screen readers.
+     * > - It is **mandatory** in `linear` mode if the step's content is not descriptive enough (e.g., only a number).
      * @cssprop --wcs-horizontal-step-text-color-default - Text color of the step by default
      * @cssprop --wcs-horizontal-step-text-color-active - Text color of the step when active
      * @cssprop --wcs-horizontal-step-text-color-disabled - Text color of step when disabled
@@ -6032,6 +6038,9 @@ declare namespace LocalJSX {
     }
     /**
      * The horizontal-stepper is a representation of a user’s progress through a series of discrete steps.
+     * ## Accessibility guidelines 💡
+     * > - The `ariaLabel` property is available for every step to provide a more descriptive label for screen readers.
+     * > - It is **mandatory** in `linear` mode if the step's content is not descriptive enough (e.g., only a number).
      * @cssprop --wcs-horizontal-step-text-color-default - Text color of the step by default
      * @cssprop --wcs-horizontal-step-text-color-active - Text color of the step when active
      * @cssprop --wcs-horizontal-step-text-color-disabled - Text color of step when disabled
@@ -8133,6 +8142,9 @@ declare module "@stencil/core" {
             "wcs-hint": LocalJSX.WcsHint & JSXBase.HTMLAttributes<HTMLWcsHintElement>;
             /**
              * The horizontal-stepper is a representation of a user’s progress through a series of discrete steps.
+             * ## Accessibility guidelines 💡
+             * > - The `ariaLabel` property is available for every step to provide a more descriptive label for screen readers.
+             * > - It is **mandatory** in `linear` mode if the step's content is not descriptive enough (e.g., only a number).
              * @cssprop --wcs-horizontal-step-text-color-default - Text color of the step by default
              * @cssprop --wcs-horizontal-step-text-color-active - Text color of the step when active
              * @cssprop --wcs-horizontal-step-text-color-disabled - Text color of step when disabled

package/dist/types/utils/playwright/test-expect.d.ts

@@ -0,0 +1,33 @@
+interface CustomMatchers<R = unknown> {
+    /**
+     * Will check if the event spy received the expected event.
+     */
+    toHaveReceivedEvent(): R;
+    /**
+     * Will check if the event spy received the expected event with the expected detail.
+     * @param eventDetail The expected detail of the event.
+     */
+    toHaveReceivedEventDetail(eventDetail: any): R;
+    /**
+     * Will check if the event spy received the expected event at the given index with the expected detail.
+     * @param index position of the event in the received events array.
+     * @param eventDetail The expected detail of the event.
+     */
+    toHaveNthReceivedEventDetail(index: number, eventDetail: any): R;
+    /**
+     * Will check if the event spy received the expected event with the expected detail on the first received event.
+     * @param eventDetail The expected detail of the event.
+     */
+    toHaveFirstReceivedEventDetail(eventDetail: any): R;
+    /**
+     * Will check how many times the event has been received.
+     */
+    toHaveReceivedEventTimes(count: number): R;
+}
+declare global {
+    namespace PlaywrightTest {
+        interface Matchers<R> extends CustomMatchers<R> {
+        }
+    }
+}
+export {};

package/dist/types/utils/playwright/test.d.ts

@@ -0,0 +1,7 @@
+import { E2EPage } from '@stencil/playwright';
+/**
+ * @see stencil.config.ts expose dev web server
+ * @param page
+ * @param content
+ */
+export declare function setWcsContent(page: E2EPage, content: string): Promise<void>;

package/dist/wcs/{p-8e9bd0f1.entry.js → p-0326f834.entry.js}

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

package/dist/wcs/{p-8e9bd0f1.entry.js.map → p-0326f834.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["breadcrumbCss","WcsBreadcrumbStyle0","BREADCRUMB_INHERITED_ATTRS","Breadcrumb","this","inheritedAttributes","EXPAND_BTN_ARIA_LABEL_DEFAULT","handleCollapsePropsChange","updateCollapsedViewMode","handleAriaLabelExpandBtnChange","newValue","_a","expandBtnEl","setAriaAttribute","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","componentDidLoad","ariaLabelExpandButton","attr","value","setOrRemoveAttribute","navEl","getBreadcrumbItems","Array","from","querySelectorAll","shouldCollapseItems","maxItems","length","itemsBeforeCollapse","itemsAfterCollapse","assignSlotNamesForCollapsedViewMode","assignSlotNamesForNonCollapsedViewMode","breadcrumbItems","itemBeforeExpandBtnIndex","itemAfterExpandBtnIndex","forEach","breadcrumbItem","index","slot","last","handleSlotChange","showHiddenItems","forceUpdate","handleOnExpandBtnClick","requestAnimationFrame","setFocusToFirstHiddenItem","firstHiddenItemIndex","firstHiddenItem","firstHiddenItemSlot","shadowRoot","querySelector","breadcrumbItemLinkToFocus","assignedElements","focus","renderExpandAllButton","expandBtnIsLastItem","h","role","class","mode","shape","size","onClick","bind","ref","icon","ICONS_FONT_CHEVRON_UNICODE","render","showExpandBtn","Host","key","NAV_ARIA_LABEL_DEFAULT","onSlotchange","name"],"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"],"mappings":"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"}
+{"version":3,"names":["breadcrumbCss","WcsBreadcrumbStyle0","BREADCRUMB_INHERITED_ATTRS","Breadcrumb","this","inheritedAttributes","EXPAND_BTN_ARIA_LABEL_DEFAULT","handleCollapsePropsChange","updateCollapsedViewMode","handleAriaLabelExpandBtnChange","newValue","_a","expandBtnEl","setAriaAttribute","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","componentDidLoad","ariaLabelExpandButton","attr","value","setOrRemoveAttribute","navEl","getBreadcrumbItems","Array","from","querySelectorAll","shouldCollapseItems","maxItems","length","itemsBeforeCollapse","itemsAfterCollapse","assignSlotNamesForCollapsedViewMode","assignSlotNamesForNonCollapsedViewMode","breadcrumbItems","itemBeforeExpandBtnIndex","itemAfterExpandBtnIndex","forEach","breadcrumbItem","index","slot","last","handleSlotChange","showHiddenItems","forceUpdate","handleOnExpandBtnClick","requestAnimationFrame","setFocusToFirstHiddenItem","firstHiddenItemIndex","firstHiddenItem","firstHiddenItemSlot","shadowRoot","querySelector","breadcrumbItemLinkToFocus","assignedElements","focus","renderExpandAllButton","expandBtnIsLastItem","h","role","class","mode","shape","size","onClick","bind","ref","icon","ICONS_FONT_CHEVRON_UNICODE","render","showExpandBtn","Host","key","NAV_ARIA_LABEL_DEFAULT","onSlotchange","name"],"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"],"mappings":"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"}