wcs-core 7.0.0 → 7.2.0

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

@@ -1,168 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-6f0140d8.js');
-const mutableAriaAttribute = require('./mutable-aria-attribute-342a2304.js');
-
-const errorCss = ":host{--wcs-error-color:var(--wcs-semantic-color-text-critical);--wcs-error-font-size:var(--wcs-semantic-font-size-caption-2);--wcs-error-font-weight:var(--wcs-semantic-font-weight-book);color:var(--wcs-error-color);font-size:var(--wcs-error-font-size);font-weight:var(--wcs-error-font-weight)}";
-const WcsErrorStyle0 = errorCss;
-
-const Label = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h(index.Host, { key: '2257210c2e97d6c4dc04a87fa05121e203b79619', "aria-live": "polite", "aria-atomic": "true", slot: "error" }, index.h("slot", { key: 'fc76b174cb85991bb4cd899b72605b171f8165e6' })));
-    }
-};
-Label.style = WcsErrorStyle0;
-
-const formFieldCss = ":host{--wcs-form-field-gap:var(--wcs-semantic-spacing-small);--wcs-form-field-prefix-suffix-border-radius:var(--wcs-semantic-border-radius-base);--wcs-form-field-prefix-icon-color:var(--wcs-semantic-color-foreground-primary);--wcs-form-field-prefix-value-color:var(--wcs-semantic-color-text-inverse);--wcs-form-field-prefix-placeholder-color:var(--wcs-semantic-color-text-inverse);display:flex;flex-direction:column;gap:var(--wcs-form-field-gap)}:host ::slotted([slot=prefix]){--wcs-select-value-color:var(--wcs-semantic-color-text-inverse);--wcs-select-placeholder-color:var(--wcs-semantic-color-text-inverse);--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-default);--wcs-select-control-arrow-color:var(--wcs-form-field-prefix-icon-color);--wcs-select-control-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);--wcs-select-control-border-width-default:0;--wcs-select-control-border-style-focus:dashed;--wcs-select-control-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-native-select-value-color:var(--wcs-semantic-color-text-inverse);--wcs-native-select-placeholder-color:var(--wcs-semantic-color-text-inverse);--wcs-native-select-arrow-color:var(--wcs-form-field-prefix-icon-color);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-default);--wcs-native-select-border-width:0;--wcs-native-select-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-native-select-border-style-focus:dashed;--wcs-native-select-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);--wcs-native-select-option-color:var(--wcs-semantic-color-text-inverse)}:host ::slotted([slot=prefix][disabled]),:host ::slotted([slot=prefix]:disabled),:host ::slotted([slot=prefix][aria-disabled=true]),:host ::slotted([slot=prefix][data-disabled]){--wcs-semantic-color-background-control-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-semantic-color-text-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-select-value-color:var(--wcs-semantic-color-text-disabled);--wcs-select-placeholder-color:var(--wcs-semantic-color-text-disabled);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-native-select-placeholder-color:var(--wcs-semantic-color-text-disabled);--wcs-native-select-value-color:var(--wcs-semantic-color-text-disabled)}:host ::slotted([slot=prefix]:hover:not([disabled]):not([data-disabled])){--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-hover);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-hover)}:host ::slotted([slot=prefix]:active:not([disabled]):not([data-disabled])){--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-press);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-press)}.input-container{display:flex}::slotted(wcs-select:not([slot=prefix])){width:100%}::slotted(wcs-native-select:not([slot=prefix])){width:100%}:host(.has-prefix) ::slotted(wcs-input){--wcs-input-border-radius-left:0}:host(.has-suffix) ::slotted(wcs-input){--wcs-input-border-radius-right:0}::slotted([slot=suffix]){--wcs-button-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;--wcs-select-control-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;--wcs-native-select-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0}";
-const WcsFormFieldStyle0 = formFieldCss;
-
-const FormField = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.isError = false;
-        this.hasPrefix = false;
-        this.hasSuffix = false;
-        this.spiedElement = undefined;
-    }
-    componentWillLoad() {
-        this.hasSuffix = this.el.querySelector('wcs-button') !== null;
-        this.hasPrefix = this.el.querySelector('wcs-select') !== null;
-    }
-    componentDidLoad() {
-        this.initSpiedElement();
-        this.addRequiredMarkerToLabel();
-        this.updateErrorStateOnInput(this.isError);
-    }
-    isErrorChange(newValue) {
-        this.updateErrorStateOnInput(newValue);
-        this.updateAriaAttributes();
-    }
-    updateErrorStateOnInput(newValue) {
-        if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {
-            if (newValue) {
-                this.spiedElement.setAttribute('state', 'error');
-            }
-            else {
-                this.spiedElement.setAttribute('state', 'initial');
-            }
-        }
-    }
-    /**
-     * This function return true if the form field contains an element with tagName matches a value of the types param
-     * @param types
-     * @private
-     */
-    spiedElementIsOfType(...types) {
-        var _a;
-        for (const type of types) {
-            if (((_a = this.spiedElement) === null || _a === void 0 ? void 0 : _a.tagName) === type.toUpperCase())
-                return true;
-        }
-        return false;
-    }
-    addRequiredMarkerToLabel() {
-        var _a;
-        // TODO: deprecate this in favor of the 'required' component attribute
-        const label = this.el.querySelector('wcs-label');
-        this.observer = new MutationObserver(mutations => {
-            var _a;
-            const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];
-            if (requiredAttMutation) {
-                this.updateLabelRequiredFlag((_a = this.spiedElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('required'), label);
-            }
-        });
-        if (this.spiedElement) {
-            this.observer.observe(this.spiedElement, { attributes: true });
-        }
-        const isRequired = (_a = this.spiedElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('required');
-        this.updateLabelRequiredFlag(isRequired, label);
-    }
-    initSpiedElement() {
-        var _a, _b;
-        const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-native-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select', 'wcs-counter'];
-        this.spiedElement = (_a = this.el.shadowRoot.querySelector('slot:not([name])')) === null || _a === void 0 ? void 0 : _a.assignedElements().filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];
-        // If the component is used in another web component
-        if (((_b = this.spiedElement) === null || _b === void 0 ? void 0 : _b.tagName) === 'SLOT') {
-            this.spiedElement = (this.spiedElement
-                .assignedElements()
-                .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]);
-        }
-        if (!this.spiedElement) {
-            // tslint:disable-next-line:no-console
-            console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');
-            return;
-        }
-    }
-    updateAriaAttributes() {
-        if (mutableAriaAttribute.isMutableAriaAttribute(this.spiedElement)) {
-            this.spiedElement.setAriaAttribute('aria-label', this.label);
-            // Sur les autres DS, généralement seul l'erreur est affichée et pas avec la description
-            if (this.isError) {
-                if (this.error)
-                    this.spiedElement.setAriaAttribute('aria-description', this.error);
-                this.spiedElement.setAriaAttribute('aria-invalid', 'true');
-            }
-            else {
-                if (this.description)
-                    this.spiedElement.setAriaAttribute('aria-description', this.description);
-                this.spiedElement.setAriaAttribute('aria-invalid', 'false');
-            }
-        }
-    }
-    get label() {
-        var _a;
-        return (_a = this.el.querySelector('wcs-label')) === null || _a === void 0 ? void 0 : _a.textContent;
-    }
-    get description() {
-        var _a;
-        return (_a = this.el.querySelector('wcs-hint')) === null || _a === void 0 ? void 0 : _a.textContent;
-    }
-    get error() {
-        var _a;
-        return (_a = this.el.querySelector('wcs-error')) === null || _a === void 0 ? void 0 : _a.textContent;
-    }
-    updateLabelRequiredFlag(isRequired, label) {
-        if (isRequired && label) {
-            label.setAttribute('required', 'true');
-        }
-        else if (!isRequired && label) {
-            label.removeAttribute('required');
-        }
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    render() {
-        let classes = '';
-        const isError = this.isError;
-        if (this.hasSuffix) {
-            classes += ' has-suffix';
-        }
-        if (this.hasPrefix) {
-            classes += ' has-prefix';
-        }
-        return (index.h(index.Host, { key: 'c9f7040c27e964d32f5d39befad34fd2500ad89b', class: classes }, index.h("slot", { key: '580960c53f66356e3e8a67436603f3d5d0828409', name: "label" }), index.h("div", { key: '9f942bf24140c7c3718d4e56b5c356e4471c246b', class: "input-container" }, index.h("slot", { key: '03ac6862d220be32e3c62d6fa6b49d745f77f1f8', name: "prefix" }), index.h("slot", { key: '476c0419a0269dde5d3b89b025f475c54fa7a1f4', onSlotchange: () => this.onFormInputSlotChange() }), index.h("slot", { key: '63e76f50c004442ad27dbdf87c59fdb574a24352', name: "suffix" })), isError ? (index.h("slot", { name: "error" })) : '', index.h("slot", { key: 'd6dd0c622edbaf25c38844f62e46efefb462d616', name: "messages" })));
-    }
-    onFormInputSlotChange() {
-        this.initSpiedElement();
-        this.updateAriaAttributes();
-        this.addRequiredMarkerToLabel();
-        this.updateErrorStateOnInput(this.isError);
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "isError": ["isErrorChange"]
-    }; }
-};
-FormField.style = WcsFormFieldStyle0;
-
-exports.wcs_error = Label;
-exports.wcs_form_field = FormField;
-
-//# sourceMappingURL=wcs-error_2.cjs.entry.js.map

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

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

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

