wcs-core 7.3.0 → 7.4.1

package/dist/esm/wcs-horizontal-stepper.entry.js

@@ -1,6 +1,7 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-d9de61ce.js';
 
 const HorizontalStep = ({ step, checkOnComplete, complete, passed, active, first, disable, onClick }) => {
+    var _a;
     return (
     /*
     When using list-style: none in CSS, it removes the semantic of the list in Safari.
@@ -10,7 +11,7 @@ const HorizontalStep = ({ step, checkOnComplete, complete, passed, active, first
      */
     h("li", { role: "listitem", class: "graphic-step", "data-first": first },
         first ? null : (h("wcs-progress-bar", { value: passed ? 100 : 0, "aria-hidden": "true" })),
-        h("wcs-button", { style: { 'backgroundColor': 'white' }, "aria-label": step.text, onClick: _ => onClick(step), ref: (el) => {
+        h("wcs-button", { style: { 'backgroundColor': 'white' }, "aria-label": (_a = step.ariaLabel) !== null && _a !== void 0 ? _a : step.text, onClick: _ => onClick(step), ref: (el) => {
                 active ? el.setAriaAttribute('aria-current', 'step') : el.setAriaAttribute('aria-current', null);
             }, shape: "round", mode: (active || complete) && !step.disable ? 'plain' : 'stroked', disabled: disable }, getButtonContent(step.button, checkOnComplete, complete, active))));
 };
@@ -80,7 +81,7 @@ const HorizontalStepper = class {
         }
     }
     render() {
-        return (h(Host, { key: '8f1c81f4e21159bbbd34a6caaaa66ce13e8b7a92' }, h("ul", { key: '1a512c67669a402100153db33936a6752d53b6ab', role: "list", class: "steps" }, this.steps.map((step, index) => (h(HorizontalStep, { step: step, passed: index <= this.internalCurrentStepIndex, checkOnComplete: this.checkOnComplete, complete: this.isComplete(step, index), active: index === this.internalCurrentStepIndex, first: index === 0, disable: this.isDisable(step, index), onClick: step => this.wcsHorizontalStepClick.emit({ step, index }) })))), this.renderLabels()));
+        return (h(Host, { key: '72063828a00d77fc1bc2a92de8979d096b806786' }, h("ul", { key: 'a5b2de6193a68b6b70b0857d1c50ed1c5c069863', role: "list", class: "steps" }, this.steps.map((step, index) => (h(HorizontalStep, { step: step, passed: index <= this.internalCurrentStepIndex, checkOnComplete: this.checkOnComplete, complete: this.isComplete(step, index), active: index === this.internalCurrentStepIndex, first: index === 0, disable: this.isDisable(step, index), onClick: step => this.wcsHorizontalStepClick.emit({ step, index }) })))), this.renderLabels()));
     }
     isComplete(step, index) {
         return index <= this.internalCurrentStepIndex || step.complete;

package/dist/esm/wcs-horizontal-stepper.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-horizontal-stepper.entry.js","mappings":"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","names":[],"sources":["src/components/horizontal-stepper/horizontal-step.tsx","src/components/horizontal-stepper/horizontal-stepper.scss?tag=wcs-horizontal-stepper&encapsulation=shadow","src/components/horizontal-stepper/horizontal-stepper.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { HorizontalStepConfig, StepButton } from './horizontal-stepper-interface';\n\ninterface HorizontalStepProps {\n    step: HorizontalStepConfig;\n    checkOnComplete: boolean;\n    complete: boolean;\n    passed: boolean;\n    active: boolean;\n    first: boolean;\n    disable: boolean;\n    onClick: (step: HorizontalStepConfig) => void;\n}\n\nexport const HorizontalStep: FunctionalComponent<HorizontalStepProps> = (\n    {\n        step,\n        checkOnComplete,\n        complete,\n        passed,\n        active,\n        first,\n        disable,\n        onClick\n    }) => {\n    return (\n        /*\n        When using list-style: none in CSS, it removes the semantic of the list in Safari.\n        So we add role=\"list\" manually to provide semantic to screen readers\n        https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html\n        https://css-tricks.com/snippets/css/remove-list-markers-without-affecting-semantics/ \n         */\n        <li role=\"listitem\" class=\"graphic-step\" data-first={first}>\n            {first ? null : (<wcs-progress-bar value={passed ? 100 : 0} aria-hidden=\"true\"></wcs-progress-bar>)}\n            <wcs-button style={{'backgroundColor': 'white'}}\n                        aria-label={step.text}\n                        onClick={_ => onClick(step)}\n                        ref={(el: HTMLWcsButtonElement) => {\n                            active ? el.setAriaAttribute('aria-current', 'step') : el.setAriaAttribute('aria-current', null)\n                        }}\n                        shape=\"round\" mode={(active || complete) && !step.disable ? 'plain' : 'stroked'}\n                        disabled={disable}>\n                {getButtonContent(step.button, checkOnComplete, complete, active)}\n            </wcs-button>\n        </li>\n    );\n}\n\nconst getButtonContent = (stepButton: StepButton, checkOnComplete: boolean, complete: boolean, active: boolean) => {\n    if (checkOnComplete && complete && !active) {\n        return (<wcs-mat-icon size=\"m\" icon=\"done\" family=\"outlined\"></wcs-mat-icon>);\n    }\n    switch (stepButton.kind) {\n        case 'Icon':\n            return (<wcs-mat-icon size=\"m\" icon={stepButton.iconName}\n                                  family={stepButton.family ? stepButton.family : 'outlined'}></wcs-mat-icon>);\n        case 'Text':\n            return (stepButton.text);\n    }\n}\n\n","@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-horizontal-step-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-horizontal-step-text-color-active: var(--wcs-semantic-color-foreground-brand);\n    --wcs-horizontal-step-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n\n    display: block;\n\n    .steps {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n\n        display: flex;\n        flex-direction: row;\n        flex: 1;\n    }\n\n    .graphic-step {\n        display: flex;\n        position: relative;\n        flex-direction: row;\n        flex: 1;\n        align-items: center;\n\n        wcs-button {\n            z-index: 1;\n            mix-blend-mode: darken;\n        }\n    }\n\n    .graphic-step[data-first] {\n        flex: 0;\n    }\n\n    wcs-progress-bar {\n        --wcs-progress-bar-border-radius: 0;\n        flex: 1;\n        margin: 0 -1px;\n    }\n\n    .label-container {\n        justify-content: space-between;\n        display: flex;\n        flex-direction: row;\n        margin-top: var(--wcs-semantic-spacing-base);\n    }\n\n    .label-container > * {\n        width: 100%;\n        text-align: center;\n        flex: 1;\n        color: var(--wcs-horizontal-step-text-color-default);\n        font-weight: 500;\n\n    }\n\n    .label-container > *[data-disable] {\n        color: var(--wcs-horizontal-step-text-color-disabled);\n    }\n\n    .label-container > *[data-current] {\n        color: var(--wcs-horizontal-step-text-color-active);\n    }\n\n    .label-container > div[data-first] {\n        margin-right: calc(var(--wcs-semantic-size-m, 40px) / 2);\n        text-align: left;\n        flex: 0.5;\n    }\n\n    .label-container > div[data-last] {\n        margin-left: calc(var(--wcs-semantic-size-m, 40px) / 2);\n        text-align: right;\n        flex: 0.5;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport { HorizontalStepClickEvent, HorizontalStepConfig, HorizontalStepperMode } from './horizontal-stepper-interface';\nimport { HorizontalStep } from './horizontal-step';\n\n/**\n * The horizontal-stepper is a representation of a user’s progress through a series of discrete steps.\n *\n * @cssprop --wcs-horizontal-step-text-color-default - Text color of the step by default\n * @cssprop --wcs-horizontal-step-text-color-active - Text color of the step when active\n * @cssprop --wcs-horizontal-step-text-color-disabled - Text color of step when disabled\n */\n@Component({\n    tag: 'wcs-horizontal-stepper',\n    styleUrl: 'horizontal-stepper.scss',\n    shadow: true,\n})\nexport class HorizontalStepper implements ComponentInterface {\n    @Element() private el!: HTMLWcsHorizontalStepperElement;\n    /**\n     * index of the active step. The index corresponds to the index of the step in the 'steps' list\n     */\n    @Prop({mutable: true}) currentStep: number = 0;\n    /**\n     * steps to display\n     */\n    @Prop() steps: HorizontalStepConfig[];\n    /**\n     * Specifies if the stepper is in linear mode (the user can only click on the next step)\n     * or non-linear (the user can click on any step)\n     */\n    @Prop() mode: HorizontalStepperMode = 'nonLinear';\n    /**\n     * Specifies whether a check should be displayed when a step is passed.\n     */\n    @Prop({ reflect: true }) checkOnComplete: boolean;\n    /**\n     * Emits when the user selects a new step.\n     */\n    @Event() wcsHorizontalStepClick!: EventEmitter<HorizontalStepClickEvent>\n\n    /**\n     * Used to know which current step index is selected (component internal calculations mainly for the animation)\n     * @private\n     */\n    @State() private internalCurrentStepIndex: number;\n\n    componentWillLoad(): Promise<void> | void {\n        this.internalCurrentStepIndex = this.currentStep;\n        if (this.steps.length < 1) {\n            throw new Error('You must add at least one step');\n        }\n    }\n\n    @Watch('currentStep')\n    onCurrentStepChange(newValue: number, oldValue: number) {\n        //Check if the function is called before the component has finished its initialization in which case we do nothing\n        if (this.internalCurrentStepIndex !== undefined) {\n            const stepInterval = Math.abs(oldValue - newValue);\n            this.el.style.setProperty('--wcs-progress-bar-animation-duration', 350 / stepInterval + 'ms');\n            if (newValue !== oldValue) {\n                for (let i = 0; i < stepInterval; i++) {\n                    setTimeout(() => {\n                        this.internalCurrentStepIndex -= (oldValue - newValue) > 0 ? 1 : -1;\n                        \n                        if (i === stepInterval - 1) {\n                            this.el.style.removeProperty('--wcs-progress-bar-animation-duration');\n                        }\n                    }, (i * (375 / stepInterval)));\n                }\n            }\n        }\n    }\n\n    @Method()\n    async previous() {\n        this.navigateToIndex(this.internalCurrentStepIndex - 1, 'backward');\n    }\n\n    @Method()\n    async next() {\n        this.navigateToIndex(this.internalCurrentStepIndex + 1, 'forward');\n    }\n\n    private navigateToIndex(index: number, direction: 'backward' | 'forward'): void {\n        if (index >= 0 && index <= this.steps.length - 1) {\n            if (this.steps[index]?.complete || this.steps[index]?.disable) {\n                this.navigateToIndex(index + (direction === 'forward' ? 1 : -1), direction)\n            } else {\n                this.currentStep = index;\n            }\n        }\n    }\n\n    render(): any {\n        return (\n            <Host>\n                {/* \n                When using list-style: none in CSS, it removes the semantic of the list in Safari.\n                So we add role=\"list\" manually to provide semantic to screen readers\n                https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html\n                https://css-tricks.com/snippets/css/remove-list-markers-without-affecting-semantics/ \n                */}\n                <ul role=\"list\" class=\"steps\">\n                    {this.steps.map((step: HorizontalStepConfig, index) =>\n                        (<HorizontalStep step={step}\n                                         passed={index <= this.internalCurrentStepIndex}\n                                         checkOnComplete={this.checkOnComplete}\n                                         complete={this.isComplete(step, index)}\n                                         active={index === this.internalCurrentStepIndex}\n                                         first={index === 0}\n                                         disable={this.isDisable(step, index)}\n                                         onClick={step => this.wcsHorizontalStepClick.emit({step, index})}\n                            />\n                        )\n                    )}\n                </ul>\n                {this.renderLabels()}\n            </Host>\n        );\n    }\n\n    private isComplete(step: HorizontalStepConfig, index: number) {\n        return index <= this.internalCurrentStepIndex || step.complete;\n    }\n\n    private renderLabels() {\n        if (this.steps.map(s => s.text).every(s => !s)) {\n            return null;\n        } else {\n            return <div class=\"label-container\" aria-hidden=\"true\">\n                {this.steps.map((step, index) =>\n                    (<div data-first={index === 0} data-current={index === this.internalCurrentStepIndex && !step.disable}\n                          data-disable={this.isDisable(step, index)} data-last={index === this.steps.length - 1}>\n                        <span>{step.text}</span></div>)\n                )}\n            </div>;\n        }\n    }\n\n    private isDisable(step, index) {\n        return step.disable || (this.mode === 'linear' && (!this.isNextPossibleStep(index) && this.internalCurrentStepIndex < index));\n    }\n\n    private isNextPossibleStep(index) {\n        if (index === 0) return true;\n        if (this.steps[index - 1]?.disable || this.previousStepIsCompleteAndNotActive(index)) return this.isNextPossibleStep(index - 1);\n        return this.internalCurrentStepIndex === index - 1;\n    }\n\n    private previousStepIsCompleteAndNotActive(index) {\n        return this.steps[index - 1]?.complete && index - 1 !== this.internalCurrentStepIndex;\n    }\n}\n"],"version":3}
+{"file":"wcs-horizontal-stepper.entry.js","mappings":"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","names":[],"sources":["src/components/horizontal-stepper/horizontal-step.tsx","src/components/horizontal-stepper/horizontal-stepper.scss?tag=wcs-horizontal-stepper&encapsulation=shadow","src/components/horizontal-stepper/horizontal-stepper.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { HorizontalStepConfig, StepButton } from './horizontal-stepper-interface';\n\ninterface HorizontalStepProps {\n    step: HorizontalStepConfig;\n    checkOnComplete: boolean;\n    complete: boolean;\n    passed: boolean;\n    active: boolean;\n    first: boolean;\n    disable: boolean;\n    onClick: (step: HorizontalStepConfig) => void;\n}\n\nexport const HorizontalStep: FunctionalComponent<HorizontalStepProps> = (\n    {\n        step,\n        checkOnComplete,\n        complete,\n        passed,\n        active,\n        first,\n        disable,\n        onClick\n    }) => {\n    return (\n        /*\n        When using list-style: none in CSS, it removes the semantic of the list in Safari.\n        So we add role=\"list\" manually to provide semantic to screen readers\n        https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html\n        https://css-tricks.com/snippets/css/remove-list-markers-without-affecting-semantics/ \n         */\n        <li role=\"listitem\" class=\"graphic-step\" data-first={first}>\n            {first ? null : (<wcs-progress-bar value={passed ? 100 : 0} aria-hidden=\"true\"></wcs-progress-bar>)}\n            <wcs-button style={{'backgroundColor': 'white'}}\n                        aria-label={step.ariaLabel ?? step.text}\n                        onClick={_ => onClick(step)}\n                        ref={(el: HTMLWcsButtonElement) => {\n                            active ? el.setAriaAttribute('aria-current', 'step') : el.setAriaAttribute('aria-current', null)\n                        }}\n                        shape=\"round\" mode={(active || complete) && !step.disable ? 'plain' : 'stroked'}\n                        disabled={disable}>\n                {getButtonContent(step.button, checkOnComplete, complete, active)}\n            </wcs-button>\n        </li>\n    );\n}\n\nconst getButtonContent = (stepButton: StepButton, checkOnComplete: boolean, complete: boolean, active: boolean) => {\n    if (checkOnComplete && complete && !active) {\n        return (<wcs-mat-icon size=\"m\" icon=\"done\" family=\"outlined\"></wcs-mat-icon>);\n    }\n    switch (stepButton.kind) {\n        case 'Icon':\n            return (<wcs-mat-icon size=\"m\" icon={stepButton.iconName}\n                                  family={stepButton.family ? stepButton.family : 'outlined'}></wcs-mat-icon>);\n        case 'Text':\n            return (stepButton.text);\n    }\n}\n\n","@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-horizontal-step-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-horizontal-step-text-color-active: var(--wcs-semantic-color-foreground-brand);\n    --wcs-horizontal-step-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n\n    display: block;\n\n    .steps {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n\n        display: flex;\n        flex-direction: row;\n        flex: 1;\n    }\n\n    .graphic-step {\n        display: flex;\n        position: relative;\n        flex-direction: row;\n        flex: 1;\n        align-items: center;\n\n        wcs-button {\n            z-index: 1;\n            mix-blend-mode: darken;\n        }\n    }\n\n    .graphic-step[data-first] {\n        flex: 0;\n    }\n\n    wcs-progress-bar {\n        --wcs-progress-bar-border-radius: 0;\n        flex: 1;\n        margin: 0 -1px;\n    }\n\n    .label-container {\n        justify-content: space-between;\n        display: flex;\n        flex-direction: row;\n        margin-top: var(--wcs-semantic-spacing-base);\n    }\n\n    .label-container > * {\n        width: 100%;\n        text-align: center;\n        flex: 1;\n        color: var(--wcs-horizontal-step-text-color-default);\n        font-weight: 500;\n\n    }\n\n    .label-container > *[data-disable] {\n        color: var(--wcs-horizontal-step-text-color-disabled);\n    }\n\n    .label-container > *[data-current] {\n        color: var(--wcs-horizontal-step-text-color-active);\n    }\n\n    .label-container > div[data-first] {\n        margin-right: calc(var(--wcs-semantic-size-m, 40px) / 2);\n        text-align: left;\n        flex: 0.5;\n    }\n\n    .label-container > div[data-last] {\n        margin-left: calc(var(--wcs-semantic-size-m, 40px) / 2);\n        text-align: right;\n        flex: 0.5;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport { HorizontalStepClickEvent, HorizontalStepConfig, HorizontalStepperMode } from './horizontal-stepper-interface';\nimport { HorizontalStep } from './horizontal-step';\n\n/**\n * The horizontal-stepper is a representation of a user’s progress through a series of discrete steps.\n *\n * ## Accessibility guidelines 💡\n * > - The `ariaLabel` property is available for every step to provide a more descriptive label for screen readers.\n * > - It is **mandatory** in `linear` mode if the step's content is not descriptive enough (e.g., only a number).\n * \n * @cssprop --wcs-horizontal-step-text-color-default - Text color of the step by default\n * @cssprop --wcs-horizontal-step-text-color-active - Text color of the step when active\n * @cssprop --wcs-horizontal-step-text-color-disabled - Text color of step when disabled\n */\n@Component({\n    tag: 'wcs-horizontal-stepper',\n    styleUrl: 'horizontal-stepper.scss',\n    shadow: true,\n})\nexport class HorizontalStepper implements ComponentInterface {\n    @Element() private el!: HTMLWcsHorizontalStepperElement;\n    /**\n     * index of the active step. The index corresponds to the index of the step in the 'steps' list\n     */\n    @Prop({mutable: true}) currentStep: number = 0;\n    /**\n     * steps to display\n     */\n    @Prop() steps: HorizontalStepConfig[];\n    /**\n     * Specifies if the stepper is in linear mode (the user can only click on the next step)\n     * or non-linear (the user can click on any step)\n     */\n    @Prop() mode: HorizontalStepperMode = 'nonLinear';\n    /**\n     * Specifies whether a check should be displayed when a step is passed.\n     */\n    @Prop({ reflect: true }) checkOnComplete: boolean;\n    /**\n     * Emits when the user selects a new step.\n     */\n    @Event() wcsHorizontalStepClick!: EventEmitter<HorizontalStepClickEvent>\n\n    /**\n     * Used to know which current step index is selected (component internal calculations mainly for the animation)\n     * @private\n     */\n    @State() private internalCurrentStepIndex: number;\n\n    componentWillLoad(): Promise<void> | void {\n        this.internalCurrentStepIndex = this.currentStep;\n        if (this.steps.length < 1) {\n            throw new Error('You must add at least one step');\n        }\n    }\n\n    @Watch('currentStep')\n    onCurrentStepChange(newValue: number, oldValue: number) {\n        //Check if the function is called before the component has finished its initialization in which case we do nothing\n        if (this.internalCurrentStepIndex !== undefined) {\n            const stepInterval = Math.abs(oldValue - newValue);\n            this.el.style.setProperty('--wcs-progress-bar-animation-duration', 350 / stepInterval + 'ms');\n            if (newValue !== oldValue) {\n                for (let i = 0; i < stepInterval; i++) {\n                    setTimeout(() => {\n                        this.internalCurrentStepIndex -= (oldValue - newValue) > 0 ? 1 : -1;\n                        \n                        if (i === stepInterval - 1) {\n                            this.el.style.removeProperty('--wcs-progress-bar-animation-duration');\n                        }\n                    }, (i * (375 / stepInterval)));\n                }\n            }\n        }\n    }\n\n    @Method()\n    async previous() {\n        this.navigateToIndex(this.internalCurrentStepIndex - 1, 'backward');\n    }\n\n    @Method()\n    async next() {\n        this.navigateToIndex(this.internalCurrentStepIndex + 1, 'forward');\n    }\n\n    private navigateToIndex(index: number, direction: 'backward' | 'forward'): void {\n        if (index >= 0 && index <= this.steps.length - 1) {\n            if (this.steps[index]?.complete || this.steps[index]?.disable) {\n                this.navigateToIndex(index + (direction === 'forward' ? 1 : -1), direction)\n            } else {\n                this.currentStep = index;\n            }\n        }\n    }\n\n    render(): any {\n        return (\n            <Host>\n                {/* \n                When using list-style: none in CSS, it removes the semantic of the list in Safari.\n                So we add role=\"list\" manually to provide semantic to screen readers\n                https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html\n                https://css-tricks.com/snippets/css/remove-list-markers-without-affecting-semantics/ \n                */}\n                <ul role=\"list\" class=\"steps\">\n                    {this.steps.map((step: HorizontalStepConfig, index) =>\n                        (<HorizontalStep step={step}\n                                         passed={index <= this.internalCurrentStepIndex}\n                                         checkOnComplete={this.checkOnComplete}\n                                         complete={this.isComplete(step, index)}\n                                         active={index === this.internalCurrentStepIndex}\n                                         first={index === 0}\n                                         disable={this.isDisable(step, index)}\n                                         onClick={step => this.wcsHorizontalStepClick.emit({step, index})}\n                            />\n                        )\n                    )}\n                </ul>\n                {this.renderLabels()}\n            </Host>\n        );\n    }\n\n    private isComplete(step: HorizontalStepConfig, index: number) {\n        return index <= this.internalCurrentStepIndex || step.complete;\n    }\n\n    private renderLabels() {\n        if (this.steps.map(s => s.text).every(s => !s)) {\n            return null;\n        } else {\n            return <div class=\"label-container\" aria-hidden=\"true\">\n                {this.steps.map((step, index) =>\n                    (<div data-first={index === 0} data-current={index === this.internalCurrentStepIndex && !step.disable}\n                          data-disable={this.isDisable(step, index)} data-last={index === this.steps.length - 1}>\n                        <span>{step.text}</span></div>)\n                )}\n            </div>;\n        }\n    }\n\n    private isDisable(step, index) {\n        return step.disable || (this.mode === 'linear' && (!this.isNextPossibleStep(index) && this.internalCurrentStepIndex < index));\n    }\n\n    private isNextPossibleStep(index) {\n        if (index === 0) return true;\n        if (this.steps[index - 1]?.disable || this.previousStepIsCompleteAndNotActive(index)) return this.isNextPossibleStep(index - 1);\n        return this.internalCurrentStepIndex === index - 1;\n    }\n\n    private previousStepIsCompleteAndNotActive(index) {\n        return this.steps[index - 1]?.complete && index - 1 !== this.internalCurrentStepIndex;\n    }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { i as isFocusable, a as isElementFocused } from './accessibility-069640cf.js';
 import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute, n as isTabKey } from './helpers-ece6a2d3.js';
 
-const modalCss = "wcs-modal{--wcs-modal-backdrop-color:var(--wcs-semantic-color-background-backdrop);--wcs-modal-max-height:80%;--wcs-modal-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-modal-border-radius:var(--wcs-semantic-border-radius-base);--wcs-modal-padding:calc(3 * var(--wcs-semantic-spacing-base));--wcs-modal-border-width:var(--wcs-semantic-border-width-default);--wcs-modal-border-color:var(--wcs-semantic-color-border-secondary);--wcs-modal-title-margin-bottom:var(--wcs-semantic-spacing-large);--wcs-modal-title-font-size:var(--wcs-semantic-font-size-heading-4);--wcs-modal-title-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-modal-title-line-height:var(--wcs-semantic-font-line-height-medium);--wcs-modal-actions-margin-top:var(--wcs-semantic-spacing-large);--wcs-modal-width-s:288px;--wcs-modal-width-m:480px;--wcs-modal-width-l:864px;--wcs-modal-width-xl:1200px;z-index:999;position:fixed;top:0;bottom:0;left:0;right:0;display:none;background:var(--wcs-modal-backdrop-color)}wcs-modal[show]{display:flex;height:100vh;width:100vw;align-items:center;justify-content:center}wcs-modal[without-backdrop]{background-color:unset}wcs-modal[without-backdrop] .wcs-modal-container{border:solid var(--wcs-modal-border-width) var(--wcs-modal-border-color)}.wcs-modal-container{max-height:var(--wcs-modal-max-height, 80%);background-color:var(--wcs-modal-background-color);display:grid;grid-template-columns:100%;grid-template-rows:auto 1fr auto;box-sizing:border-box;pointer-events:auto;background-clip:padding-box;border-radius:var(--wcs-modal-border-radius);z-index:20000;padding:var(--wcs-modal-padding);width:var(--wcs-modal-width-m)}.wcs-modal-container[data-size=s]{width:var(--wcs-modal-width-s)}.wcs-modal-container[data-size=m]{width:var(--wcs-modal-width-m)}.wcs-modal-container[data-size=l]{width:var(--wcs-modal-width-l)}.wcs-modal-container[data-size=xl]{width:var(--wcs-modal-width-xl)}.wcs-modal-header{margin-bottom:var(--wcs-modal-title-margin-bottom);display:flex;align-items:center;justify-content:space-between}.wcs-modal-header h1{font-size:var(--wcs-modal-title-font-size);font-weight:var(--wcs-modal-title-font-weight);line-height:var(--wcs-modal-title-line-height);margin:0}.wcs-modal-content{overflow-y:var(--wcs-modal-overflow-y, auto)}.wcs-modal-actions{margin-top:var(--wcs-modal-actions-margin-top);display:flex;justify-content:flex-end}";
+const modalCss = "wcs-modal{--wcs-modal-backdrop-color:var(--wcs-semantic-color-background-backdrop);--wcs-modal-max-height:80%;--wcs-modal-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-modal-border-radius:var(--wcs-semantic-border-radius-base);--wcs-modal-padding:calc(3 * var(--wcs-semantic-spacing-base));--wcs-modal-border-width:var(--wcs-semantic-border-width-default);--wcs-modal-border-color:var(--wcs-semantic-color-border-secondary);--wcs-modal-title-margin-bottom:var(--wcs-semantic-spacing-large);--wcs-modal-title-font-size:var(--wcs-semantic-font-size-heading-4);--wcs-modal-title-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-modal-title-line-height:var(--wcs-semantic-font-line-height-medium);--wcs-modal-actions-margin-top:var(--wcs-semantic-spacing-large);--wcs-modal-width-s:288px;--wcs-modal-width-m:480px;--wcs-modal-width-l:864px;--wcs-modal-width-xl:1200px;z-index:999;position:fixed;top:0;bottom:0;left:0;right:0;display:none;background:var(--wcs-modal-backdrop-color)}wcs-modal[show]{display:flex;height:100vh;width:100vw;align-items:center;justify-content:center}wcs-modal[without-backdrop]{background-color:unset}wcs-modal[without-backdrop] .wcs-modal-container{border:solid var(--wcs-modal-border-width) var(--wcs-modal-border-color)}wcs-modal[hide-actions] .wcs-modal-actions{display:none}.wcs-modal-container{max-height:var(--wcs-modal-max-height, 80%);background-color:var(--wcs-modal-background-color);display:grid;grid-template-columns:100%;grid-template-rows:auto 1fr auto;box-sizing:border-box;pointer-events:auto;background-clip:padding-box;border-radius:var(--wcs-modal-border-radius);z-index:20000;padding:var(--wcs-modal-padding);width:var(--wcs-modal-width-m)}.wcs-modal-container[data-size=s]{width:var(--wcs-modal-width-s)}.wcs-modal-container[data-size=m]{width:var(--wcs-modal-width-m)}.wcs-modal-container[data-size=l]{width:var(--wcs-modal-width-l)}.wcs-modal-container[data-size=xl]{width:var(--wcs-modal-width-xl)}.wcs-modal-header{margin-bottom:var(--wcs-modal-title-margin-bottom);display:flex;align-items:center;justify-content:space-between}.wcs-modal-header h1{font-size:var(--wcs-modal-title-font-size);font-weight:var(--wcs-modal-title-font-weight);line-height:var(--wcs-modal-title-line-height);margin:0}.wcs-modal-content{overflow-y:var(--wcs-modal-overflow-y, auto)}.wcs-modal-actions{margin-top:var(--wcs-modal-actions-margin-top);display:flex;justify-content:flex-end}";
 const WcsModalStyle0 = modalCss;
 
 const MODAL_INHERITED_ATTRS = [];
@@ -135,7 +135,7 @@ const Modal = class {
     }
     render() {
         const modalTitleId = `wcs-modal-title-${this.modalId}`;
-        return (h(Host, { key: 'e609fe2024b73cab0bed97c0d3b7012d8deba893' }, h("div", Object.assign({ key: '23007c4ad4971263f7fd99d0e594216cd112f6ea', class: "wcs-modal-container", "data-size": this.size, "aria-modal": "true", role: "dialog", "aria-labelledby": modalTitleId, ref: (el) => (this.nativeDivDialog = el) }, this.inheritedAttributes), h("div", { key: 'bc3e2ead8e3e73da31882c5e87cde2780d9ef2f9', class: "wcs-modal-header" }, h("h1", { key: '87561fc92b0990d00e06463afc111e9bdeab6f20', id: modalTitleId }, h("slot", { key: 'dbf6d932257e7a264206ddf7caea8a80e4b2b069', name: "header" })), this.showCloseButton && (h("wcs-button", { key: '97036ea40d111c5ac737b1e3f789571cd524cb2d', shape: "round", mode: "clear", id: "wcs-modal-close-button", "aria-label": this.closeButtonAriaLabel, onClick: ($event) => this.onCloseButtonClick($event) }, h("wcs-mat-icon", { key: '24d6b531e788c2760c66804df96037714c9f854b', icon: "close" })))), h("div", { key: '34d9ddf3c4527395864a238f329d7b499eb9791b', class: "wcs-modal-content" }, h("slot", { key: '5bbd76fc7de9bc6f5aaec7257e7c73995d3e1447', onSlotchange: () => this.handleSlotContentChange() })), !this.hideActions && (h("div", { key: '0c082f533dd77e73721b3bcf29a6f3d3baac65b3', class: "wcs-modal-actions" }, h("slot", { key: '56bfb65b4784492747eda2f5eb87b29dc7704db3', name: "actions" }))))));
+        return (h(Host, { key: 'e609fe2024b73cab0bed97c0d3b7012d8deba893' }, h("div", Object.assign({ key: '23007c4ad4971263f7fd99d0e594216cd112f6ea', class: "wcs-modal-container", "data-size": this.size, "aria-modal": "true", role: "dialog", "aria-labelledby": modalTitleId, ref: (el) => (this.nativeDivDialog = el) }, this.inheritedAttributes), h("div", { key: 'bc3e2ead8e3e73da31882c5e87cde2780d9ef2f9', class: "wcs-modal-header" }, h("h1", { key: '87561fc92b0990d00e06463afc111e9bdeab6f20', id: modalTitleId }, h("slot", { key: 'dbf6d932257e7a264206ddf7caea8a80e4b2b069', name: "header" })), this.showCloseButton && (h("wcs-button", { key: '97036ea40d111c5ac737b1e3f789571cd524cb2d', shape: "round", mode: "clear", id: "wcs-modal-close-button", "aria-label": this.closeButtonAriaLabel, onClick: ($event) => this.onCloseButtonClick($event) }, h("wcs-mat-icon", { key: '24d6b531e788c2760c66804df96037714c9f854b', icon: "close" })))), h("div", { key: '34d9ddf3c4527395864a238f329d7b499eb9791b', class: "wcs-modal-content" }, h("slot", { key: '5bbd76fc7de9bc6f5aaec7257e7c73995d3e1447', onSlotchange: () => this.handleSlotContentChange() })), h("div", { key: '7c332e9d1c1b19b65fabb6f52bc14ab0ed9f4803', class: "wcs-modal-actions" }, h("slot", { key: '4c44f2337893ba9e8c852a1b8b16beab9da87e4e', name: "actions" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/wcs-modal.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-modal.entry.js","mappings":"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","names":[],"sources":["src/components/modal/modal.scss?tag=wcs-modal","src/components/modal/modal.tsx"],"sourcesContent":["wcs-modal {\n    --wcs-modal-backdrop-color: var(--wcs-semantic-color-background-backdrop);\n    --wcs-modal-max-height: 80%;\n    --wcs-modal-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-modal-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-modal-padding: calc(3 * var(--wcs-semantic-spacing-base));\n    --wcs-modal-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-modal-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-modal-title-margin-bottom: var(--wcs-semantic-spacing-large);\n    --wcs-modal-title-font-size: var(--wcs-semantic-font-size-heading-4);\n    --wcs-modal-title-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-modal-title-line-height: var(--wcs-semantic-font-line-height-medium);\n    --wcs-modal-actions-margin-top: var(--wcs-semantic-spacing-large);\n\n    // Specific component level tokens\n    --wcs-modal-width-s: 288px;\n    --wcs-modal-width-m: 480px;\n    --wcs-modal-width-l: 864px;\n    --wcs-modal-width-xl: 1200px;\n\n    z-index: 999;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: none;\n    background: var(--wcs-modal-backdrop-color);\n}\n\nwcs-modal[show] {\n    display: flex;\n    height: 100vh;\n    width: 100vw;\n    align-items: center;\n    justify-content: center;\n}\n\n/**\nBackdrop\n */\nwcs-modal[without-backdrop] {\n    background-color: unset;\n\n    .wcs-modal-container {\n        border: solid var(--wcs-modal-border-width) var(--wcs-modal-border-color);\n    }\n}\n\n/**\nModal window\n */\n.wcs-modal-container {\n    max-height: var(--wcs-modal-max-height, 80%);\n    background-color: var(--wcs-modal-background-color);\n    display: grid;\n    grid-template-columns: 100%;\n    grid-template-rows: auto 1fr auto;\n    box-sizing: border-box;\n    pointer-events: auto;\n    background-clip: padding-box;\n    border-radius: var(--wcs-modal-border-radius);\n    z-index: 20000;\n    padding: var(--wcs-modal-padding);\n\n    width: var(--wcs-modal-width-m); // Default size\n}\n\n.wcs-modal-container[data-size=s] {\n    width: var(--wcs-modal-width-s);\n}\n\n.wcs-modal-container[data-size=m] {\n    width: var(--wcs-modal-width-m);\n}\n\n.wcs-modal-container[data-size=l] {\n    width: var(--wcs-modal-width-l);\n}\n\n.wcs-modal-container[data-size=xl] {\n    width: var(--wcs-modal-width-xl);\n}\n\n.wcs-modal-header {\n    /* h1 for semantic but h3 for style */\n    h1 {\n        font-size: var(--wcs-modal-title-font-size);\n        font-weight: var(--wcs-modal-title-font-weight);\n        line-height: var(--wcs-modal-title-line-height);\n        margin: 0;\n    }\n\n    margin-bottom: var(--wcs-modal-title-margin-bottom);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.wcs-modal-content {\n    overflow-y: var(--wcs-modal-overflow-y, auto);\n}\n\n.wcs-modal-actions {\n    margin-top: var(--wcs-modal-actions-margin-top);\n    display: flex;\n    justify-content: flex-end;\n}\n","import {\n    Element,\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    ComponentInterface,\n    Watch, Method\n} from '@stencil/core';\nimport { ModalSize } from './modal-interface';\nimport { isElementFocused, isFocusable } from \"../../utils/accessibility\";\nimport { inheritAriaAttributes, inheritAttributes, isTabKey, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst MODAL_INHERITED_ATTRS = [];\n\n/**\n * The modal component (also named dialog or popup) is an interface element that appears on top of the page content.\n * Use it to show a message, a confirmation dialog, or any other content like forms.\n *\n * ## Accessibility guidelines 💡\n * > - Modal element has `role=\"dialog\"` and `aria-modal=\"true\"`\n * > - Keyboard navigation is trapped inside the modal\n * > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order\n * > to focus it upon dialog dismissal.\n * > - On modal opening, the default behaviour is to focus the first focusable element. If you want to change the initial \n * > behaviour, you have to use `modal-element-id-to-focus-on-opening` attribute to set the id of the inner modal element you \n * > want to focus. You will see a story as example below\n * > - The modal can be closed at any time by pressing the Escape key.\n * >\n * > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n *\n * @cssprop --wcs-modal-max-height - Max height of the main container\n * @cssprop --wcs-modal-overflow-y - Overflow-y of the content\n *\n * @cssprop --wcs-modal-backdrop-color - Backdrop color of the modal\n * @cssprop --wcs-modal-max-height - Max height of the main container\n * @cssprop --wcs-modal-background-color - Background color of the modal\n * @cssprop --wcs-modal-border-radius - Border radius of the modal\n * @cssprop --wcs-modal-padding - Padding inside the modal\n * @cssprop --wcs-modal-border-width - Border width of the modal\n * @cssprop --wcs-modal-border-color - Border color of the modal\n * @cssprop --wcs-modal-title-margin-bottom - Margin bottom of the modal title\n * @cssprop --wcs-modal-title-font-size - Font size of the modal title\n * @cssprop --wcs-modal-title-font-weight - Font weight of the modal title\n * @cssprop --wcs-modal-title-line-height - Line height of the modal title\n * @cssprop --wcs-modal-actions-margin-top - Margin top of the modal actions\n * @cssprop --wcs-modal-width-s - Width of the modal for size small\n * @cssprop --wcs-modal-width-m - Width of the modal for size medium\n * @cssprop --wcs-modal-width-l - Width of the modal for size large\n * @cssprop --wcs-modal-width-xl - Width of the modal for size extra large\n * \n * @slot <no-name> Main container slot\n * @slot header Header container slot (for title)\n * @slot actions Actions container slot (for buttons)\n */\n@Component({\n    tag: 'wcs-modal',\n    styleUrl: 'modal.scss',\n    shadow: false,\n})\nexport class Modal implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLElement;\n    private nativeDivDialog!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Specifies whether the component should display a backdrop on the entire page\n     */\n    @Prop({reflect: true}) withoutBackdrop: boolean = false;\n\n    /**\n     * Displays the modal\n     */\n    @Prop({reflect: true, mutable: true}) show: boolean = false;\n\n    /**\n     * Triggered when the user leaves the dialog with the closing button.\n     */\n    @Event() wcsDialogClosed: EventEmitter<void>;\n\n    /**\n     * Specifies whether the component should display a close button.\n     * if false, it won't close the modal when the escape key is pressed.\n     */\n    @Prop({reflect: true}) showCloseButton: boolean = false;\n\n    /**\n     * Specifies the aria-label present on the close button when the modal is opened.  \n     * Only use when `showCloseButton` is `true`.\n     */\n    @Prop() closeButtonAriaLabel: string = 'Fermer';\n\n    /**\n     * There are multiple sizes for modals. The default size is medium (m), however other sizes are available. Select the\n     * size best suited for the content and screen size displaying the modal. Remember to test responsiveness.\n     */\n    @Prop() size: ModalSize = 'm';\n\n    /**\n     * Specifies whether the component should hide the actions slot or not\n     */\n    @Prop({reflect: true}) hideActions: boolean = false;\n\n    /**\n     * Specifies which element id controls the modal\n     * @private\n     */\n    @Prop() modalTriggerControlsId: string;\n    /**\n     * The ID of the element to automatically focus when the modal opens.\n     * \n     * If this property is not set and `disableAutoFocus` is false, the modal will\n     * automatically focus the first focusable element within its content.\n     * This follows accessibility best practices by ensuring keyboard navigation\n     * starts from a logical point when the modal opens.\n     * \n     * @example\n     * <wcs-modal initial-focus-element=\"cancel-button\"></wcs-modal>\n     */\n    @Prop() initialFocusElementId?: string = undefined;\n\n    /**\n     * Disables automatic focus behavior when the modal opens.\n     * \n     * When set to true, the modal will not automatically focus any element upon opening.\n     * Use this property with caution, as managing focus is important for accessibility.\n     * Consider providing an alternative focus management strategy if disabling the default behavior.\n     */\n    @Prop({ reflect: true }) disableAutoFocus: boolean = false;\n\n    /**\n     * Give an unique id\n     * @private\n     */\n    private modalId: number = modalIds++;\n\n    private firstFocusableElement: HTMLElement;\n    private lastFocusableElement: HTMLElement;\n    /**\n     * This attribute is used to determine whether the show attribute has changed since the last rendering. \n     * This allows us to call the focus method on the first element of the modal when the show attribute changes to true. \n     * This call is made in the componentDidRender method\n     * @private\n     */\n    private showAttributeChangedMarker: boolean = false;\n    /**\n     * This attribute is used to determine if the modal has been closed for the first time since its last activation.\n     * It is set to 'true' when the modal is first closed, and will be reset to 'false' when the modal is shown again.\n     * This state is important for accessibility reasons in order to focus the modal trigger element (like the button \n     * which controls the modal)\n     *\n     * @private\n     */\n    private hasBeenClosedBefore: boolean = false;\n\n    componentWillLoad(): Promise<void> | void {\n        if (!this.modalTriggerControlsId) {\n            console.warn('wcs-modal: You must provide the modal-trigger-controls-id attribute to the modal to make it to work properly');\n        }\n\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, MODAL_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.updateFocusableElements();\n    }\n\n    componentDidRender() {\n        this.updateFocusableElements();\n        if (this.showAttributeChangedMarker) {\n            this.showAttributeChangedMarker = false;\n            \n            if(this.disableAutoFocus) {\n                return;\n            }\n            \n            if(!this.initialFocusElementId) {\n                this.firstFocusableElement?.focus();\n            } else {\n                const modalElementToFocusOnOpening = document.getElementById(this.initialFocusElementId);\n                if(!modalElementToFocusOnOpening) {\n                    console.warn(`wcs-modal: Unable to focus element - ID '${this.initialFocusElementId}' not found in DOM`);\n                }\n                \n                modalElementToFocusOnOpening?.focus();\n            }\n        }\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeDivDialog, attr, value);\n    }\n    \n    @Watch(\"show\")\n    onShowChange() {\n        if(this.show) {\n            this.hasBeenClosedBefore = false;\n            this.showAttributeChangedMarker = true;\n        } else {\n            // if we already made actions when the modal was firstly closed, we do nothing\n            if(this.hasBeenClosedBefore) {\n                return;\n            }\n            \n            this.hasBeenClosedBefore = true;\n\n            if(this.modalTriggerControlsId) {\n                const modalTriggerControlsHtmlElement = document.getElementById(this.modalTriggerControlsId);\n                if(!modalTriggerControlsHtmlElement) {\n                    console.warn(`wcs-modal: Element with id '${this.modalTriggerControlsId}' could not be found`);\n                }\n                modalTriggerControlsHtmlElement?.focus();\n            }\n        }\n    }\n\n    private updateFocusableElements() {\n        const focusableElements = Array.from(this.el.querySelectorAll('*'))\n            .filter(element => isFocusable(element));\n\n        this.firstFocusableElement = focusableElements.length > 0 && focusableElements[0] as HTMLElement;\n        this.lastFocusableElement = focusableElements.length > 0 && focusableElements[focusableElements.length - 1] as HTMLElement;\n    }\n    \n    private close() {\n        // If the modal isn't shown, we don't do anything\n        if (this.show) {\n            this.show = false;\n            this.wcsDialogClosed.emit();\n        }\n    }\n\n    @Listen('keydown', {target: 'document'})\n    onKeyDown(event: KeyboardEvent) {\n        if (this.show && this.showCloseButton && event.key === 'Escape') {\n            this.close();\n        }\n\n        if (this.show) {\n            if (isTabKey(event)) {\n                this.updateFocusableElements(); // XXX: maybe a performance issue\n                const firstElement = this.firstFocusableElement;\n                const lastElement = this.lastFocusableElement;\n\n                if (event.shiftKey && isElementFocused(firstElement)) {\n                    event.preventDefault();\n                    lastElement.focus();\n                } else if (!event.shiftKey && isElementFocused(lastElement)) {\n                    event.preventDefault();\n                    firstElement.focus();\n                }\n            }\n        }\n    }\n\n    private onCloseButtonClick(_: MouseEvent) {\n        this.close();\n    }\n\n    private handleSlotContentChange() {\n        this.updateFocusableElements();\n    }\n\n    render() {\n        const modalTitleId = `wcs-modal-title-${this.modalId}`;\n        return (\n            <Host>\n                <div class=\"wcs-modal-container\"\n                     data-size={this.size}\n                     aria-modal=\"true\"\n                     role={\"dialog\"}\n                     aria-labelledby={modalTitleId}\n                     ref={(el) => (this.nativeDivDialog = el)}\n                     {...this.inheritedAttributes}\n                >\n                    <div class=\"wcs-modal-header\">\n                        <h1 id={modalTitleId}>\n                            <slot name=\"header\"></slot>\n                        </h1>\n                        {this.showCloseButton && (\n                            <wcs-button shape=\"round\" \n                                        mode=\"clear\" \n                                        id=\"wcs-modal-close-button\"\n                                        aria-label={this.closeButtonAriaLabel}\n                                        onClick={($event) => this.onCloseButtonClick($event)}>\n                                <wcs-mat-icon icon=\"close\"></wcs-mat-icon>\n                            </wcs-button>)\n                        }\n\n                    </div>\n                    <div class=\"wcs-modal-content\">\n                        <slot onSlotchange={() => this.handleSlotContentChange()}></slot>\n                    </div>\n                    {!this.hideActions && (\n                        <div class=\"wcs-modal-actions\">\n                            <slot name=\"actions\"></slot>\n                        </div>)\n                    }\n                </div>\n            </Host>\n        );\n    }\n}\n\nlet modalIds = 0;\n"],"version":3}
+{"file":"wcs-modal.entry.js","mappings":"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","names":[],"sources":["src/components/modal/modal.scss?tag=wcs-modal","src/components/modal/modal.tsx"],"sourcesContent":["wcs-modal {\n    --wcs-modal-backdrop-color: var(--wcs-semantic-color-background-backdrop);\n    --wcs-modal-max-height: 80%;\n    --wcs-modal-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-modal-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-modal-padding: calc(3 * var(--wcs-semantic-spacing-base));\n    --wcs-modal-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-modal-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-modal-title-margin-bottom: var(--wcs-semantic-spacing-large);\n    --wcs-modal-title-font-size: var(--wcs-semantic-font-size-heading-4);\n    --wcs-modal-title-font-weight: var(--wcs-semantic-font-weight-heavy);\n    --wcs-modal-title-line-height: var(--wcs-semantic-font-line-height-medium);\n    --wcs-modal-actions-margin-top: var(--wcs-semantic-spacing-large);\n\n    // Specific component level tokens\n    --wcs-modal-width-s: 288px;\n    --wcs-modal-width-m: 480px;\n    --wcs-modal-width-l: 864px;\n    --wcs-modal-width-xl: 1200px;\n\n    z-index: 999;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: none;\n    background: var(--wcs-modal-backdrop-color);\n}\n\nwcs-modal[show] {\n    display: flex;\n    height: 100vh;\n    width: 100vw;\n    align-items: center;\n    justify-content: center;\n}\n\n/**\nBackdrop\n */\nwcs-modal[without-backdrop] {\n    background-color: unset;\n\n    .wcs-modal-container {\n        border: solid var(--wcs-modal-border-width) var(--wcs-modal-border-color);\n    }\n}\n\nwcs-modal[hide-actions] {\n    .wcs-modal-actions {\n        display: none;\n    }\n}\n\n/**\nModal window\n */\n.wcs-modal-container {\n    max-height: var(--wcs-modal-max-height, 80%);\n    background-color: var(--wcs-modal-background-color);\n    display: grid;\n    grid-template-columns: 100%;\n    grid-template-rows: auto 1fr auto;\n    box-sizing: border-box;\n    pointer-events: auto;\n    background-clip: padding-box;\n    border-radius: var(--wcs-modal-border-radius);\n    z-index: 20000;\n    padding: var(--wcs-modal-padding);\n\n    width: var(--wcs-modal-width-m); // Default size\n}\n\n.wcs-modal-container[data-size=s] {\n    width: var(--wcs-modal-width-s);\n}\n\n.wcs-modal-container[data-size=m] {\n    width: var(--wcs-modal-width-m);\n}\n\n.wcs-modal-container[data-size=l] {\n    width: var(--wcs-modal-width-l);\n}\n\n.wcs-modal-container[data-size=xl] {\n    width: var(--wcs-modal-width-xl);\n}\n\n.wcs-modal-header {\n    /* h1 for semantic but h3 for style */\n    h1 {\n        font-size: var(--wcs-modal-title-font-size);\n        font-weight: var(--wcs-modal-title-font-weight);\n        line-height: var(--wcs-modal-title-line-height);\n        margin: 0;\n    }\n\n    margin-bottom: var(--wcs-modal-title-margin-bottom);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.wcs-modal-content {\n    overflow-y: var(--wcs-modal-overflow-y, auto);\n}\n\n.wcs-modal-actions {\n    margin-top: var(--wcs-modal-actions-margin-top);\n    display: flex;\n    justify-content: flex-end;\n}\n","import {\n    Element,\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    ComponentInterface,\n    Watch, Method\n} from '@stencil/core';\nimport { ModalSize } from './modal-interface';\nimport { isElementFocused, isFocusable } from \"../../utils/accessibility\";\nimport { inheritAriaAttributes, inheritAttributes, isTabKey, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst MODAL_INHERITED_ATTRS = [];\n\n/**\n * The modal component (also named dialog or popup) is an interface element that appears on top of the page content.\n * Use it to show a message, a confirmation dialog, or any other content like forms.\n *\n * ## Accessibility guidelines 💡\n * > - Modal element has `role=\"dialog\"` and `aria-modal=\"true\"`\n * > - Keyboard navigation is trapped inside the modal\n * > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order\n * > to focus it upon dialog dismissal.\n * > - On modal opening, the default behaviour is to focus the first focusable element. If you want to change the initial \n * > behaviour, you have to use `modal-element-id-to-focus-on-opening` attribute to set the id of the inner modal element you \n * > want to focus. You will see a story as example below\n * > - The modal can be closed at any time by pressing the Escape key.\n * >\n * > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n *\n * @cssprop --wcs-modal-max-height - Max height of the main container\n * @cssprop --wcs-modal-overflow-y - Overflow-y of the content\n *\n * @cssprop --wcs-modal-backdrop-color - Backdrop color of the modal\n * @cssprop --wcs-modal-max-height - Max height of the main container\n * @cssprop --wcs-modal-background-color - Background color of the modal\n * @cssprop --wcs-modal-border-radius - Border radius of the modal\n * @cssprop --wcs-modal-padding - Padding inside the modal\n * @cssprop --wcs-modal-border-width - Border width of the modal\n * @cssprop --wcs-modal-border-color - Border color of the modal\n * @cssprop --wcs-modal-title-margin-bottom - Margin bottom of the modal title\n * @cssprop --wcs-modal-title-font-size - Font size of the modal title\n * @cssprop --wcs-modal-title-font-weight - Font weight of the modal title\n * @cssprop --wcs-modal-title-line-height - Line height of the modal title\n * @cssprop --wcs-modal-actions-margin-top - Margin top of the modal actions\n * @cssprop --wcs-modal-width-s - Width of the modal for size small\n * @cssprop --wcs-modal-width-m - Width of the modal for size medium\n * @cssprop --wcs-modal-width-l - Width of the modal for size large\n * @cssprop --wcs-modal-width-xl - Width of the modal for size extra large\n * \n * @slot <no-name> Main container slot\n * @slot header Header container slot (for title)\n * @slot actions Actions container slot (for buttons)\n */\n@Component({\n    tag: 'wcs-modal',\n    styleUrl: 'modal.scss',\n    shadow: false,\n})\nexport class Modal implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLElement;\n    private nativeDivDialog!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Specifies whether the component should display a backdrop on the entire page\n     */\n    @Prop({reflect: true}) withoutBackdrop: boolean = false;\n\n    /**\n     * Displays the modal\n     */\n    @Prop({reflect: true, mutable: true}) show: boolean = false;\n\n    /**\n     * Triggered when the user leaves the dialog with the closing button.\n     */\n    @Event() wcsDialogClosed: EventEmitter<void>;\n\n    /**\n     * Specifies whether the component should display a close button.\n     * if false, it won't close the modal when the escape key is pressed.\n     */\n    @Prop({reflect: true}) showCloseButton: boolean = false;\n\n    /**\n     * Specifies the aria-label present on the close button when the modal is opened.  \n     * Only use when `showCloseButton` is `true`.\n     */\n    @Prop() closeButtonAriaLabel: string = 'Fermer';\n\n    /**\n     * There are multiple sizes for modals. The default size is medium (m), however other sizes are available. Select the\n     * size best suited for the content and screen size displaying the modal. Remember to test responsiveness.\n     */\n    @Prop() size: ModalSize = 'm';\n\n    /**\n     * Specifies whether the component should hide the actions slot or not\n     */\n    @Prop({reflect: true}) hideActions: boolean = false;\n\n    /**\n     * Specifies which element id controls the modal\n     * @private\n     */\n    @Prop() modalTriggerControlsId: string;\n    /**\n     * The ID of the element to automatically focus when the modal opens.\n     * \n     * If this property is not set and `disableAutoFocus` is false, the modal will\n     * automatically focus the first focusable element within its content.\n     * This follows accessibility best practices by ensuring keyboard navigation\n     * starts from a logical point when the modal opens.\n     * \n     * @example\n     * <wcs-modal initial-focus-element=\"cancel-button\"></wcs-modal>\n     */\n    @Prop() initialFocusElementId?: string = undefined;\n\n    /**\n     * Disables automatic focus behavior when the modal opens.\n     * \n     * When set to true, the modal will not automatically focus any element upon opening.\n     * Use this property with caution, as managing focus is important for accessibility.\n     * Consider providing an alternative focus management strategy if disabling the default behavior.\n     */\n    @Prop({ reflect: true }) disableAutoFocus: boolean = false;\n\n    /**\n     * Give an unique id\n     * @private\n     */\n    private modalId: number = modalIds++;\n\n    private firstFocusableElement: HTMLElement;\n    private lastFocusableElement: HTMLElement;\n    /**\n     * This attribute is used to determine whether the show attribute has changed since the last rendering. \n     * This allows us to call the focus method on the first element of the modal when the show attribute changes to true. \n     * This call is made in the componentDidRender method\n     * @private\n     */\n    private showAttributeChangedMarker: boolean = false;\n    /**\n     * This attribute is used to determine if the modal has been closed for the first time since its last activation.\n     * It is set to 'true' when the modal is first closed, and will be reset to 'false' when the modal is shown again.\n     * This state is important for accessibility reasons in order to focus the modal trigger element (like the button \n     * which controls the modal)\n     *\n     * @private\n     */\n    private hasBeenClosedBefore: boolean = false;\n\n    componentWillLoad(): Promise<void> | void {\n        if (!this.modalTriggerControlsId) {\n            console.warn('wcs-modal: You must provide the modal-trigger-controls-id attribute to the modal to make it to work properly');\n        }\n\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, MODAL_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.updateFocusableElements();\n    }\n\n    componentDidRender() {\n        this.updateFocusableElements();\n        if (this.showAttributeChangedMarker) {\n            this.showAttributeChangedMarker = false;\n            \n            if(this.disableAutoFocus) {\n                return;\n            }\n            \n            if(!this.initialFocusElementId) {\n                this.firstFocusableElement?.focus();\n            } else {\n                const modalElementToFocusOnOpening = document.getElementById(this.initialFocusElementId);\n                if(!modalElementToFocusOnOpening) {\n                    console.warn(`wcs-modal: Unable to focus element - ID '${this.initialFocusElementId}' not found in DOM`);\n                }\n                \n                modalElementToFocusOnOpening?.focus();\n            }\n        }\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeDivDialog, attr, value);\n    }\n    \n    @Watch(\"show\")\n    onShowChange() {\n        if(this.show) {\n            this.hasBeenClosedBefore = false;\n            this.showAttributeChangedMarker = true;\n        } else {\n            // if we already made actions when the modal was firstly closed, we do nothing\n            if(this.hasBeenClosedBefore) {\n                return;\n            }\n            \n            this.hasBeenClosedBefore = true;\n\n            if(this.modalTriggerControlsId) {\n                const modalTriggerControlsHtmlElement = document.getElementById(this.modalTriggerControlsId);\n                if(!modalTriggerControlsHtmlElement) {\n                    console.warn(`wcs-modal: Element with id '${this.modalTriggerControlsId}' could not be found`);\n                }\n                modalTriggerControlsHtmlElement?.focus();\n            }\n        }\n    }\n\n    private updateFocusableElements() {\n        const focusableElements = Array.from(this.el.querySelectorAll('*'))\n            .filter(element => isFocusable(element));\n\n        this.firstFocusableElement = focusableElements.length > 0 && focusableElements[0] as HTMLElement;\n        this.lastFocusableElement = focusableElements.length > 0 && focusableElements[focusableElements.length - 1] as HTMLElement;\n    }\n    \n    private close() {\n        // If the modal isn't shown, we don't do anything\n        if (this.show) {\n            this.show = false;\n            this.wcsDialogClosed.emit();\n        }\n    }\n\n    @Listen('keydown', {target: 'document'})\n    onKeyDown(event: KeyboardEvent) {\n        if (this.show && this.showCloseButton && event.key === 'Escape') {\n            this.close();\n        }\n\n        if (this.show) {\n            if (isTabKey(event)) {\n                this.updateFocusableElements(); // XXX: maybe a performance issue\n                const firstElement = this.firstFocusableElement;\n                const lastElement = this.lastFocusableElement;\n\n                if (event.shiftKey && isElementFocused(firstElement)) {\n                    event.preventDefault();\n                    lastElement.focus();\n                } else if (!event.shiftKey && isElementFocused(lastElement)) {\n                    event.preventDefault();\n                    firstElement.focus();\n                }\n            }\n        }\n    }\n\n    private onCloseButtonClick(_: MouseEvent) {\n        this.close();\n    }\n\n    private handleSlotContentChange() {\n        this.updateFocusableElements();\n    }\n\n    render() {\n        const modalTitleId = `wcs-modal-title-${this.modalId}`;\n        return (\n            <Host>\n                <div class=\"wcs-modal-container\"\n                     data-size={this.size}\n                     aria-modal=\"true\"\n                     role={\"dialog\"}\n                     aria-labelledby={modalTitleId}\n                     ref={(el) => (this.nativeDivDialog = el)}\n                     {...this.inheritedAttributes}\n                >\n                    <div class=\"wcs-modal-header\">\n                        <h1 id={modalTitleId}>\n                            <slot name=\"header\"></slot>\n                        </h1>\n                        {this.showCloseButton && (\n                            <wcs-button shape=\"round\" \n                                        mode=\"clear\" \n                                        id=\"wcs-modal-close-button\"\n                                        aria-label={this.closeButtonAriaLabel}\n                                        onClick={($event) => this.onCloseButtonClick($event)}>\n                                <wcs-mat-icon icon=\"close\"></wcs-mat-icon>\n                            </wcs-button>)\n                        }\n\n                    </div>\n                    <div class=\"wcs-modal-content\">\n                        <slot onSlotchange={() => this.handleSlotContentChange()}></slot>\n                    </div>\n                    <div class=\"wcs-modal-actions\">\n                        <slot name=\"actions\"></slot>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\nlet modalIds = 0;\n"],"version":3}

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

@@ -4,7 +4,7 @@ import { A as generateUniqueId, B as compareLists, t as findItemLabel, i as inhe
 import { k as keyboardShortcutFromKeyboardEvent } from './keyboard-event-26b65ae5.js';
 import { i as isFocusable } from './accessibility-069640cf.js';
 import { w as isEqual } from './isEqual-f2a07f4c.js';
-import { c as createPopper } from './popper-e491c314.js';
+import { c as createPopper } from './popper-ac238961.js';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -2721,7 +2721,13 @@ function () {
 
 
     scheduler.schedule(function () {
-      // it feels weird to handle this here but we need to handle this even slightly "out of band"
+      var _a;
+
+      if ((_a = _this._state) === null || _a === void 0 ? void 0 : _a.done) {
+        return;
+      } // it feels weird to handle this here but we need to handle this even slightly "out of band"
+
+
       var _event = toSCXMLEvent({
         type: 'xstate.stop'
       });
@@ -5352,7 +5358,7 @@ const Select = class {
      * @param resetIfNoValue - When true and no value is provided, the select component will be reset
      *                        Defaults to true
      */
-    updateSelectedValue(value, resetIfNoValue = true) {
+    updateSelectedValue(value, resetIfNoValue = true, shouldEmitFilterChangeEvent = true) {
         var _a;
         // If no value is passed, the select is reset.
         if (!value && resetIfNoValue) {
@@ -5419,17 +5425,26 @@ const Select = class {
                 : undefined;
         }
         else {
+            let hasFoundCurrentValueInOptionList = false;
             this.options.forEach((opt) => {
                 const isSelected = this.compareWith(opt.value, value);
                 if (isSelected) {
+                    hasFoundCurrentValueInOptionList = true;
                     this.displayText = opt.innerText;
                     this.lastModifiedOptionElement = opt;
                     if (this.autocomplete) {
-                        this.setAutocompleteValue(opt.innerText);
+                        this.setAutocompleteValue(opt.innerText, false, false, shouldEmitFilterChangeEvent);
                     }
                 }
                 opt.selected = isSelected;
             });
+            // we are in server mode and the current select value hasn't been found, we set the AutocompleteValue (filter) to undefined
+            // This is important to preserve the same state logic as when a value change and we set the filter to that value
+            // Not doing that implies the displayText is not updated because of the check in le slot change handler
+            if (this.serverMode && !hasFoundCurrentValueInOptionList) {
+                this.setAutocompleteValue('', false, false, shouldEmitFilterChangeEvent);
+                this.displayText = '';
+            }
         }
     }
     /**
@@ -5602,6 +5617,9 @@ const Select = class {
                             }
                             this.focused = true;
                         }
+                        if (this.autocomplete && this.displayText && this.multiple === false) {
+                            this.setAutocompleteValue(this.displayText);
+                        }
                     }
                     this.expanded = false;
                 },
@@ -5621,7 +5639,8 @@ const Select = class {
                                 });
                             }
                             else {
-                                this.autocompleteValue = event.value.option.displayText;
+                                // Emit the filter change immediately so that server-side filtering can refresh options.
+                                this.setAutocompleteValue(event.value.option.displayText);
                             }
                         }
                         this.emitChange(this.value);
@@ -5737,7 +5756,7 @@ const Select = class {
                 }
                 break;
             case "ClearAutocompleteInput":
-                this.autocompleteValue = '';
+                this.setAutocompleteValue('', false, false);
                 break;
             case "ClearHighlight":
                 this.clearHighlightOnLastHighlightedOption();
@@ -5897,10 +5916,15 @@ const Select = class {
         this.stateService.send({ type: 'OPTION_SELECTED', value: { option: event, fromKeyboard } });
     }
     onSlotchange() {
-        // We call updateSelectedValue to update the selected options when the slot changes to keep the selected options in sync with the current value.
-        // This also update the displayText value according to the options data.
-        // Finally, this update the internal models for multiple mode and handle the server mode correctly.
-        this.updateSelectedValue(this.value, false);
+        if (!this.serverMode || (this.autocomplete && this.displayText === this.autocompleteValue)) {
+            // We call updateSelectedValue to update the selected options when the slot changes to keep the selected options in sync with the current value.
+            // This also update the displayText value according to the options data.
+            // Finally, this update the internal models for multiple mode and handle the server mode correctly.
+            this.updateSelectedValue(this.value, false, false);
+        }
+        else {
+            this.syncOptionsElementsStateWithCurrentSelectedValue();
+        }
         // Server-mode only : "no result" slot should be visible dynamically if no option is present in the slot
         if (this.autocomplete && this.serverMode) {
             this.showNoResultFoundLabel = this.options.length < 1;
@@ -5910,6 +5934,17 @@ const Select = class {
                 .forEach((opt) => opt.multiple = true);
         }
     }
+    /**
+     * 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
+     */
+    syncOptionsElementsStateWithCurrentSelectedValue() {
+        this.options.forEach((opt) => {
+            const isSelected = this.compareWith(opt.value, this.value);
+            opt.selected = isSelected;
+        });
+    }
     removeChip(v) {
         this.options
             .forEach(opt => {
@@ -5965,9 +6000,10 @@ const Select = class {
      * @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
      */
-    setAutocompleteValue(filter, isReset = false, fromUserInteraction = false) {
+    setAutocompleteValue(filter, isReset = false, fromUserInteraction = false, shouldEmitFilterChangeEvent = true) {
         var _a, _b;
         this.clearHighlightOnLastHighlightedOption();
         const newValueIsDifferentFromLastModifiedOption = this.lastModifiedOptionElement == null || ((_a = this.lastModifiedOptionElement) === null || _a === void 0 ? void 0 : _a.textContent) !== this.autocompleteValue;
@@ -5999,8 +6035,12 @@ const Select = class {
                 });
             }
         }
-        if (this.autocompleteValue !== filter) {
-            this.autocompleteValue = filter !== null && filter !== void 0 ? filter : '';
+        const newAutocompleteValue = filter !== null && filter !== void 0 ? filter : '';
+        const valueHasChanged = this.autocompleteValue !== newAutocompleteValue;
+        if (valueHasChanged) {
+            this.autocompleteValue = newAutocompleteValue;
+        }
+        if (shouldEmitFilterChangeEvent && valueHasChanged) {
             this.wcsFilterChange.emit({
                 value: filter,
             });
@@ -6032,23 +6072,18 @@ const Select = class {
     focusedAttributes() {
         return !this.disabled ? { tabIndex: 0 } : {};
     }
-    onAutocompleteFieldBlur(_e) {
-        if (this.multiple === false && this.autocomplete === true && this.hasValue) {
-            this.autocompleteValue = this.displayText;
-        }
-    }
     render() {
         var _a;
         const ariaLabelValue = `${this.labelElement ? this.labelElement.innerText : ''} ${this.hasValue ? this.displayText : ''}`.trimEnd();
         const noResultContainerId = 'no-result-container';
-        return (h(Host, Object.assign({ key: '71154caab9c0b2244716f5c5626cc0de3ed7d327', class: this.expanded ? 'expanded ' : '', overlayDirection: this.overlayDirection }, this.focusedAttributes(), { role: !this.autocomplete ? "combobox" : null, "aria-haspopup": !this.autocomplete ? "listbox" : null, "aria-owns": !this.autocomplete ? this.optionsId : null, "aria-controls": !this.autocomplete ? this.optionsId : null, "aria-disabled": !this.autocomplete ? (this.disabled ? 'true' : null) : null, "aria-required": !this.autocomplete ? (this.required ? 'true' : 'false') : null, "aria-expanded": !this.autocomplete ? (this.expanded ? 'true' : 'false') : null, "aria-multiselectable": !this.autocomplete ? (this.multiple ? 'true' : 'false') : null, "aria-label": !this.autocomplete ? ariaLabelValue : null }), h("div", { key: '2dff342eb864a28ac960583102de88cfd7f63d98', class: "wcs-select-control" }, h("div", { key: '0f2028f2eb8245fa08da06ccebbfbac880d0e090', class: "wcs-select-value-container" }, this.hasValue
+        return (h(Host, Object.assign({ key: '5da08e1418d8e8a2f65295a86a4868357ac676cb', class: this.expanded ? 'expanded ' : '', overlayDirection: this.overlayDirection }, this.focusedAttributes(), { role: !this.autocomplete ? "combobox" : null, "aria-haspopup": !this.autocomplete ? "listbox" : null, "aria-owns": !this.autocomplete ? this.optionsId : null, "aria-controls": !this.autocomplete ? this.optionsId : null, "aria-disabled": !this.autocomplete ? (this.disabled ? 'true' : null) : null, "aria-required": !this.autocomplete ? (this.required ? 'true' : 'false') : null, "aria-expanded": !this.autocomplete ? (this.expanded ? 'true' : 'false') : null, "aria-multiselectable": !this.autocomplete ? (this.multiple ? 'true' : 'false') : null, "aria-label": !this.autocomplete ? ariaLabelValue : null }), h("div", { key: '64bb5c04992a0ecf451a6ea5114bcb631f936555', class: "wcs-select-control" }, h("div", { key: '9279627148ef9bf1e8113df1dd97ab9d721f2f06', class: "wcs-select-value-container" }, this.hasValue
             ?
                 (this.chips ?
                     this.values.map((option) => h(SelectChips, { disabled: this.disabled, option: option, onRemove: this.removeChip.bind(this) }))
                     : (!this.autocomplete || this.autocomplete && this.multiple) &&
                         h("label", { class: "wcs-select-value" }, this.displayText))
-            : !this.autocomplete && h("label", { class: "wcs-select-placeholder" }, this.placeholder), this.autocomplete && h("input", Object.assign({ key: '000f05300690b402f77b210b4e6808e73647d607', class: "autocomplete-field", value: this.autocompleteValue, role: "combobox", "aria-haspopup": "listbox", "aria-label": ariaLabelValue, "aria-describedby": noResultContainerId, "aria-disabled": this.disabled ? 'true' : null, "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": this.optionsId, "aria-owns": this.optionsId, "aria-multiselectable": this.multiple ? 'true' : 'false', "aria-autocomplete": "list", autocomplete: "off", disabled: this.disabled, required: this.required, onBlur: (e) => this.onAutocompleteFieldBlur(e), placeholder: ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) ? null : this.placeholder, onInput: (e) => this.onAutocompleteInputEvent(e), ref: el => this.autocompleteInput = el }, this.inheritedAttributes))), h(SelectArrow, { key: 'cbbb2ef8b0c49b69c2a3509e6444f52d114efd23', up: this.expanded })), h("div", { key: '9330811ed0b8e0a2380692cdca34f2196b087466', class: "wcs-select-options", id: this.optionsId, role: "listbox" }, h("slot", { key: '9efd1b1d83e7bc1af1733909060854025c21df07', name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
-            h("div", { key: 'a8438df62c26f1d4cfcd25c43d5636031138c71f', role: "alert", id: noResultContainerId, class: "noresult-container" }, h("slot", { key: '95397947cdef93512fec2c168ca42893500950ba', name: "filter-no-result" }, h("span", { key: 'd5fc78e9ba099a017f6ed3116b23aa929c34dcb9' }, "Aucun r\u00E9sultat"))))));
+            : !this.autocomplete && h("label", { class: "wcs-select-placeholder" }, this.placeholder), this.autocomplete && h("input", Object.assign({ key: '97732eba53ac636b9f9e231ad6c86903599dd21b', class: "autocomplete-field", value: this.autocompleteValue, role: "combobox", "aria-haspopup": "listbox", "aria-label": ariaLabelValue, "aria-describedby": noResultContainerId, "aria-disabled": this.disabled ? 'true' : null, "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": this.optionsId, "aria-owns": this.optionsId, "aria-multiselectable": this.multiple ? 'true' : 'false', "aria-autocomplete": "list", autocomplete: "off", disabled: this.disabled, required: this.required, placeholder: ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) ? null : this.placeholder, onInput: (e) => this.onAutocompleteInputEvent(e), ref: el => this.autocompleteInput = el }, this.inheritedAttributes))), h(SelectArrow, { key: '4546d670d107ad9bb496844ef6b4d2b1e7d333c4', up: this.expanded })), h("div", { key: '75eda1298dab81575144d561120290d804d84cce', class: "wcs-select-options", id: this.optionsId, role: "listbox" }, h("slot", { key: '4de8ebd148df28d68c4163026562669ebfbc37b3', name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
+            h("div", { key: '6ebeb7af554a9f3799658e7e3d58f0c1ac25f9f2', role: "alert", id: noResultContainerId, class: "noresult-container" }, h("slot", { key: '2c34abe1a89dc797f80944809457710e66d0336d', name: "filter-no-result" }, h("span", { key: '6e51c2870b926c593dbd53d87a99ef1beb989343' }, "Aucun r\u00E9sultat"))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -6065,7 +6100,6 @@ const SelectOption = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.wcsSelectOptionClick = createEvent(this, "wcsSelectOptionClick", 7);
-        this.selectOptionId = generateUniqueId(this.el.tagName);
         this.disabled = false;
         this.selected = false;
         this.highlighted = false;
@@ -6075,6 +6109,7 @@ const SelectOption = class {
         this.multiple = false;
     }
     componentWillLoad() {
+        this.selectOptionId = generateUniqueId(this.el.tagName);
         if (this.value === undefined) {
             // If no value was given we use the text content instead.
             this.value = this.el.innerText || '';
@@ -6107,8 +6142,8 @@ const SelectOption = class {
         }
     }
     render() {
-        return (h(Host, { key: '8e2f93d1db10d33df62a34b1f9e62a948a78424e', id: this.selectOptionId, "aria-selected": this.selected || this.highlighted ? 'true' : 'false', slot: "options", role: "option", tabindex: "-1" }, this.multiple &&
-            h("wcs-checkbox", { key: '3af49da773954213d7f2b64c4a2f8fd7114b6a24', tabindex: "-1", checked: this.selected, disabled: this.disabled }), h("slot", { key: '3e5267f2626863b13bbcab46f98b4eacfa90c83f' })));
+        return (h(Host, { key: '18a9f541ccf9757c1b4e9005ecd9ca98f40ced22', id: this.selectOptionId, "aria-selected": this.selected || this.highlighted ? 'true' : 'false', slot: "options", role: "option", tabindex: "-1" }, this.multiple &&
+            h("wcs-checkbox", { key: 'aa89dc61bd7ddabf6efdf1f7b5fc6bc024f91ffd', tabindex: "-1", checked: this.selected, disabled: this.disabled }), h("slot", { key: 'fc59a661788d75fd7f172e8ef13f7360c2540552' })));
     }
     get el() { return getElement(this); }
 };