wcs-core 7.0.0 → 7.2.0

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

@@ -0,0 +1,203 @@
+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';
+import { z as normalizeWhitespace, i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute } from './helpers-ece6a2d3.js';
+import { i as isControlComponentWithLabel } from './control-component-interface-9f09e520.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$1 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '7dffcb3487f7210c5c9a45af709fc942a1410679', role: "alert", slot: "error" }, h("slot", { key: '251fbdc26fe58be4296328c4ebaed77329c6c507' })));
+    }
+};
+Label$1.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 .input-container{display:flex}: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);--wcs-button-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius)}:host ::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}::slotted([slot=prefix][disabled]),::slotted([slot=prefix]:disabled),::slotted([slot=prefix][aria-disabled=true]),::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)}::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)}::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(:not([slot=prefix])){--wcs-input-border-radius-left: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}:host(.has-suffix) ::slotted(:not([slot=suffix])){--wcs-input-border-radius-right:0;--wcs-select-control-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);--wcs-native-select-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius)}:host(.has-prefix.has-suffix) ::slotted(:not([slot=prefix]):not([slot=suffix])){--wcs-input-border-radius-left:0;--wcs-input-border-radius-right:0;--wcs-select-control-border-radius:0;--wcs-native-select-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('[slot=suffix]') !== null;
+        this.hasPrefix = this.el.querySelector('[slot=prefix]') !== 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;
+        }
+    }
+    async updateAriaAttributes() {
+        if (isMutableAriaAttribute(this.spiedElement)) {
+            const ariaLabelParts = [];
+            if (isControlComponentWithLabel(this.spiedElement)) {
+                const innerLabel = await this.spiedElement.getLabel();
+                const combinedLabel = `${this.label || ''} ${innerLabel || ''}`.trim();
+                if (combinedLabel) {
+                    ariaLabelParts.push(normalizeWhitespace(combinedLabel));
+                }
+            }
+            else {
+                if (this.label) {
+                    ariaLabelParts.push(normalizeWhitespace(this.label));
+                }
+            }
+            if (this.description) {
+                ariaLabelParts.push(normalizeWhitespace(this.description));
+            }
+            // Sur les autres DS, généralement seul l'erreur est affichée et pas avec la description
+            if (this.isError) {
+                this.spiedElement.setAriaAttribute('aria-invalid', 'true');
+                if (this.error) {
+                    ariaLabelParts.push(normalizeWhitespace(this.error));
+                }
+            }
+            else {
+                this.spiedElement.setAriaAttribute('aria-invalid', 'false');
+            }
+            this.spiedElement.setAriaAttribute('aria-label', ariaLabelParts.length > 0 ? ariaLabelParts.join(' ') : null);
+        }
+    }
+    get label() {
+        var _a;
+        return ((_a = this.el.querySelector('wcs-label')) === null || _a === void 0 ? void 0 : _a.textContent) || null;
+    }
+    get description() {
+        var _a;
+        return ((_a = this.el.querySelector('wcs-hint')) === null || _a === void 0 ? void 0 : _a.textContent) || null;
+    }
+    get error() {
+        var _a;
+        return ((_a = this.el.querySelector('wcs-error')) === null || _a === void 0 ? void 0 : _a.textContent) || null;
+    }
+    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: 'd8a5d2023add393b0a31173351a3d16d9fa0b1a6', class: classes }, h("slot", { key: '3f347f4dce239c0106fbbe52bdc217fa37c05d01', name: "label" }), h("div", { key: 'd6cb92104d72530059ecb9a383ff832afb0c2141', class: "input-container" }, h("slot", { key: '8be28f721ff351d41dced80c97c0e34337703d0e', name: "prefix" }), h("slot", { key: 'cc58d463877a1e8513736a987286e965870e096d', onSlotchange: () => this.onFormInputSlotChange() }), h("slot", { key: '898709cfcf0ae1cd43dabd55547d62199d6230c9', name: "suffix" })), isError ? (h("slot", { name: "error" })) : '', h("slot", { key: 'aaf2d35dfbdfda47b440f96d7f9aa22cb09f6a06', 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;
+
+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: '62f8ca37637cc792483f24476dbbd63ff3c077e5', slot: "label" }, h("label", Object.assign({ key: '3cef9a517d57652b75af3157d2c96a34693b258f', ref: (el) => this.nativeLabel = el }, this.inheritedAttributes), h("slot", { key: 'a614b379b45ac3d4cc1d58c45d39b64c0312c1d7' }))));
+    }
+    get el() { return getElement(this); }
+};
+Label.style = WcsLabelStyle0;
+
+export { Label$1 as wcs_error, FormField as wcs_form_field, Label as wcs_label };
+
+//# sourceMappingURL=wcs-error_3.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"wcs-error.wcs-form-field.wcs-label.entry.js","mappings":"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","names":["Label"],"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","src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","src/components/label/label.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 role=\"alert\" 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    display: flex;\n    flex-direction: column;\n    gap: var(--wcs-form-field-gap);\n\n    .input-container {\n        display: flex;\n    }\n\n    /* Components in the prefix slot */\n    ::slotted([slot=prefix]) {\n        /* Select */\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        /* Native select */\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        /* Button */\n        --wcs-button-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n    }\n\n    /* Components in the suffix slot */\n    ::slotted([slot=suffix]) {\n        --wcs-button-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;\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        --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}\n\n/* Disabled components in the prefix slot */\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/* Hover and press states */\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\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/* Components in the center that are prefixed */\n:host(.has-prefix) {\n    ::slotted(:not([slot=prefix])) {\n        --wcs-input-border-radius-left: 0;\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        --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}\n\n/* Components in the center that are suffixed */\n:host(.has-suffix) {\n    ::slotted(:not([slot=suffix])) {\n        --wcs-input-border-radius-right: 0;\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-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);\n    }\n\n}\n\n/* Components in the center that are prefixed AND suffixed */\n:host(.has-prefix.has-suffix) {\n    ::slotted(:not([slot=prefix]):not([slot=suffix])) {\n        --wcs-input-border-radius-left: 0;\n        --wcs-input-border-radius-right: 0;\n        --wcs-select-control-border-radius: 0;\n        --wcs-native-select-border-radius: 0;\n    }\n}\n","import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { isMutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { normalizeWhitespace } from '../../utils/helpers';\nimport { isControlComponentWithLabel } from \"../../utils/control-component-interface\";\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: boolean = false;\n\n    @State() private hasPrefix: boolean = false;\n    @State() private hasSuffix: boolean = false;\n    @State() private spiedElement: Element;\n\n    private observer: MutationObserver;\n\n    componentWillLoad() {\n        this.hasSuffix = this.el.querySelector('[slot=suffix]') !== null;\n        this.hasPrefix = this.el.querySelector('[slot=prefix]') !== 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 async updateAriaAttributes(): Promise<void> {\n        if (isMutableAriaAttribute(this.spiedElement)) {\n            const ariaLabelParts: string[] = [];\n            if (isControlComponentWithLabel(this.spiedElement)) {\n                const innerLabel = await this.spiedElement.getLabel();\n                const combinedLabel = `${this.label || ''} ${innerLabel || ''}`.trim();\n                if(combinedLabel) {\n                    ariaLabelParts.push(normalizeWhitespace(combinedLabel));\n                }\n            } else {\n                if(this.label) {\n                    ariaLabelParts.push(normalizeWhitespace(this.label));\n                }\n            }\n\n            if(this.description) {\n                ariaLabelParts.push(normalizeWhitespace(this.description));\n            }\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                this.spiedElement.setAriaAttribute('aria-invalid', 'true');\n                if(this.error) {\n                    ariaLabelParts.push(normalizeWhitespace(this.error));\n                }\n            } else {\n                this.spiedElement.setAriaAttribute('aria-invalid', 'false');\n            }\n\n            this.spiedElement.setAriaAttribute('aria-label', ariaLabelParts.length > 0 ? ariaLabelParts.join(' ') : null);\n        }\n    }\n    \n    private get label(): string | null {\n        return this.el.querySelector('wcs-label')?.textContent || null;\n    }\n    \n    private get description(): string | null {\n        return this.el.querySelector('wcs-hint')?.textContent || null;\n    }\n    \n    private get error(): string | null {\n        return this.el.querySelector('wcs-error')?.textContent || null;\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",":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: boolean = 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/wcs-field-content.entry.js

@@ -5,7 +5,7 @@ const FieldContent = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'c99148e0b9a6b127e4fa731b2305545adb5687ad', slot: "content" }, h("slot", { key: 'f17d981a7e903f20e5cffe17edbde0e75c0a0abc' })));
+        return (h(Host, { key: '251b9ccc1b13766b287f356dfc51d6a953ad0a5e', slot: "content" }, h("slot", { key: 'ee7d55bf47c0f468829e99a26a0fe340fbafcc9f' })));
     }
 };
 

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

@@ -5,7 +5,7 @@ const FieldLabel = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'e1234c4af917630a9be2805a3910be32ad35760a', slot: "label" }, h("slot", { key: '878a7b15927cdde4bfb345024445821abfab2ea6' })));
+        return (h(Host, { key: 'a051b09993d67bf56b087d86ba433caf1bdbb7a6', slot: "label" }, h("slot", { key: '6044b728151fd48878f555d3db3e0754f31b7e51' })));
     }
 };
 

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