@@ -1,33 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-6f0140d8.js');
-const helpers = require('./helpers-871f5a3d.js');
-
-const labelCss = ":host{--wcs-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-label-color:var(--wcs-semantic-color-text-primary);--wcs-label-required-marker-color:var(--wcs-semantic-color-text-critical);--wcs-label-gap:var(--wcs-semantic-spacing-small);font-weight:var(--wcs-label-font-weight)}:host([required])>label::after{font-weight:var(--wcs-label-font-weight);color:var(--wcs-label-required-marker-color);content:\" *\"}label{display:inline-block;color:var(--wcs-label-color);font-weight:var(--wcs-label-font-weight)}label ::slotted(wcs-mat-icon){display:inline;vertical-align:middle;margin-left:var(--wcs-label-gap)}";
-const WcsLabelStyle0 = labelCss;
-
-const LABEL_INHERITED_ATTRS = ['title'];
-const Label = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.inheritedAttributes = {};
-        this.required = false;
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = Object.assign(Object.assign({}, helpers.inheritAriaAttributes(this.el)), helpers.inheritAttributes(this.el, LABEL_INHERITED_ATTRS));
-    }
-    async setAriaAttribute(attr, value) {
-        helpers.setOrRemoveAttribute(this.nativeLabel, attr, value);
-    }
-    render() {
-        return (index.h(index.Host, { key: '112bfe1eddc6da7b457bf183c83a07a60de0ca00', slot: "label" }, index.h("label", Object.assign({ key: '0d32dfcc8b4f024f986d7770a52402ae024c8862', ref: (el) => this.nativeLabel = el }, this.inheritedAttributes), index.h("slot", { key: '74c93cbd04d6744c2427f4810d510f05faa2bbfc' }))));
-    }
-    get el() { return index.getElement(this); }
-};
-Label.style = WcsLabelStyle0;
-
-exports.wcs_label = Label;
-
-//# sourceMappingURL=wcs-label.cjs.entry.js.map

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

