npm - wcs-core - Versions diffs - 7.2.2 → 7.4.0 - Mend

wcs-core 7.2.2 → 7.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (302) hide show

package/dist/cjs/wcs-horizontal-stepper.cjs.entry.js CHANGED Viewed

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6f0140d8.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.
@@ -14,7 +15,7 @@ const HorizontalStep = ({ step, checkOnComplete, complete, passed, active, first
      */
     index.h("li", { role: "listitem", class: "graphic-step", "data-first": first },
         first ? null : (index.h("wcs-progress-bar", { value: passed ? 100 : 0, "aria-hidden": "true" })),
-        index.h("wcs-button", { style: { 'backgroundColor': 'white' }, "aria-label": step.text, onClick: _ => onClick(step), ref: (el) => {
+        index.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))));
 };
@@ -84,7 +85,7 @@ const HorizontalStepper = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '8f1c81f4e21159bbbd34a6caaaa66ce13e8b7a92' }, index.h("ul", { key: '1a512c67669a402100153db33936a6752d53b6ab', role: "list", class: "steps" }, this.steps.map((step, index$1) => (index.h(HorizontalStep, { step: step, passed: index$1 <= this.internalCurrentStepIndex, checkOnComplete: this.checkOnComplete, complete: this.isComplete(step, index$1), active: index$1 === this.internalCurrentStepIndex, first: index$1 === 0, disable: this.isDisable(step, index$1), onClick: step => this.wcsHorizontalStepClick.emit({ step, index: index$1 }) })))), this.renderLabels()));
+        return (index.h(index.Host, { key: '72063828a00d77fc1bc2a92de8979d096b806786' }, index.h("ul", { key: 'a5b2de6193a68b6b70b0857d1c50ed1c5c069863', role: "list", class: "steps" }, this.steps.map((step, index$1) => (index.h(HorizontalStep, { step: step, passed: index$1 <= this.internalCurrentStepIndex, checkOnComplete: this.checkOnComplete, complete: this.isComplete(step, index$1), active: index$1 === this.internalCurrentStepIndex, first: index$1 === 0, disable: this.isDisable(step, index$1), onClick: step => this.wcsHorizontalStepClick.emit({ step, index: index$1 }) })))), this.renderLabels()));
     }
     isComplete(step, index) {
         return index <= this.internalCurrentStepIndex || step.complete;

package/dist/cjs/wcs-horizontal-stepper.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"wcs-horizontal-stepper.entry.cjs.js","mappings":"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","names":["h","Host","index"],"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}
1	+ {"file":"wcs-horizontal-stepper.entry.cjs.js","mappings":"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","names":["h","Host","index"],"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/cjs/wcs-modal.cjs.entry.js CHANGED Viewed

@@ -6,7 +6,7 @@ const index = require('./index-6f0140d8.js');
 const accessibility = require('./accessibility-5f681a74.js');
 const helpers = require('./helpers-2f1a8ddc.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 = [];
@@ -139,7 +139,7 @@ const Modal = class {
     }
     render() {
         const modalTitleId = `wcs-modal-title-${this.modalId}`;
-        return (index.h(index.Host, { key: 'e609fe2024b73cab0bed97c0d3b7012d8deba893' }, index.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), index.h("div", { key: 'bc3e2ead8e3e73da31882c5e87cde2780d9ef2f9', class: "wcs-modal-header" }, index.h("h1", { key: '87561fc92b0990d00e06463afc111e9bdeab6f20', id: modalTitleId }, index.h("slot", { key: 'dbf6d932257e7a264206ddf7caea8a80e4b2b069', name: "header" })), this.showCloseButton && (index.h("wcs-button", { key: '97036ea40d111c5ac737b1e3f789571cd524cb2d', shape: "round", mode: "clear", id: "wcs-modal-close-button", "aria-label": this.closeButtonAriaLabel, onClick: ($event) => this.onCloseButtonClick($event) }, index.h("wcs-mat-icon", { key: '24d6b531e788c2760c66804df96037714c9f854b', icon: "close" })))), index.h("div", { key: '34d9ddf3c4527395864a238f329d7b499eb9791b', class: "wcs-modal-content" }, index.h("slot", { key: '5bbd76fc7de9bc6f5aaec7257e7c73995d3e1447', onSlotchange: () => this.handleSlotContentChange() })), !this.hideActions && (index.h("div", { key: '0c082f533dd77e73721b3bcf29a6f3d3baac65b3', class: "wcs-modal-actions" }, index.h("slot", { key: '56bfb65b4784492747eda2f5eb87b29dc7704db3', name: "actions" }))))));
+        return (index.h(index.Host, { key: 'e609fe2024b73cab0bed97c0d3b7012d8deba893' }, index.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), index.h("div", { key: 'bc3e2ead8e3e73da31882c5e87cde2780d9ef2f9', class: "wcs-modal-header" }, index.h("h1", { key: '87561fc92b0990d00e06463afc111e9bdeab6f20', id: modalTitleId }, index.h("slot", { key: 'dbf6d932257e7a264206ddf7caea8a80e4b2b069', name: "header" })), this.showCloseButton && (index.h("wcs-button", { key: '97036ea40d111c5ac737b1e3f789571cd524cb2d', shape: "round", mode: "clear", id: "wcs-modal-close-button", "aria-label": this.closeButtonAriaLabel, onClick: ($event) => this.onCloseButtonClick($event) }, index.h("wcs-mat-icon", { key: '24d6b531e788c2760c66804df96037714c9f854b', icon: "close" })))), index.h("div", { key: '34d9ddf3c4527395864a238f329d7b499eb9791b', class: "wcs-modal-content" }, index.h("slot", { key: '5bbd76fc7de9bc6f5aaec7257e7c73995d3e1447', onSlotchange: () => this.handleSlotContentChange() })), index.h("div", { key: '7c332e9d1c1b19b65fabb6f52bc14ab0ed9f4803', class: "wcs-modal-actions" }, index.h("slot", { key: '4c44f2337893ba9e8c852a1b8b16beab9da87e4e', name: "actions" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/wcs-modal.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"wcs-modal.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,21EAA21E,CAAC;AAC72E,uBAAe,QAAQ;;ACgBvB,MAAM,qBAAqB,GAAG,EAAE,CAAC;MA+CpB,KAAK;;;;QAGN,wBAAmB,GAAyB,EAAE,CAAC;;;;;QAuE/C,YAAO,GAAW,QAAQ,EAAE,CAAC;;;;;;;QAU7B,+BAA0B,GAAY,KAAK,CAAC;;;;;;;;;QAS5C,wBAAmB,GAAY,KAAK,CAAC;+BArFK,KAAK;oBAKD,KAAK;+BAWT,KAAK;oCAMhB,QAAQ;oBAMrB,GAAG;2BAKiB,KAAK;;qCAkBV,SAAS;gCASG,KAAK;;IA2B1D,iBAAiB;QACb,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE;YAC9B,OAAO,CAAC,IAAI,CAAC,8GAA8G,CAAC,CAAC;SAChI;QAED,IAAI,CAAC,mBAAmB,mCACjBA,6BAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9BC,yBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,qBAAqB,CAAC,CACvD,CAAC;KACL;IAED,gBAAgB;QACZ,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAClC;IAED,kBAAkB;;QACd,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,IAAI,CAAC,0BAA0B,EAAE;YACjC,IAAI,CAAC,0BAA0B,GAAG,KAAK,CAAC;YAExC,IAAG,IAAI,CAAC,gBAAgB,EAAE;gBACtB,OAAO;aACV;YAED,IAAG,CAAC,IAAI,CAAC,qBAAqB,EAAE;gBAC5B,MAAA,IAAI,CAAC,qBAAqB,0CAAE,KAAK,EAAE,CAAC;aACvC;iBAAM;gBACH,MAAM,4BAA4B,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;gBACzF,IAAG,CAAC,4BAA4B,EAAE;oBAC9B,OAAO,CAAC,IAAI,CAAC,4CAA4C,IAAI,CAAC,qBAAqB,oBAAoB,CAAC,CAAC;iBAC5G;gBAED,4BAA4B,aAA5B,4BAA4B,uBAA5B,4BAA4B,CAAE,KAAK,EAAE,CAAC;aACzC;SACJ;KACJ;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5EC,4BAAoB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KAC3D;IAGD,YAAY;QACR,IAAG,IAAI,CAAC,IAAI,EAAE;YACV,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;YACjC,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC;SAC1C;aAAM;;YAEH,IAAG,IAAI,CAAC,mBAAmB,EAAE;gBACzB,OAAO;aACV;YAED,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;YAEhC,IAAG,IAAI,CAAC,sBAAsB,EAAE;gBAC5B,MAAM,+BAA+B,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;gBAC7F,IAAG,CAAC,+BAA+B,EAAE;oBACjC,OAAO,CAAC,IAAI,CAAC,+BAA+B,IAAI,CAAC,sBAAsB,sBAAsB,CAAC,CAAC;iBAClG;gBACD,+BAA+B,aAA/B,+BAA+B,uBAA/B,+BAA+B,CAAE,KAAK,EAAE,CAAC;aAC5C;SACJ;KACJ;IAEO,uBAAuB;QAC3B,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;aAC9D,MAAM,CAAC,OAAO,IAAIC,yBAAW,CAAC,OAAO,CAAC,CAAC,CAAC;QAE7C,IAAI,CAAC,qBAAqB,GAAG,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAgB,CAAC;QACjG,IAAI,CAAC,oBAAoB,GAAG,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAgB,CAAC;KAC9H;IAEO,KAAK;;QAET,IAAI,IAAI,CAAC,IAAI,EAAE;YACX,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;SAC/B;KACJ;IAGD,SAAS,CAAC,KAAoB;QAC1B,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YAC7D,IAAI,CAAC,KAAK,EAAE,CAAC;SAChB;QAED,IAAI,IAAI,CAAC,IAAI,EAAE;YACX,IAAIC,gBAAQ,CAAC,KAAK,CAAC,EAAE;gBACjB,IAAI,CAAC,uBAAuB,EAAE,CAAC;gBAC/B,MAAM,YAAY,GAAG,IAAI,CAAC,qBAAqB,CAAC;gBAChD,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC;gBAE9C,IAAI,KAAK,CAAC,QAAQ,IAAIC,8BAAgB,CAAC,YAAY,CAAC,EAAE;oBAClD,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,WAAW,CAAC,KAAK,EAAE,CAAC;iBACvB;qBAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAIA,8BAAgB,CAAC,WAAW,CAAC,EAAE;oBACzD,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,YAAY,CAAC,KAAK,EAAE,CAAC;iBACxB;aACJ;SACJ;KACJ;IAEO,kBAAkB,CAAC,CAAa;QACpC,IAAI,CAAC,KAAK,EAAE,CAAC;KAChB;IAEO,uBAAuB;QAC3B,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAClC;IAED,MAAM;QACF,MAAM,YAAY,GAAG,mBAAmB,IAAI,CAAC,OAAO,EAAE,CAAC;QACvD,QACIC,QAACC,UAAI,uDACDD,gFAAK,KAAK,EAAC,qBAAqB,eAChB,IAAI,CAAC,IAAI,gBACT,MAAM,EACjB,IAAI,EAAE,QAAQ,qBACG,YAAY,EAC7B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,IACpC,IAAI,CAAC,mBAAmB,GAE7BA,kEAAK,KAAK,EAAC,kBAAkB,IACzBA,iEAAI,EAAE,EAAE,YAAY,IAChBA,mEAAM,IAAI,EAAC,QAAQ,GAAQ,CAC1B,EACJ,IAAI,CAAC,eAAe,KACjBA,yEAAY,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,wBAAwB,gBACf,IAAI,CAAC,oBAAoB,EACrC,OAAO,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,IAC5DA,2EAAc,IAAI,EAAC,OAAO,GAAgB,CACjC,CAAC,CAGhB,EACNA,kEAAK,KAAK,EAAC,mBAAmB,IAC1BA,mEAAM,YAAY,EAAE,MAAM,IAAI,CAAC,uBAAuB,EAAE,GAAS,CAC/D,EACL,CAAC,IAAI,CAAC,WAAW,KACdA,kEAAK,KAAK,EAAC,mBAAmB,IAC1BA,mEAAM,IAAI,EAAC,SAAS,GAAQ,CAC1B,CAAC,CAET,CACH,EACT;KACL;;;;;;AAGL,IAAI,QAAQ,GAAG,CAAC,CAAC;;;;;","names":["inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute","isFocusable","isTabKey","isElementFocused","h","Host"],"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}
1	+ {"file":"wcs-modal.entry.cjs.js","mappings":"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","names":["inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute","isFocusable","isTabKey","isElementFocused","h","Host"],"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/cjs/wcs-select_2.cjs.entry.js CHANGED Viewed

@@ -8,7 +8,7 @@ const helpers = require('./helpers-2f1a8ddc.js');
 const keyboardEvent = require('./keyboard-event-40ecdc27.js');
 const accessibility = require('./accessibility-5f681a74.js');
 const isEqual = require('./isEqual-8a0a6936.js');
-const popper = require('./popper-8d6e7fca.js');
+const popper = require('./popper-1b61df21.js');
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -2725,7 +2725,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'
       });
@@ -5356,7 +5362,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) {
@@ -5423,17 +5429,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 = '';
+            }
         }
     }
     /**
@@ -5606,6 +5621,9 @@ const Select = class {
                             }
                             this.focused = true;
                         }
+                        if (this.autocomplete && this.displayText && this.multiple === false) {
+                            this.setAutocompleteValue(this.displayText);
+                        }
                     }
                     this.expanded = false;
                 },
@@ -5625,7 +5643,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);
@@ -5741,7 +5760,7 @@ const Select = class {
                 }
                 break;
             case "ClearAutocompleteInput":
-                this.autocompleteValue = '';
+                this.setAutocompleteValue('', false, false);
                 break;
             case "ClearHighlight":
                 this.clearHighlightOnLastHighlightedOption();
@@ -5901,10 +5920,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;
@@ -5914,6 +5938,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 => {
@@ -5969,9 +6004,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;
@@ -6003,8 +6039,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,
             });
@@ -6036,23 +6076,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 (index.h(index.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 }), index.h("div", { key: '2dff342eb864a28ac960583102de88cfd7f63d98', class: "wcs-select-control" }, index.h("div", { key: '0f2028f2eb8245fa08da06ccebbfbac880d0e090', class: "wcs-select-value-container" }, this.hasValue
+        return (index.h(index.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 }), index.h("div", { key: '64bb5c04992a0ecf451a6ea5114bcb631f936555', class: "wcs-select-control" }, index.h("div", { key: '9279627148ef9bf1e8113df1dd97ab9d721f2f06', class: "wcs-select-value-container" }, this.hasValue
             ?
                 (this.chips ?
                     this.values.map((option) => index.h(SelectChips, { disabled: this.disabled, option: option, onRemove: this.removeChip.bind(this) }))
                     : (!this.autocomplete || this.autocomplete && this.multiple) &&
                         index.h("label", { class: "wcs-select-value" }, this.displayText))
-            : !this.autocomplete && index.h("label", { class: "wcs-select-placeholder" }, this.placeholder), this.autocomplete && index.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))), index.h(selectArrow.SelectArrow, { key: 'cbbb2ef8b0c49b69c2a3509e6444f52d114efd23', up: this.expanded })), index.h("div", { key: '9330811ed0b8e0a2380692cdca34f2196b087466', class: "wcs-select-options", id: this.optionsId, role: "listbox" }, index.h("slot", { key: '9efd1b1d83e7bc1af1733909060854025c21df07', name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
-            index.h("div", { key: 'a8438df62c26f1d4cfcd25c43d5636031138c71f', role: "alert", id: noResultContainerId, class: "noresult-container" }, index.h("slot", { key: '95397947cdef93512fec2c168ca42893500950ba', name: "filter-no-result" }, index.h("span", { key: 'd5fc78e9ba099a017f6ed3116b23aa929c34dcb9' }, "Aucun r\u00E9sultat"))))));
+            : !this.autocomplete && index.h("label", { class: "wcs-select-placeholder" }, this.placeholder), this.autocomplete && index.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))), index.h(selectArrow.SelectArrow, { key: '4546d670d107ad9bb496844ef6b4d2b1e7d333c4', up: this.expanded })), index.h("div", { key: '75eda1298dab81575144d561120290d804d84cce', class: "wcs-select-options", id: this.optionsId, role: "listbox" }, index.h("slot", { key: '4de8ebd148df28d68c4163026562669ebfbc37b3', name: "options", onSlotchange: this.onSlotchange.bind(this) }), (this.autocomplete && this.showNoResultFoundLabel) &&
+            index.h("div", { key: '6ebeb7af554a9f3799658e7e3d58f0c1ac25f9f2', role: "alert", id: noResultContainerId, class: "noresult-container" }, index.h("slot", { key: '2c34abe1a89dc797f80944809457710e66d0336d', name: "filter-no-result" }, index.h("span", { key: '6e51c2870b926c593dbd53d87a99ef1beb989343' }, "Aucun r\u00E9sultat"))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -6069,7 +6104,6 @@ const SelectOption = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.wcsSelectOptionClick = index.createEvent(this, "wcsSelectOptionClick", 7);
-        this.selectOptionId = helpers.generateUniqueId(this.el.tagName);
         this.disabled = false;
         this.selected = false;
         this.highlighted = false;
@@ -6079,6 +6113,7 @@ const SelectOption = class {
         this.multiple = false;
     }
     componentWillLoad() {
+        this.selectOptionId = helpers.generateUniqueId(this.el.tagName);
         if (this.value === undefined) {
             // If no value was given we use the text content instead.
             this.value = this.el.innerText || '';
@@ -6111,8 +6146,8 @@ const SelectOption = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '8e2f93d1db10d33df62a34b1f9e62a948a78424e', id: this.selectOptionId, "aria-selected": this.selected || this.highlighted ? 'true' : 'false', slot: "options", role: "option", tabindex: "-1" }, this.multiple &&
-            index.h("wcs-checkbox", { key: '3af49da773954213d7f2b64c4a2f8fd7114b6a24', tabindex: "-1", checked: this.selected, disabled: this.disabled }), index.h("slot", { key: '3e5267f2626863b13bbcab46f98b4eacfa90c83f' })));
+        return (index.h(index.Host, { key: '18a9f541ccf9757c1b4e9005ecd9ca98f40ced22', id: this.selectOptionId, "aria-selected": this.selected || this.highlighted ? 'true' : 'false', slot: "options", role: "option", tabindex: "-1" }, this.multiple &&
+            index.h("wcs-checkbox", { key: 'aa89dc61bd7ddabf6efdf1f7b5fc6bc024f91ffd', tabindex: "-1", checked: this.selected, disabled: this.disabled }), index.h("slot", { key: 'fc59a661788d75fd7f172e8ef13f7360c2540552' })));
     }
     get el() { return index.getElement(this); }
 };