@@ -8,7 +8,7 @@ const Field = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '594ea7dcef60755cb38610a30dc9da90f29b98f1' }, h("slot", { key: '19bc8252f4bc95e250597d9df02f726d10399cd8', name: "label" }), h("slot", { key: '6ae426ffb70fc275568f4dc90c3482494403cf30', name: "content" })));
+        return (h(Host, { key: 'ae0a6c7224dc199cd6cd342d77878bfff17aa49b' }, h("slot", { key: '408c146f3e6bfa1868964a29934494215627fb59', name: "label" }), h("slot", { key: '9c2151491f6acc4a5a6da36676e21e8dee6f156a', name: "content" })));
     }
 };
 Field.style = WcsFieldStyle0;

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

@@ -8,7 +8,7 @@ const Footer = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '8dc3c7853a401e2254d5dc706ee0168608e423ed' }, h("div", { key: 'a55ca8287f245b86252801c6a4426533d6fa5663', class: "container" }, h("div", { key: '97ea23df4cbc2698a390a0af601587a84da5e1dd' }, h("slot", { key: '4ed79ab9b2a96716dd9698635c0668a707b871f0' })), h("div", { key: 'c8ed43a578d3e77c279d62b724d9b4460c6856cc', class: "end" }, h("div", { key: 'a53cfe34fc4c257c4aece95a23ab3d88e28fc446', class: "end-left" }, h("slot", { key: '97453846523298ecb25c259414a3b4b0d279da6d', name: "end-left" })), h("div", { key: 'adf5130e60bb3514635f5a6808873067e947bfcf', class: "end-right" }, h("slot", { key: '5295d63977c1515fdda45160a964969738f6273c', name: "end-right" }))))));
+        return (h(Host, { key: '6fe975235d6de2793e55e8d10860649b5684c093' }, h("footer", { key: '80b0ff721eedab3e4cc00fd2484a638718fc8b13', role: "contentinfo" }, h("div", { key: 'f7d676d79f4d8780736e3a28e3e4b2aa1f0786e1', class: "container" }, h("div", { key: 'e1f9ea823133d972d3eb2bc8e7eaa18558448a73' }, h("slot", { key: 'd7177b9e98ac24ad39008669de01899e71c27079' })), h("div", { key: '849ceafdd459f24b672e1f68edf86ffd4fcce733', class: "end" }, h("div", { key: '7077861e872bbb50e7e5de0c968fe2222e9bf7d7', class: "end-left" }, h("slot", { key: 'dded653e62bf683e0514c51b06e55ccb44f70c54', name: "end-left" })), h("div", { key: 'ec25d2a5f84cb477eaa6a63de4df6ce6e9db07c5', class: "end-right" }, h("slot", { key: '4201096294b44a29f74112c2acaa2163f9ecfcb9', name: "end-right" })))))));
     }
 };
 Footer.style = WcsFooterStyle0;

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

@@ -1 +1 @@
-{"file":"wcs-footer.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,snDAAsnD,CAAC;AACzoD,wBAAe,SAAS;;MCyBX,MAAM;;;;IACf,MAAM;QACF,QACI,EAAC,IAAI,uDACD,4DAAK,KAAK,EAAC,WAAW,IAClB,8DACI,8DAAQ,CACN,EACN,4DAAK,KAAK,EAAC,KAAK,IACZ,4DAAK,KAAK,EAAC,UAAU,IACjB,6DAAM,IAAI,EAAC,UAAU,GAAE,CACrB,EACN,4DAAK,KAAK,EAAC,WAAW,IAClB,6DAAM,IAAI,EAAC,WAAW,GAAE,CACtB,CACJ,CACJ,CACH,EACV;KACJ;;;;;;","names":[],"sources":["src/components/footer/footer.scss?tag=wcs-footer&encapsulation=shadow","src/components/footer/footer.tsx"],"sourcesContent":[":host {\n    --wcs-footer-background-color: var(--wcs-semantic-color-background-surface-inverse);\n    --wcs-footer-text-color: var(--wcs-semantic-color-text-inverse);\n    --wcs-footer-link-text-color: var(--wcs-semantic-color-text-inverse);\n    --wcs-footer-link-text-color-hover:  var(--wcs-semantic-color-text-inverse);\n    --wcs-footer-link-font-size: var(--wcs-semantic-font-size-label-2);\n    --wcs-footer-link-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-footer-link-gap: calc(4 * var(--wcs-semantic-spacing-base));\n\n    --wcs-footer-gap: var(--wcs-semantic-spacing-large);\n    --wcs-footer-end-gap: var(--wcs-semantic-spacing-large);\n    --wcs-footer-max-width: var(--wcs-semantic-breakpoint-desktop, var(--wcs-com-content-max-width));\n    --wcs-footer-padding: calc(3 * var(--wcs-semantic-spacing-base));\n\n    display: block;\n    width: 100%;\n    background-color: var(--wcs-footer-background-color);\n    color: var(--wcs-footer-text-color);\n\n    .end {\n        margin-top: var(--wcs-footer-gap);\n        gap: var(--wcs-footer-end-gap);\n        width: 100%;\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: space-between;\n        align-items: baseline;\n\n        .end-left, .end-right {\n            display: flex;\n            flex-wrap: wrap;\n            column-gap: var(--wcs-footer-link-gap);\n        }\n\n        @media only screen and (max-width:1024px) {\n            .end-left, .end-right {\n                flex-direction: column;\n            }\n        }\n\n        slot[name=end-left]::slotted(a) {\n            color: var(--wcs-footer-link-text-color, var(--wcs-footer-text-color));\n            font-size: 14px;\n            font-weight: 500;\n            text-decoration: none;\n        }\n\n        slot[name=end-left]::slotted(a:hover) {\n            color: var(--wcs-footer-link-text-color-hover);\n        }\n\n    }\n\n    .container {\n        margin: 0 auto;\n        display: flex;\n        flex-direction: column;\n        max-width: var(--wcs-footer-max-width);\n        padding: var(--wcs-footer-padding);\n    }\n\n}\n","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/**\n * The footer component has been designed to leave as much customization as possible to the developer. The footers are often specific to the application developed.\n * \n * @cssprop --wcs-footer-background-color - Background color of the footer\n * @cssprop --wcs-footer-text-color - Text color of the footer\n * @cssprop --wcs-footer-link-text-color - Text color of the links in the footer\n * @cssprop --wcs-footer-link-text-color-hover - Text color of the links in the footer when hovered\n * @cssprop --wcs-footer-link-font-size - Font size of the links in the footer\n * @cssprop --wcs-footer-link-font-weight - Font weight of the links in the footer\n * @cssprop --wcs-footer-link-gap - Gap between the links in the footer\n * @cssprop --wcs-footer-gap - Vertical gap between the content and the two end slots\n * @cssprop --wcs-footer-end-gap - Horizontal gap between the right and left end slots\n * @cssprop --wcs-footer-max-width - Max width of the footer for responsive purposes \n * @cssprop --wcs-footer-padding - Padding all around the content of the footer\n * \n * @slot <no-name> Main container slot\n * @slot end-left Bottom-left part of the footer\n * @slot end-right Bottom-right part of the footer\n */\n@Component({\n    tag: 'wcs-footer',\n    styleUrl: 'footer.scss',\n    shadow: true,\n})\nexport class Footer implements ComponentInterface {\n    render(): any {\n        return (\n            <Host>\n                <div class=\"container\">\n                    <div>\n                        <slot />\n                    </div>\n                    <div class=\"end\">\n                        <div class=\"end-left\">\n                            <slot name=\"end-left\"/>\n                        </div>\n                        <div class=\"end-right\">\n                            <slot name=\"end-right\"/>\n                        </div>\n                    </div>\n                </div>\n            </Host>\n        )\n    }\n}\n"],"version":3}
+{"file":"wcs-footer.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,snDAAsnD,CAAC;AACzoD,wBAAe,SAAS;;MCyBX,MAAM;;;;IACf,MAAM;QACF,QACI,EAAC,IAAI,uDACD,+DAAQ,IAAI,EAAC,aAAa,IACtB,4DAAK,KAAK,EAAC,WAAW,IAClB,8DACI,8DAAO,CACL,EACN,4DAAK,KAAK,EAAC,KAAK,IACZ,4DAAK,KAAK,EAAC,UAAU,IACjB,6DAAM,IAAI,EAAC,UAAU,GAAE,CACrB,EACN,4DAAK,KAAK,EAAC,WAAW,IAClB,6DAAM,IAAI,EAAC,WAAW,GAAE,CACtB,CACJ,CACJ,CACD,CACN,EACV;KACJ;;;;;;","names":[],"sources":["src/components/footer/footer.scss?tag=wcs-footer&encapsulation=shadow","src/components/footer/footer.tsx"],"sourcesContent":[":host {\n    --wcs-footer-background-color: var(--wcs-semantic-color-background-surface-inverse);\n    --wcs-footer-text-color: var(--wcs-semantic-color-text-inverse);\n    --wcs-footer-link-text-color: var(--wcs-semantic-color-text-inverse);\n    --wcs-footer-link-text-color-hover:  var(--wcs-semantic-color-text-inverse);\n    --wcs-footer-link-font-size: var(--wcs-semantic-font-size-label-2);\n    --wcs-footer-link-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-footer-link-gap: calc(4 * var(--wcs-semantic-spacing-base));\n\n    --wcs-footer-gap: var(--wcs-semantic-spacing-large);\n    --wcs-footer-end-gap: var(--wcs-semantic-spacing-large);\n    --wcs-footer-max-width: var(--wcs-semantic-breakpoint-desktop, var(--wcs-com-content-max-width));\n    --wcs-footer-padding: calc(3 * var(--wcs-semantic-spacing-base));\n\n    display: block;\n    width: 100%;\n    background-color: var(--wcs-footer-background-color);\n    color: var(--wcs-footer-text-color);\n\n    .end {\n        margin-top: var(--wcs-footer-gap);\n        gap: var(--wcs-footer-end-gap);\n        width: 100%;\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: space-between;\n        align-items: baseline;\n\n        .end-left, .end-right {\n            display: flex;\n            flex-wrap: wrap;\n            column-gap: var(--wcs-footer-link-gap);\n        }\n\n        @media only screen and (max-width:1024px) {\n            .end-left, .end-right {\n                flex-direction: column;\n            }\n        }\n\n        slot[name=end-left]::slotted(a) {\n            color: var(--wcs-footer-link-text-color, var(--wcs-footer-text-color));\n            font-size: 14px;\n            font-weight: 500;\n            text-decoration: none;\n        }\n\n        slot[name=end-left]::slotted(a:hover) {\n            color: var(--wcs-footer-link-text-color-hover);\n        }\n\n    }\n\n    .container {\n        margin: 0 auto;\n        display: flex;\n        flex-direction: column;\n        max-width: var(--wcs-footer-max-width);\n        padding: var(--wcs-footer-padding);\n    }\n\n}\n","import { Component, ComponentInterface, h, Host } from '@stencil/core';\n\n/**\n * The footer component has been designed to leave as much customization as possible to the developer. The footers are often specific to the application developed.\n * \n * @cssprop --wcs-footer-background-color - Background color of the footer\n * @cssprop --wcs-footer-text-color - Text color of the footer\n * @cssprop --wcs-footer-link-text-color - Text color of the links in the footer\n * @cssprop --wcs-footer-link-text-color-hover - Text color of the links in the footer when hovered\n * @cssprop --wcs-footer-link-font-size - Font size of the links in the footer\n * @cssprop --wcs-footer-link-font-weight - Font weight of the links in the footer\n * @cssprop --wcs-footer-link-gap - Gap between the links in the footer\n * @cssprop --wcs-footer-gap - Vertical gap between the content and the two end slots\n * @cssprop --wcs-footer-end-gap - Horizontal gap between the right and left end slots\n * @cssprop --wcs-footer-max-width - Max width of the footer for responsive purposes \n * @cssprop --wcs-footer-padding - Padding all around the content of the footer\n * \n * @slot <no-name> Main container slot\n * @slot end-left Bottom-left part of the footer\n * @slot end-right Bottom-right part of the footer\n */\n@Component({\n    tag: 'wcs-footer',\n    styleUrl: 'footer.scss',\n    shadow: true,\n})\nexport class Footer implements ComponentInterface {\n    render(): any {\n        return (\n            <Host>\n                <footer role=\"contentinfo\">\n                    <div class=\"container\">\n                        <div>\n                            <slot/>\n                        </div>\n                        <div class=\"end\">\n                            <div class=\"end-left\">\n                                <slot name=\"end-left\"/>\n                            </div>\n                            <div class=\"end-right\">\n                                <slot name=\"end-right\"/>\n                            </div>\n                        </div>\n                    </div>\n                </footer>\n            </Host>\n        )\n    }\n}\n"],"version":3}