@@ -1 +0,0 @@
-{"file":"wcs-label.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,4mBAA4mB,CAAC;AAC9nB,uBAAe,QAAQ;;ACGvB,MAAM,qBAAqB,GAAG,CAAC,OAAO,CAAC,CAAC;MAsB3B,KAAK;;;QAGN,wBAAmB,GAAyB,EAAE,CAAC;wBAMnB,KAAK;;IAEzC,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjBA,6BAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9BC,yBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,qBAAqB,CAAC,CACvD,CAAC;KACL;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5EC,4BAAoB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACvD;IAED,MAAM;QACF,QACIC,QAACC,UAAI,qDAAC,IAAI,EAAC,OAAO,IACdD,kFAAO,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,IAAM,IAAI,CAAC,mBAAmB,GACnEA,oEAAQ,CACJ,CACL,EACT;KACL;;;;;;;","names":["inheritAriaAttributes","inheritAttributes","setOrRemoveAttribute","h","Host"],"sources":["src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":[":host {\n    --wcs-label-font-weight: var(--wcs-semantic-font-weight-book);\n    --wcs-label-color: var(--wcs-semantic-color-text-primary);\n    --wcs-label-required-marker-color: var(--wcs-semantic-color-text-critical);\n\n    --wcs-label-gap: var(--wcs-semantic-spacing-small);\n\n    font-weight: var(--wcs-label-font-weight);\n}\n\n:host([required]) > label::after {\n    font-weight: var(--wcs-label-font-weight);\n    color: var(--wcs-label-required-marker-color);\n    content: ' *';\n}\n\nlabel {\n    display: inline-block;\n    color: var(--wcs-label-color);\n    font-weight: var(--wcs-label-font-weight);\n\n    // Add margin before tooltip icon\n    ::slotted(wcs-mat-icon) {\n        display: inline;\n        vertical-align: middle;\n        margin-left: var(--wcs-label-gap);\n    }\n}\n","import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/**\n * The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n *\n * ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n */\n@Component({\n    tag: 'wcs-label',\n    styleUrl: 'label.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeLabel?: HTMLLabelElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * If `true`, marks the label with a red star.\n     * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n     */\n    @Prop({ reflect: true }) required = false;\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeLabel, attr, value);\n    }\n\n    render() {\n        return (\n            <Host slot=\"label\">\n                <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n                    <slot />\n                </label>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/esm/button-interface-dc5ddd51.js

@@ -1,9 +0,0 @@
-const WcsButtonSizeValues = ['s', 'm', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.
-function isWcsButtonSize(size) {
-    // @ts-ignore : ignore size type, as it is checked with WcsButtonSizeValues
-    return WcsButtonSizeValues.includes(size);
-}
-
-export { WcsButtonSizeValues as W, isWcsButtonSize as i };
-
-//# sourceMappingURL=button-interface-dc5ddd51.js.map

package/dist/esm/button-interface-dc5ddd51.js.map

@@ -1 +0,0 @@
-{"file":"button-interface-dc5ddd51.js","mappings":"MAQa,mBAAmB,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAW;SAI5C,eAAe,CAAC,IAAY;;IAExC,OAAO,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC9C;;;;","names":[],"sources":["src/components/button/button-interface.ts"],"sourcesContent":["import { WcsSize } from '../../shared-types';\n\nexport type WcsButtonType = 'button' | 'submit';\n\nexport type WcsButtonShape = 'normal' | 'round' | 'square';\n\nexport type WcsButtonMode = 'plain' | 'stroked' | 'clear';\n\nexport const WcsButtonSizeValues = ['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 WcsButtonSize = Extract<WcsSize, typeof WcsButtonSizeValues[number]>;\n\nexport function isWcsButtonSize(size: string): size is WcsButtonSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsButtonSizeValues\n    return WcsButtonSizeValues.includes(size);\n}\n"],"version":3}

package/dist/esm/grid-pagination-421689be.js.map

@@ -1 +0,0 @@
-{"file":"grid-pagination-421689be.js","mappings":"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","names":[],"sources":["src/components/grid-pagination/grid-pagination-arrow.tsx","src/components/grid-pagination/grid-pagination.scss?tag=wcs-grid-pagination&encapsulation=shadow","src/components/grid-pagination/grid-pagination.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface GridPaginationArrowProps {\n  active: boolean;\n  order: 'next' | 'previous';\n  double?: boolean;\n}\n\nconst getAccessibleName = (order: GridPaginationArrowProps['order'], double: GridPaginationArrowProps['double']): string => {\n  switch (order) {\n    case 'next':\n      return double ? 'Last page' : 'Next page';\n    case 'previous':\n    default:\n      return double ? 'First page' : 'Previous page';\n  }\n}\n\nexport const GridPaginationArrow: FunctionalComponent<GridPaginationArrowProps> = ({active, order, double = false}) => (\n  <wcs-button mode=\"clear\"\n              shape=\"square\"\n              size=\"s\"\n              disabled={!active}\n              title={getAccessibleName(order, double)}>\n    <svg style={{cursor: 'pointer'}}\n         aria-hidden=\"true\"\n         xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\">\n      <style type=\"text/css\">{`\n              .arrow-group {\n                  transform-origin: 50% 51%;\n                  transition: transform 175ms ease-in-out;\n              }\n              .arrow {\n                  transition: fill 175ms ease-in-out;\n                  fill: var(--wcs-grid-pagination-arrow-color-inactive, var(--wcs-button-color));\n              }\n              .second-arrow {\n                  transform: translateY(-8px);\n              }\n              .next {\n                  transform: rotate(90deg);\n              }\n              .previous {\n                  transform: rotate(-90deg);\n              }\n              .active {\n                  fill: var(--wcs-grid-pagination-arrow-color-active, var(--wcs-button-color));\n              }\n          `}</style>\n      <g fill=\"none\" class={order + ' arrow-group'}>\n        <path class={(active ? 'active' : '') + ' arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\"/>\n        <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n      </g>\n      {\n        double ?\n          <g fill=\"none\" class={order + ' arrow-group'}>\n            <path class={(active ? 'active' : '') + ' arrow second-arrow'}\n                  d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\"/>\n            <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n          </g>\n          : ''\n      }\n    </svg>\n  </wcs-button>\n);\n","@import '../../style/focus-outline.scss';\n\n:host {\n    display: block;\n    margin-top: var(--wcs-grid-pagination-margin-top);\n\n    --wcs-grid-pagination-color: var(--wcs-semantic-color-text-primary);\n    --wcs-grid-pagination-font-size: var(--wcs-semantic-font-size-label-2);\n    --wcs-grid-pagination-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-grid-pagination-gap: var(--wcs-semantic-spacing-base);\n    --wcs-grid-pagination-page-size-gap: var(--wcs-semantic-spacing-base);\n    --wcs-grid-pagination-counter-gap: var(--wcs-semantic-spacing-small);\n    --wcs-grid-pagination-margin-top: var(--wcs-semantic-spacing-large);\n\n    --wcs-grid-pagination-arrow-color-inactive: unset; /* Optional : Overrides the fill property of the grid-pagination-arrow */\n    --wcs-grid-pagination-arrow-color-active: unset; /* Optional : Overrides the fill property of the grid-pagination-arrow */\n}\n\n.container {\n    display: grid;\n    gap: var(--wcs-grid-pagination-gap);\n    grid-template-columns: auto auto auto;\n    justify-content: space-between;\n    align-items: center;\n    color: var(--wcs-grid-pagination-color);\n    font-size: var(--wcs-grid-pagination-font-size);\n    font-weight: var(--wcs-grid-pagination-font-weight);\n}\n\n.available-page-sizes {\n    width: auto;\n}\n\n.page-management, .page-size, .items-count {\n    display: flex;\n    align-items: center;\n}\n\n.page-size {\n    gap: var(--wcs-grid-pagination-page-size-gap);\n}\n\n.page-management {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n}\n\n.pagination-arrow {\n    display: flex;\n}\n\n.pagination-counter {\n    padding: 0 var(--wcs-grid-pagination-counter-gap);\n\n    span {\n        white-space: nowrap;\n    }\n}\n\n/* TODO : Remove this when the select component will be able to handle the size S */\nwcs-select.available-page-sizes {\n    --wcs-select-control-height: var(--wcs-semantic-size-s);\n}\n","import {\n    Component,\n    ComponentInterface, Element,\n    Event, EventEmitter,\n    h,\n    Host, Method,\n    Prop\n} from '@stencil/core';\nimport {\n    WcsGridPaginationChangeEventDetails\n} from '../grid/grid-interface';\nimport { SelectChangeEventDetail } from '../select/select-interface';\nimport { GridPaginationArrow } from './grid-pagination-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst GRID_PAGINATION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The grid pagination is a subcomponent of `wcs-grid`, slotted in `grid-pagination` under the `<table>` element.\n * \n * @cssprop --wcs-grid-pagination-color - Text color of the grid pagination\n * @cssprop --wcs-grid-pagination-font-size - Font-size of the grid pagination\n * @cssprop --wcs-grid-pagination-font-weight - Font-weight of the grid pagination\n * @cssprop --wcs-grid-pagination-gap - Gap between the page size, number of elements and page management\n * @cssprop --wcs-grid-pagination-page-size-gap - Gap between the select and the text within the page size container\n * @cssprop --wcs-grid-pagination-counter-gap - Gap within the page management counter\n * @cssprop --wcs-grid-pagination-margin-top - Margin between the grid and the pagination\n * @cssprop --wcs-grid-pagination-arrow-color-inactive - Color of the inactive arrow\n * @cssprop --wcs-grid-pagination-arrow-color-active - Color of the active arrow\n */\n@Component({\n    tag: 'wcs-grid-pagination',\n    styleUrl: 'grid-pagination.scss',\n    shadow: true\n})\nexport class GridPagination implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeNav!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    static readonly INDEX_FIRST_PAGE: number = 0;\n    /**\n     * Set the available page sizes in the pagination dropdown on the left.\n     */\n    @Prop() availablePageSizes: number[] = [10, 20, 50];\n    /**\n     * The current page of the pagination. First page starts at index 0.\n     */\n    @Prop({mutable: true}) currentPage: number = GridPagination.INDEX_FIRST_PAGE;\n    /**\n     * Maximum number of elements shown per page.  \n     * Default is the first value of `availablePageSizes`.\n     */\n    @Prop() pageSize: number = this.availablePageSizes[0];\n    /**\n     * Total elements in the grid.  \n     * - **Grid in `Server mode`** : You have to set `itemsCount` = your total data length.  \n     * - **Grid not in Server mode** : Do not set it manually : itemsCount is set and updated every pagination refresh.\n     */\n    @Prop() itemsCount: number = 0;\n    /**\n     * Max number of pages.  \n     * - **Grid in `Server mode`** : You have to set `pageCount` = `itemsCount` divided by `pageSize`.  \n     * - **Grid not in Server mode** : Do not set it manually : pageCount is set and updated every pagination refresh.\n     */\n    @Prop() pageCount: number = 1;\n    /**\n     * Event emitted when the pagination changes.\n     */\n    @Event() wcsGridPaginationChange!: EventEmitter<WcsGridPaginationChangeEventDetails>;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, GRID_PAGINATION_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeNav, attr, value);\n    }\n\n    private lastPage(): void {\n        this.currentPage = this.pageCount - 1;\n        this.emitPaginationChange();\n    }\n\n    private nextPage(): void {\n        if (this.canGoToNextPage()) {\n            this.currentPage++;\n            this.emitPaginationChange();\n        }\n    }\n\n    private canGoToNextPage(): boolean {\n        return this.currentPage + 1 < this.pageCount;\n    }\n\n    private previousPage(): void {\n        if (this.canGoToPreviousPage()) {\n            this.currentPage--;\n            this.emitPaginationChange();\n        }\n    }\n\n    private canGoToPreviousPage(): boolean {\n        return this.currentPage > 0;\n    }\n\n    private firstPage(): void {\n        this.currentPage = 0;\n        this.emitPaginationChange();\n    }\n\n    private onChangePagesize(event: CustomEvent<SelectChangeEventDetail>): void {\n        this.pageSize = event.detail.value;\n        if (this.currentPage + 1 > this.pageSize) {\n            this.currentPage = 0;\n        }\n        this.emitPaginationChange();\n    }\n\n    private emitPaginationChange(): void {\n        this.wcsGridPaginationChange.emit({\n            pagination: {\n                currentPage: this.currentPage,\n                pageSize: this.pageSize,\n                itemsCount: this.itemsCount,\n                pageCount: this.pageCount\n            }\n        });\n    }\n\n    render(): any {\n        return (<Host slot=\"grid-pagination\">\n            <div class=\"container\">\n                <div class=\"page-size\">\n                    <wcs-select placeholder=\"Eléments par page\"\n                                class=\"available-page-sizes\"\n                                aria-labelledby=\"elements-per-page-number elements-per-page-text\"\n                                value={this.pageSize}\n                                onWcsChange={this.onChangePagesize.bind(this)}>\n                        {\n                            this.availablePageSizes.map((pageSize) =>\n                                <wcs-select-option value={pageSize}>{pageSize}</wcs-select-option>\n                            )\n                        }\n                    </wcs-select>\n                    <span id=\"elements-per-page-number\" hidden>{this.pageSize}</span>\n                    <span id=\"elements-per-page-text\">éléments par page</span>\n                </div>\n\n                <div class=\"items-count\">\n                    <span>{this.itemsCount} éléments</span>\n                </div>\n\n                <nav aria-label=\"pagination\" ref={(el) => (this.nativeNav = el)} {...this.inheritedAttributes}>\n                    <ul class=\"page-management\">\n                        <li class=\"pagination-arrow\" onClick={this.firstPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\" double></GridPaginationArrow>\n                        </li>\n                        <li class=\"pagination-arrow\" onClick={this.previousPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\"></GridPaginationArrow>\n                        </li>\n    \n                        <li class=\"pagination-counter\">\n                            <span aria-label={`Page ${this.currentPage + 1} sur ${this.pageCount}`} aria-current=\"page\">\n                                {this.currentPage + 1} / {this.pageCount}\n                            </span>\n                        </li>\n    \n                        <li class=\"pagination-arrow\" onClick={this.nextPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\"></GridPaginationArrow>\n                        </li>\n                        <li class=\"pagination-arrow\" onClick={this.lastPage.bind(this)}>\n                            <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\" double></GridPaginationArrow>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </Host>)\n    }\n}\n"],"version":3}

package/dist/esm/helpers-f137ec8d.js.map

@@ -1 +0,0 @@
-{"file":"helpers-f137ec8d.js","mappings":"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","names":[],"sources":["src/utils/helpers.ts"],"sourcesContent":["import { EventEmitter } from '@stencil/core';\n\nexport function isElement(element: any): element is Element {\n    return 'clientWidth' in element\n        && 'clientHeight' in element;\n}\n\nexport function hasShadowDom(el: HTMLElement) {\n    return !!el.shadowRoot && !!(el as any).attachShadow;\n}\n\nexport const debounceEvent = (event: EventEmitter, wait: number): EventEmitter => {\n    const original = (event as any)._original || event;\n    return {\n        _original: event,\n        emit: debounce(original.emit.bind(original), wait)\n    } as EventEmitter;\n};\n\nexport const debounce = (func: (...args: any[]) => void, wait = 0) => {\n    let timer: any;\n    return (...args: any[]): any => {\n        clearTimeout(timer);\n        timer = setTimeout(func, wait, ...args);\n    };\n};\n\n/**\n * Elements inside of web components sometimes need to inherit global attributes\n * set on the host. For example, the inner input in `wcs-input` should inherit\n * the `title` attribute that developers set directly on `wcs-input`. This\n * helper function should be called in componentWillLoad and assigned to a variable\n * that is later used in the render function.\n *\n * This does not need to be reactive as changing attributes on the host element\n * does not trigger a re-render.\n */\nexport const inheritAttributes = (el: HTMLElement, attributes: string[] = []) => {\n    const attributeObject: { [k: string]: any } = {};\n\n    attributes.forEach(attr => {\n        if (el.hasAttribute(attr)) {\n            const value = el.getAttribute(attr);\n            if (value !== null) {\n                attributeObject[attr] = el.getAttribute(attr);\n            }\n            el.removeAttribute(attr);\n        }\n    });\n\n    return attributeObject;\n}\n\n/**\n * List of available ARIA attributes + `role`.\n * Removed deprecated attributes.\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes\n */\nconst ariaAttributes = [\n    'role',\n    'aria-activedescendant',\n    'aria-atomic',\n    'aria-autocomplete',\n    'aria-braillelabel',\n    'aria-brailleroledescription',\n    'aria-busy',\n    'aria-checked',\n    'aria-colcount',\n    'aria-colindex',\n    'aria-colindextext',\n    'aria-colspan',\n    'aria-controls',\n    'aria-current',\n    'aria-describedby',\n    'aria-description',\n    'aria-details',\n    'aria-disabled',\n    'aria-errormessage',\n    'aria-expanded',\n    'aria-flowto',\n    'aria-haspopup',\n    'aria-hidden',\n    'aria-invalid',\n    'aria-keyshortcuts',\n    'aria-label',\n    'aria-labelledby',\n    'aria-level',\n    'aria-live',\n    'aria-multiline',\n    'aria-multiselectable',\n    'aria-orientation',\n    'aria-owns',\n    'aria-placeholder',\n    'aria-posinset',\n    'aria-pressed',\n    'aria-readonly',\n    'aria-relevant',\n    'aria-required',\n    'aria-roledescription',\n    'aria-rowcount',\n    'aria-rowindex',\n    'aria-rowindextext',\n    'aria-rowspan',\n    'aria-selected',\n    'aria-setsize',\n    'aria-sort',\n    'aria-valuemax',\n    'aria-valuemin',\n    'aria-valuenow',\n    'aria-valuetext',\n];\n\n/**\n * Returns an array of aria attributes that should be copied from\n * the shadow host element to a target within the light DOM.\n * @param el The element that the attributes should be copied from.\n * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.\n * Use this in instances where we manually specify aria attributes on the `<Host>` element.\n */\nexport const inheritAriaAttributes = (el: HTMLElement, ignoreList?: string[]) => {\n    let attributesToInherit = ariaAttributes;\n    if (ignoreList && ignoreList.length > 0) {\n        attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));\n    }\n    return inheritAttributes(el, attributesToInherit);\n};\n\n/**\n * Dynamically add or remove an attribute on the element.\n * If the value of the attribute is null or undefined, the attribute is removed.\n *\n * @param el - The HTMLElement\n * @param attr - The attribute to be added or removed\n * @param value - The value of the attribute\n */\nexport function setOrRemoveAttribute(el: HTMLElement, attr: string, value: string | null | undefined) {\n    if (el) {\n        if (value === undefined || value === null) {\n            el.removeAttribute(attr);\n        } else {\n            el.setAttribute(attr, value);\n        }\n    }\n}\n\nexport const findItemLabel = (componentEl: HTMLElement): HTMLWcsLabelElement | null => {\n    const itemEl = componentEl.closest('wcs-form-field');\n    if (itemEl) {\n        return itemEl.querySelector('wcs-label');\n    }\n    return null;\n};\n\n/**\n * Given two lists of items, this function will return the items that were removed, kept, and added compared to the source list.\n * @param sourceList - The source list of items\n * @param newList - The target list of items\n * @param compareFn - The function to compare the items\n */\nexport const compareLists: <T>(sourceList: T[], newList: T[], compareFn: (v1: T, v2: T) => boolean) => {\n    removed: T[];\n    kept: T[];\n    added: T[]\n} = <T>(sourceList: T[], newList: T[], compareFn: (v1: T, v2: T) => boolean) => {\n    const removed = sourceList.filter(val => !newList.some(newVal => compareFn(val, newVal)));\n    const kept = sourceList.filter(val => newList.some(newVal => compareFn(val, newVal)));\n    const added = newList.filter(val => !sourceList.some(sourceVal => compareFn(val, sourceVal)));\n\n    return { removed, kept, added };\n};\n\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/**\n * Patched version of requestAnimationFrame that avoids ngzone\n * Use only when you know ngzone should not run\n */\nexport const raf = (h: any) => {\n    if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n        return __zone_symbol__requestAnimationFrame(h);\n    }\n    if (typeof requestAnimationFrame === 'function') {\n        return requestAnimationFrame(h);\n    }\n    return setTimeout(h);\n};\n\n/**\n * Return true if the mouseEvent click is inside the given HTML element\n */\nexport const clickInsideElement = (event: MouseEvent, element: HTMLElement): boolean => {\n    return event.x >= element.getBoundingClientRect().x && event.x <= element.getBoundingClientRect().x + element.getBoundingClientRect().width\n        && event.y >= element.getBoundingClientRect().y && event.y <= element.getBoundingClientRect().y + element.getBoundingClientRect().height;\n}\n\n\nexport const clickTargetIsElementOrChildren = (mouseEvent: MouseEvent, element: HTMLElement) => {\n    return mouseEvent.target instanceof Node\n        && element.contains(mouseEvent.target);\n}\n\nexport function generateUniqueId(componentName: string): string {\n    return componentName + \"-\" + Math.random().toString(36);\n}\n\nexport function isKeyup(evt: KeyboardEvent) {\n    return evt.code === 'ArrowUp';\n}\n\nexport function isKeydown(evt: KeyboardEvent) {\n    return evt.code === 'ArrowDown';\n}\n\nexport function isEscapeKey(evt: KeyboardEvent) {\n    return evt.code === 'Escape';\n}\n\nexport function isSpaceKey(evt: KeyboardEvent) {\n    return evt.code === 'Space';\n}\n\nexport function isEnterKey(evt: KeyboardEvent) {\n    return evt.key === 'Enter';\n}\n\nexport function isHomeKey(evt: KeyboardEvent) {\n    return evt.code === 'Home';\n}\n\nexport function isEndKey(evt: KeyboardEvent) {\n    return evt.code === 'End';\n}\n\nexport function isUpArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowUp';\n}\n\nexport function isDownArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowDown';\n}\n\nexport function isLeftArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowLeft';\n}\n\nexport function isRightArrowKey(evt: KeyboardEvent) {\n    return evt.key === 'ArrowRight';\n}\n\nexport function isPageDownKey(evt: KeyboardEvent) {\n    return evt.key === 'PageDown';\n}\n\nexport function isPageUpKey(evt: KeyboardEvent) {\n    return evt.key === 'PageUp';\n}\n\nexport function isTabKey(evt: KeyboardEvent) {\n    return evt.key === 'Tab';\n}\n\nexport function isCtrlA(evt: KeyboardEvent) {\n    return evt.key === 'a' && evt.ctrlKey;\n}\n\nexport function getCssRootPropertyValue(name: string): string | null {\n    return window.getComputedStyle(document.body).getPropertyValue(name) || null;\n}\n"],"version":3}

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

@@ -1,163 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-d9de61ce.js';
-import { i as isMutableAriaAttribute } from './mutable-aria-attribute-e225edc1.js';
-
-const errorCss = ":host{--wcs-error-color:var(--wcs-semantic-color-text-critical);--wcs-error-font-size:var(--wcs-semantic-font-size-caption-2);--wcs-error-font-weight:var(--wcs-semantic-font-weight-book);color:var(--wcs-error-color);font-size:var(--wcs-error-font-size);font-weight:var(--wcs-error-font-weight)}";
-const WcsErrorStyle0 = errorCss;
-
-const Label = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    render() {
-        return (h(Host, { key: '2257210c2e97d6c4dc04a87fa05121e203b79619', "aria-live": "polite", "aria-atomic": "true", slot: "error" }, h("slot", { key: 'fc76b174cb85991bb4cd899b72605b171f8165e6' })));
-    }
-};
-Label.style = WcsErrorStyle0;
-
-const formFieldCss = ":host{--wcs-form-field-gap:var(--wcs-semantic-spacing-small);--wcs-form-field-prefix-suffix-border-radius:var(--wcs-semantic-border-radius-base);--wcs-form-field-prefix-icon-color:var(--wcs-semantic-color-foreground-primary);--wcs-form-field-prefix-value-color:var(--wcs-semantic-color-text-inverse);--wcs-form-field-prefix-placeholder-color:var(--wcs-semantic-color-text-inverse);display:flex;flex-direction:column;gap:var(--wcs-form-field-gap)}:host ::slotted([slot=prefix]){--wcs-select-value-color:var(--wcs-semantic-color-text-inverse);--wcs-select-placeholder-color:var(--wcs-semantic-color-text-inverse);--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-default);--wcs-select-control-arrow-color:var(--wcs-form-field-prefix-icon-color);--wcs-select-control-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);--wcs-select-control-border-width-default:0;--wcs-select-control-border-style-focus:dashed;--wcs-select-control-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-native-select-value-color:var(--wcs-semantic-color-text-inverse);--wcs-native-select-placeholder-color:var(--wcs-semantic-color-text-inverse);--wcs-native-select-arrow-color:var(--wcs-form-field-prefix-icon-color);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-default);--wcs-native-select-border-width:0;--wcs-native-select-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-native-select-border-style-focus:dashed;--wcs-native-select-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);--wcs-native-select-option-color:var(--wcs-semantic-color-text-inverse)}:host ::slotted([slot=prefix][disabled]),:host ::slotted([slot=prefix]:disabled),:host ::slotted([slot=prefix][aria-disabled=true]),:host ::slotted([slot=prefix][data-disabled]){--wcs-semantic-color-background-control-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-semantic-color-text-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-select-value-color:var(--wcs-semantic-color-text-disabled);--wcs-select-placeholder-color:var(--wcs-semantic-color-text-disabled);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-native-select-placeholder-color:var(--wcs-semantic-color-text-disabled);--wcs-native-select-value-color:var(--wcs-semantic-color-text-disabled)}:host ::slotted([slot=prefix]:hover:not([disabled]):not([data-disabled])){--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-hover);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-hover)}:host ::slotted([slot=prefix]:active:not([disabled]):not([data-disabled])){--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-press);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-press)}.input-container{display:flex}::slotted(wcs-select:not([slot=prefix])){width:100%}::slotted(wcs-native-select:not([slot=prefix])){width:100%}:host(.has-prefix) ::slotted(wcs-input){--wcs-input-border-radius-left:0}:host(.has-suffix) ::slotted(wcs-input){--wcs-input-border-radius-right:0}::slotted([slot=suffix]){--wcs-button-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;--wcs-select-control-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;--wcs-native-select-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0}";
-const WcsFormFieldStyle0 = formFieldCss;
-
-const FormField = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.isError = false;
-        this.hasPrefix = false;
-        this.hasSuffix = false;
-        this.spiedElement = undefined;
-    }
-    componentWillLoad() {
-        this.hasSuffix = this.el.querySelector('wcs-button') !== null;
-        this.hasPrefix = this.el.querySelector('wcs-select') !== null;
-    }
-    componentDidLoad() {
-        this.initSpiedElement();
-        this.addRequiredMarkerToLabel();
-        this.updateErrorStateOnInput(this.isError);
-    }
-    isErrorChange(newValue) {
-        this.updateErrorStateOnInput(newValue);
-        this.updateAriaAttributes();
-    }
-    updateErrorStateOnInput(newValue) {
-        if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {
-            if (newValue) {
-                this.spiedElement.setAttribute('state', 'error');
-            }
-            else {
-                this.spiedElement.setAttribute('state', 'initial');
-            }
-        }
-    }
-    /**
-     * This function return true if the form field contains an element with tagName matches a value of the types param
-     * @param types
-     * @private
-     */
-    spiedElementIsOfType(...types) {
-        var _a;
-        for (const type of types) {
-            if (((_a = this.spiedElement) === null || _a === void 0 ? void 0 : _a.tagName) === type.toUpperCase())
-                return true;
-        }
-        return false;
-    }
-    addRequiredMarkerToLabel() {
-        var _a;
-        // TODO: deprecate this in favor of the 'required' component attribute
-        const label = this.el.querySelector('wcs-label');
-        this.observer = new MutationObserver(mutations => {
-            var _a;
-            const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];
-            if (requiredAttMutation) {
-                this.updateLabelRequiredFlag((_a = this.spiedElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('required'), label);
-            }
-        });
-        if (this.spiedElement) {
-            this.observer.observe(this.spiedElement, { attributes: true });
-        }
-        const isRequired = (_a = this.spiedElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('required');
-        this.updateLabelRequiredFlag(isRequired, label);
-    }
-    initSpiedElement() {
-        var _a, _b;
-        const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-native-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select', 'wcs-counter'];
-        this.spiedElement = (_a = this.el.shadowRoot.querySelector('slot:not([name])')) === null || _a === void 0 ? void 0 : _a.assignedElements().filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];
-        // If the component is used in another web component
-        if (((_b = this.spiedElement) === null || _b === void 0 ? void 0 : _b.tagName) === 'SLOT') {
-            this.spiedElement = (this.spiedElement
-                .assignedElements()
-                .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]);
-        }
-        if (!this.spiedElement) {
-            // tslint:disable-next-line:no-console
-            console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');
-            return;
-        }
-    }
-    updateAriaAttributes() {
-        if (isMutableAriaAttribute(this.spiedElement)) {
-            this.spiedElement.setAriaAttribute('aria-label', this.label);
-            // Sur les autres DS, généralement seul l'erreur est affichée et pas avec la description
-            if (this.isError) {
-                if (this.error)
-                    this.spiedElement.setAriaAttribute('aria-description', this.error);
-                this.spiedElement.setAriaAttribute('aria-invalid', 'true');
-            }
-            else {
-                if (this.description)
-                    this.spiedElement.setAriaAttribute('aria-description', this.description);
-                this.spiedElement.setAriaAttribute('aria-invalid', 'false');
-            }
-        }
-    }
-    get label() {
-        var _a;
-        return (_a = this.el.querySelector('wcs-label')) === null || _a === void 0 ? void 0 : _a.textContent;
-    }
-    get description() {
-        var _a;
-        return (_a = this.el.querySelector('wcs-hint')) === null || _a === void 0 ? void 0 : _a.textContent;
-    }
-    get error() {
-        var _a;
-        return (_a = this.el.querySelector('wcs-error')) === null || _a === void 0 ? void 0 : _a.textContent;
-    }
-    updateLabelRequiredFlag(isRequired, label) {
-        if (isRequired && label) {
-            label.setAttribute('required', 'true');
-        }
-        else if (!isRequired && label) {
-            label.removeAttribute('required');
-        }
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    render() {
-        let classes = '';
-        const isError = this.isError;
-        if (this.hasSuffix) {
-            classes += ' has-suffix';
-        }
-        if (this.hasPrefix) {
-            classes += ' has-prefix';
-        }
-        return (h(Host, { key: 'c9f7040c27e964d32f5d39befad34fd2500ad89b', class: classes }, h("slot", { key: '580960c53f66356e3e8a67436603f3d5d0828409', name: "label" }), h("div", { key: '9f942bf24140c7c3718d4e56b5c356e4471c246b', class: "input-container" }, h("slot", { key: '03ac6862d220be32e3c62d6fa6b49d745f77f1f8', name: "prefix" }), h("slot", { key: '476c0419a0269dde5d3b89b025f475c54fa7a1f4', onSlotchange: () => this.onFormInputSlotChange() }), h("slot", { key: '63e76f50c004442ad27dbdf87c59fdb574a24352', name: "suffix" })), isError ? (h("slot", { name: "error" })) : '', h("slot", { key: 'd6dd0c622edbaf25c38844f62e46efefb462d616', name: "messages" })));
-    }
-    onFormInputSlotChange() {
-        this.initSpiedElement();
-        this.updateAriaAttributes();
-        this.addRequiredMarkerToLabel();
-        this.updateErrorStateOnInput(this.isError);
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "isError": ["isErrorChange"]
-    }; }
-};
-FormField.style = WcsFormFieldStyle0;
-
-export { Label as wcs_error, FormField as wcs_form_field };
-
-//# sourceMappingURL=wcs-error_2.entry.js.map

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

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

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

