wcs-core 4.2.0 → 5.0.0

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
-const helpers = require('./helpers-4a14051a.js');
+const index = require('./index-749d999e.js');
+const helpers = require('./helpers-6280db6e.js');
 
 const WcsInputSizeValues = ['s', 'm', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.
 function isWcsInputSize(size) {
@@ -31,6 +31,9 @@ const Input = class {
       }
       this.wcsInput.emit(ev);
     };
+    this.onChange = (_) => {
+      this.wcsChange.emit({ value: this.nativeInput.value });
+    };
     this.onBlur = (ev) => {
       this.hasFocus = false;
       this.focusChanged();
@@ -111,15 +114,8 @@ const Input = class {
   debounceChanged() {
     this.wcsChange = helpers.debounceEvent(this.wcsChange, this.debounce);
   }
-  /**
-   * Update the native input element when the value changes
-   */
-  valueChanged() {
-    var _a;
-    this.wcsChange.emit({ value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() });
-  }
   componentWillLoad() {
-    this.inheritedAttributes = helpers.inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
+    this.inheritedAttributes = Object.assign(Object.assign({}, helpers.inheritAriaAttributes(this.el)), helpers.inheritAttributes(this.el, ['tabindex', 'title']));
     if (!isWcsInputSize(this.size)) {
       console.error(`Invalid size value for wcs-input : "${this.size}". Must be one of "${WcsInputSizeValues.join(', ')}"`);
       this.size = "m"; // Default fallback value
@@ -165,13 +161,18 @@ const Input = class {
   getInputElement() {
     return Promise.resolve(this.nativeInput);
   }
+  async setAriaAttribute(attr, value) {
+    if (this.nativeInput) {
+      this.nativeInput.setAttribute(attr, value);
+    }
+  }
   shouldClearOnEdit() {
     const { type, clearOnEdit } = this;
     return (clearOnEdit === undefined)
       ? type === 'password'
       : clearOnEdit;
   }
-  getValue() {
+  getValueAsString() {
     return typeof this.value === 'number' ? this.value.toString() :
       (this.value || '').toString();
   }
@@ -182,7 +183,7 @@ const Input = class {
     }
   }
   hasValue() {
-    return this.getValue().length > 0;
+    return this.getValueAsString().length > 0;
   }
   passwordRevealIconClick() {
     this.passwordReveal = !this.passwordReveal;
@@ -191,19 +192,18 @@ const Input = class {
     this.iconPassword = this.passwordReveal ? 'visibility_off' : 'visibility';
   }
   render() {
-    const value = this.getValue();
+    const value = this.getValueAsString();
     const labelId = this.inputId + '-lbl';
     const label = helpers.findItemLabel(this.el);
     if (label) {
       label.id = labelId;
     }
-    return (index.h(index.Host, { "aria-disabled": this.disabled ? 'true' : null, "data-has-prefix": !!this.prefixLabel, "data-has-suffix": !!this.suffixLabel }, this.prefixLabel ? (index.h("span", { class: "prefix", part: "prefix" }, this.prefixLabel)) : null, this.icon ? (index.h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, index.h("input", Object.assign({ class: "native-input", ref: input => this.nativeInput = input, "aria-labelledby": label ? labelId : null, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.passwordReveal ? 'text' : this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown }, this.inheritedAttributes)), this.type === "password" ? (index.h("wcs-mat-icon", { class: "toggle_password", icon: this.iconPassword, size: "m", onClick: () => this.passwordRevealIconClick() })) : null, this.suffixLabel ? (index.h("span", { class: "suffix", part: "suffix" }, this.suffixLabel)) : null));
+    return (index.h(index.Host, { "aria-disabled": this.disabled ? 'true' : null, "data-has-prefix": !!this.prefixLabel, "data-has-suffix": !!this.suffixLabel }, this.prefixLabel ? (index.h("span", { class: "prefix", part: "prefix" }, this.prefixLabel)) : null, this.icon ? (index.h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, index.h("input", Object.assign({ class: "native-input", ref: input => this.nativeInput = input, "aria-labelledby": label ? labelId : null, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.passwordReveal ? 'text' : this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown }, this.inheritedAttributes)), this.type === "password" ? (index.h("wcs-mat-icon", { class: "toggle_password", icon: this.iconPassword, size: "m", onClick: () => this.passwordRevealIconClick() })) : null, this.suffixLabel ? (index.h("span", { class: "suffix", part: "suffix" }, this.suffixLabel)) : null));
   }
   static get delegatesFocus() { return true; }
   get el() { return index.getElement(this); }
   static get watchers() { return {
     "debounce": ["debounceChanged"],
-    "value": ["valueChanged"],
     "passwordReveal": ["onPasswordRevealChange"]
   }; }
 };

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

@@ -1 +1 @@
-{"file":"wcs-input.entry.cjs.js","mappings":"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","names":["debounceEvent","inheritAttributes","findItemLabel","h","Host"],"sources":["./src/components/input/input-interface.ts","./src/components/input/input.scss?tag=wcs-input&encapsulation=shadow","./src/components/input/input.tsx"],"sourcesContent":["// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nimport { WcsSize } from '../../shared-types';\n\nexport type AutocompleteTypes = (\n    | 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix'\n    | 'nickname' | 'email' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization'\n    | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2'\n    | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name'\n    | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount'\n    | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local'\n    | 'tel-extension' | 'impp' | 'url' | 'photo');\n\nexport type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local' | 'file';\n\n\nexport const WcsInputSizeValues = ['s', 'm', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsInputSize = Extract<WcsSize, typeof WcsInputSizeValues[number]>;\n\nexport function isWcsInputSize(size: string): size is WcsInputSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsInputSizeValues.includes(size);\n}\n\nexport interface InputChangeEventDetail {\n    value: string | undefined | null;\n}\n","@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-input-icon-color: var(--wcs-text-medium);\n    --wcs-internal-input-border-radius-left: var(--wcs-input-border-radius-left, var(--wcs-border-radius));\n    --wcs-internal-input-border-radius-right: var(--wcs-input-border-radius-right, var(--wcs-border-radius));\n    --wcs-internal-input-border-width: 2px;\n    display: flex;\n    width: 100%;\n    height: var(--wcs-input-host-height);\n    box-sizing: border-box;\n    border-radius: var(--wcs-internal-input-border-radius-left) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-left);\n    background-color: var(--wcs-light);\n    border: var(--wcs-internal-input-border-width) solid var(--wcs-light);\n    background-clip: padding-box;\n\n    ::placeholder {\n        font-weight: 400;\n        font-style: italic;\n    }\n\n    input {\n        overflow: hidden;\n        min-height: var(--wcs-size-xs);\n        width: 100%;\n        background-color: transparent;\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-primary);\n        font-weight: var(--wcs-font-weight-form-value) !important;\n        border: none;\n        padding: 0 calc(var(--wcs-padding) - var(--wcs-internal-input-border-width));\n        font-size: var(--wcs-input-font-size, 1rem);\n        line-height: 1.5;\n    }\n\n    input:focus {\n        box-shadow: none;\n        outline: 0;\n    }\n\n    wcs-mat-icon {\n        position: relative;\n        margin-left: 8px;\n        margin-right: -8px;\n    }\n\n    .toggle_password {\n        cursor: pointer;\n        margin-left: -8px;\n        margin-right: 8px;\n    }\n\n\n    .prefix, .suffix {\n        color: var(--wcs-white);\n        display: flex;\n        white-space: nowrap;\n        align-items: center;\n        font-size: var(--wcs-input-font-size, 1rem);\n        padding: 0 calc(var(--wcs-padding) / 2);\n        font-weight: var(--wcs-font-weight-form-value) !important;\n        background-color: var(--wcs-text-disabled);\n    }\n\n    .prefix {\n        border-radius: var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left);\n        margin: calc(-1 * var(--wcs-internal-input-border-width)) 0 calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width));\n        border-left: solid var(--wcs-internal-input-border-width) transparent;\n        border-top: solid var(--wcs-internal-input-border-width) transparent;\n        border-bottom: solid var(--wcs-internal-input-border-width) transparent;\n    }\n\n    .suffix {\n        border-radius: 0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0;\n        margin: calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width)) 0px;\n        border-right: solid var(--wcs-internal-input-border-width) transparent;\n        border-top: solid var(--wcs-internal-input-border-width) transparent;\n        border-bottom: solid var(--wcs-internal-input-border-width) transparent;\n    }\n}\n\n:host([size=l]) {\n    --wcs-input-host-height: var(--wcs-size-l);\n    --wcs-input-font-size: 1.0625rem;\n}\n\n:host([size=m]) { // Default\n    --wcs-input-host-height: var(--wcs-size-m);\n    --wcs-input-font-size: 1rem;\n}\n\n:host([size=s]) {\n    --wcs-input-host-height: var(--wcs-size-s);\n    --wcs-input-font-size: 0.9375rem;\n}\n\n:host([state=error]) {\n    border-color: var(--wcs-red) !important;\n}\n\n:host([data-has-prefix]) {\n    input {\n        padding-left: calc(var(--wcs-padding) / 2);\n    }\n}\n\n:host([data-has-suffix]) {\n    input {\n        padding-left: calc(var(--wcs-padding) / 2);\n    }\n}\n\n:host([disabled]) {\n    input {\n        color: var(--wcs-text-disabled);\n        cursor: not-allowed;\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-light);\n    }\n}\n\n:host(:focus-within) {\n    border: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n\n    .prefix {\n        border-left: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-top: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-bottom: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n    }\n\n    .suffix {\n        border-right: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-top: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-bottom: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-primary);\n    }\n}\n","import {\n    Build, Component,\n    ComponentInterface, Element, Event, EventEmitter, h, Host, Method, Prop,\n    State, Watch\n} from '@stencil/core';\nimport { debounceEvent, findItemLabel, inheritAttributes } from '../../utils/helpers';\nimport {\n    AutocompleteTypes, InputChangeEventDetail, isWcsInputSize, TextFieldTypes, WcsInputSize, WcsInputSizeValues\n} from './input-interface';\n\n/**\n * Mainly inspired from Ionic Input Component\n */\n@Component({\n    tag: 'wcs-input',\n    styleUrl: 'input.scss',\n    shadow: {delegatesFocus: true},\n})\nexport class Input implements ComponentInterface {\n    private nativeInput?: HTMLInputElement;\n    private inputId = `wcs-input-${inputIds++}`;\n    private didBlurAfterEdit = false;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private iconPassword = \"visibility\";\n\n\n    /**\n     * This is required for a WebKit bug which requires us to\n     * blur and focus an input to properly focus the input in\n     * an item with delegatesFocus. It will no longer be needed\n     * with iOS 14.\n     *\n     * @internal\n     */\n    @Prop() fireFocusEvents = true;\n\n    @State() private hasFocus = false;\n\n    @State() private passwordReveal = false;\n\n    @Element() private el!: HTMLElement;\n\n    /**\n     * If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n     */\n    @Prop() accept?: string;\n\n    /**\n     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n     * Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n     */\n    @Prop() autocapitalize = 'off';\n\n    /**\n     * Indicates whether the value of the control can be automatically completed by the browser.\n     */\n    @Prop() autocomplete: AutocompleteTypes = 'off';\n\n    /**\n     * Whether auto correction should be enabled when the user is entering/editing the text value.\n     */\n    @Prop() autocorrect: 'on' | 'off' = 'off';\n\n    /**\n     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n     */\n    @Prop() autofocus = false;\n\n    /**\n     * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n     */\n    @Prop() clearInput = false;\n\n    /**\n     * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.\n     */\n    @Prop() clearOnEdit?: boolean;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.\n     */\n    @Prop() debounce = 0;\n\n    /**\n     * Prefix displayed before the text field contents. This is not included in the value.\n     */\n    @Prop() prefixLabel: string;\n\n    /**\n     * Suffix displayed after the text field contents. This is not included in the value.\n     */\n    @Prop() suffixLabel: string;\n\n    @Watch('debounce')\n    protected debounceChanged() {\n        this.wcsChange = debounceEvent(this.wcsChange, this.debounce);\n    }\n\n    /**\n     * If `true`, the user cannot interact with the input.\n     */\n    @Prop() disabled = false;\n\n    /**\n     * A hint to the browser for which enter key to display.\n     * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n     * `\"previous\"`, `\"search\"`, and `\"send\"`.\n     */\n    @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n    /**\n     * Specify the size (height) of the input.\n     */\n    @Prop({reflect: true}) size: WcsInputSize = 'm';\n\n    /**\n     * Name of the material icon to add to the input\n     */\n    @Prop() icon: string;\n\n    /**\n     * A hint to the browser for which keyboard to display.\n     * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n     * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n     */\n    @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n    /**\n     * The maximum value, which must not be less than its minimum (min attribute) value.\n     */\n    @Prop() max?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n     */\n    @Prop() maxlength?: number;\n\n    /**\n     * The minimum value, which must not be greater than its maximum (max attribute) value.\n     */\n    @Prop() min?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n     */\n    @Prop() minlength?: number;\n\n    /**\n     * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n     */\n    @Prop() multiple?: boolean;\n\n    /**\n     * The name of the control, which is submitted with the form data.\n     */\n    @Prop() name: string = this.inputId;\n\n    /**\n     * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.\n     */\n    @Prop() pattern?: string;\n\n    /**\n     * Instructional text that shows before the input has a value.\n     */\n    @Prop() placeholder?: string | null;\n\n    /**\n     * If `true`, the user cannot modify the value.\n     */\n    @Prop() readonly = false;\n\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     */\n    @Prop() required = false;\n\n    /**\n     * If `true`, the element will have its spelling and grammar checked.\n     */\n    @Prop() spellcheck = false;\n\n    /**\n     * Specifies the state of the input. By default the input is in an normal state but you can to set it to 'error' state if the data given by the user is not valid.\n     */\n    @Prop({reflect: true}) state: 'initial' | 'error' = 'initial';\n\n    /**\n     * Works with the min and max attributes to limit the increments at which a value can be set.\n     * Possible values are: `\"any\"` or a positive floating point number.\n     */\n    @Prop() step?: string;\n\n    /**\n     * The type of control to display. The default type is text.\n     */\n    @Prop() type: TextFieldTypes = 'text';\n\n    /**\n     * The value of the input.\n     */\n    @Prop({mutable: true}) value?: string | number | null = '';\n\n    /**\n     * Emitted when a keyboard input occurred.\n     */\n    @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n    /**\n     * Emitted when the value has changed.\n     */\n    @Event() wcsChange!: EventEmitter<InputChangeEventDetail>;\n\n    /**\n     * Emitted when the input loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the input has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * Update the native input element when the value changes\n     */\n    @Watch('value')\n    protected valueChanged() {\n        this.wcsChange.emit({value: this.value?.toString()});\n    }\n\n    componentWillLoad() {\n        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);\n\n        if (!isWcsInputSize(this.size)) {\n            console.error(`Invalid size value for wcs-input : \"${this.size}\". Must be one of \"${WcsInputSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    connectedCallback() {\n        this.debounceChanged();\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n                detail: this.el\n            }));\n        }\n    }\n\n    disconnectedCallback() {\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n                detail: this.el\n            }));\n        }\n    }\n\n    /**\n     * @deprecated use the native focus method instead  \n     * Sets focus on the native `input` in `wcs-input`.\n     */\n    @Method()\n    async setFocus() {\n        if (this.nativeInput) {\n            this.nativeInput.focus();\n        }\n    }\n\n    /**\n     * Sets blur on the native `input` in `wcs-input`. Use this method instead of the global\n     * `input.blur()`.\n     * @internal\n     */\n    @Method()\n    async setBlur() {\n        if (this.nativeInput) {\n            this.nativeInput.blur();\n        }\n    }\n\n    /**\n     * Returns the native `<input>` element used under the hood.\n     */\n    @Method()\n    getInputElement(): Promise<HTMLInputElement> {\n        return Promise.resolve(this.nativeInput!);\n    }\n\n    private shouldClearOnEdit() {\n        const {type, clearOnEdit} = this;\n        return (clearOnEdit === undefined)\n            ? type === 'password'\n            : clearOnEdit;\n    }\n\n    private getValue(): string {\n        return typeof this.value === 'number' ? this.value.toString() :\n            (this.value || '').toString();\n    }\n\n    private onInput = (ev: Event) => {\n        const input = ev.target as HTMLInputElement | null;\n        if (input) {\n            this.value = input.value || '';\n        }\n        this.wcsInput.emit(ev as KeyboardEvent);\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        this.hasFocus = false;\n        this.focusChanged();\n\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    private onFocus = (ev: FocusEvent) => {\n        this.hasFocus = true;\n        this.focusChanged();\n\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private onKeydown = (ev: KeyboardEvent) => {\n        if (this.shouldClearOnEdit()) {\n            // Did the input value change after it was blurred and edited?\n            // Do not clear if user is hitting Enter to submit form\n            if (this.didBlurAfterEdit && this.hasValue() && ev.key !== 'Enter') {\n                // Clear the input\n                this.clearTextInput();\n            }\n\n            // Reset the flag\n            this.didBlurAfterEdit = false;\n        }\n    }\n\n    private clearTextInput = (ev?: Event) => {\n        if (this.clearInput && !this.readonly && !this.disabled && ev) {\n            ev.preventDefault();\n            ev.stopPropagation();\n\n            // Attempt to focus input again after pressing clear button\n            this.setFocus();\n        }\n\n        this.value = '';\n\n        /**\n         * This is needed for clearOnEdit\n         * Otherwise the value will not be cleared\n         * if user is inside the input\n         */\n        if (this.nativeInput) {\n            this.nativeInput.value = '';\n        }\n    }\n\n    private focusChanged() {\n        // If clearOnEdit is enabled and the input blurred but has a value, set a flag\n        if (!this.hasFocus && this.shouldClearOnEdit() && this.hasValue()) {\n            this.didBlurAfterEdit = true;\n        }\n    }\n\n    private hasValue(): boolean {\n        return this.getValue().length > 0;\n    }\n\n    private passwordRevealIconClick(): void {\n        this.passwordReveal = !this.passwordReveal;\n    }\n\n    @Watch('passwordReveal')\n    onPasswordRevealChange(): void {\n        this.iconPassword = this.passwordReveal ? 'visibility_off' : 'visibility';\n    }\n\n    render() {\n        const value = this.getValue();\n        const labelId = this.inputId + '-lbl';\n        const label = findItemLabel(this.el);\n        if (label) {\n            label.id = labelId;\n        }\n\n        return (\n            <Host\n                aria-disabled={this.disabled ? 'true' : null}\n                data-has-prefix={!!this.prefixLabel}\n                data-has-suffix={!!this.suffixLabel}\n            >\n                {this.prefixLabel ? (<span class=\"prefix\" part=\"prefix\">{this.prefixLabel}</span>) : null}\n                {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n                <input\n                    class=\"native-input\"\n                    ref={input => this.nativeInput = input}\n                    aria-labelledby={label ? labelId : null}\n                    disabled={this.disabled}\n                    accept={this.accept}\n                    autoCapitalize={this.autocapitalize}\n                    autoComplete={this.autocomplete}\n                    autoCorrect={this.autocorrect}\n                    autoFocus={this.autofocus}\n                    enterKeyHint={this.enterkeyhint}\n                    inputMode={this.inputmode}\n                    min={this.min}\n                    max={this.max}\n                    minLength={this.minlength}\n                    maxLength={this.maxlength}\n                    multiple={this.multiple}\n                    name={this.name}\n                    pattern={this.pattern}\n                    placeholder={this.placeholder || ''}\n                    readOnly={this.readonly}\n                    required={this.required}\n                    spellcheck={this.spellcheck}\n                    step={this.step}\n                    type={this.passwordReveal ? 'text' : this.type}\n                    value={value}\n                    onInput={this.onInput}\n                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    onKeyDown={this.onKeydown}\n                    {...this.inheritedAttributes}\n                />\n                {this.type === \"password\" ? (<wcs-mat-icon class=\"toggle_password\" icon={this.iconPassword} size=\"m\"  onClick={() => this.passwordRevealIconClick()}></wcs-mat-icon>) : null}\n                {this.suffixLabel ? (<span class=\"suffix\" part=\"suffix\">{this.suffixLabel}</span>) : null}\n            </Host>\n        );\n    }\n}\n\nlet inputIds = 0;\n"],"version":3}
+{"file":"wcs-input.entry.cjs.js","mappings":"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","names":["debounceEvent","inheritAriaAttributes","inheritAttributes","findItemLabel","h","Host"],"sources":["./src/components/input/input-interface.ts","./src/components/input/input.scss?tag=wcs-input&encapsulation=shadow","./src/components/input/input.tsx"],"sourcesContent":["// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nimport { WcsSize } from '../../shared-types';\n\nexport type AutocompleteTypes = (\n    | 'on' | 'off' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix'\n    | 'nickname' | 'email' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization'\n    | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2'\n    | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name'\n    | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount'\n    | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local'\n    | 'tel-extension' | 'impp' | 'url' | 'photo');\n\nexport type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local' | 'file';\n\n\nexport const WcsInputSizeValues = ['s', 'm', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsInputSize = Extract<WcsSize, typeof WcsInputSizeValues[number]>;\n\nexport function isWcsInputSize(size: string): size is WcsInputSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsInputSizeValues.includes(size);\n}\n\nexport interface InputChangeEventDetail {\n    value: string | undefined | null;\n}\n","@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-input-icon-color: var(--wcs-text-medium);\n    --wcs-internal-input-border-radius-left: var(--wcs-input-border-radius-left, var(--wcs-border-radius));\n    --wcs-internal-input-border-radius-right: var(--wcs-input-border-radius-right, var(--wcs-border-radius));\n    --wcs-internal-input-border-width: 2px;\n    display: flex;\n    width: 100%;\n    height: var(--wcs-input-host-height);\n    box-sizing: border-box;\n    border-radius: var(--wcs-internal-input-border-radius-left) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-left);\n    background-color: var(--wcs-light);\n    border: var(--wcs-internal-input-border-width) solid var(--wcs-light);\n    background-clip: padding-box;\n\n    ::placeholder {\n        font-weight: 400;\n        font-style: italic;\n    }\n\n    input {\n        overflow: hidden;\n        min-height: var(--wcs-size-xs);\n        width: 100%;\n        background-color: transparent;\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-primary);\n        font-weight: var(--wcs-font-weight-form-value) !important;\n        border: none;\n        padding: 0 calc(var(--wcs-padding) - var(--wcs-internal-input-border-width));\n        font-size: var(--wcs-input-font-size, 1rem);\n        line-height: 1.5;\n    }\n\n    input:focus {\n        box-shadow: none;\n        outline: 0;\n    }\n\n    wcs-mat-icon {\n        position: relative;\n        margin-left: 8px;\n        margin-right: -8px;\n    }\n\n    .toggle_password {\n        cursor: pointer;\n        margin-left: -8px;\n        margin-right: 8px;\n    }\n\n\n    .prefix, .suffix {\n        color: var(--wcs-white);\n        display: flex;\n        white-space: nowrap;\n        align-items: center;\n        font-size: var(--wcs-input-font-size, 1rem);\n        padding: 0 calc(var(--wcs-padding) / 2);\n        font-weight: var(--wcs-font-weight-form-value) !important;\n        background-color: var(--wcs-text-disabled);\n    }\n\n    .prefix {\n        border-radius: var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left);\n        margin: calc(-1 * var(--wcs-internal-input-border-width)) 0 calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width));\n        border-left: solid var(--wcs-internal-input-border-width) transparent;\n        border-top: solid var(--wcs-internal-input-border-width) transparent;\n        border-bottom: solid var(--wcs-internal-input-border-width) transparent;\n    }\n\n    .suffix {\n        border-radius: 0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0;\n        margin: calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width)) calc(-1 * var(--wcs-internal-input-border-width)) 0px;\n        border-right: solid var(--wcs-internal-input-border-width) transparent;\n        border-top: solid var(--wcs-internal-input-border-width) transparent;\n        border-bottom: solid var(--wcs-internal-input-border-width) transparent;\n    }\n}\n\n:host([size=l]) {\n    --wcs-input-host-height: var(--wcs-size-l);\n    --wcs-input-font-size: 1.0625rem;\n}\n\n:host([size=m]) { // Default\n    --wcs-input-host-height: var(--wcs-size-m);\n    --wcs-input-font-size: 1rem;\n}\n\n:host([size=s]) {\n    --wcs-input-host-height: var(--wcs-size-s);\n    --wcs-input-font-size: 0.9375rem;\n}\n\n:host([state=error]) {\n    border-color: var(--wcs-red) !important;\n}\n\n:host([data-has-prefix]) {\n    input {\n        padding-left: calc(var(--wcs-padding) / 2);\n    }\n}\n\n:host([data-has-suffix]) {\n    input {\n        padding-left: calc(var(--wcs-padding) / 2);\n    }\n}\n\n:host([disabled]) {\n    input {\n        color: var(--wcs-text-disabled);\n        cursor: not-allowed;\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-light);\n    }\n}\n\n:host(:focus-within) {\n    border: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n\n    .prefix {\n        border-left: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-top: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-bottom: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n    }\n\n    .suffix {\n        border-right: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-top: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n        border-bottom: dashed var(--wcs-internal-input-border-width) var(--wcs-primary);\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-primary);\n    }\n}\n","import {\n    Build, Component,\n    ComponentInterface, Element, Event, EventEmitter, h, Host, Method, Prop,\n    State, Watch\n} from '@stencil/core';\nimport { debounceEvent, findItemLabel, inheritAriaAttributes, inheritAttributes } from '../../utils/helpers';\nimport {\n    AutocompleteTypes, InputChangeEventDetail, isWcsInputSize, TextFieldTypes, WcsInputSize, WcsInputSizeValues\n} from './input-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n/**\n * The input component is a form control that accepts a single line of text.\n * Implementation mainly inspired from Ionic Input Component.\n *\n *\n * <details>\n *     <summary>Accessibility guidelines 💡</summary>\n *     > - Provide a `<wcs-label>` next to the input\n *     > - Use the `disabled` prop to add the HTML `disabled` attribute to the `input`\n *     > - Use the `readonly` prop to add the HTML `readonly` attribute to the `input`\n *     > - Use the `autofocus` prop to add the HTML `autofocus` attribute to the `input`. Use it if you want your input focus\n *     automatically when the page load\n *     > - Adapt the `type` to lets user enter information more easily (_ex: `type=\"number\"` for an input which only accept numbers entry_)\n * </details>\n */\n@Component({\n    tag: 'wcs-input',\n    styleUrl: 'input.scss',\n    shadow: {delegatesFocus: true},\n})\nexport class Input implements ComponentInterface, MutableAriaAttribute {\n    private nativeInput?: HTMLInputElement;\n    private inputId = `wcs-input-${inputIds++}`;\n    private didBlurAfterEdit = false;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private iconPassword = \"visibility\";\n\n\n    /**\n     * This is required for a WebKit bug which requires us to\n     * blur and focus an input to properly focus the input in\n     * an item with delegatesFocus. It will no longer be needed\n     * with iOS 14.\n     *\n     * @internal\n     */\n    @Prop() fireFocusEvents = true;\n\n    @State() private hasFocus = false;\n\n    @State() private passwordReveal = false;\n\n    @Element() private el!: HTMLElement;\n\n    /**\n     * If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the\n     * server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n     */\n    @Prop() accept?: string;\n\n    /**\n     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n     * Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n     */\n    @Prop() autocapitalize = 'off';\n\n    /**\n     * Indicates whether the value of the control can be automatically completed by the browser.\n     */\n    @Prop() autocomplete: AutocompleteTypes = 'off';\n\n    /**\n     * Whether auto correction should be enabled when the user is entering/editing the text value.\n     */\n    @Prop() autocorrect: 'on' | 'off' = 'off';\n\n    /**\n     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n     */\n    @Prop() autofocus = false;\n\n    /**\n     * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n     */\n    @Prop() clearInput = false;\n\n    /**\n     * If `true`, the value will be cleared after focus upon edit.\n     * Defaults to `true` when `type` is `\"password\"`, `false` for all other types.\n     */\n    @Prop() clearOnEdit?: boolean;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsChange` event after each keystroke.\n     * This also impacts form bindings such as `ngModel` or `v-model`.\n     */\n    @Prop() debounce = 0;\n\n    /**\n     * Prefix displayed before the text field contents. This is not included in the value.\n     */\n    @Prop() prefixLabel: string;\n\n    /**\n     * Suffix displayed after the text field contents. This is not included in the value.\n     */\n    @Prop() suffixLabel: string;\n\n    @Watch('debounce')\n    protected debounceChanged() {\n        this.wcsChange = debounceEvent(this.wcsChange, this.debounce);\n    }\n\n    /**\n     * If `true`, the user cannot interact with the input.\n     */\n    @Prop() disabled = false;\n\n    /**\n     * A hint to the browser for which enter key to display.\n     * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n     * `\"previous\"`, `\"search\"`, and `\"send\"`.\n     */\n    @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n    /**\n     * Specify the size (height) of the input.\n     */\n    @Prop({reflect: true}) size: WcsInputSize = 'm';\n\n    /**\n     * Name of the material icon to add to the input\n     */\n    @Prop() icon: string;\n\n    /**\n     * A hint to the browser for which keyboard to display.\n     * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n     * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n     */\n    @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\n    /**\n     * The maximum value, which must not be less than its minimum (min attribute) value.\n     */\n    @Prop() max?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n     * specifies the maximum number of characters that the user can enter.\n     */\n    @Prop() maxlength?: number;\n\n    /**\n     * The minimum value, which must not be greater than its maximum (max attribute) value.\n     */\n    @Prop() min?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n     * specifies the minimum number of characters that the user can enter.\n     */\n    @Prop() minlength?: number;\n\n    /**\n     * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to\n     * `\"email\"` or `\"file\"`, otherwise it is ignored.\n     */\n    @Prop() multiple?: boolean;\n\n    /**\n     * The name of the control, which is submitted with the form data.\n     */\n    @Prop() name: string = this.inputId;\n\n    /**\n     * A regular expression that the value is checked against. The pattern must match the entire value, not just some\n     * subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value\n     * of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise\n     * it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support\n     * the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for\n     * more information.\n     */\n    @Prop() pattern?: string;\n\n    /**\n     * Instructional text that shows before the input has a value.\n     */\n    @Prop() placeholder?: string | null;\n\n    /**\n     * If `true`, the user cannot modify the value.\n     */\n    @Prop() readonly = false;\n\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     */\n    @Prop() required = false;\n\n    /**\n     * If `true`, the element will have its spelling and grammar checked.\n     */\n    @Prop() spellcheck = false;\n\n    /**\n     * Specifies the state of the input. By default the input is in an normal state but you can to set it to 'error'\n     * state if the data given by the user is not valid.\n     */\n    @Prop({reflect: true}) state: 'initial' | 'error' = 'initial';\n\n    /**\n     * Works with the min and max attributes to limit the increments at which a value can be set.\n     * Possible values are: `\"any\"` or a positive floating point number.\n     */\n    @Prop() step?: string;\n\n    /**\n     * The type of control to display. The default type is text.\n     */\n    @Prop() type: TextFieldTypes = 'text';\n\n    /**\n     * The value of the input.\n     */\n    @Prop({mutable: true}) value?: string | number | null = '';\n\n    /**\n     * Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input\n     */\n    @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n    /**\n     * Emitted when the value has changed. See https://developer.mozilla.org/en-US/docs/Web/Events/change\n     */\n    @Event() wcsChange!: EventEmitter<InputChangeEventDetail>;\n\n    /**\n     * Emitted when the input loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the input has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, ['tabindex', 'title'])\n        };\n\n        if (!isWcsInputSize(this.size)) {\n            console.error(`Invalid size value for wcs-input : \"${this.size}\". Must be one of \"${WcsInputSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    connectedCallback() {\n        this.debounceChanged();\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n                detail: this.el\n            }));\n        }\n    }\n\n    disconnectedCallback() {\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n                detail: this.el\n            }));\n        }\n    }\n\n    /**\n     * @deprecated use the native focus method instead\n     * Sets focus on the native `input` in `wcs-input`.\n     */\n    @Method()\n    async setFocus() {\n        if (this.nativeInput) {\n            this.nativeInput.focus();\n        }\n    }\n\n    /**\n     * Sets blur on the native `input` in `wcs-input`. Use this method instead of the global\n     * `input.blur()`.\n     * @internal\n     */\n    @Method()\n    async setBlur() {\n        if (this.nativeInput) {\n            this.nativeInput.blur();\n        }\n    }\n\n    /**\n     * Returns the native `<input>` element used under the hood.\n     */\n    @Method()\n    getInputElement(): Promise<HTMLInputElement> {\n        return Promise.resolve(this.nativeInput!);\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string) {\n        if (this.nativeInput) {\n            this.nativeInput.setAttribute(attr, value);\n        }\n    }\n\n    private shouldClearOnEdit() {\n        const {type, clearOnEdit} = this;\n        return (clearOnEdit === undefined)\n            ? type === 'password'\n            : clearOnEdit;\n    }\n\n    private getValueAsString(): string {\n        return typeof this.value === 'number' ? this.value.toString() :\n            (this.value || '').toString();\n    }\n\n    private onInput = (ev: Event) => {\n        const input = ev.target as HTMLInputElement | null;\n        if (input) {\n            this.value = input.value || '';\n        }\n        this.wcsInput.emit(ev as KeyboardEvent);\n    }\n\n    private onChange = (_: Event) => {\n        this.wcsChange.emit({value: this.nativeInput.value});\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        this.hasFocus = false;\n        this.focusChanged();\n\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    private onFocus = (ev: FocusEvent) => {\n        this.hasFocus = true;\n        this.focusChanged();\n\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private onKeydown = (ev: KeyboardEvent) => {\n        if (this.shouldClearOnEdit()) {\n            // Did the input value change after it was blurred and edited?\n            // Do not clear if user is hitting Enter to submit form\n            if (this.didBlurAfterEdit && this.hasValue() && ev.key !== 'Enter') {\n                // Clear the input\n                this.clearTextInput();\n            }\n\n            // Reset the flag\n            this.didBlurAfterEdit = false;\n        }\n    }\n\n    private clearTextInput = (ev?: Event) => {\n        if (this.clearInput && !this.readonly && !this.disabled && ev) {\n            ev.preventDefault();\n            ev.stopPropagation();\n\n            // Attempt to focus input again after pressing clear button\n            this.setFocus();\n        }\n\n        this.value = '';\n\n        /**\n         * This is needed for clearOnEdit\n         * Otherwise the value will not be cleared\n         * if user is inside the input\n         */\n        if (this.nativeInput) {\n            this.nativeInput.value = '';\n        }\n    }\n\n    private focusChanged() {\n        // If clearOnEdit is enabled and the input blurred but has a value, set a flag\n        if (!this.hasFocus && this.shouldClearOnEdit() && this.hasValue()) {\n            this.didBlurAfterEdit = true;\n        }\n    }\n\n    private hasValue(): boolean {\n        return this.getValueAsString().length > 0;\n    }\n\n    private passwordRevealIconClick(): void {\n        this.passwordReveal = !this.passwordReveal;\n    }\n\n    @Watch('passwordReveal')\n    onPasswordRevealChange(): void {\n        this.iconPassword = this.passwordReveal ? 'visibility_off' : 'visibility';\n    }\n\n    render() {\n        const value = this.getValueAsString();\n        const labelId = this.inputId + '-lbl';\n        const label = findItemLabel(this.el);\n        if (label) {\n            label.id = labelId;\n        }\n\n        return (\n            <Host\n                aria-disabled={this.disabled ? 'true' : null}\n                data-has-prefix={!!this.prefixLabel}\n                data-has-suffix={!!this.suffixLabel}\n            >\n                {this.prefixLabel ? (<span class=\"prefix\" part=\"prefix\">{this.prefixLabel}</span>) : null}\n                {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n                <input\n                    class=\"native-input\"\n                    ref={input => this.nativeInput = input}\n                    aria-labelledby={label ? labelId : null}\n                    disabled={this.disabled}\n                    accept={this.accept}\n                    autoCapitalize={this.autocapitalize}\n                    autoComplete={this.autocomplete}\n                    autoCorrect={this.autocorrect}\n                    autoFocus={this.autofocus}\n                    enterKeyHint={this.enterkeyhint}\n                    inputMode={this.inputmode}\n                    min={this.min}\n                    max={this.max}\n                    minLength={this.minlength}\n                    maxLength={this.maxlength}\n                    multiple={this.multiple}\n                    name={this.name}\n                    pattern={this.pattern}\n                    placeholder={this.placeholder || ''}\n                    readOnly={this.readonly}\n                    required={this.required}\n                    spellcheck={this.spellcheck}\n                    step={this.step}\n                    type={this.passwordReveal ? 'text' : this.type}\n                    value={value}\n                    onInput={this.onInput}\n                    onChange={this.onChange}\n                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    onKeyDown={this.onKeydown}\n                    {...this.inheritedAttributes}\n                />\n                {this.type === \"password\" ? (<wcs-mat-icon class=\"toggle_password\" icon={this.iconPassword} size=\"m\"  onClick={() => this.passwordRevealIconClick()}></wcs-mat-icon>) : null}\n                {this.suffixLabel ? (<span class=\"suffix\" part=\"suffix\">{this.suffixLabel}</span>) : null}\n            </Host>\n        );\n    }\n}\n\nlet inputIds = 0;\n"],"version":3}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
+const index = require('./index-749d999e.js');
 
 const labelCss = ":host{font-weight:500;margin-bottom:8px}:host([required])>label::after{font-weight:500;color:var(--wcs-red);content:\" *\"}label{display:inline-block}label ::slotted(wcs-mat-icon){display:inline;vertical-align:middle;margin-left:calc(var(--wcs-base-margin) / 2)}";
 

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

@@ -1 +1 @@
-{"file":"wcs-label.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,wQAAwQ;;MCO5Q,KAAK;;;oBAEH,KAAK;;EAEhB,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,IAAI,EAAC,OAAO,IACdD,uBACIA,qBAAQ,CACJ,CACL,EACT;GACL;;;;;;","names":["h","Host"],"sources":["./src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","./src/components/label/label.tsx"],"sourcesContent":[":host {\n    font-weight: 500;\n    margin-bottom: 8px;\n}\n\n:host([required]) > label::after {\n    font-weight: 500;\n    color: var(--wcs-red);\n    content: ' *';\n}\n\nlabel {\n    display: inline-block;\n\n    // Add margin before tooltip icon\n    ::slotted(wcs-mat-icon) {\n        display: inline;\n        vertical-align: middle;\n        margin-left: calc(var(--wcs-base-margin) / 2);\n    }\n}\n","import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'wcs-label',\n    styleUrl: 'label.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface {\n    @Prop({ reflect: true })\n    required = false;\n\n    render() {\n        return (\n            <Host slot=\"label\">\n                <label>\n                    <slot />\n                </label>\n            </Host>\n        );\n    }\n}"],"version":3}
+{"file":"wcs-label.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,wQAAwQ;;MCO5Q,KAAK;;;oBAEH,KAAK;;EAEhB,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,IAAI,EAAC,OAAO,IACdD,uBACIA,qBAAQ,CACJ,CACL,EACT;GACL;;;;;;","names":["h","Host"],"sources":["./src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","./src/components/label/label.tsx"],"sourcesContent":[":host {\n    font-weight: 500;\n    margin-bottom: 8px;\n}\n\n:host([required]) > label::after {\n    font-weight: 500;\n    color: var(--wcs-red);\n    content: ' *';\n}\n\nlabel {\n    display: inline-block;\n\n    // Add margin before tooltip icon\n    ::slotted(wcs-mat-icon) {\n        display: inline;\n        vertical-align: middle;\n        margin-left: calc(var(--wcs-base-margin) / 2);\n    }\n}\n","import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'wcs-label',\n    styleUrl: 'label.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface {\n    @Prop({ reflect: true })\n    required = false;\n\n    render() {\n        return (\n            <Host slot=\"label\">\n                <label>\n                    <slot />\n                </label>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/wcs-list-item-properties.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
+const index = require('./index-749d999e.js');
 
 const listItemPropertiesCss = ":host{margin-bottom:2px;display:block}::slotted(*:first-of-type){padding-right:1.25rem !important;padding-left:0 !important}::slotted(*:last-of-type){padding-right:0 !important;padding-left:1.25rem !important;border-right:none !important}::slotted(*){padding-right:1.25rem;padding-left:1.25rem;border-right:solid 2px var(--wcs-text-disabled)}";
 

package/dist/cjs/wcs-list-item-property.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
+const index = require('./index-749d999e.js');
 
 const listItemPropertyCss = ":host{font-weight:500 !important;color:var(--wcs-gray-light)}";
 

package/dist/cjs/wcs-list-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
+const index = require('./index-749d999e.js');
 
 const listItemCss = ":host{padding:var(--wcs-padding);border:solid 1px var(--wcs-text-light);display:flex;margin-bottom:-1px;background-color:var(--wcs-white)}:host(:hover){background-color:var(--wcs-light);transition:0.175s}:host([activated]){background-color:var(--wcs-light)}::slotted([slot=title]){color:var(--wcs-gray);font-weight:700;line-height:1.2;font-family:inherit;margin-bottom:0.5rem}::slotted([slot=icon]){color:var(--wcs-gray-light);margin-right:16px}::slotted([slot=actions]){margin-left:8px}.content{display:flex;flex-direction:column;flex-grow:1}.header{display:flex;justify-content:space-between}";
 

package/dist/cjs/wcs-mat-icon.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
+const index = require('./index-749d999e.js');
 
 const matIconCss = ":host{display:flex;flex-direction:column;justify-content:center}:host .size-s{font-size:18px !important}:host .size-m{font-size:24px !important}:host .size-l{font-size:36px !important}:host .size-xl{font-size:48px !important}:host .material-icons{font-family:\"Material Icons\";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}:host .material-icons-outlined{font-family:\"Material Icons Outlined\";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}:host .material-icons-two-tone{--google-font-color-materialiconstwotone:none;font-family:\"Material Icons Two Tone\";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}:host .material-icons-round{font-family:\"Material Icons Round\";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}:host .material-icons-sharp{font-family:\"Material Icons Sharp\";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}";
 
@@ -21,7 +21,7 @@ const MatIcon = class {
     this.family = 'filled';
   }
   render() {
-    return (index.h(index.Host, null, index.h("i", { class: ICON_FAMILY_CLASS_NAME[this.family] + ' size-' + this.size }, this.icon)));
+    return (index.h(index.Host, null, index.h("i", { "aria-hidden": "true", class: ICON_FAMILY_CLASS_NAME[this.family] + ' size-' + this.size }, this.icon)));
   }
 };
 MatIcon.style = matIconCss;

package/dist/cjs/wcs-mat-icon.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-mat-icon.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,u0DAAu0D;;ACG11D,MAAM,sBAAsB,GAAuC;EAC/D,MAAM,EAAE,gBAAgB;EACxB,QAAQ,EAAE,yBAAyB;EACnC,OAAO,EAAE,yBAAyB;EAClC,OAAO,EAAE,sBAAsB;EAC/B,KAAK,EAAE,sBAAsB;CAChC,CAAA;MAMY,OAAO;;;;gBAQiB,GAAG;kBAIC,QAAQ;;EAE7C,MAAM;IACF,QACIA,QAACC,UAAI,QACDD,eAAG,KAAK,EAAE,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,IAC/D,IAAI,CAAC,IAAI,CACV,CACD,EACT;GACL;;;;;;","names":["h","Host"],"sources":["./src/components/mat-icon/mat-icon.scss?tag=wcs-mat-icon&encapsulation=shadow","./src/components/mat-icon/mat-icon.tsx"],"sourcesContent":["@use 'mat-icon-google-stylesheets';\n\n:host {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    .size-s {\n        font-size: 18px !important;\n    }\n\n    .size-m {\n        font-size: 24px !important;\n    }\n\n    .size-l {\n        font-size: 36px !important;\n    }\n\n    .size-xl {\n        font-size: 48px !important;\n    }\n\n    @include mat-icon-google-stylesheets.material-icons-classes\n}\n","import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\nimport { MaterialIconFamily, MaterialIconSize } from './mat-icon-interface';\n\nconst ICON_FAMILY_CLASS_NAME: Record<MaterialIconFamily, string> = {\n    filled: 'material-icons',\n    outlined: 'material-icons-outlined',\n    twotone: 'material-icons-two-tone',\n    rounded: 'material-icons-round',\n    sharp: 'material-icons-sharp'\n}\n@Component({\n    tag: 'wcs-mat-icon',\n    styleUrl: 'mat-icon.scss',\n    shadow: true\n})\nexport class MatIcon implements ComponentInterface {\n    /**\n     * Use the icon name from Material Icons\n     */\n    @Prop() icon: string;\n    /**\n     * Size of the icon\n     */\n    @Prop() size: MaterialIconSize = 'm';\n    /**\n     * Family of the icon\n     */\n    @Prop() family: MaterialIconFamily = 'filled';\n\n    render() {\n        return (\n            <Host>\n                <i class={ICON_FAMILY_CLASS_NAME[this.family] + ' size-' + this.size}>\n                    {this.icon}\n                </i>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-mat-icon.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,u0DAAu0D;;ACG11D,MAAM,sBAAsB,GAAuC;EAC/D,MAAM,EAAE,gBAAgB;EACxB,QAAQ,EAAE,yBAAyB;EACnC,OAAO,EAAE,yBAAyB;EAClC,OAAO,EAAE,sBAAsB;EAC/B,KAAK,EAAE,sBAAsB;CAChC,CAAA;MAOY,OAAO;;;;gBAQiB,GAAG;kBAIC,QAAQ;;EAE7C,MAAM;IACF,QACIA,QAACC,UAAI,QACDD,8BAAe,MAAM,EAAC,KAAK,EAAE,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,IAClF,IAAI,CAAC,IAAI,CACV,CACD,EACT;GACL;;;;;;","names":["h","Host"],"sources":["./src/components/mat-icon/mat-icon.scss?tag=wcs-mat-icon&encapsulation=shadow","./src/components/mat-icon/mat-icon.tsx"],"sourcesContent":["@use 'mat-icon-google-stylesheets';\n\n:host {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    .size-s {\n        font-size: 18px !important;\n    }\n\n    .size-m {\n        font-size: 24px !important;\n    }\n\n    .size-l {\n        font-size: 36px !important;\n    }\n\n    .size-xl {\n        font-size: 48px !important;\n    }\n\n    @include mat-icon-google-stylesheets.material-icons-classes\n}\n","import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\nimport { MaterialIconFamily, MaterialIconSize } from './mat-icon-interface';\n\nconst ICON_FAMILY_CLASS_NAME: Record<MaterialIconFamily, string> = {\n    filled: 'material-icons',\n    outlined: 'material-icons-outlined',\n    twotone: 'material-icons-two-tone',\n    rounded: 'material-icons-round',\n    sharp: 'material-icons-sharp'\n}\n\n@Component({\n    tag: 'wcs-mat-icon',\n    styleUrl: 'mat-icon.scss',\n    shadow: true\n})\nexport class MatIcon implements ComponentInterface {\n    /**\n     * Use the icon name from Material Icons\n     */\n    @Prop() icon: string;\n    /**\n     * Size of the icon\n     */\n    @Prop() size: MaterialIconSize = 'm';\n    /**\n     * Family of the icon\n     */\n    @Prop() family: MaterialIconFamily = 'filled';\n\n    render() {\n        return (\n            <Host>\n                <i aria-hidden=\"true\" class={ICON_FAMILY_CLASS_NAME[this.family] + ' size-' + this.size}>\n                    {this.icon}\n                </i>\n            </Host>\n        );\n    }\n}\n"],"version":3}

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
-const accessibility = require('./accessibility-e99b032d.js');
-const helpers = require('./helpers-4a14051a.js');
+const index = require('./index-749d999e.js');
+const accessibility = require('./accessibility-c0c4e648.js');
+const helpers = require('./helpers-6280db6e.js');
 
-const modalCss = "wcs-modal{z-index:999;position:fixed;top:0;bottom:0;left:0;right:0;display:none;background:rgba(0, 0, 0, 0.4)}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 1px var(--wcs-text-light)}.wcs-modal-container{max-height:var(--wcs-modal-max-height, 80%);background-color:#fff;display:grid;grid-template-columns:100%;grid-template-rows:auto 1fr auto;box-sizing:border-box;pointer-events:auto;background-clip:padding-box;border:0 solid rgba(0, 0, 0, 0.2);border-radius:0.4375rem;z-index:20000;padding:1.375rem 1.875rem 1.875rem 1.875rem}.wcs-modal-container[data-size=s]{width:288px}.wcs-modal-container[data-size=m]{width:480px}.wcs-modal-container[data-size=l]{width:864px}.wcs-modal-container[data-size=xl]{width:1200px}.wcs-modal-header{margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}.wcs-modal-header h5{font-size:24px;font-weight:400;margin:0}.wcs-modal-content{font-weight:400;font-size:16px;overflow-y:auto}.wcs-modal-actions{margin-top:20px;display:flex;justify-content:flex-end}";
+const modalCss = "wcs-modal{z-index:999;position:fixed;top:0;bottom:0;left:0;right:0;display:none;background:rgba(0, 0, 0, 0.4)}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 1px var(--wcs-text-light)}.wcs-modal-container{max-height:var(--wcs-modal-max-height, 80%);background-color:#fff;display:grid;grid-template-columns:100%;grid-template-rows:auto 1fr auto;box-sizing:border-box;pointer-events:auto;background-clip:padding-box;border:0 solid rgba(0, 0, 0, 0.2);border-radius:0.4375rem;z-index:20000;padding:1.375rem 1.875rem 1.875rem 1.875rem}.wcs-modal-container[data-size=s]{width:288px}.wcs-modal-container[data-size=m]{width:480px}.wcs-modal-container[data-size=l]{width:864px}.wcs-modal-container[data-size=xl]{width:1200px}.wcs-modal-header{margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}.wcs-modal-header h1{font-size:24px;font-weight:400;margin:0}.wcs-modal-content{font-weight:400;font-size:16px;overflow-y:var(--wcs-modal-overflow-y, auto)}.wcs-modal-actions{margin-top:20px;display:flex;justify-content:flex-end}";
 
 const Modal = class {
   constructor(hostRef) {
@@ -24,11 +24,26 @@ const Modal = class {
      * @private
      */
     this.showAttributeChangedMarker = false;
+    /**
+     * This attribute is used to determine if the modal has been closed for the first time since its last activation.
+     * It is set to 'true' when the modal is first closed, and will be reset to 'false' when the modal is shown again.
+     * This state is important for accessibility reasons in order to focus the modal trigger element (like the button
+     * which controls the modal)
+     *
+     * @private
+     */
+    this.hasBeenClosedBefore = false;
     this.withoutBackdrop = false;
     this.show = false;
     this.showCloseButton = false;
     this.size = 'm';
     this.hideActions = false;
+    this.modalTriggerControlsId = undefined;
+  }
+  componentWillLoad() {
+    if (!this.modalTriggerControlsId) {
+      console.warn('wcs-modal: You must provide the modal-trigger-controls-id attribute to the modal to make it to work properly');
+    }
   }
   componentDidLoad() {
     this.updateFocusableElements();
@@ -43,8 +58,23 @@ const Modal = class {
   }
   onShowChange() {
     if (this.show) {
+      this.hasBeenClosedBefore = false;
       this.showAttributeChangedMarker = true;
     }
+    else {
+      // if we already made actions when the modal was firstly closed, we do nothing
+      if (this.hasBeenClosedBefore) {
+        return;
+      }
+      this.hasBeenClosedBefore = true;
+      if (this.modalTriggerControlsId) {
+        const modalTriggerControlsHtmlElement = document.getElementById(this.modalTriggerControlsId);
+        if (!modalTriggerControlsHtmlElement) {
+          console.warn(`wcs-modal: Element with id '${this.modalTriggerControlsId}' could not be found`);
+        }
+        modalTriggerControlsHtmlElement === null || modalTriggerControlsHtmlElement === void 0 ? void 0 : modalTriggerControlsHtmlElement.focus();
+      }
+    }
   }
   updateFocusableElements() {
     const focusableElements = Array.from(this.el.querySelectorAll('*'))
@@ -86,7 +116,7 @@ const Modal = class {
   }
   render() {
     const modalTitleId = `wcs-modal-title-${this.modalId}`;
-    return (index.h(index.Host, null, index.h("div", { class: "wcs-modal-container", "data-size": this.size, "aria-modal": true, role: "dialog", "aria-labelledby": modalTitleId }, index.h("div", { class: "wcs-modal-header" }, index.h("h5", { id: modalTitleId }, index.h("slot", { name: "header" })), this.showCloseButton && (index.h("wcs-button", { shape: "round", mode: "clear", class: "wcs-dark", onClick: ($event) => this.onCloseButtonClick($event) }, index.h("wcs-mat-icon", { icon: "close" })))), index.h("div", { class: "wcs-modal-content" }, index.h("slot", { onSlotchange: () => this.handleSlotContentChange() })), !this.hideActions && (index.h("div", { class: "wcs-modal-actions" }, index.h("slot", { name: "actions" }))))));
+    return (index.h(index.Host, null, index.h("div", { class: "wcs-modal-container", "data-size": this.size, "aria-modal": true, role: "dialog", "aria-labelledby": modalTitleId }, index.h("div", { class: "wcs-modal-header" }, index.h("h1", { id: modalTitleId }, index.h("slot", { name: "header" })), this.showCloseButton && (index.h("wcs-button", { shape: "round", mode: "clear", class: "wcs-dark", onClick: ($event) => this.onCloseButtonClick($event) }, index.h("wcs-mat-icon", { icon: "close" })))), index.h("div", { class: "wcs-modal-content" }, index.h("slot", { onSlotchange: () => this.handleSlotContentChange() })), !this.hideActions && (index.h("div", { class: "wcs-modal-actions" }, index.h("slot", { name: "actions" }))))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"wcs-modal.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,ypCAAypC;;MCqB7pC,KAAK;;;;;;;;IAuCN,YAAO,GAAW,QAAQ,EAAE,CAAC;;;;;;;IAU7B,+BAA0B,GAAY,KAAK,CAAC;2BA3CF,KAAK;gBAKhB,KAAK;2BAWM,KAAK;gBAM7B,GAAG;uBAKiB,KAAK;;EAkBnD,gBAAgB;IACZ,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAClC;EAED,kBAAkB;;IACd,IAAI,CAAC,uBAAuB,EAAE,CAAC;IAC/B,IAAI,IAAI,CAAC,0BAA0B,EAAE;MACjC,IAAI,CAAC,0BAA0B,GAAG,KAAK,CAAC;MACxC,MAAA,IAAI,CAAC,qBAAqB,0CAAE,KAAK,EAAE,CAAC;KACvC;GACJ;EAGD,YAAY;IACR,IAAG,IAAI,CAAC,IAAI,EAAE;MACV,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC;KAC1C;GACJ;EAEO,uBAAuB;IAC3B,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;OAC9D,MAAM,CAAC,OAAO,IAAIA,yBAAW,CAAC,OAAO,CAAC,CAAC,CAAC;IAE7C,IAAI,CAAC,qBAAqB,GAAG,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAgB,CAAC;IACjG,IAAI,CAAC,oBAAoB,GAAG,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAgB,CAAC;GAC9H;EAEO,KAAK;;IAET,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;KAC/B;GACJ;EAGD,SAAS,CAAC,KAAoB;IAC1B,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;MAC7D,IAAI,CAAC,KAAK,EAAE,CAAC;KAChB;IAED,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,MAAM,YAAY,GAAG,IAAI,CAAC,qBAAqB,CAAC;MAChD,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC;MAE9C,IAAIC,gBAAQ,CAAC,KAAK,CAAC,EAAE;QACjB,IAAI,KAAK,CAAC,QAAQ,IAAIC,8BAAgB,CAAC,YAAY,CAAC,EAAE;UAClD,KAAK,CAAC,cAAc,EAAE,CAAC;UACvB,WAAW,CAAC,KAAK,EAAE,CAAC;SACvB;aAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAIA,8BAAgB,CAAC,WAAW,CAAC,EAAE;UACzD,KAAK,CAAC,cAAc,EAAE,CAAC;UACvB,YAAY,CAAC,KAAK,EAAE,CAAC;SACxB;OACJ;KACJ;GACJ;EAEO,kBAAkB,CAAC,CAAa;IACpC,IAAI,CAAC,KAAK,EAAE,CAAC;GAChB;EAEO,uBAAuB;IAC3B,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAClC;EAED,MAAM;IACF,MAAM,YAAY,GAAG,mBAAmB,IAAI,CAAC,OAAO,EAAE,CAAC;IACvD,QACIC,QAACC,UAAI,QACDD,iBAAK,KAAK,EAAC,qBAAqB,eAChB,IAAI,CAAC,IAAI,gBACR,IAAI,EAChB,IAAI,EAAE,QAAQ,qBACG,YAAY,IAE9BA,iBAAK,KAAK,EAAC,kBAAkB,IACzBA,gBAAI,EAAE,EAAE,YAAY,IAChBA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CAC1B,EACJ,IAAI,CAAC,eAAe,KACjBA,wBAAY,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,UAAU,EAC3C,OAAO,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,IAC5DA,0BAAc,IAAI,EAAC,OAAO,GAAgB,CACjC,CAAC,CAGhB,EACNA,iBAAK,KAAK,EAAC,mBAAmB,IAC1BA,kBAAM,YAAY,EAAE,MAAM,IAAI,CAAC,uBAAuB,EAAE,GAAS,CAC/D,EACL,CAAC,IAAI,CAAC,WAAW,KACdA,iBAAK,KAAK,EAAC,mBAAmB,IAC1BA,kBAAM,IAAI,EAAC,SAAS,GAAQ,CAC1B,CAAC,CAET,CACH,EACT;GACL;;;;;;AAGL,IAAI,QAAQ,GAAG,CAAC,CAAC;;;;;","names":["isFocusable","isTabKey","isElementFocused","h","Host"],"sources":["./src/components/modal/modal.scss?tag=wcs-modal","./src/components/modal/modal.tsx"],"sourcesContent":["wcs-modal {\n    z-index: 999;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: none;\n    background: rgba(0, 0, 0, 0.4);\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 1px var(--wcs-text-light);\n    }\n}\n\n/**\nModal window\n */\n.wcs-modal-container {\n    max-height: var(--wcs-modal-max-height, 80%);\n    background-color: #fff;\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: 0 solid rgba(0, 0, 0, 0.2);\n    border-radius: 0.4375rem;\n    z-index: 20000;\n    padding: 1.375rem 1.875rem 1.875rem 1.875rem;\n}\n\n.wcs-modal-container[data-size=s] {\n    width: 288px;\n}\n\n.wcs-modal-container[data-size=m] {\n    width: 480px;\n}\n\n.wcs-modal-container[data-size=l] {\n    width: 864px;\n}\n\n.wcs-modal-container[data-size=xl] {\n    width: 1200px;\n}\n\n.wcs-modal-header {\n    h5 {\n        font-size: 24px;\n        font-weight: 400;\n        margin: 0;\n    }\n\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.wcs-modal-content {\n    font-weight: 400;\n    font-size: 16px;\n    overflow-y: auto;\n}\n\n.wcs-modal-actions {\n    margin-top: 20px;\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\n} from '@stencil/core';\nimport { ModalSize } from './modal-interface';\nimport { isElementFocused, isFocusable } from \"../../utils/accessibility\";\nimport { isTabKey } from \"../../utils/helpers\";\n\n@Component({\n    tag: 'wcs-modal',\n    styleUrl: 'modal.scss',\n    shadow: false,\n})\nexport class Modal implements ComponentInterface {\n    @Element() el: HTMLElement;\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}) 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     * 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     * 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    componentDidLoad() {\n        this.updateFocusableElements();\n    }\n\n    componentDidRender() {\n        this.updateFocusableElements();\n        if (this.showAttributeChangedMarker) {\n            this.showAttributeChangedMarker = false;\n            this.firstFocusableElement?.focus();\n        }\n    }\n    \n    @Watch(\"show\")\n    onShowChange() {\n        if(this.show) {\n            this.showAttributeChangedMarker = true;\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            const firstElement = this.firstFocusableElement;\n            const lastElement = this.lastFocusableElement;\n\n            if (isTabKey(event)) {\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                >\n                    <div class=\"wcs-modal-header\">\n                        <h5 id={modalTitleId}>\n                            <slot name=\"header\"></slot>\n                        </h5>\n                        {this.showCloseButton && (\n                            <wcs-button shape=\"round\" mode=\"clear\" class=\"wcs-dark\"\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.cjs.js","mappings":"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","names":["isFocusable","isTabKey","isElementFocused","h","Host"],"sources":["./src/components/modal/modal.scss?tag=wcs-modal","./src/components/modal/modal.tsx"],"sourcesContent":["wcs-modal {\n    z-index: 999;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: none;\n    background: rgba(0, 0, 0, 0.4);\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 1px var(--wcs-text-light);\n    }\n}\n\n/**\nModal window\n */\n.wcs-modal-container {\n    max-height: var(--wcs-modal-max-height, 80%);\n    background-color: #fff;\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: 0 solid rgba(0, 0, 0, 0.2);\n    border-radius: 0.4375rem;\n    z-index: 20000;\n    padding: 1.375rem 1.875rem 1.875rem 1.875rem;\n}\n\n.wcs-modal-container[data-size=s] {\n    width: 288px;\n}\n\n.wcs-modal-container[data-size=m] {\n    width: 480px;\n}\n\n.wcs-modal-container[data-size=l] {\n    width: 864px;\n}\n\n.wcs-modal-container[data-size=xl] {\n    width: 1200px;\n}\n\n.wcs-modal-header {\n    h1 {\n        font-size: 24px;\n        font-weight: 400;\n        margin: 0;\n    }\n\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.wcs-modal-content {\n    font-weight: 400;\n    font-size: 16px;\n    overflow-y: var(--wcs-modal-overflow-y, auto);\n}\n\n.wcs-modal-actions {\n    margin-top: 20px;\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\n} from '@stencil/core';\nimport { ModalSize } from './modal-interface';\nimport { isElementFocused, isFocusable } from \"../../utils/accessibility\";\nimport { isTabKey } from \"../../utils/helpers\";\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 * <details>\n *     <summary>Accessibility guidelines 💡</summary>\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 *     > - 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 * </details>\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 * @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 {\n    @Element() private el: HTMLElement;\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     * 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    /**\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\n    componentDidLoad() {\n        this.updateFocusableElements();\n    }\n\n    componentDidRender() {\n        this.updateFocusableElements();\n        if (this.showAttributeChangedMarker) {\n            this.showAttributeChangedMarker = false;\n            this.firstFocusableElement?.focus();\n        }\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            const firstElement = this.firstFocusableElement;\n            const lastElement = this.lastFocusableElement;\n\n            if (isTabKey(event)) {\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                >\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\" mode=\"clear\" class=\"wcs-dark\"\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}

package/dist/cjs/wcs-native-select.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
-const selectArrow = require('./select-arrow-c9583ea9.js');
+const index = require('./index-749d999e.js');
+const selectArrow = require('./select-arrow-8169c0cb.js');
 
-const nativeSelectCss = ":host{box-sizing:border-box}::slotted(select){box-sizing:border-box;-moz-appearance:none !important;-webkit-appearance:none !important;appearance:none !important;--wcs-select-native-ligther-percentage:40;--wcs-select-native-border-radius:var(--wcs-border-radius);--wcs-select-native-background-color:var(--wcs-light);--wcs-select-native-placeholder-color:var(--wcs-text-medium);--wcs-select-native-value-color:var(--wcs-primary);--wcs-select-native-border-color:transparent;--wcs-select-native-overlay-max-height:360px;--wcs-select-native-border-width:2px;background-color:var(--wcs-select-native-background-color);color:var(--wcs-select-native-color);border-radius:var(--wcs-border-radius);border:none;outline:none;user-select:none;cursor:pointer;line-height:1.5;font-size:1rem;max-width:100%;flex-grow:1;padding-right:calc(var(--wcs-base-margin) * 2 + 24px);padding-left:calc(var(--wcs-base-margin) * 2)}::slotted(select:disabled){cursor:not-allowed;color:var(--wcs-text-disabled)}:host([data-disabled]) .select-wrapper .arrow-container .arrow{fill:var(--wcs-text-medium)}:host([data-size=m]) ::slotted(select){height:var(--wcs-size-m)}:host([data-size=l]) ::slotted(select){height:var(--wcs-size-l)}::slotted(select:focus){background-clip:padding-box;box-shadow:inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-primary);background-color:var(--wcs-white)}.select-wrapper{position:relative;display:flex;flex-wrap:nowrap}svg{flex-shrink:0}.arrow{fill:var(--wcs-primary)}.arrow-container{pointer-events:none;display:flex;align-items:center;vertical-align:center;position:absolute;top:0;bottom:0;right:calc(var(--wcs-padding) - 1px);margin:auto 0}";
+const nativeSelectCss = ":host{box-sizing:border-box}::slotted(select){box-sizing:border-box;-moz-appearance:none !important;-webkit-appearance:none !important;appearance:none !important;--wcs-select-native-ligther-percentage:40;--wcs-select-native-border-radius:var(--wcs-border-radius);--wcs-select-native-background-color:var(--wcs-light);--wcs-select-native-placeholder-color:var(--wcs-text-medium);--wcs-select-native-value-color:var(--wcs-primary);--wcs-select-native-border-color:transparent;--wcs-select-native-overlay-max-height:360px;--wcs-select-native-border-width:1px;background-color:var(--wcs-select-native-background-color);color:var(--wcs-select-native-color);border-radius:var(--wcs-border-radius);border:none;outline:none;user-select:none;cursor:pointer;line-height:1.5;font-size:1rem;max-width:100%;flex-grow:1;padding-right:calc(var(--wcs-base-margin) * 2 + 24px);padding-left:calc(var(--wcs-base-margin) * 2)}::slotted(select:disabled){cursor:not-allowed;color:var(--wcs-text-disabled)}:host([data-disabled]) .select-wrapper .arrow-container .arrow{fill:var(--wcs-text-medium)}:host([data-size=m]) ::slotted(select){height:var(--wcs-size-m)}:host([data-size=l]) ::slotted(select){height:var(--wcs-size-l)}::slotted(select:focus-visible){outline:2px dashed var(--wcs-primary);outline-offset:0;border-radius:var(--wcs-select-border-radius);border-radius:var(--wcs-select-native-border-radius)}.select-wrapper{position:relative;display:flex;flex-wrap:nowrap}svg{flex-shrink:0}.arrow{fill:var(--wcs-primary)}.arrow-container{pointer-events:none;display:flex;align-items:center;vertical-align:center;position:absolute;top:0;bottom:0;right:calc(var(--wcs-padding) - 1px);margin:auto 0}";
 
 const NativeSelect = class {
   constructor(hostRef) {
@@ -15,6 +15,9 @@ const NativeSelect = class {
     this.expanded = false;
     this.disabled = undefined;
   }
+  async setAriaAttribute(attr, value) {
+    this.selectElement.setAttribute(attr, value);
+  }
   componentWillLoad() {
     this.selectElement = this.el.querySelector('select');
     if (!this.selectElement)

package/dist/cjs/wcs-native-select.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-native-select.entry.cjs.js","mappings":"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","names":["h","Host","SelectArrow"],"sources":["./src/components/native-select/native-select.scss?tag=wcs-native-select&encapsulation=shadow","./src/components/native-select/native-select.tsx"],"sourcesContent":["// TODO: voir pour mettre en commun avec le style du composant personnalisée\n@import '../../style/focus-outline.scss';\n\n:host {\n    box-sizing: border-box;\n}\n\n::slotted(select) {\n    box-sizing: border-box;\n    -moz-appearance:none !important;\n    -webkit-appearance: none !important;\n    appearance: none !important;\n\n    --wcs-select-native-ligther-percentage: 40;\n    --wcs-select-native-border-radius: var(--wcs-border-radius);\n    --wcs-select-native-background-color: var(--wcs-light);\n    --wcs-select-native-placeholder-color: var(--wcs-text-medium);\n    --wcs-select-native-value-color: var(--wcs-primary);\n    --wcs-select-native-border-color: transparent;\n    --wcs-select-native-overlay-max-height: 360px;\n    --wcs-select-native-border-width: 2px;\n\n    background-color: var(--wcs-select-native-background-color);\n\n    color: var(--wcs-select-native-color);\n\n    border-radius: var(--wcs-border-radius);\n    border: none;\n\n    outline: none;\n    user-select: none;\n    cursor: pointer;\n    line-height: 1.5;\n    font-size: 1rem;\n\n    max-width: 100%;\n    flex-grow: 1;\n    padding-right: calc((var(--wcs-base-margin) * 2) + 24px);\n    padding-left: calc(var(--wcs-base-margin) * 2);\n}\n\n::slotted(select:disabled) {\n    cursor: not-allowed;\n    color: var(--wcs-text-disabled);\n}\n\n:host([data-disabled]) {\n    .select-wrapper {\n        .arrow-container {\n            .arrow {\n                fill: var(--wcs-text-medium);\n            }\n        }\n    }\n}\n\n:host([data-size=m])  {\n    ::slotted(select) {\n        height: var(--wcs-size-m);\n    }\n}\n\n:host([data-size=l]) {\n    ::slotted(select) {\n        height: var(--wcs-size-l);\n    }\n}\n\n::slotted(select:focus) {\n    background-clip: padding-box;\n    box-shadow: inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-primary);\n    background-color: var(--wcs-white);\n}\n\n.select-wrapper {\n    position: relative;\n\n    display: flex;\n    flex-wrap: nowrap;\n}\n\n// So the arrow on the right doesn't shrink when text overflows.\nsvg {\n    flex-shrink: 0;\n}\n\n.arrow {\n    fill: var(--wcs-primary);\n}\n\n.arrow-container {\n    pointer-events: none;\n    display: flex;\n    align-items: center;\n    vertical-align: center;\n\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: calc(var(--wcs-padding) - 1px);\n    margin: auto 0;\n}\n","import { Component, h, ComponentInterface, State, Prop, Host, Element, Method } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsSize } from \"../../shared-types\";\n\nexport type WcsNativeSelectSize = Extract<WcsSize, 'l' | 'm'>; // todo: move into common file with custom select\n\n/**\n * The `wcs-native-select` component is designed to accept a native `<select>` element as a slotted child. This choice\n * allows developers to bind the `<select>` element using the framework of their choice, without the need to re-expose all the\n * properties of the `<select>` and `<option>` elements in this component.\n *\n * The component wraps the native `<select>` element and provides custom styles and behavior, while preserving the native\n * functionality and accessibility.\n *\n * ### ✅ Guidance\n *\n * - To have a placeholder, you must have an option as child which has `selected` attribute and `disabled`\n * attribute. You can add the `hidden` attribute to don't show the placeholder option in the options overlay.\n *\n * ### Example usage\n *\n * ```html\n * <wcs-native-select>\n *   <select>\n *     <option value=\"option1\">Option 1</option>\n *     <option value=\"option2\">Option 2</option>\n *     <option value=\"option3\">Option 3</option>\n *   </select>\n * </wcs-native-select>\n * ```\n *\n * ### Note\n * - We did not find a way to detect when the select is reset, if you want to apply the placeholder style when the\n * select is reset, you have to call the `updateStyles()` method manually.\n * - It is strongly recommended to use select-native when you don't have to support the multi-selection feature\n */\n@Component({\n    tag: 'wcs-native-select',\n    styleUrl: 'native-select.scss',\n    shadow: true\n})\nexport class NativeSelect implements ComponentInterface {\n    /**\n     * The `size` property controls the size of the slotted `select` element by adjusting its padding.\n     * There are two possible size options:\n     * - 'm': medium size\n     * - 'l': large size\n     *\n     * The default value is 'm'.\n     */\n    @Prop({reflect: true}) size: WcsNativeSelectSize = 'm';\n\n    @Element() private el!: HTMLWcsNativeSelectElement;\n\n    @State() private expanded: boolean = false;\n    @State() private disabled: boolean;\n\n    private selectElement: HTMLSelectElement;\n    private observer: MutationObserver;\n\n\n    private readonly SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST = ['disabled'];\n\n    componentWillLoad() {\n        this.selectElement = this.el.querySelector('select');\n        if (!this.selectElement) throw new Error(\"wcs-native-select must be used with a native slotted select, please refer to the documentation.\");\n\n        this.onSelectedOptionChange();\n\n        /**\n         * We use an event listener to apply the default style to the select when user chose an active option\n         */\n        this.selectElement.addEventListener('change', () => {\n            this.onSelectedOptionChange();\n        });\n\n        this.observer = new MutationObserver(mutations => {\n            const hasSpiedAttrMutation = mutations.filter(m => this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(m.attributeName)).length > 0;\n            if (hasSpiedAttrMutation) {\n                this.updateHostAttributeWithSlottedSelect();\n            }\n\n            // A workaround to detect when the select is reset by using a class change on the select element. For example\n            // angular add/remove ng-pristine and ng-dirty classes on the form controls when the form is reset.\n            // Not the best solution but it works since we cannot detect the reset event on the native select element.\n            if (mutations.filter(m => m.attributeName === 'class').length > 0) {\n                this._updateStyles();\n            }\n        });\n        this.updateHostAttributeWithSlottedSelect();\n        this.observer.observe(this.selectElement, {attributes: true});\n    }\n\n    private onSelectedOptionChange(): void {\n        this._updateStyles();\n    }\n\n    private _updateStyles() {\n        if (this.isPlaceholderOptionSelected()) {\n            this.applyPlaceholderStylesOnNativeSlottedSelectElement();\n        } else {\n            this.applySelectedOptionStylesOnNativeSlottedSelectElement();\n        }\n    }\n\n    private isPlaceholderOptionSelected() {\n        return Array.from(this.selectElement.options).filter(o => o.selected)[0]?.disabled == true;\n    }\n\n    /**\n     * This method should always unset all styles modified by the `applyPlaceholderStylesOnNativeSlottedSelectElement()`\n     * @private\n     */\n    private applySelectedOptionStylesOnNativeSlottedSelectElement() {\n        this.selectElement.style.color = \"var(--wcs-primary)\";\n        this.selectElement.style.fontStyle = 'normal';\n        this.selectElement.style.fontWeight = '500';\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = 'normal';\n            if (!option.disabled) {\n                option.style.color = \"black\";\n            }\n        });\n    }\n\n    /**\n     * This method apply styles when the placeholder is shown.\n     *\n     * We use javascript because we cannot achieve that behaviour in pure css when the native select is not required\n     * @private\n     */\n    private applyPlaceholderStylesOnNativeSlottedSelectElement() {\n        this.selectElement.style.color = \"var(--wcs-text-medium)\";\n        this.selectElement.style.fontWeight = '400';\n        this.selectElement.style.fontStyle = 'italic';\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = 'normal';\n            if (!option.disabled) {\n                option.style.color = \"black\";\n            }\n        });\n    }\n\n    private updateHostAttributeWithSlottedSelect() {\n        this.disabled = this.selectElement?.hasAttribute('disabled');\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n        this.selectElement?.removeEventListener(\"change\", () => {\n            this.onSelectedOptionChange();\n        });\n    }\n\n    /**\n     * Use this method to force the component to update its styles. It can be useful when the select is reset (with a placeholder).\n     */\n    @Method()\n    async updateStyles() {\n        // Note : we try to automatically detect if the select is reset with the onreset event and with a mutation\n        // observer on the select element. But it seems that the onreset event is not fired when the select is reset.\n        // and the mutation observer is not fired when the select is reset with the reset() method on the form.\n        // So we have to let the user call this method manually when he reset the select.\n        this._updateStyles();\n    }\n\n    render() {\n        return (\n            <Host class={`${this.expanded ? 'expanded' : ''}`} data-disabled={this.disabled} data-size={this.size}>\n                <div class=\"select-wrapper\">\n                    <slot></slot>\n                    <div class=\"arrow-container\">\n                        <SelectArrow up={this.expanded}></SelectArrow>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-native-select.entry.cjs.js","mappings":"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","names":["h","Host","SelectArrow"],"sources":["./src/components/native-select/native-select.scss?tag=wcs-native-select&encapsulation=shadow","./src/components/native-select/native-select.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    box-sizing: border-box;\n}\n\n::slotted(select) {\n    box-sizing: border-box;\n    -moz-appearance:none !important;\n    -webkit-appearance: none !important;\n    appearance: none !important;\n\n    --wcs-select-native-ligther-percentage: 40;\n    --wcs-select-native-border-radius: var(--wcs-border-radius);\n    --wcs-select-native-background-color: var(--wcs-light);\n    --wcs-select-native-placeholder-color: var(--wcs-text-medium);\n    --wcs-select-native-value-color: var(--wcs-primary);\n    --wcs-select-native-border-color: transparent;\n    --wcs-select-native-overlay-max-height: 360px;\n    --wcs-select-native-border-width: 1px;\n\n    background-color: var(--wcs-select-native-background-color);\n\n    color: var(--wcs-select-native-color);\n\n    border-radius: var(--wcs-border-radius);\n    border: none;\n\n    outline: none;\n    user-select: none;\n    cursor: pointer;\n    line-height: 1.5;\n    font-size: 1rem;\n\n    max-width: 100%;\n    flex-grow: 1;\n    padding-right: calc((var(--wcs-base-margin) * 2) + 24px);\n    padding-left: calc(var(--wcs-base-margin) * 2);\n}\n\n::slotted(select:disabled) {\n    cursor: not-allowed;\n    color: var(--wcs-text-disabled);\n}\n\n:host([data-disabled]) {\n    .select-wrapper {\n        .arrow-container {\n            .arrow {\n                fill: var(--wcs-text-medium);\n            }\n        }\n    }\n}\n\n:host([data-size=m])  {\n    ::slotted(select) {\n        height: var(--wcs-size-m);\n    }\n}\n\n:host([data-size=l]) {\n    ::slotted(select) {\n        height: var(--wcs-size-l);\n    }\n}\n\n::slotted(select:focus-visible) {\n    @include focus-outline($border-radius: var(--wcs-select-border-radius), $outline-offset: 0);\n    border-radius: var(--wcs-select-native-border-radius);\n}\n\n.select-wrapper {\n    position: relative;\n\n    display: flex;\n    flex-wrap: nowrap;\n}\n\n// So the arrow on the right doesn't shrink when text overflows.\nsvg {\n    flex-shrink: 0;\n}\n\n.arrow {\n    fill: var(--wcs-primary);\n}\n\n.arrow-container {\n    pointer-events: none;\n    display: flex;\n    align-items: center;\n    vertical-align: center;\n\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: calc(var(--wcs-padding) - 1px);\n    margin: auto 0;\n}\n","import { Component, h, ComponentInterface, State, Prop, Host, Element, Method } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsSize } from \"../../shared-types\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nexport type WcsNativeSelectSize = Extract<WcsSize, 'l' | 'm'>; // todo: move into common file with custom select\n\n/**\n * The `wcs-native-select` component is designed to accept a native `<select>` element as a slotted child. This choice\n * allows developers to bind the `<select>` element using the framework of their choice, without the need to re-expose all the\n * properties of the `<select>` and `<option>` elements in this component.\n *\n * The component wraps the native `<select>` element and provides custom styles and behavior, while preserving the native\n * functionality and accessibility.\n *\n * ### ✅ Guidance\n *\n * - To have a placeholder, you must have an option as child which has `selected` attribute and `disabled`\n * attribute. You can add the `hidden` attribute to don't show the placeholder option in the options overlay.\n *\n * ### Example usage\n *\n * ```html\n * <wcs-native-select>\n *   <select>\n *     <option value=\"option1\">Option 1</option>\n *     <option value=\"option2\">Option 2</option>\n *     <option value=\"option3\">Option 3</option>\n *   </select>\n * </wcs-native-select>\n * ```\n *\n * ### Note\n * - We did not find a way to detect when the select is reset, if you want to apply the placeholder style when the\n * select is reset, you have to call the `updateStyles()` method manually.\n * - It is strongly recommended to use select-native when you don't have to support the multi-selection feature\n */\n@Component({\n    tag: 'wcs-native-select',\n    styleUrl: 'native-select.scss',\n    shadow: true\n})\nexport class NativeSelect implements ComponentInterface, MutableAriaAttribute {\n    /**\n     * The `size` property controls the size of the slotted `select` element by adjusting its padding.\n     * There are two possible size options:\n     * - 'm': medium size\n     * - 'l': large size\n     *\n     * The default value is 'm'.\n     */\n    @Prop({reflect: true}) size: WcsNativeSelectSize = 'm';\n    @Element() private el!: HTMLWcsNativeSelectElement;\n\n    @State() private expanded: boolean = false;\n\n    @State() private disabled: boolean;\n    private selectElement: HTMLSelectElement;\n\n    private observer: MutationObserver;\n    private readonly SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST = ['disabled'];\n\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string) {\n        this.selectElement.setAttribute(attr, value);\n    }\n\n\n    componentWillLoad() {\n        this.selectElement = this.el.querySelector('select');\n        if (!this.selectElement) throw new Error(\"wcs-native-select must be used with a native slotted select, please refer to the documentation.\");\n\n        this.onSelectedOptionChange();\n\n        /**\n         * We use an event listener to apply the default style to the select when user chose an active option\n         */\n        this.selectElement.addEventListener('change', () => {\n            this.onSelectedOptionChange();\n        });\n\n        this.observer = new MutationObserver(mutations => {\n            const hasSpiedAttrMutation = mutations.filter(m => this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(m.attributeName)).length > 0;\n            if (hasSpiedAttrMutation) {\n                this.updateHostAttributeWithSlottedSelect();\n            }\n\n            // A workaround to detect when the select is reset by using a class change on the select element. For example\n            // angular add/remove ng-pristine and ng-dirty classes on the form controls when the form is reset.\n            // Not the best solution but it works since we cannot detect the reset event on the native select element.\n            if (mutations.filter(m => m.attributeName === 'class').length > 0) {\n                this._updateStyles();\n            }\n        });\n        this.updateHostAttributeWithSlottedSelect();\n        this.observer.observe(this.selectElement, {attributes: true});\n    }\n\n    private onSelectedOptionChange(): void {\n        this._updateStyles();\n    }\n\n    private _updateStyles() {\n        if (this.isPlaceholderOptionSelected()) {\n            this.applyPlaceholderStylesOnNativeSlottedSelectElement();\n        } else {\n            this.applySelectedOptionStylesOnNativeSlottedSelectElement();\n        }\n    }\n\n    private isPlaceholderOptionSelected() {\n        return Array.from(this.selectElement.options).filter(o => o.selected)[0]?.disabled == true;\n    }\n\n    /**\n     * This method should always unset all styles modified by the `applyPlaceholderStylesOnNativeSlottedSelectElement()`\n     * @private\n     */\n    private applySelectedOptionStylesOnNativeSlottedSelectElement() {\n        this.selectElement.style.color = \"var(--wcs-primary)\";\n        this.selectElement.style.fontStyle = 'normal';\n        this.selectElement.style.fontWeight = '500';\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = 'normal';\n            if (!option.disabled) {\n                option.style.color = \"black\";\n            }\n        });\n    }\n\n    /**\n     * This method apply styles when the placeholder is shown.\n     *\n     * We use javascript because we cannot achieve that behaviour in pure css when the native select is not required\n     * @private\n     */\n    private applyPlaceholderStylesOnNativeSlottedSelectElement() {\n        this.selectElement.style.color = \"var(--wcs-text-medium)\";\n        this.selectElement.style.fontWeight = '400';\n        this.selectElement.style.fontStyle = 'italic';\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = 'normal';\n            if (!option.disabled) {\n                option.style.color = \"black\";\n            }\n        });\n    }\n\n    private updateHostAttributeWithSlottedSelect() {\n        this.disabled = this.selectElement?.hasAttribute('disabled');\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n        this.selectElement?.removeEventListener(\"change\", () => {\n            this.onSelectedOptionChange();\n        });\n    }\n\n    /**\n     * Use this method to force the component to update its styles. It can be useful when the select is reset (with a placeholder).\n     */\n    @Method()\n    async updateStyles() {\n        // Note : we try to automatically detect if the select is reset with the onreset event and with a mutation\n        // observer on the select element. But it seems that the onreset event is not fired when the select is reset.\n        // and the mutation observer is not fired when the select is reset with the reset() method on the form.\n        // So we have to let the user call this method manually when he reset the select.\n        this._updateStyles();\n    }\n\n    render() {\n        return (\n            <Host class={`${this.expanded ? 'expanded' : ''}`} data-disabled={this.disabled} data-size={this.size}>\n                <div class=\"select-wrapper\">\n                    <slot></slot>\n                    <div class=\"arrow-container\">\n                        <SelectArrow up={this.expanded}></SelectArrow>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
-const helpers = require('./helpers-4a14051a.js');
+const index = require('./index-749d999e.js');
+const helpers = require('./helpers-6280db6e.js');
 
 const navItemCss = "wcs-nav-item{display:block;cursor:pointer}wcs-nav-item a{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;text-align:center;background-color:transparent;border:none;text-decoration:none;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;height:5rem;font-size:0.75rem;color:var(--wcs-contrast)}wcs-nav-item a:not(.active){border-bottom:1px solid rgba(255, 255, 255, 0.2)}@media (max-width: 1199px){wcs-nav-item a{display:flex;flex:1;height:3.25rem;font-size:0.625rem;color:var(--wcs-text-medium)}}wcs-nav-item a:focus{outline:none}@media (max-width: 1199px){wcs-nav-item:focus-within{outline:2px dashed var(--wcs-primary);outline-offset:1px;border-radius:0.1rem}}@media (min-width: 1200px){wcs-nav-item:focus-within{outline:2px dashed var(--wcs-white);outline-offset:-2px;border-radius:0.1rem}}wcs-nav-item i{margin-bottom:0.5rem;display:inline-block}@media (max-width: 1199px){wcs-nav-item i{margin-bottom:0.25rem;display:inline-block}}@media (min-width: 1200px){wcs-nav-item[slot=bottom] a{border-top:1px solid rgba(255, 255, 255, 0.2);border-bottom:none}}.wcs-nav-item-text{font-weight:500}.active,wcs-nav-item:hover,wcs-nav-item:focus-within{background-blend-mode:multiply;background-color:rgba(0, 0, 0, 0.15);}@media (max-width: 1199px){.active,wcs-nav-item:hover,wcs-nav-item:focus-within{background-color:unset}.active a,wcs-nav-item:hover a,wcs-nav-item:focus-within a{color:var(--wcs-primary)}}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca67a6dc.js');
+const index = require('./index-749d999e.js');
 
 const navCss = "nav{background-image:linear-gradient(0deg, var(--wcs-primary), var(--wcs-primary));display:flex;z-index:1055;flex-direction:column;width:6.25rem;height:100%}@media (max-width: 1199px){nav{flex-direction:row;background-image:linear-gradient(0deg, var(--wcs-light), var(--wcs-light));border-top:1px solid #d8d8d8;bottom:0;width:100%;height:3.25rem}}@media (max-width: 1199px){::slotted(wcs-nav-item){flex:1}}@media (min-width: 1200px){slot[name=bottom],wcs-nav-item:not([slot=bottom])+wcs-nav-item[slot=bottom]{display:block;margin-top:auto}}";