package/dist/esm/wcs-galactic-menu.entry.js

@@ -1,8 +1,8 @@
 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, o as clickInsideElement, b as isEscapeKey } from './helpers-f137ec8d.js';
+import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute, q as clickInsideElement, b as isEscapeKey } from './helpers-ece6a2d3.js';
 import { c as createPopper } from './popper-e491c314.js';
 
-const galacticMenuCss = ":host{--wcs-galactic-menu-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-galactic-menu-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-gap:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-height:var(--wcs-semantic-size-s);--wcs-galactic-menu-icon-focus-outline-color:var(--wcs-galactic-text-color, white);--wcs-galactic-menu-overlay-color:var(--wcs-semantic-color-text-inverse);--wcs-galactic-menu-overlay-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-galactic-menu-overlay-padding:var(--wcs-semantic-spacing-large);display:flex;align-items:center;box-sizing:border-box;height:var(--wcs-galactic-menu-height);gap:var(--wcs-galactic-menu-gap);padding:0 var(--wcs-galactic-menu-padding-horizontal);background-color:var(--wcs-galactic-menu-background-color)}#menu{display:none;background-color:var(--wcs-galactic-menu-overlay-background-color);color:var(--wcs-galactic-menu-overlay-color);padding:var(--wcs-galactic-menu-overlay-padding)}#menu[data-show]{display:block;z-index:9999}#menu[data-popper-placement^=top]>#arrow{bottom:-4px}#menu[data-popper-placement^=bottom]>#arrow{top:-4px}#menu[data-popper-placement^=left]>#arrow{right:-4px}#menu[data-popper-placement^=right]>#arrow{left:-4px}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit}#arrow{visibility:hidden}#arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}button{background:transparent;border:none;color:inherit;cursor:pointer;user-select:none}button:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-galactic-menu-icon-focus-outline-color);outline-offset:0;border-radius:0.1rem}";
+const galacticMenuCss = ":host{--wcs-galactic-menu-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-galactic-menu-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-gap:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-height:var(--wcs-semantic-size-s);--wcs-galactic-menu-icon-focus-outline-color:var(--wcs-galactic-text-color, white);--wcs-galactic-menu-overlay-color:var(--wcs-semantic-color-text-inverse);--wcs-galactic-menu-overlay-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-galactic-menu-overlay-padding:var(--wcs-semantic-spacing-large);display:flex;align-items:center;box-sizing:border-box;height:var(--wcs-galactic-menu-height);gap:var(--wcs-galactic-menu-gap);padding:0 var(--wcs-galactic-menu-padding-horizontal);background-color:var(--wcs-galactic-menu-background-color)}#menu{display:none;background-color:var(--wcs-galactic-menu-overlay-background-color);color:var(--wcs-galactic-menu-overlay-color);padding:var(--wcs-galactic-menu-overlay-padding);--wcs-semantic-color-border-focus-base:var(--wcs-semantic-color-text-inverse, white)}#menu[data-show]{display:block;z-index:9999}#menu[data-popper-placement^=top]>#arrow{bottom:-4px}#menu[data-popper-placement^=bottom]>#arrow{top:-4px}#menu[data-popper-placement^=left]>#arrow{right:-4px}#menu[data-popper-placement^=right]>#arrow{left:-4px}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit}#arrow{visibility:hidden}#arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}button{background:transparent;border:none;color:inherit;cursor:pointer;user-select:none}button:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-galactic-menu-icon-focus-outline-color);outline-offset:0;border-radius:0.1rem}";
 const WcsGalacticMenuStyle0 = galacticMenuCss;
 
 const GALACTIC_MENU_INHERITED_ATTRS = ['tabindex', 'title'];