@@ -1,29 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-d9de61ce.js';
-import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute } from './helpers-f137ec8d.js';
-
-const labelCss = ":host{--wcs-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-label-color:var(--wcs-semantic-color-text-primary);--wcs-label-required-marker-color:var(--wcs-semantic-color-text-critical);--wcs-label-gap:var(--wcs-semantic-spacing-small);font-weight:var(--wcs-label-font-weight)}:host([required])>label::after{font-weight:var(--wcs-label-font-weight);color:var(--wcs-label-required-marker-color);content:\" *\"}label{display:inline-block;color:var(--wcs-label-color);font-weight:var(--wcs-label-font-weight)}label ::slotted(wcs-mat-icon){display:inline;vertical-align:middle;margin-left:var(--wcs-label-gap)}";
-const WcsLabelStyle0 = labelCss;
-
-const LABEL_INHERITED_ATTRS = ['title'];
-const Label = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.inheritedAttributes = {};
-        this.required = false;
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, LABEL_INHERITED_ATTRS));
-    }
-    async setAriaAttribute(attr, value) {
-        setOrRemoveAttribute(this.nativeLabel, attr, value);
-    }
-    render() {
-        return (h(Host, { key: '112bfe1eddc6da7b457bf183c83a07a60de0ca00', slot: "label" }, h("label", Object.assign({ key: '0d32dfcc8b4f024f986d7770a52402ae024c8862', ref: (el) => this.nativeLabel = el }, this.inheritedAttributes), h("slot", { key: '74c93cbd04d6744c2427f4810d510f05faa2bbfc' }))));
-    }
-    get el() { return getElement(this); }
-};
-Label.style = WcsLabelStyle0;
-
-export { Label as wcs_label };
-
-//# sourceMappingURL=wcs-label.entry.js.map