@@ -61,9 +61,9 @@ const Galactic = class {
         }
     }
     render() {
-        return (h(Host, { key: '99bff08532f4d0bdd20c44781ab7f1e10bd4fad8' }, h("span", { key: 'c4827722002c9d558a9a412556be08ff36718a53' }, this.text), h("button", Object.assign({ key: 'fb4eb7c33068169949918b6bd6cc9c96cdde8608', "aria-haspopup": "true", "aria-controls": "menu", ref: el => {
+        return (h(Host, { key: 'bc460c17b222723b8cc037042cc758f8ca0e50ec' }, h("span", { key: 'd324ff624a9e5c9f6984134d4091986cac11f18b' }, this.text), h("button", Object.assign({ key: '7b0160174a249b30e082b9b2a77aca334ee6256a', "aria-haspopup": "true", "aria-controls": "menu", ref: el => {
                 this.menuButton = el;
-            }, "aria-expanded": this.showPopoverMenu ? "true" : "false" }, this.inheritedAttributes, { onClick: _ => this.toggleMenu() }), h("wcs-mat-icon", { key: '72b08ab8670569c8911ef041a71782cb14427e84', id: "toggle-menu-icon", icon: "more_horiz", size: "m" })), h("span", { key: 'd0491419b48c7fbe0d773f14c541bb5af7912684', id: "menu", role: "menu", "data-show": this.showPopoverMenu }, h("div", { key: '7f2ba9b81f9041c421f21b9da6c83f0096155161', id: "arrow", "data-popper-arrow": true }), h("slot", { key: 'c5acecba63143c61982bceca50eea5656130f908' }))));
+            }, "aria-expanded": this.showPopoverMenu ? "true" : "false" }, this.inheritedAttributes, { onClick: _ => this.toggleMenu() }), h("wcs-mat-icon", { key: '96b20053845f5490791ea278c2444392ba630600', id: "toggle-menu-icon", icon: "more_horiz", size: "m" })), h("span", { key: '6f959f220edbf293fe6922f7aaeaab0f213bf736', id: "menu", role: "menu", "data-show": this.showPopoverMenu }, h("div", { key: '6a05e468d65252ecbb57b421a53be0a0a1974f98', id: "arrow", "data-popper-arrow": true }), h("slot", { key: 'c9398cbb856d836820ac1cddf3113710eeaff5fb' }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/wcs-galactic-menu.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-galactic-menu.entry.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,2qDAA2qD,CAAC;AACpsD,8BAAe,eAAe;;ACW9B,MAAM,6BAA6B,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;MAsB/C,QAAQ;;;QAGT,wBAAmB,GAAyB,EAAE,CAAC;+BAEX,KAAK;;;IASjD,gBAAgB;QACZ,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;QAClE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;QACzD,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE;YAChD,SAAS,EAAE,YAAY;YACvB,SAAS,EAAE;gBACP;oBACI,IAAI,EAAE,QAAQ;oBACd,OAAO,EAAE;wBACL,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;qBACjB;iBACJ;aACJ;SACJ,CAAC,CAAC;KACN;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,6BAA6B,CAAC,CAC/D,CAAC;KACL;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACtD;IAID,kBAAkB,CAAC,KAAiB;QAChC,IAAI,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE;YACjF,OAAO;SACV;aAAM;YACH,IAAI,IAAI,CAAC,eAAe,EAAE;gBACtB,IAAI,CAAC,UAAU,EAAE,CAAC;aACrB;SACJ;KACJ;IAGD,SAAS,CAAC,MAAqB;;QAC3B,IAAI,WAAW,CAAC,MAAM,CAAC,EAAE;YACrB,MAAM,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC7B,MAAA,IAAI,CAAC,UAAU,0CAAE,KAAK,EAAE,CAAC;SAC5B;KACJ;IAEO,UAAU;QACd,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;KAChD;IAED,kBAAkB;QACd,IAAI,IAAI,CAAC,MAAM,EAAE;YACb,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;SACxB;KACJ;IAED,MAAM;QACF,QACI,EAAC,IAAI,uDACD,+DAAO,IAAI,CAAC,IAAI,CAAQ,EACxB,8FAAsB,MAAM,mBACN,MAAM,EACpB,GAAG,EAAE,EAAE;gBACH,IAAI,CAAC,UAAU,GAAG,EAAE,CAAA;aACvB,mBACc,IAAI,CAAC,eAAe,GAAG,MAAM,GAAG,OAAO,IAClD,IAAI,CAAC,mBAAmB,IAC5B,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,KACnC,qEAAc,EAAE,EAAC,kBAAkB,EAAC,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,GAAG,GAAgB,CACzE,EACT,6DAAM,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,eAAY,IAAI,CAAC,eAAe,IACvD,4DAAK,EAAE,EAAC,OAAO,8BAAqB,EACpC,8DAAO,CACJ,CACJ,EACT;KACL;;;;;;;","names":[],"sources":["src/components/galactic-menu/galactic-menu.scss?tag=wcs-galactic-menu&encapsulation=shadow","src/components/galactic-menu/galactic-menu.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-galactic-menu-background-color: var(--wcs-semantic-color-background-surface-brand);\n    --wcs-galactic-menu-padding-horizontal: var(--wcs-semantic-spacing-large);\n    --wcs-galactic-menu-gap: var(--wcs-semantic-spacing-large);\n    --wcs-galactic-menu-height: var(--wcs-semantic-size-s);\n\n    --wcs-galactic-menu-icon-focus-outline-color: var(--wcs-galactic-text-color, white); /* Inherit from galactic */\n    --wcs-galactic-menu-overlay-color: var(--wcs-semantic-color-text-inverse);\n    --wcs-galactic-menu-overlay-background-color: var(--wcs-semantic-color-background-surface-inverse);\n    --wcs-galactic-menu-overlay-padding: var(--wcs-semantic-spacing-large);\n\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    height: var(--wcs-galactic-menu-height);\n    gap: var(--wcs-galactic-menu-gap);\n    padding: 0 var(--wcs-galactic-menu-padding-horizontal);\n    background-color: var(--wcs-galactic-menu-background-color);\n\n}\n#menu {\n    display: none;\n    background-color: var(--wcs-galactic-menu-overlay-background-color);\n    color: var(--wcs-galactic-menu-overlay-color);\n    padding: var(--wcs-galactic-menu-overlay-padding);\n}\n#menu[data-show] {\n    display: block;\n    z-index: 9999;\n}\n#menu[data-popper-placement^='top'] > #arrow {\n    bottom: -4px;\n}\n\n#menu[data-popper-placement^='bottom'] > #arrow {\n    top: -4px;\n}\n\n#menu[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n#menu[data-popper-placement^='right'] > #arrow {\n    left: -4px;\n}\n\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n}\n\n#arrow {\n    visibility: hidden;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\nbutton {\n    background: transparent;\n    border: none;\n    color: inherit;\n\n    cursor: pointer;\n    user-select: none;\n\n    &:focus-visible {\n        @include focus-outline(var(--wcs-galactic-menu-icon-focus-outline-color), $outline-offset: 0);\n    }\n}\n","import { Component, ComponentInterface, Element, h, Host, Listen, Method, Prop, State } from '@stencil/core';\nimport { Instance, createPopper } from '@popperjs/core';\nimport {\n    clickInsideElement,\n    inheritAriaAttributes,\n    inheritAttributes,\n    isEscapeKey,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { AriaAttributeName } from \"../../utils/mutable-aria-attribute\";\n\n\nconst GALACTIC_MENU_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * *Part of communication design system*\n * You can put a wcs-galactic-menu inside a wcs-galactic component to add an extra menu\n * \n * @slot <no-name> - Main container slot\n * \n * @cssprop --wcs-galactic-menu-background-color - Background color of the menu\n * @cssprop --wcs-galactic-menu-padding-horizontal - Horizontal padding of the menu\n * @cssprop --wcs-galactic-menu-gap - Gap between items in the menu\n * @cssprop --wcs-galactic-menu-height - Height of the menu\n * @cssprop --wcs-galactic-menu-icon-focus-outline-color - Color of the focus outline on the icon\n * @cssprop --wcs-galactic-menu-overlay-background-color - Background color of the overlay\n * @cssprop --wcs-galactic-menu-overlay-padding - Padding of the overlay\n * @cssprop --wcs-galactic-menu-overlay-color - Color of the overlay\n */\n@Component({\n    tag: 'wcs-galactic-menu',\n    styleUrl: 'galactic-menu.scss',\n    shadow: true\n})\nexport class Galactic implements ComponentInterface {\n    @Element() private el: HTMLWcsGalacticMenuElement;\n    private menuButton!: HTMLButtonElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @State() private showPopoverMenu: boolean = false;\n    private popper: Instance;\n    /**\n     * Text to be displayed in the galactic bar\n     */\n    @Prop() text: string;\n    private menu;\n    private tooltip;\n\n    componentDidLoad() {\n        this.menu = this.el.shadowRoot.getElementById('toggle-menu-icon');\n        this.tooltip = this.el.shadowRoot.getElementById('menu');\n        this.popper = createPopper(this.menu, this.tooltip, {\n            placement: 'bottom-end',\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, GALACTIC_MENU_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.menuButton, attr, value);\n    }\n\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        if (clickInsideElement(event, this.tooltip) || clickInsideElement(event, this.menu)) {\n            return;\n        } else {\n            if (this.showPopoverMenu) {\n                this.toggleMenu();\n            }\n        }\n    }\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent) {\n        if (isEscapeKey(_event)) {\n            _event.preventDefault();\n            this.showPopoverMenu = false;\n            this.menuButton?.focus();\n        }\n    }\n    \n    private toggleMenu() {\n        this.showPopoverMenu = !this.showPopoverMenu;\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n    }\n\n    render(): any {\n        return (\n            <Host>\n                <span>{this.text}</span>\n                <button aria-haspopup=\"true\"\n                        aria-controls=\"menu\"\n                        ref={el => {\n                            this.menuButton = el\n                        }}\n                        aria-expanded={this.showPopoverMenu ? \"true\" : \"false\"}\n                        {...this.inheritedAttributes}\n                        onClick={_ => this.toggleMenu()}>\n                    <wcs-mat-icon id=\"toggle-menu-icon\" icon=\"more_horiz\" size=\"m\"></wcs-mat-icon>\n                </button>\n                <span id=\"menu\" role=\"menu\" data-show={this.showPopoverMenu}>\n                    <div id=\"arrow\" data-popper-arrow />\n                    <slot/>\n                </span>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-galactic-menu.entry.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,gwDAAgwD,CAAC;AACzxD,8BAAe,eAAe;;ACW9B,MAAM,6BAA6B,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;MAsB/C,QAAQ;;;QAGT,wBAAmB,GAAyB,EAAE,CAAC;+BAEX,KAAK;;;IASjD,gBAAgB;QACZ,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;QAClE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;QACzD,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE;YAChD,SAAS,EAAE,YAAY;YACvB,SAAS,EAAE;gBACP;oBACI,IAAI,EAAE,QAAQ;oBACd,OAAO,EAAE;wBACL,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;qBACjB;iBACJ;aACJ;SACJ,CAAC,CAAC;KACN;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,6BAA6B,CAAC,CAC/D,CAAC;KACL;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACtD;IAID,kBAAkB,CAAC,KAAiB;QAChC,IAAI,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE;YACjF,OAAO;SACV;aAAM;YACH,IAAI,IAAI,CAAC,eAAe,EAAE;gBACtB,IAAI,CAAC,UAAU,EAAE,CAAC;aACrB;SACJ;KACJ;IAGD,SAAS,CAAC,MAAqB;;QAC3B,IAAI,WAAW,CAAC,MAAM,CAAC,EAAE;YACrB,MAAM,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC7B,MAAA,IAAI,CAAC,UAAU,0CAAE,KAAK,EAAE,CAAC;SAC5B;KACJ;IAEO,UAAU;QACd,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;KAChD;IAED,kBAAkB;QACd,IAAI,IAAI,CAAC,MAAM,EAAE;YACb,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;SACxB;KACJ;IAED,MAAM;QACF,QACI,EAAC,IAAI,uDACD,+DAAO,IAAI,CAAC,IAAI,CAAQ,EACxB,8FAAsB,MAAM,mBACN,MAAM,EACpB,GAAG,EAAE,EAAE;gBACH,IAAI,CAAC,UAAU,GAAG,EAAE,CAAA;aACvB,mBACc,IAAI,CAAC,eAAe,GAAG,MAAM,GAAG,OAAO,IAClD,IAAI,CAAC,mBAAmB,IAC5B,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,KACnC,qEAAc,EAAE,EAAC,kBAAkB,EAAC,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,GAAG,GAAgB,CACzE,EACT,6DAAM,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,eAAY,IAAI,CAAC,eAAe,IACvD,4DAAK,EAAE,EAAC,OAAO,8BAAqB,EACpC,8DAAO,CACJ,CACJ,EACT;KACL;;;;;;;","names":[],"sources":["src/components/galactic-menu/galactic-menu.scss?tag=wcs-galactic-menu&encapsulation=shadow","src/components/galactic-menu/galactic-menu.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-galactic-menu-background-color: var(--wcs-semantic-color-background-surface-brand);\n    --wcs-galactic-menu-padding-horizontal: var(--wcs-semantic-spacing-large);\n    --wcs-galactic-menu-gap: var(--wcs-semantic-spacing-large);\n    --wcs-galactic-menu-height: var(--wcs-semantic-size-s);\n\n    --wcs-galactic-menu-icon-focus-outline-color: var(--wcs-galactic-text-color, white); /* Inherit from galactic */\n    --wcs-galactic-menu-overlay-color: var(--wcs-semantic-color-text-inverse);\n    --wcs-galactic-menu-overlay-background-color: var(--wcs-semantic-color-background-surface-inverse);\n    --wcs-galactic-menu-overlay-padding: var(--wcs-semantic-spacing-large);\n\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    height: var(--wcs-galactic-menu-height);\n    gap: var(--wcs-galactic-menu-gap);\n    padding: 0 var(--wcs-galactic-menu-padding-horizontal);\n    background-color: var(--wcs-galactic-menu-background-color);\n\n}\n#menu {\n    display: none;\n    background-color: var(--wcs-galactic-menu-overlay-background-color);\n    color: var(--wcs-galactic-menu-overlay-color);\n    padding: var(--wcs-galactic-menu-overlay-padding);\n    --wcs-semantic-color-border-focus-base: var(--wcs-semantic-color-text-inverse, white); // resolve bad contrast issue with focus outline of wcs-button\n}\n#menu[data-show] {\n    display: block;\n    z-index: 9999;\n}\n#menu[data-popper-placement^='top'] > #arrow {\n    bottom: -4px;\n}\n\n#menu[data-popper-placement^='bottom'] > #arrow {\n    top: -4px;\n}\n\n#menu[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n#menu[data-popper-placement^='right'] > #arrow {\n    left: -4px;\n}\n\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n}\n\n#arrow {\n    visibility: hidden;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\nbutton {\n    background: transparent;\n    border: none;\n    color: inherit;\n\n    cursor: pointer;\n    user-select: none;\n\n    &:focus-visible {\n        @include focus-outline(var(--wcs-galactic-menu-icon-focus-outline-color), $outline-offset: 0);\n    }\n}\n","import { Component, ComponentInterface, Element, h, Host, Listen, Method, Prop, State } from '@stencil/core';\nimport { Instance, createPopper } from '@popperjs/core';\nimport {\n    clickInsideElement,\n    inheritAriaAttributes,\n    inheritAttributes,\n    isEscapeKey,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { AriaAttributeName } from \"../../utils/mutable-aria-attribute\";\n\n\nconst GALACTIC_MENU_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * *Part of communication design system*\n * You can put a wcs-galactic-menu inside a wcs-galactic component to add an extra menu\n * \n * @slot <no-name> - Main container slot\n * \n * @cssprop --wcs-galactic-menu-background-color - Background color of the menu\n * @cssprop --wcs-galactic-menu-padding-horizontal - Horizontal padding of the menu\n * @cssprop --wcs-galactic-menu-gap - Gap between items in the menu\n * @cssprop --wcs-galactic-menu-height - Height of the menu\n * @cssprop --wcs-galactic-menu-icon-focus-outline-color - Color of the focus outline on the icon\n * @cssprop --wcs-galactic-menu-overlay-background-color - Background color of the overlay\n * @cssprop --wcs-galactic-menu-overlay-padding - Padding of the overlay\n * @cssprop --wcs-galactic-menu-overlay-color - Color of the overlay\n */\n@Component({\n    tag: 'wcs-galactic-menu',\n    styleUrl: 'galactic-menu.scss',\n    shadow: true\n})\nexport class Galactic implements ComponentInterface {\n    @Element() private el: HTMLWcsGalacticMenuElement;\n    private menuButton!: HTMLButtonElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @State() private showPopoverMenu: boolean = false;\n    private popper: Instance;\n    /**\n     * Text to be displayed in the galactic bar\n     */\n    @Prop() text: string;\n    private menu;\n    private tooltip;\n\n    componentDidLoad() {\n        this.menu = this.el.shadowRoot.getElementById('toggle-menu-icon');\n        this.tooltip = this.el.shadowRoot.getElementById('menu');\n        this.popper = createPopper(this.menu, this.tooltip, {\n            placement: 'bottom-end',\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, GALACTIC_MENU_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.menuButton, attr, value);\n    }\n\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        if (clickInsideElement(event, this.tooltip) || clickInsideElement(event, this.menu)) {\n            return;\n        } else {\n            if (this.showPopoverMenu) {\n                this.toggleMenu();\n            }\n        }\n    }\n\n    @Listen('keydown')\n    onKeyDown(_event: KeyboardEvent) {\n        if (isEscapeKey(_event)) {\n            _event.preventDefault();\n            this.showPopoverMenu = false;\n            this.menuButton?.focus();\n        }\n    }\n    \n    private toggleMenu() {\n        this.showPopoverMenu = !this.showPopoverMenu;\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n    }\n\n    render(): any {\n        return (\n            <Host>\n                <span>{this.text}</span>\n                <button aria-haspopup=\"true\"\n                        aria-controls=\"menu\"\n                        ref={el => {\n                            this.menuButton = el\n                        }}\n                        aria-expanded={this.showPopoverMenu ? \"true\" : \"false\"}\n                        {...this.inheritedAttributes}\n                        onClick={_ => this.toggleMenu()}>\n                    <wcs-mat-icon id=\"toggle-menu-icon\" icon=\"more_horiz\" size=\"m\"></wcs-mat-icon>\n                </button>\n                <span id=\"menu\" role=\"menu\" data-show={this.showPopoverMenu}>\n                    <div id=\"arrow\" data-popper-arrow />\n                    <slot/>\n                </span>\n            </Host>\n        );\n    }\n}\n"],"version":3}

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

@@ -10,7 +10,7 @@ const Galactic = class {
         this.show = false;
     }
     render() {
-        return (h(Host, { key: 'ccf6b6d2122201e49058bbda7d5c374b47f9b3db' }, h("div", { key: 'b4bb7ecd4e2bb70b845492370724bee2de253838', class: "container" }, h("div", { key: 'c2d2cfcc98d545536e53bf3e734f79fc9509f155', class: "logo-container" }, h("img", { key: '861c9ae4c2ab344d3c20f4a8fd86580d08b6fa11', src: SNCF_BASE64_SVG_LOGO, id: "sncf-logo", alt: "SNCF" }), h("span", { key: 'a56d1f48689b7a45262fa1941d7aa0b3c9ab5013' }, this.text)), h("div", { key: 'b007ba5ae702d1932413564ba690207ecad8f09b', class: "actions-container" }, h("slot", { key: 'f05d6a51edb4013fcc26a4102da99ab0dc72688f' })))));
+        return (h(Host, { key: 'bcede9aa03d2014887eeaa4d5728d57c32a69de2' }, h("div", { key: '2d031655b20b592b77e2227a195f15535071c069', class: "container" }, h("div", { key: '1d3a345c56925946f5b39ad9edaad7ee927343cc', class: "logo-container" }, h("img", { key: '3f7e9a0a7df3a954d21e328da562189771baf8a8', src: SNCF_BASE64_SVG_LOGO, id: "sncf-logo", alt: "SNCF" }), h("span", { key: '68c00801e7f2564930d6a5f77fc6f45511a321cf' }, this.text)), h("div", { key: '3724b08dca457a9be21ecb84925ed3fea4e49f95', class: "actions-container" }, h("slot", { key: '572f4ca9036c737a579f2c58ec113cada4dd421c' })))));
     }
 };
 const SNCF_BASE64_SVG_LOGO = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVy' +

package/dist/esm/wcs-grid-column.entry.js

@@ -1,5 +1,5 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-d9de61ce.js';
-import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute, c as isSpaceKey, d as isEnterKey } from './helpers-f137ec8d.js';
+import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute, c as isSpaceKey, d as isEnterKey } from './helpers-ece6a2d3.js';
 
 const GridSortArrow = ({ state }) => (h("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" },
     h("g", { class: (state === 'none' ? '' : state) + ' arrow-group' },
@@ -77,7 +77,7 @@ const GridColumn = class {
     }
     render() {
         const ButtonOrDiv = this.getTagName();
-        return (h(Host, { key: '05815f3b9f03f3248347108555a3fea6495d9193', slot: "grid-column" }, h("th", Object.assign({ key: 'e25a02d656e7f4cbf9c6bb8ada58b0300f41ce12', style: { width: this.width }, class: this.sort ? 'pointer' : '', tabIndex: this.sort ? -1 : this.getTabIndex(), scope: "col", onClick: this.onSortClick.bind(this), onKeyDown: this.handleSortKeyDown.bind(this), onFocus: this.delegateFocusToButton.bind(this), "aria-sort": this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null, ref: (el) => (this.nativeTh = el) }, this.inheritedAttributes), h(ButtonOrDiv, { key: '8954f92f00869d26c0bcea419ff0173e02ecbb94', class: "grid-column-th-content", ref: (el) => this.buttonOrDiv = el, tabIndex: this.sort ? this.getTabIndex() : -1 }, h("span", { key: '84006eeb0d8f91817aab26af7ba89e47ceedf850' }, this.name), this.sort ? h(GridSortArrow, { state: this.sortOrder }) : ''))));
+        return (h(Host, { key: 'e2c93e817abc5a61d6285f32779d915ff7368710', slot: "grid-column" }, h("th", Object.assign({ key: 'c23695b8680146e66e75ea958dc9dd9cac6056ac', style: { width: this.width }, class: this.sort ? 'pointer' : '', tabIndex: this.sort ? -1 : this.getTabIndex(), scope: "col", onClick: this.onSortClick.bind(this), onKeyDown: this.handleSortKeyDown.bind(this), onFocus: this.delegateFocusToButton.bind(this), "aria-sort": this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null, ref: (el) => (this.nativeTh = el) }, this.inheritedAttributes), h(ButtonOrDiv, { key: 'e936f0bd861b2d243071d45ccb4fa6bf8448f7a6', class: "grid-column-th-content", ref: (el) => this.buttonOrDiv = el, tabIndex: this.sort ? this.getTabIndex() : -1 }, h("span", { key: '33e9e0238aa5cea93bff5f0522e30b7cfa787283' }, this.name), this.sort ? h("div", { class: "sort-arrow-container" }, h(GridSortArrow, { state: this.sortOrder })) : ''))));
     }
     onSortClick() {
         if (!this.sort)

package/dist/esm/wcs-grid-column.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-grid-column.entry.js","mappings":"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","names":[],"sources":["src/components/grid-column/grid-sort-arrow.tsx","src/components/grid-column/grid-column.scss?tag=wcs-grid-column&encapsulation=shadow","src/components/grid-column/grid-sort-arrow.scss?tag=wcs-grid-column&encapsulation=shadow","src/components/grid-column/grid-column.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { WcsSortOrder } from '../grid/grid-interface';\n\ninterface GridSortArrowProps {\n    state: WcsSortOrder;\n}\n\nexport const GridSortArrow: FunctionalComponent<GridSortArrowProps> = ({state}) => (\n    <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n        <g class={(state === 'none' ? '' : state) + ' arrow-group'}>\n            <path class=\"arrow\"\n                  fill=\"#333333\"\n                  d=\"M10.0973 5.34619C9.79269 5.67941 9.29832 5.67941 8.99348 5.34619L6.78316 2.92128L6.78316 11.144C6.78316 11.6168 6.43368 12 6.00289 12C5.57187 12 5.22261 11.6168 5.22261 11.144L5.22261 2.92128L3.01219 5.34619C2.70802 5.67941 2.21341 5.67941 1.90881 5.34619C1.75655 5.17859 1.68005 4.95932 1.68005 4.73997C1.68005 4.52061 1.75655 4.30192 1.90881 4.13433L5.45122 0.250846C5.75597 -0.0836145 6.24977 -0.0836145 6.55454 0.250846L10.0973 4.13433C10.4017 4.46883 10.4017 5.01168 10.0973 5.34619Z\"\n            />\n        </g>\n    </svg>\n\n);\n","@import '../../style/focus-outline.scss';\n\n:host {\n\n    /* All css variables are in grid.scss.\n       Any variable can be overridden here for a single grid-column by using the correct selector in CSS */\n\n    display: contents;\n\n    th {\n        color: var(--wcs-grid-header-text-color);\n        background-color: var(--wcs-grid-header-background-color-default);\n        border-bottom: var(--wcs-grid-header-border-bottom);\n        border-left: var(--wcs-grid-header-border-left);\n        border-radius: var(--wcs-grid-header-border-radius);\n        padding: var(--wcs-grid-header-padding-vertical) var(--wcs-grid-header-padding-horizontal);\n        text-align: left;\n        align-content: center;\n        transition: background-color var(--wcs-grid-header-transition-duration) ease-in-out;\n\n        .grid-column-th-content {\n            // The following lines aim to avoid displaying the native button style of the agent\n            -webkit-appearance: none;\n            appearance: none;\n            background: none;\n            border: none;\n            outline: none;\n            margin: 0;\n            padding: 0;\n            font-size: var(--wcs-grid-header-font-size);\n            line-height: var(--wcs-grid-header-line-height);\n            color: var(--wcs-grid-header-text-color);\n            cursor: inherit;\n            display: inline-flex;\n            border-collapse: separate;\n            font-family: inherit;\n            text-align: left;\n            align-items: center;\n            gap: var(--wcs-semantic-spacing-base);\n\n            span {\n                font-weight: var(--wcs-grid-header-font-weight);\n            }\n        }\n\n        /* Hovered grid header */\n        &[aria-sort]:hover {\n            background-color: var(--wcs-grid-header-background-color-hover);\n        }\n\n        /* Pressed grid header */\n        &[aria-sort]:active {\n            background-color: var(--wcs-grid-header-background-color-press);\n        }\n\n        /* Grid header with asc or desc sort-config */\n        &[aria-sort=ascending],\n        &[aria-sort=descending] {\n            --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-default);\n        }\n\n        /* Hovered grid header, not sorted yet */\n        &[aria-sort=none]:hover {\n            --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-hover);\n        }\n\n        // XXX: This code works in Firefox as well, but there is a browser-side rendering bug that prevents it from displaying correctly.\n        // We decided to wait for Firefox to fix the bug instead adding a dirty fix here\n        &:focus-visible, &:has(:focus-visible) {\n            @include focus-outline($outline-color: var(--wcs-grid-outline-color), $outline-offset: 0);\n        }\n\n        @supports not selector(&:has(:focus-visible)) {\n            &:focus-within {\n                @include focus-outline($outline-color: var(--wcs-grid-outline-color), $outline-offset: 0);\n            }\n        }\n    }\n    .pointer {\n        cursor: pointer;\n    }\n}\n\n:host([hidden]) {\n    display: none !important;\n}\n",".arrow-group {\n    transform-origin: 50% 50%;\n    transition: transform var(--wcs-semantic-motion-duration-feedback-base, 150ms) ease-in-out;\n}\n\n.arrow {\n    fill: var(--wcs-grid-header-sort-arrow-color, transparent);\n}\n\n.desc {\n    transform: rotate(180deg);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host, Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport {\n    WcsCellFormatter,\n    WcsGridColumnSortChangeEventDetails,\n    WcsSortFn,\n    WcsSortOrder\n} from '../grid/grid-interface';\nimport { GridSortArrow } from './grid-sort-arrow';\nimport {\n    inheritAriaAttributes,\n    inheritAttributes,\n    isEnterKey,\n    isSpaceKey,\n    setOrRemoveAttribute\n} from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst GRID_COLUMN_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The grid column is a subcomponent of `wcs-grid` that represents a column of the table.\n * \n * @csspart [path]-column - CSS part for each column for styling. e.g: first_name-column, email-column\n */\n@Component({\n    tag: 'wcs-grid-column',\n    styleUrls: ['grid-column.scss', 'grid-sort-arrow.scss'],\n    shadow: true\n})\nexport class GridColumn implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLWcsGridColumnElement;\n    private nativeTh!: HTMLTableHeaderCellElement;\n    private buttonOrDiv: HTMLButtonElement | HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    /**\n     * Represents the name of the field from the `data` object (e.g: first_name, last_name, email, ...)\n     */\n    @Prop() path: string;\n    /**\n     * The name of the column displayed on the table (e.g: First Name, Last Name, Email, ...)\n     */\n    @Prop() name: string;\n    /**\n     * Make the column sortable.\n     */\n    @Prop() sort: boolean = false;\n    /**\n     * Customizable sort function to change the comparison of values.\n     */\n    @Prop() sortFn: WcsSortFn;\n    /**\n     * Customizable formatter function to render the cell differently.\n     */\n    @Prop() formatter: WcsCellFormatter;\n    /**\n     * Defines if the column sort is ascending or descending.  \n     * `none` = the column is not sorted.\n     */\n    @Prop({mutable: true}) sortOrder: WcsSortOrder = 'none';\n    /**\n     * Set the column `<th>` element width.\n     */\n    @Prop() width: string;\n    /**\n     * Set to true if using a `wcs-custom-cell` linked to it.\n     */\n    @Prop() customCells: boolean = false;\n    /**\n     * Flag to hide the column.\n     */\n    @Prop() hidden: boolean = false;\n    /**\n     * Event emitted when the sort of the column is changed.\n     */\n    @Event() wcsSortChange!: EventEmitter<WcsGridColumnSortChangeEventDetails>;\n    /**\n     * Event emitted if the column is dynamically switching visibility.\n     */\n    @Event() wcsHiddenChange!: EventEmitter<boolean>;\n\n    /**\n     * This property mustn't be set by hand, it is set by the wcs-grid component to move the focus between grid columns\n     * using keyboard.\n     * @internal\n     */\n    @Prop() public cursorPosition: {col: number, row: number};\n\n    /**\n     * This property mustn't be set by hand, it is set by the wcs-grid component to register the column index in a\n     * grid in order to move the focus between the grid columns.\n     * @internal\n     */\n    @Prop() public columnPosition: number;\n    \n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, GRID_COLUMN_INHERITED_ATTRS),\n        };\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeTh, attr, value);\n    }\n\n    @Watch('hidden')\n    parseMyObjectProp(newValue: boolean) {\n        this.wcsHiddenChange.emit(newValue);\n    }\n\n    @Watch('sortOrder')\n    sortOrderChange(_: WcsSortOrder) {\n        this.emitSortConfig();\n    }\n\n    emitSortConfig() {\n        if (!this.sort) return;\n        this.wcsSortChange.emit({\n            column: this.el,\n            order: this.sortOrder,\n            sortFn: this.sortFn\n        });\n    }\n\n    getSortOrderForAriaSort(sortOrder: WcsSortOrder) {\n        switch (sortOrder) {\n            case 'asc':\n                return 'ascending';\n            case 'desc':\n                return 'descending';\n            case 'none':\n            default:\n                return 'none';\n        }\n    }\n    \n    private getTabIndex() {\n        return this.cursorPosition?.col === this.columnPosition\n        && this.cursorPosition?.row === 0 ? 0 : -1;\n    }\n\n    private getTagName() {\n        return this.sort ? 'button' : 'div';\n    }\n    \n    private delegateFocusToButton() {\n        if (this.sort) {\n            this.buttonOrDiv.focus();\n        }\n    }\n\n    render(): any {\n        const ButtonOrDiv = this.getTagName();\n        return (<Host slot=\"grid-column\">\n            <th style={{width: this.width}}\n                class={this.sort ? 'pointer' : ''}\n                tabIndex={this.sort ? -1 : this.getTabIndex()}\n                scope=\"col\"\n                onClick={this.onSortClick.bind(this)}\n                onKeyDown={this.handleSortKeyDown.bind(this)}\n                onFocus={this.delegateFocusToButton.bind(this)}\n                aria-sort={this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null}\n                ref={(el) => (this.nativeTh = el)}\n                {...this.inheritedAttributes}\n            >\n                <ButtonOrDiv class=\"grid-column-th-content\"\n                        ref={(el: HTMLButtonElement | HTMLDivElement) => this.buttonOrDiv = el}\n                        tabIndex={this.sort ? this.getTabIndex() : -1}>\n                    <span>{this.name}</span>\n                    {\n                        this.sort ? <GridSortArrow state={this.sortOrder}/> : ''\n                    }\n                </ButtonOrDiv>\n            </th>\n        </Host>)\n    }\n\n    private onSortClick() {\n        if (!this.sort) return;\n        \n        // @Watch on sortOrder property will trigger wcsSortChange event\n        this.sortOrder = this.sortOrder === 'none' || this.sortOrder === 'desc' ? 'asc' : 'desc';\n    }\n    \n    private handleSortKeyDown(_event: KeyboardEvent) {\n        if (isSpaceKey(_event) || isEnterKey(_event)) {\n            _event.preventDefault();\n            this.onSortClick();\n        }\n    }\n}\n"],"version":3}
+{"file":"wcs-grid-column.entry.js","mappings":"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","names":[],"sources":["src/components/grid-column/grid-sort-arrow.tsx","src/components/grid-column/grid-column.scss?tag=wcs-grid-column&encapsulation=shadow","src/components/grid-column/grid-sort-arrow.scss?tag=wcs-grid-column&encapsulation=shadow","src/components/grid-column/grid-column.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { WcsSortOrder } from '../grid/grid-interface';\n\ninterface GridSortArrowProps {\n    state: WcsSortOrder;\n}\n\nexport const GridSortArrow: FunctionalComponent<GridSortArrowProps> = ({state}) => (\n    <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n        <g class={(state === 'none' ? '' : state) + ' arrow-group'}>\n            <path class=\"arrow\"\n                  fill=\"#333333\"\n                  d=\"M10.0973 5.34619C9.79269 5.67941 9.29832 5.67941 8.99348 5.34619L6.78316 2.92128L6.78316 11.144C6.78316 11.6168 6.43368 12 6.00289 12C5.57187 12 5.22261 11.6168 5.22261 11.144L5.22261 2.92128L3.01219 5.34619C2.70802 5.67941 2.21341 5.67941 1.90881 5.34619C1.75655 5.17859 1.68005 4.95932 1.68005 4.73997C1.68005 4.52061 1.75655 4.30192 1.90881 4.13433L5.45122 0.250846C5.75597 -0.0836145 6.24977 -0.0836145 6.55454 0.250846L10.0973 4.13433C10.4017 4.46883 10.4017 5.01168 10.0973 5.34619Z\"\n            />\n        </g>\n    </svg>\n\n);\n","@import '../../style/focus-outline.scss';\n\n:host {\n\n    /* All css variables are in grid.scss.\n       Any variable can be overridden here for a single grid-column by using the correct selector in CSS */\n\n    display: contents;\n\n    th {\n        color: var(--wcs-grid-header-text-color);\n        background-color: var(--wcs-grid-header-background-color-default);\n        border-bottom: var(--wcs-grid-header-border-bottom);\n        border-left: var(--wcs-grid-header-border-left);\n        border-radius: var(--wcs-grid-header-border-radius);\n        padding: var(--wcs-grid-header-padding-vertical) var(--wcs-grid-header-padding-horizontal);\n        text-align: left;\n        align-content: center;\n        transition: background-color var(--wcs-grid-header-transition-duration) ease-in-out;\n\n        .grid-column-th-content {\n            // The following lines aim to avoid displaying the native button style of the agent\n            -webkit-appearance: none;\n            appearance: none;\n            background: none;\n            border: none;\n            outline: none;\n            margin: 0;\n            padding: 0;\n            font-size: var(--wcs-grid-header-font-size);\n            line-height: var(--wcs-grid-header-line-height);\n            color: var(--wcs-grid-header-text-color);\n            cursor: inherit;\n            display: inline-flex;\n            border-collapse: separate;\n            font-family: inherit;\n            text-align: left;\n            align-items: center;\n            gap: var(--wcs-semantic-spacing-base);\n\n            span {\n                font-weight: var(--wcs-grid-header-font-weight);\n            }\n        }\n\n        /* Hovered grid header */\n        &[aria-sort]:hover {\n            background-color: var(--wcs-grid-header-background-color-hover);\n        }\n\n        /* Pressed grid header */\n        &[aria-sort]:active {\n            background-color: var(--wcs-grid-header-background-color-press);\n        }\n\n        /* Grid header with asc or desc sort-config */\n        &[aria-sort=ascending],\n        &[aria-sort=descending] {\n            --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-default);\n        }\n\n        /* Hovered grid header, not sorted yet */\n        &[aria-sort=none]:hover {\n            --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-hover);\n        }\n\n        // XXX: This code works in Firefox as well, but there is a browser-side rendering bug that prevents it from displaying correctly.\n        // We decided to wait for Firefox to fix the bug instead adding a dirty fix here\n        &:focus-visible, &:has(:focus-visible) {\n            @include focus-outline($outline-color: var(--wcs-grid-outline-color), $outline-offset: 0);\n        }\n\n        @supports not selector(&:has(:focus-visible)) {\n            &:focus-within {\n                @include focus-outline($outline-color: var(--wcs-grid-outline-color), $outline-offset: 0);\n            }\n        }\n    }\n    .pointer {\n        cursor: pointer;\n    }\n}\n\n:host([hidden]) {\n    display: none !important;\n}\n",".arrow-group {\n    transform-origin: 50% 50%;\n    transition: transform var(--wcs-semantic-motion-duration-feedback-base, 150ms) ease-in-out;\n}\n\n.arrow {\n    fill: var(--wcs-grid-header-sort-arrow-color, transparent);\n}\n\n.desc {\n    transform: rotate(180deg);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host, Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport {\n    WcsCellFormatter,\n    WcsGridColumnSortChangeEventDetails,\n    WcsSortFn,\n    WcsSortOrder\n} from '../grid/grid-interface';\nimport { GridSortArrow } from './grid-sort-arrow';\nimport {\n    inheritAriaAttributes,\n    inheritAttributes,\n    isEnterKey,\n    isSpaceKey,\n    setOrRemoveAttribute\n} from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst GRID_COLUMN_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The grid column is a subcomponent of `wcs-grid` that represents a column of the table.\n * \n * @csspart [path]-column - CSS part for each column for styling. e.g: first_name-column, email-column\n */\n@Component({\n    tag: 'wcs-grid-column',\n    styleUrls: ['grid-column.scss', 'grid-sort-arrow.scss'],\n    shadow: true\n})\nexport class GridColumn implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLWcsGridColumnElement;\n    private nativeTh!: HTMLTableHeaderCellElement;\n    private buttonOrDiv: HTMLButtonElement | HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    /**\n     * Represents the name of the field from the `data` object (e.g: first_name, last_name, email, ...)\n     */\n    @Prop() path: string;\n    /**\n     * The name of the column displayed on the table (e.g: First Name, Last Name, Email, ...)\n     */\n    @Prop() name: string;\n    /**\n     * Make the column sortable.\n     */\n    @Prop({ reflect: true }) sort: boolean = false;\n    /**\n     * Customizable sort function to change the comparison of values.\n     */\n    @Prop() sortFn: WcsSortFn;\n    /**\n     * Customizable formatter function to render the cell differently.\n     */\n    @Prop() formatter: WcsCellFormatter;\n    /**\n     * Defines if the column sort is ascending or descending.  \n     * `none` = the column is not sorted.\n     */\n    @Prop({mutable: true}) sortOrder: WcsSortOrder = 'none';\n    /**\n     * Set the column `<th>` element width.\n     */\n    @Prop() width: string;\n    /**\n     * Set to true if using a `wcs-custom-cell` linked to it.\n     */\n    @Prop({ reflect: true }) customCells: boolean = false;\n    /**\n     * Flag to hide the column.\n     */\n    @Prop({ reflect: true }) hidden: boolean = false;\n    /**\n     * Event emitted when the sort of the column is changed.\n     */\n    @Event() wcsSortChange!: EventEmitter<WcsGridColumnSortChangeEventDetails>;\n    /**\n     * Event emitted if the column is dynamically switching visibility.\n     */\n    @Event() wcsHiddenChange!: EventEmitter<boolean>;\n\n    /**\n     * This property mustn't be set by hand, it is set by the wcs-grid component to move the focus between grid columns\n     * using keyboard.\n     * @internal\n     */\n    @Prop() public cursorPosition: {col: number, row: number};\n\n    /**\n     * This property mustn't be set by hand, it is set by the wcs-grid component to register the column index in a\n     * grid in order to move the focus between the grid columns.\n     * @internal\n     */\n    @Prop() public columnPosition: number;\n    \n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, GRID_COLUMN_INHERITED_ATTRS),\n        };\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeTh, attr, value);\n    }\n\n    @Watch('hidden')\n    parseMyObjectProp(newValue: boolean) {\n        this.wcsHiddenChange.emit(newValue);\n    }\n\n    @Watch('sortOrder')\n    sortOrderChange(_: WcsSortOrder) {\n        this.emitSortConfig();\n    }\n\n    emitSortConfig() {\n        if (!this.sort) return;\n        this.wcsSortChange.emit({\n            column: this.el,\n            order: this.sortOrder,\n            sortFn: this.sortFn\n        });\n    }\n\n    getSortOrderForAriaSort(sortOrder: WcsSortOrder) {\n        switch (sortOrder) {\n            case 'asc':\n                return 'ascending';\n            case 'desc':\n                return 'descending';\n            case 'none':\n            default:\n                return 'none';\n        }\n    }\n    \n    private getTabIndex() {\n        return this.cursorPosition?.col === this.columnPosition\n        && this.cursorPosition?.row === 0 ? 0 : -1;\n    }\n\n    private getTagName() {\n        return this.sort ? 'button' : 'div';\n    }\n    \n    private delegateFocusToButton() {\n        if (this.sort) {\n            this.buttonOrDiv.focus();\n        }\n    }\n\n    render(): any {\n        const ButtonOrDiv = this.getTagName();\n        return (<Host slot=\"grid-column\">\n            <th style={{width: this.width}}\n                class={this.sort ? 'pointer' : ''}\n                tabIndex={this.sort ? -1 : this.getTabIndex()}\n                scope=\"col\"\n                onClick={this.onSortClick.bind(this)}\n                onKeyDown={this.handleSortKeyDown.bind(this)}\n                onFocus={this.delegateFocusToButton.bind(this)}\n                aria-sort={this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null}\n                ref={(el) => (this.nativeTh = el)}\n                {...this.inheritedAttributes}\n            >\n                <ButtonOrDiv class=\"grid-column-th-content\"\n                        ref={(el: HTMLButtonElement | HTMLDivElement) => this.buttonOrDiv = el}\n                        tabIndex={this.sort ? this.getTabIndex() : -1}>\n                    <span>{this.name}</span>\n                    {\n                        this.sort ? <div class=\"sort-arrow-container\"><GridSortArrow state={this.sortOrder}/></div> : ''\n                    }\n                </ButtonOrDiv>\n            </th>\n        </Host>)\n    }\n\n    private onSortClick() {\n        if (!this.sort) return;\n        \n        // @Watch on sortOrder property will trigger wcsSortChange event\n        this.sortOrder = this.sortOrder === 'none' || this.sortOrder === 'desc' ? 'asc' : 'desc';\n    }\n    \n    private handleSortKeyDown(_event: KeyboardEvent) {\n        if (isSpaceKey(_event) || isEnterKey(_event)) {\n            _event.preventDefault();\n            this.onSortClick();\n        }\n    }\n}\n"],"version":3}

package/dist/esm/wcs-grid-custom-cell.entry.js

@@ -7,7 +7,7 @@ const GridCustomCell = class {
         this.rowId = undefined;
     }
     render() {
-        return (h(Host, { key: '441a2f06db44cb423da04b165b8fde063d276d67', slot: this.columnId + '-' + this.rowId }, h("slot", { key: '6b3e9007560c8b2fef3df9c968fb8659b99bc9e6' })));
+        return (h(Host, { key: '3353e4de7a3eeb4d903a63d5adf257ed3427beb8', slot: this.columnId + '-' + this.rowId }, h("slot", { key: 'cc3297d327379b74a385c4909964b8371da68a97' })));
     }
 };
 

package/dist/esm/wcs-grid-pagination.entry.js

@@ -1,5 +1,5 @@
-export { G as wcs_grid_pagination } from './grid-pagination-421689be.js';
+export { G as wcs_grid_pagination } from './grid-pagination-731726a6.js';
 import './index-d9de61ce.js';
-import './helpers-f137ec8d.js';
+import './helpers-ece6a2d3.js';
 
 //# sourceMappingURL=wcs-grid-pagination.entry.js.map

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

@@ -1,7 +1,7 @@
 import { h, r as registerInstance, c as createEvent, f as forceUpdate, H as Host, g as getElement } from './index-d9de61ce.js';
-import { G as GridPagination } from './grid-pagination-421689be.js';
-import { k as keyboardShortcutFromKeyboardEvent } from './keyboard-event-bdea408a.js';
-import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute } from './helpers-f137ec8d.js';
+import { G as GridPagination } from './grid-pagination-731726a6.js';
+import { k as keyboardShortcutFromKeyboardEvent } from './keyboard-event-26b65ae5.js';
+import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute } from './helpers-ece6a2d3.js';
 import { i as isObjectLike, b as baseGetTag, a as isArray, S as Symbol, c as isObject, g as getNative, e as eq, d as isPrototype, f as isArrayLike, h as arrayLikeKeys, M as MapCache, o as overArg, k as keys, r as root, j as getSymbols, s as stubArray, l as arrayPush, m as baseGetAllKeys, U as Uint8Array$1, n as getTag, p as baseUnary, q as nodeUtil, t as isBuffer, u as Stack, v as getAllKeys, w as isEqual } from './isEqual-f2a07f4c.js';
 
 function getSortOrderInteger(sortOrder) {
@@ -1289,6 +1289,14 @@ const Grid = class {
     onBlur(event) {
         this.wcsBlur.emit(event);
     }
+    /**
+     * Set focus on the first cell of the grid
+     */
+    async focusFirstCell() {
+        var _a;
+        this.cursorPosition = { col: this.selectionConfig === 'none' ? 0 : 1, row: 1 };
+        (_a = this.getElementToFocusAtCursorPosition()) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     /**
      * If selectionConfig is different from `none`, that means that an extra column for radio or checkbox is rendered
      * in the table.
@@ -1693,12 +1701,12 @@ const Grid = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '2012464f20c249873192549e34ff7ac4c82e8526' }, h("table", Object.assign({ key: 'a0a4a42e52bf623b34db145571045437ac6f4a60', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), h("thead", { key: '3bf24c0462be2bd52754d44a3d9c5f84a7662bd6' }, h("tr", { key: '4169baa4ce95078d40e328d0c76577b8a58e3489', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
+        return (h(Host, { key: '98d13e7497ec9d9ecd3e149b3f6986e16bc5cc2a' }, h("table", Object.assign({ key: 'a44825cf71ff284a5204e9d922c0eba2c2ca23f4', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), h("thead", { key: '336578d350ae8082a19fa6798af35f2fdd015ff9' }, h("tr", { key: 'fdb38402ea5c58dd77dad7df2ef97d54c521123c', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
             : h("th", { class: "wcs-grid-selection-column" }, this.selectionConfig === 'single' ? '' :
                 h("wcs-checkbox", { tabIndex: ((_b = this.cursorPosition) === null || _b === void 0 ? void 0 : _b.col) === 0
-                        && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, part: "all-rows-checkbox", checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), h("slot", { key: '743ee6266300d4ad05f70b7e2a42a159be7a1700', name: "grid-column" }))), h("tbody", { key: 'c20964de1625e8fef9d98f9b7aa6f5c8cf2b186c' }, this.loading
+                        && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, part: "all-rows-checkbox", checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), h("slot", { key: '2d68b72fac0251dab9f519cf84c25c96262c193b', name: "grid-column" }))), h("tbody", { key: '4156e796ac5a81170b5dba011159f8e6bb7a7e60' }, this.loading
             ? h("tr", { "aria-busy": "true" }, h("td", { colSpan: this.totalColumnCount(), class: "loading" }, h("wcs-spinner", null)))
-            : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), h("slot", { key: '1cac800a642d68c9ae7e6f958c74d6b3069e75a1', name: "grid-pagination" })));
+            : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), h("slot", { key: 'c683eb883707ffbd1fed22d86ececb595f70c2c0', name: "grid-pagination" })));
     }
     /**
      * Returns the row with all mapped cells inside.