wcs-core 7.0.0 → 7.1.0

package/dist/wcs/p-bf31245c.entry.js.map

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

package/dist/wcs/p-cd592a00.entry.js

@@ -1,2 +0,0 @@
-import{r as c,c as e,h as o,H as r,g as t}from"./p-32e583ea.js";import{i as a,a as s,s as i}from"./p-a3aece7a.js";const n=':host{--wcs-checkbox-border-color:var(--wcs-checkbox-border-color-default);--wcs-checkbox-border-color-default:var(--wcs-semantic-color-border-control-indicator-default);--wcs-checkbox-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-checkbox-border-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-checkbox-border-color-selected:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-checkbox-border-color-indeterminate:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-checkbox-border-radius:calc(0.5 * var(--wcs-semantic-size-base));--wcs-checkbox-border-width:var(--wcs-semantic-border-width-large);--wcs-checkbox-size:calc(2 * var(--wcs-semantic-size-base));--wcs-checkbox-text-color-default:var(--wcs-semantic-color-text-secondary);--wcs-checkbox-text-color-disabled:var(--wcs-semantic-color-text-tertiary);--wcs-checkbox-text-color-hover:var(--wcs-semantic-color-text-secondary);--wcs-checkbox-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-checkbox-text-font-size:var(--wcs-semantic-font-size-label-1);--wcs-checkbox-text-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-checkbox-background-color-default:transparent;--wcs-checkbox-background-color-hover:var(--wcs-semantic-color-background-control-indicator-hover);--wcs-checkbox-background-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-checkbox-background-color-selected:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-checkbox-background-color-indeterminate:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-checkbox-outline-radius-focus:var(--wcs-semantic-border-radius-base);--wcs-checkbox-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-checkbox-gap:var(--wcs-semantic-spacing-base);--wcs-checkmark-color:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-checkmark-height:0.5rem;--wcs-checkmark-width:0.1875rem;--wcs-checkmark-border-width:0.125rem;--wcs-indeterminate-bar-width:0.625rem;--wcs-indeterminate-bar-height:0.125rem;--wcs-indeterminate-bar-border-radius:0.0625rem;--wcs-indeterminate-bar-background-color:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-checkbox-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:inline-flex}:host([disabled]) .text{color:var(--wcs-checkbox-text-color-disabled)}:host([disabled]) .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-disabled)}:host([disabled]) .wcs-container{cursor:not-allowed}:host([checked]:not([indeterminate][disabled])){--wcs-checkbox-border-color:var(--wcs-checkbox-border-color-selected)}.wcs-checkmark{transition-property:border-color, background-color, color;transition:var(--wcs-checkbox-transition-duration) ease-in-out}.wcs-container{position:relative;font-size:var(--wcs-checkbox-text-font-size);font-weight:var(--wcs-checkbox-text-font-weight);user-select:none;display:flex;gap:var(--wcs-checkbox-gap)}.wcs-container:not([aria-disabled]){cursor:pointer}:host([label-alignment=top]) .wcs-container{align-items:start}:host([label-alignment=center]) .wcs-container{align-items:center}:host([label-alignment=bottom]) .wcs-container{align-items:flex-end}.wcs-container input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.wcs-container:hover:not([aria-disabled]) .text,input:focus .text{color:var(--wcs-checkbox-text-color-hover)}.wcs-container:hover:not([aria-disabled]) .wcs-checkmark,input:focus .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-hover)}.wcs-container:has(input:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-checkbox-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-checkbox-outline-radius-focus)}@supports not selector(.wcs-container:has(input:focus-visible)){.wcs-container:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-checkbox-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-checkbox-outline-radius-focus)}}.wcs-checkmark{flex:0 0 var(--wcs-checkbox-size);width:var(--wcs-checkbox-size);height:var(--wcs-checkbox-size);background-color:var(--wcs-checkbox-background-color-default);border:var(--wcs-checkbox-border-width) solid var(--wcs-checkbox-border-color);border-radius:var(--wcs-checkbox-border-radius);box-sizing:border-box}:host([indeterminate]) .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-indeterminate);background:var(--wcs-checkbox-background-color-indeterminate)}:host([indeterminate][disabled]) .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-disabled);background:var(--wcs-checkbox-background-color-disabled)}.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark{background-color:var(--wcs-checkbox-background-color-selected)}.wcs-container[aria-disabled] input:checked~.wcs-checkmark{background-color:var(--wcs-checkbox-background-color-disabled)}.wcs-checkmark:after{content:"";position:absolute;display:none}.wcs-checkmark{position:relative}:host([checked]),:host([indeterminate]){}:host([checked]) .wcs-container input~.wcs-checkmark:after,:host([indeterminate]) .wcs-container input~.wcs-checkmark:after{display:flex}:host([checked]) .wcs-container:not([aria-disabled]):hover .wcs-checkmark,:host([indeterminate]) .wcs-container:not([aria-disabled]):hover .wcs-checkmark{background-color:var(--wcs-checkbox-background-color-hover)}:host(:not([indeterminate])){}:host(:not([indeterminate])) .wcs-container .wcs-checkmark:after{left:0.25rem;width:var(--wcs-checkmark-width);height:var(--wcs-checkmark-height);border:solid var(--wcs-checkmark-color, white);border-width:0 var(--wcs-checkmark-border-width) var(--wcs-checkmark-border-width) 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}:host([indeterminate]) .wcs-container .wcs-checkmark:after{position:absolute;background-color:var(--wcs-indeterminate-bar-background-color);left:calc(50% - var(--wcs-indeterminate-bar-width) / 2);top:calc(50% - var(--wcs-indeterminate-bar-height) / 2);width:var(--wcs-indeterminate-bar-width);height:var(--wcs-indeterminate-bar-height);border-radius:var(--wcs-indeterminate-bar-border-radius)}.wcs-container:not([aria-disabled]) input:not(:checked)~.text{color:var(--wcs-checkbox-text-color-default);font-weight:var(--wcs-checkbox-text-font-weight)}.wcs-container:not([aria-disabled]) input:checked~.text{color:var(--wcs-checkbox-text-color-selected);font-weight:var(--wcs-checkbox-text-font-weight)}.hidden{display:none}';const d=n;const h=["tabindex","title"];const l=class{constructor(o){c(this,o);this.wcsChange=e(this,"wcsChange",7);this.wcsFocus=e(this,"wcsFocus",7);this.wcsBlur=e(this,"wcsBlur",7);this.inheritedAttributes={};this.checkboxId=`wcs-checkbox-${b++}`;this.name=this.checkboxId;this.indeterminate=false;this.checked=false;this.labelAlignment="center";this.disabled=false}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},a(this.el)),s(this.el,h))}componentDidLoad(){this.onSlotChange()}async setAriaAttribute(c,e){i(this.nativeInput,c,e)}handleChange(c){c.stopImmediatePropagation();c.preventDefault();this.toggleCheckboxState()}async handleHostClick(c){c.preventDefault();c.stopPropagation();this.toggleCheckboxState()}handleInputClick(c){if(c.detail){c.stopImmediatePropagation();c.preventDefault()}}toggleCheckboxState(){if(this.disabled)return;this.indeterminate=false;this.checked=!this.checked;this.wcsChange.emit({checked:this.checked})}handleFocus(c){this.wcsFocus.emit(c)}handleBlur(c){this.wcsBlur.emit(c)}onSlotChange(){const c=this.el.shadowRoot.querySelector("slot");if(c){const e=c.assignedNodes();if(e.length>0){this.el.shadowRoot.querySelector(".text").classList.remove("hidden")}else{this.el.shadowRoot.querySelector(".text").classList.add("hidden")}}}render(){return o(r,{key:"67abc5dd72a4af40cbea9532440bda5fa3485806"},o("label",{key:"f71f0db26cb3088bb29899b2125a8f31e7c2e568",htmlFor:this.name,class:"wcs-container","aria-disabled":this.disabled},o("input",Object.assign({key:"48ad738d5678ef550017b9bcae3d5d9283f9655e",onBlur:this.handleBlur.bind(this),onChange:this.handleChange.bind(this),onFocus:this.handleFocus.bind(this),onClick:this.handleInputClick.bind(this),checked:this.checked,class:"wcs-checkbox",type:"checkbox",ref:c=>this.nativeInput=c,name:this.name,disabled:this.disabled,id:this.name},this.inheritedAttributes)),o("span",{key:"a8e25ca97f455ca1d6b6baa466ae7900e8e2476c",class:"wcs-checkmark"}),o("span",{key:"215e0a4f6aa986f38d67e783954a0d7ca7bba877",class:"text"},o("slot",{key:"928615492124aa1febec5baf593272e02094bef9",onSlotchange:c=>this.onSlotChange()}))))}static get delegatesFocus(){return true}get el(){return t(this)}};let b=0;l.style=d;export{l as wcs_checkbox};
-//# sourceMappingURL=p-cd592a00.entry.js.map

package/dist/wcs/p-cd592a00.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["checkboxCss","WcsCheckboxStyle0","CHECKBOX_INHERITED_ATTRS","Checkbox","this","inheritedAttributes","checkboxId","checkboxIds","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","componentDidLoad","onSlotChange","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeInput","handleChange","e","stopImmediatePropagation","preventDefault","toggleCheckboxState","handleHostClick","stopPropagation","handleInputClick","ev","detail","disabled","indeterminate","checked","wcsChange","emit","handleFocus","event","wcsFocus","handleBlur","wcsBlur","slot","shadowRoot","querySelector","assignedNodes","length","classList","remove","add","render","h","Host","key","htmlFor","name","class","onBlur","bind","onChange","onFocus","onClick","type","ref","id","onSlotchange","_"],"sources":["src/components/checkbox/checkbox.scss?tag=wcs-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-checkbox-border-color: var(--wcs-checkbox-border-color-default);\n    --wcs-checkbox-border-color-default: var(--wcs-semantic-color-border-control-indicator-default);\n    --wcs-checkbox-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-checkbox-border-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-checkbox-border-color-selected: var(--wcs-semantic-color-border-control-indicator-selected);\n    --wcs-checkbox-border-color-indeterminate: var(--wcs-semantic-color-border-control-indicator-selected);\n\n    --wcs-checkbox-border-radius: calc(0.5 * var(--wcs-semantic-size-base));\n    --wcs-checkbox-border-width: var(--wcs-semantic-border-width-large);\n\n    --wcs-checkbox-size: calc(2 * var(--wcs-semantic-size-base));\n\n    --wcs-checkbox-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-checkbox-text-color-disabled: var(--wcs-semantic-color-text-tertiary);\n    --wcs-checkbox-text-color-hover: var(--wcs-semantic-color-text-secondary);\n    --wcs-checkbox-text-color-selected: var(--wcs-semantic-color-text-primary);\n\n    --wcs-checkbox-text-font-size: var(--wcs-semantic-font-size-label-1);\n    --wcs-checkbox-text-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-checkbox-background-color-default: transparent;\n    --wcs-checkbox-background-color-hover: var(--wcs-semantic-color-background-control-indicator-hover);\n    --wcs-checkbox-background-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-checkbox-background-color-selected: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-checkbox-background-color-indeterminate: var(--wcs-semantic-color-background-control-indicator-selected);\n\n    --wcs-checkbox-outline-radius-focus: var(--wcs-semantic-border-radius-base);\n    --wcs-checkbox-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-checkbox-gap: var(--wcs-semantic-spacing-base);\n    --wcs-checkmark-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n    --wcs-checkmark-height: 0.5rem;\n    --wcs-checkmark-width: 0.1875rem;\n    --wcs-checkmark-border-width: 0.125rem;\n\n    --wcs-indeterminate-bar-width: 0.625rem;\n    --wcs-indeterminate-bar-height: 0.125rem;\n    --wcs-indeterminate-bar-border-radius: 0.0625rem;\n    --wcs-indeterminate-bar-background-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n\n    --wcs-checkbox-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    display: inline-flex;\n}\n\n:host([disabled]) {\n    .text {\n        color: var(--wcs-checkbox-text-color-disabled);\n    }\n\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-disabled);\n    }\n\n    .wcs-container {\n        cursor: not-allowed;\n    }\n}\n\n:host([checked]:not([indeterminate][disabled])) {\n    --wcs-checkbox-border-color: var(--wcs-checkbox-border-color-selected);\n}\n\n.wcs-checkmark {\n    transition-property: border-color, background-color, color;\n    transition: var(--wcs-checkbox-transition-duration) ease-in-out;\n\n}\n\n/* Customize the label (the wcs-container) */\n.wcs-container {\n    position: relative;\n    font-size: var(--wcs-checkbox-text-font-size);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n    user-select: none;\n    display: flex;\n    gap: var(--wcs-checkbox-gap);\n}\n\n.wcs-container:not([aria-disabled]) {\n    cursor: pointer;\n}\n\n/* Let the user choose the alignment of the checkbox with the label text */\n:host([label-alignment=\"top\"]){\n    .wcs-container {\n        align-items: start;\n    }\n}\n\n:host([label-alignment=\"center\"]){\n    .wcs-container {\n        align-items: center;\n    }\n}\n\n:host([label-alignment=\"bottom\"]){\n    .wcs-container {\n        align-items: flex-end;\n    }\n}\n\n/* Hide the browser's default checkbox */\n.wcs-container input {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n}\n\n.wcs-container:hover:not([aria-disabled]), input:focus {\n    .text {\n        color: var(--wcs-checkbox-text-color-hover);\n    }\n\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-hover);\n    }\n}\n\n.wcs-container:has(input:focus-visible) {\n    @include focus-outline($outline-color: var(--wcs-checkbox-outline-color-focus), $border-radius: var(--wcs-checkbox-outline-radius-focus));\n}\n\n@supports not selector(.wcs-container:has(input:focus-visible)){\n    .wcs-container:focus-within {\n        @include focus-outline($outline-color: var(--wcs-checkbox-outline-color-focus), $border-radius: var(--wcs-checkbox-outline-radius-focus));\n    }\n}\n\n/* Create a custom checkbox */\n.wcs-checkmark {\n    flex: 0 0 var(--wcs-checkbox-size);\n    width: var(--wcs-checkbox-size);\n    height: var(--wcs-checkbox-size);\n    background-color: var(--wcs-checkbox-background-color-default);\n    border: var(--wcs-checkbox-border-width) solid var(--wcs-checkbox-border-color);\n    border-radius: var(--wcs-checkbox-border-radius);\n    box-sizing: border-box;\n}\n\n:host([indeterminate]) {\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-indeterminate);\n        background: var(--wcs-checkbox-background-color-indeterminate);\n    }\n}\n\n:host([indeterminate][disabled]) {\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-disabled);\n        background: var(--wcs-checkbox-background-color-disabled);\n    }\n}\n\n/* When the checkbox is checked, add a blue background */\n.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark {\n    background-color: var(--wcs-checkbox-background-color-selected);\n}\n.wcs-container[aria-disabled] input:checked~.wcs-checkmark {\n    background-color: var(--wcs-checkbox-background-color-disabled);\n}\n\n/* Create the wcs-checkmark/indicator (hidden when not checked) */\n.wcs-checkmark:after {\n    content: \"\";\n    position: absolute;\n    display: none;\n}\n\n.wcs-checkmark {\n    position: relative;\n}\n\n:host([checked]), :host([indeterminate]) {\n    /* Show the wcs-checkmark when checked */\n    .wcs-container input~.wcs-checkmark:after {\n        display: flex;\n    }\n\n    /* Handle hover when checked/indeterminate */\n    .wcs-container:not([aria-disabled]):hover {\n        .wcs-checkmark {\n            background-color: var(--wcs-checkbox-background-color-hover);\n        }\n    }\n}\n\n:host(:not([indeterminate])) {\n    /* Style the wcs-checkmark/indicator */\n    .wcs-container .wcs-checkmark:after {\n        left: 0.25rem;\n        width: var(--wcs-checkmark-width);\n        height: var(--wcs-checkmark-height);\n        border: solid var(--wcs-checkmark-color, white);\n        border-width: 0 var(--wcs-checkmark-border-width) var(--wcs-checkmark-border-width) 0;\n        -webkit-transform: rotate(45deg);\n        -ms-transform: rotate(45deg);\n        transform: rotate(45deg);\n    }\n}\n\n:host([indeterminate]) {\n    .wcs-container .wcs-checkmark:after {\n        position: absolute;\n        background-color: var(--wcs-indeterminate-bar-background-color);\n        left: calc(50% - (var(--wcs-indeterminate-bar-width) / 2));\n        top: calc(50% - (var(--wcs-indeterminate-bar-height) / 2));\n        width: var(--wcs-indeterminate-bar-width);\n        height: var(--wcs-indeterminate-bar-height);\n        border-radius: var(--wcs-indeterminate-bar-border-radius);\n    }\n}\n\n.wcs-container:not([aria-disabled]) input:not(:checked)~.text {\n    color: var(--wcs-checkbox-text-color-default);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n}\n\n.wcs-container:not([aria-disabled]) input:checked~.text {\n    color: var(--wcs-checkbox-text-color-selected);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n}\n\n.hidden {\n    display: none;\n}\n","import {\n    Component,\n    Prop,\n    Event,\n    EventEmitter,\n    ComponentInterface,\n    h,\n    Host,\n    Method,\n    Element,\n    Listen\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst CHECKBOX_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The checkbox component is an input for choosing one or more items from a set by checking / unchecking it.\n * \n * @cssprop --wcs-checkbox-border-color-default - Default color of the border\n * @cssprop --wcs-checkbox-border-color-hover - Color of the border when hovered\n * @cssprop --wcs-checkbox-border-color-disabled - Color of the border when disabled\n * @cssprop --wcs-checkbox-border-color-selected - Color of the border when selected\n * @cssprop --wcs-checkbox-border-color-indeterminate - Color of the border when indeterminate\n * \n * @cssprop --wcs-checkbox-border-radius - Border radius of the checkbox\n * @cssprop --wcs-checkbox-border-width - Width of the border of the checkbox\n * \n * @cssprop --wcs-checkbox-size - Size of the checkbox\n * \n * @cssprop --wcs-checkbox-text-color-default - Color of the text when the checkbox is not selected\n * @cssprop --wcs-checkbox-text-color-disabled - Color of the text when the checkbox is disabled\n * @cssprop --wcs-checkbox-text-color-hover - Color of the text when the checkbox is hovered\n * @cssprop --wcs-checkbox-text-color-selected - Color of the text when the checkbox is selected\n * \n * @cssprop --wcs-checkbox-text-font-size - Font size of the text\n * @cssprop --wcs-checkbox-text-font-weight - Font weight of the text\n * \n * @cssprop --wcs-checkbox-background-color-default - Default background color of the checkbox\n * @cssprop --wcs-checkbox-background-color-hover - Background color of the checkbox when hovered\n * @cssprop --wcs-checkbox-background-color-disabled - Background color of the checkbox when disabled\n * @cssprop --wcs-checkbox-background-color-selected - Background color of the checkbox when selected\n * @cssprop --wcs-checkbox-background-color-indeterminate - Background color of the checkbox when indeterminate\n * \n * @cssprop --wcs-checkbox-outline-radius-focus - Border radius of the focus outline\n * @cssprop --wcs-checkbox-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-checkbox-gap - Gap between the checkbox and the label\n * @cssprop --wcs-checkmark-color - Color of the checkmark\n * @cssprop --wcs-checkmark-height - Height of the checkmark (From the bottom left to the top right of the checkmark)\n * @cssprop --wcs-checkmark-width - Width of the checkmark (From the bottom right to the top left of the checkmark)\n * @cssprop --wcs-checkmark-border-width - Width of the border of the checkmark\n *\n * @cssprop --wcs-indeterminate-bar-width - Width of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-height - Height of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-border-radius - Border-radius of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-background-color - Color of the indeterminate bar\n * \n * @cssprop --wcs-checkbox-transition-duration - Duration of the transition\n */\n@Component({\n    tag: 'wcs-checkbox',\n    styleUrl: 'checkbox.scss',\n    shadow: {\n        delegatesFocus: true,\n    },\n})\nexport class Checkbox implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeInput!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n\n    @Prop() name = this.checkboxId;\n    /**\n     * If `true` the checkbox is in indeterminate state.\n     */\n    @Prop({ reflect: true, mutable: true }) indeterminate = false;\n\n    /**\n     * If `true`, the checkbox is selected.\n     */\n    @Prop({ reflect: true, mutable: true }) checked = false;\n\n    /**\n     * Specifie the alignment of the checkbox with the label content\n     */\n    @Prop({ mutable: true, reflect: true }) labelAlignment: CheckboxLabelAlignment = 'center';\n\n    /**\n     * Specify whether the checkbox is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CheckboxChangeEventDetail>;\n\n    /**\n     * Emitted when the checkbox has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the checkbox loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, CHECKBOX_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.onSlotChange();\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    handleChange(e: Event) {\n        e.stopImmediatePropagation();\n        e.preventDefault();\n        this.toggleCheckboxState();\n    }\n    \n    @Listen('click')\n    async handleHostClick(e: Event){\n        e.preventDefault();\n        e.stopPropagation();\n        \n        this.toggleCheckboxState();\n    }\n\n    handleInputClick(ev: PointerEvent) {\n        // If the click event is coming from the mouse we ignore it.\n        // We only want to handle the keyboard interactions as it is the only purpose of this native input\n        if (ev.detail) {\n            ev.stopImmediatePropagation()\n            ev.preventDefault();\n        }\n    }\n\n    toggleCheckboxState() {\n        if (this.disabled) return;\n        \n        this.indeterminate = false;\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked,\n        });\n    }\n    \n    handleFocus(event: FocusEvent) {\n        this.wcsFocus.emit(event);\n    }\n\n    handleBlur(event: FocusEvent) {\n        this.wcsBlur.emit(event);\n    }\n\n    onSlotChange() { \n        const slot = this.el.shadowRoot.querySelector('slot');\n        if (slot) {\n            // TODO: remove when pseudo-class that indicate a slot has content is supported in all major browsers \n            //  (https://github.com/w3c/csswg-drafts/issues/6867)\n            // https://developer.mozilla.org/en-US/docs/Web/CSS/:empty\n            const assignedNodes = slot.assignedNodes();\n            if (assignedNodes.length > 0) {\n                this.el.shadowRoot.querySelector('.text').classList.remove('hidden');\n            } else {\n                this.el.shadowRoot.querySelector('.text').classList.add('hidden');\n            }\n        }\n    }\n    \n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input\n                        onBlur={this.handleBlur.bind(this)}\n                        onChange={this.handleChange.bind(this)}\n                        onFocus={this.handleFocus.bind(this)}\n                        onClick={this.handleInputClick.bind(this)}\n                        checked={this.checked}\n                        class=\"wcs-checkbox\"\n                        type=\"checkbox\"\n                        ref={(el) => (this.nativeInput = el)}\n                        name={this.name}\n                        disabled={this.disabled}\n                        id={this.name}\n                        {...this.inheritedAttributes}\n                    ></input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot onSlotchange={(_) => this.onSlotChange()} />\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet checkboxIds = 0;\n"],"mappings":"kHAAA,MAAMA,EAAc,giNACpB,MAAAC,EAAeD,ECef,MAAME,EAA2B,CAAC,WAAY,S,MAqDjCC,EAAQ,M,kIAGTC,KAAAC,oBAA4C,GAC5CD,KAAAE,WAAa,gBAAgBC,M,UAEtBH,KAAKE,W,mBAIoC,M,aAKN,M,oBAK+B,S,cAKpC,K,CAiB7C,iBAAAE,GACIJ,KAAKC,oBAAmBI,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBP,KAAKQ,KAC3BC,EAAkBT,KAAKQ,GAAIV,G,CAItC,gBAAAY,GACIV,KAAKW,c,CAIT,sBAAMC,CAAiBC,EAAyBC,GAC5CC,EAAqBf,KAAKgB,YAAaH,EAAMC,E,CAGjD,YAAAG,CAAaC,GACTA,EAAEC,2BACFD,EAAEE,iBACFpB,KAAKqB,qB,CAIT,qBAAMC,CAAgBJ,GAClBA,EAAEE,iBACFF,EAAEK,kBAEFvB,KAAKqB,qB,CAGT,gBAAAG,CAAiBC,GAGb,GAAIA,EAAGC,OAAQ,CACXD,EAAGN,2BACHM,EAAGL,gB,EAIX,mBAAAC,GACI,GAAIrB,KAAK2B,SAAU,OAEnB3B,KAAK4B,cAAgB,MACrB5B,KAAK6B,SAAW7B,KAAK6B,QACrB7B,KAAK8B,UAAUC,KAAK,CAChBF,QAAS7B,KAAK6B,S,CAItB,WAAAG,CAAYC,GACRjC,KAAKkC,SAASH,KAAKE,E,CAGvB,UAAAE,CAAWF,GACPjC,KAAKoC,QAAQL,KAAKE,E,CAGtB,YAAAtB,GACI,MAAM0B,EAAOrC,KAAKQ,GAAG8B,WAAWC,cAAc,QAC9C,GAAIF,EAAM,CAIN,MAAMG,EAAgBH,EAAKG,gBAC3B,GAAIA,EAAcC,OAAS,EAAG,CAC1BzC,KAAKQ,GAAG8B,WAAWC,cAAc,SAASG,UAAUC,OAAO,S,KACxD,CACH3C,KAAKQ,GAAG8B,WAAWC,cAAc,SAASG,UAAUE,IAAI,S,GAKpE,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,SAAAE,IAAA,2CAAOC,QAASjD,KAAKkD,KAAMC,MAAM,gBAAe,gBAAgBnD,KAAK2B,UACjEmB,EAAA,QAAAzC,OAAAC,OAAA,CAAA0C,IAAA,2CACII,OAAQpD,KAAKmC,WAAWkB,KAAKrD,MAC7BsD,SAAUtD,KAAKiB,aAAaoC,KAAKrD,MACjCuD,QAASvD,KAAKgC,YAAYqB,KAAKrD,MAC/BwD,QAASxD,KAAKwB,iBAAiB6B,KAAKrD,MACpC6B,QAAS7B,KAAK6B,QACdsB,MAAM,eACNM,KAAK,WACLC,IAAMlD,GAAQR,KAAKgB,YAAcR,EACjC0C,KAAMlD,KAAKkD,KACXvB,SAAU3B,KAAK2B,SACfgC,GAAI3D,KAAKkD,MACLlD,KAAKC,sBAEb6C,EAAA,QAAAE,IAAA,2CAAMG,MAAM,kBACZL,EAAA,QAAAE,IAAA,2CAAMG,MAAM,QACRL,EAAA,QAAAE,IAAA,2CAAMY,aAAeC,GAAM7D,KAAKW,mB,mEAQxD,IAAIR,EAAc,E"}

package/dist/wcs/p-d42831b2.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as a,H as t,g as l}from"./p-32e583ea.js";import{i as s,a as c,s as r}from"./p-a3aece7a.js";const o=':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 i=o;const n=["title"];const b=class{constructor(a){e(this,a);this.inheritedAttributes={};this.required=false}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},s(this.el)),c(this.el,n))}async setAriaAttribute(e,a){r(this.nativeLabel,e,a)}render(){return a(t,{key:"112bfe1eddc6da7b457bf183c83a07a60de0ca00",slot:"label"},a("label",Object.assign({key:"0d32dfcc8b4f024f986d7770a52402ae024c8862",ref:e=>this.nativeLabel=e},this.inheritedAttributes),a("slot",{key:"74c93cbd04d6744c2427f4810d510f05faa2bbfc"})))}get el(){return l(this)}};b.style=i;export{b as wcs_label};
-//# sourceMappingURL=p-d42831b2.entry.js.map

package/dist/wcs/p-d42831b2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["labelCss","WcsLabelStyle0","LABEL_INHERITED_ATTRS","Label","this","inheritedAttributes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeLabel","render","h","Host","key","slot","ref"],"sources":["src/components/label/label.scss?tag=wcs-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":[":host {\n    --wcs-label-font-weight: var(--wcs-semantic-font-weight-book);\n    --wcs-label-color: var(--wcs-semantic-color-text-primary);\n    --wcs-label-required-marker-color: var(--wcs-semantic-color-text-critical);\n\n    --wcs-label-gap: var(--wcs-semantic-spacing-small);\n\n    font-weight: var(--wcs-label-font-weight);\n}\n\n:host([required]) > label::after {\n    font-weight: var(--wcs-label-font-weight);\n    color: var(--wcs-label-required-marker-color);\n    content: ' *';\n}\n\nlabel {\n    display: inline-block;\n    color: var(--wcs-label-color);\n    font-weight: var(--wcs-label-font-weight);\n\n    // Add margin before tooltip icon\n    ::slotted(wcs-mat-icon) {\n        display: inline;\n        vertical-align: middle;\n        margin-left: var(--wcs-label-gap);\n    }\n}\n","import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/**\n * The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n *\n * ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n */\n@Component({\n    tag: 'wcs-label',\n    styleUrl: 'label.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeLabel?: HTMLLabelElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * If `true`, marks the label with a red star.\n     * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n     */\n    @Prop({ reflect: true }) required = false;\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeLabel, attr, value);\n    }\n\n    render() {\n        return (\n            <Host slot=\"label\">\n                <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n                    <slot />\n                </label>\n            </Host>\n        );\n    }\n}\n"],"mappings":"2GAAA,MAAMA,EAAW,2mBACjB,MAAAC,EAAeD,ECGf,MAAME,EAAwB,CAAC,S,MAsBlBC,EAAK,M,yBAGNC,KAAAC,oBAA4C,G,cAMhB,K,CAEpC,iBAAAC,GACIF,KAAKC,oBAAmBE,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBL,KAAKM,KAC3BC,EAAkBP,KAAKM,GAAIR,G,CAKtC,sBAAMU,CAAiBC,EAAyBC,GAC5CC,EAAqBX,KAAKY,YAAaH,EAAMC,E,CAGjD,MAAAG,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,SACPH,EAAA,QAAAX,OAAAC,OAAA,CAAAY,IAAA,2CAAOE,IAAMZ,GAAON,KAAKY,YAAcN,GAAQN,KAAKC,qBAChDa,EAAA,QAAAE,IAAA,8C"}

package/dist/wcs/p-d7acbf01.js

@@ -1,2 +0,0 @@
-import{g as n}from"./p-a3aece7a.js";function t(n,t){n.forEach((n=>{n.addEventListener("focusout",(c=>{const r=c.relatedTarget;if(!o(n,r)){const n=c.composedPath();if(s(n,t)){n.filter(e(t))[0].close()}}}))}))}function o(n,t){return n.contains(t)}function e(n){return t=>t.nodeName===n}function s(n,t){return n.map((n=>n.nodeName)).indexOf(t)!==-1}function c(t){const o=n("--wcs-phone-breakpoint-max-width")||"575px";const e=parseInt(o,10);return new ResizeObserver((n=>{const o=n[0].contentRect;const s=o.right-o.width;const c=o.left;if(o.width<=e-(c+s)){t.currentActiveSizing="mobile"}else{t.currentActiveSizing="desktop"}}))}export{c,t as r};
-//# sourceMappingURL=p-d7acbf01.js.map

package/dist/wcs/p-db81b74f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["comNavItemCss","WcsComNavItemStyle0","ComNavItem","onClick","this","wcsClickOnFinalAction","emit","render","h","Host","key","role","class"],"sources":["src/components/com-nav-item/com-nav-item.scss?tag=wcs-com-nav-item&encapsulation=shadow","src/components/com-nav-item/com-nav-item.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import '../com-nav/com-nav-focus.scss';\n\n/* Default style and mobile behaviour */\n:host {\n    --wcs-com-nav-item-gap: var(--wcs-semantic-spacing-base);\n    --wcs-com-nav-item-font-size: var(--wcs-semantic-font-size-label-1);\n    --wcs-com-nav-item-arrow-icon-color: var(--wcs-semantic-color-foreground-action-neutral-default);\n    --wcs-com-nav-item-arrow-icon-font-size: 0.6rem;\n    --wcs-com-nav-item-arrow-icon-font-family: icons;\n    --wcs-com-nav-item-arrow-icon-line-height: 1;\n\n    --wcs-com-nav-item-focus-outline-color: var(--wcs-semantic-color-border-focus-base);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--wcs-com-nav-item-gap);\n    height: fit-content;\n    padding: 0 8px;\n\n    font: inherit;\n\n    ::slotted(a) {\n        /* Default */\n        user-select: none;\n        cursor: pointer;\n        text-decoration: none;\n        font-size: var(--wcs-com-nav-item-font-size);\n        color: inherit;\n        font-weight: inherit;\n\n        display: flex;\n        align-items: center;\n    }\n\n    /* Common behaviour between Large Screen and Small Screens */\n    .arrow-icon {\n        display: inline-block;\n        font-family: icons;\n        color: var(--wcs-com-nav-item-arrow-icon-color);\n        font-size: var(--wcs-com-nav-item-arrow-icon-font-size);\n        line-height: var(--wcs-com-nav-item-arrow-icon-line-height);\n        box-sizing: border-box;\n    }\n\n    .arrow-container {\n        display: unset;\n    }\n\n    /**For mobile*/\n    ::slotted(a:focus-visible) {\n        outline: none;\n    }\n\n    :host(:focus-within) {\n        @include com-nav-item-mobile-focus-outline(var(--wcs-com-nav-item-focus-outline-color));\n    }\n}\n\n/* Large screen, specific behaviour */\n@media screen and (min-width: 576px) {\n    :host {\n        ::slotted(a) {\n            display: flex;\n            align-items: center;\n            height: 100%;\n\n            /* Reset for pc */\n            padding-top: unset;\n            padding-bottom: unset;\n            padding-left: unset;\n        }\n\n        // Focus outline style is handling by com-nav, com-nav-submenu and com-nav-category in desktop mode\n    }\n}\n","import { Component, Host, h, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * The com-nav-item is a subcomponent of `wcs-com-nav`. It represents a list-item wrapper around a link.\n * \n * @cssprop --wcs-com-nav-item-gap - Gap between text and arrow\n * @cssprop --wcs-com-nav-item-font-weight - Font-weight of item\n * @cssprop --wcs-com-nav-item-arrow-icon-font-size - Arrow size\n * @cssprop --wcs-com-nav-item-focus-outline-color - Focus outline color\n */\n@Component({\n    tag: 'wcs-com-nav-item',\n    styleUrl: './com-nav-item.scss',\n    shadow: true\n})\nexport class ComNavItem {\n    /**\n     * Emitted when a user click on a final navigation action.\n     *\n     * Used by the com-nav component to close the mobile menu overlay when a user click on a final action.\n     */\n    @Event() private wcsClickOnFinalAction: EventEmitter<void>;\n    \n    @Listen('click')\n    onClick() {\n        this.wcsClickOnFinalAction.emit();\n    }\n    \n    render() {\n        return (\n            <Host role=\"listitem\">\n                <slot></slot>\n                <span class=\"arrow-container\">\n                        <span aria-hidden=\"true\" class=\"arrow-icon\">&#xf107;</span>\n                </span>\n            </Host>\n        );\n    }\n\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,u4CACtB,MAAAC,EAAeD,E,MCcFE,EAAU,M,sFASnB,OAAAC,GACIC,KAAKC,sBAAsBC,M,CAG/B,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACPH,EAAA,QAAAE,IAAA,6CACAF,EAAA,QAAAE,IAAA,2CAAME,MAAM,mBACJJ,EAAA,QAAAE,IAAA,yDAAkB,OAAOE,MAAM,cAAY,M"}

package/dist/wcs/p-dbbf0980.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as t,H as s,g as a}from"./p-32e583ea.js";const l=["m","l"];function r(e){return l.includes(e)}const d=":host{--wcs-editable-field-label-color:var(--wcs-semantic-color-text-primary);--wcs-editable-field-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-editable-field-label-gap:var(--wcs-semantic-spacing-base);--wcs-editable-field-label-font-size:var(--wcs-semantic-font-size-m);--wcs-editable-field-background-color:var(--wcs-semantic-color-background-control-default);--wcs-editable-field-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-editable-field-value-color-default:var(--wcs-semantic-color-text-primary);--wcs-editable-field-value-color-hover:var(--wcs-semantic-color-foreground-brand);--wcs-editable-field-value-color-readonly:var(--wcs-semantic-color-text-tertiary);--wcs-editable-field-height-m:var(--wcs-semantic-size-m);--wcs-editable-field-height-l:var(--wcs-semantic-size-l);--wcs-editable-field-font-size-m:var(--wcs-semantic-font-size-m);--wcs-editable-field-font-size-l:var(--wcs-semantic-font-size-l);--wcs-editable-field-border-radius:var(--wcs-semantic-border-radius-base);--wcs-editable-field-border-width:var(--wcs-semantic-border-width-default);--wcs-editable-field-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-editable-field-border-width-hover:var(--wcs-semantic-border-width-default);--wcs-editable-field-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-editable-field-border-color-hover:var(--wcs-semantic-color-border-control-focus);--wcs-editable-field-border-style:var(--wcs-semantic-border-style-focus-control);--wcs-editable-field-padding-vertical-m:0;--wcs-editable-field-padding-vertical-l:0;--wcs-editable-field-padding-horizontal-m:calc(var(--wcs-semantic-spacing-large) - var(--wcs-editable-field-border-width));--wcs-editable-field-padding-horizontal-l:calc(var(--wcs-semantic-spacing-large) - var(--wcs-editable-field-border-width));--wcs-editable-field-icon-color-readonly:var(--wcs-semantic-color-text-tertiary);display:block}:host .display-none{display:none !important}:host .label{margin-bottom:var(--wcs-editable-field-label-gap);font-weight:var(--wcs-editable-field-label-font-weight);font-size:var(--wcs-editable-field-label-font-size);color:var(--wcs-editable-field-label-color)}:host .edit-container{display:flex;width:100%}:host .display-container{box-sizing:border-box;min-height:var(--wcs-editable-field-host-height);white-space:break-spaces;display:flex;justify-content:space-between;align-items:center;background-color:var(--wcs-editable-field-background-color);border-radius:var(--wcs-editable-field-border-radius);font-size:var(--wcs-editable-field-font-size);line-height:1.5;font-weight:var(--wcs-editable-field-value-font-weight);color:var(--wcs-editable-field-value-color-default);padding:var(--wcs-editable-field-host-padding);transition:150ms all;outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default)}:host .display-container wcs-mat-icon{display:none}:host .load-container{box-sizing:border-box;min-height:var(--wcs-editable-field-host-height);white-space:pre;display:flex;justify-content:space-between;background-color:var(--wcs-editable-field-background-color);border-radius:var(--wcs-editable-field-border-radius);font-size:var(--wcs-editable-field-font-size);line-height:1.5;font-weight:var(--wcs-editable-field-value-font-weight);color:var(--wcs-editable-field-value-color-default);padding:var(--wcs-editable-field-host-padding);transition:150ms all;outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default);align-items:center}:host wcs-spinner{height:24px;width:24px}:host .readonly-icon{fill:var(--wcs-editable-field-icon-color-readonly)}:host([readonly]){--wcs-editable-field-background-color:var(--wcs-semantic-color-background-control-readonly)}:host([readonly]) .display-container{color:var(--wcs-editable-field-value-color-readonly)}:host(:not([readonly])) .display-container:hover{color:var(--wcs-editable-field-value-color-hover);cursor:pointer;outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-hover) var(--wcs-editable-field-border-color-hover)}:host(:not([readonly])) .display-container:hover wcs-mat-icon{display:flex;align-items:center}:host([size=l]){--wcs-editable-field-host-padding:var(--wcs-editable-field-padding-vertical-l) var(--wcs-editable-field-padding-horizontal-l);--wcs-editable-field-host-height:var(--wcs-editable-field-height-l);--wcs-editable-field-font-size:var(--wcs-editable-field-font-size-l)}:host([size=m]){--wcs-editable-field-host-padding:var(--wcs-editable-field-padding-vertical-m) var(--wcs-editable-field-padding-horizontal-m);--wcs-editable-field-host-height:var(--wcs-editable-field-height-m);--wcs-editable-field-font-size:var(--wcs-editable-field-font-size-m)}";const o=d;var c;(function(e){e[e["DISPLAY"]=0]="DISPLAY";e[e["EDIT"]=1]="EDIT";e[e["LOAD"]=2]="LOAD"})(c||(c={}));const n=class{constructor(t){e(this,t);this.wcsChange=i(this,"wcsChange",7);this.spiedElement=null;this.currentValue=null;this.currentState=c.DISPLAY;this.type="input";this.label=undefined;this.readonly=false;this.value=undefined;this.validateFn=undefined;this.formatFn=undefined;this.errorMsg=null;this.size="m";this.isError=false}componentWillLoad(){if(!r(this.size)){console.warn(`Invalid size value for wcs-editable-field : "${this.size}". Must be one of "${l.join(", ")}"`);this.size="m"}this.currentValue=this.value}componentDidRender(){const e=this.el.shadowRoot.querySelector("slot").assignedElements();switch(this.type){case"input":this.initWithInput(e);break;case"textarea":this.initWithTextArea(e);break;case"select":this.initWithSelect(e);break}}initWithInput(e){const i=e.filter((e=>e.tagName==="WCS-INPUT"))[0];if(!i)throw new Error("You must provide a slotted input element to handle edition");this.spiedElement=i;this.addInputHandlerForWcsComponents(this.spiedElement);this.spiedElement.addEventListener("keydown",(e=>{if(e.key==="Enter"){this.sendCurrentValue()}if(e.key==="Escape"){this.discardChanges()}}))}initWithTextArea(e){const i=e.filter((e=>e.tagName==="WCS-TEXTAREA"))[0];if(!i)throw new Error("You must provide a slotted textarea element to handle edition");this.spiedElement=i;this.addInputHandlerForWcsComponents(this.spiedElement);this.spiedElement.addEventListener("keydown",(e=>{if(e.key==="Enter"&&e.ctrlKey){this.sendCurrentValue()}if(e.key==="Escape"){this.discardChanges()}}))}initWithSelect(e){const i=e.filter((e=>e.tagName==="WCS-SELECT"))[0];if(!i)throw new Error("You must provide a slotted select element to handle edition");this.spiedElement=i;this.addChangeHandlerForWcsComponents(this.spiedElement)}addChangeHandlerForWcsComponents(e){e.addEventListener("wcsChange",(e=>{e.stopImmediatePropagation();this.currentValue=e.detail.value;if(this.validateFn){this.isError=!this.validateFn(this.currentValue)}}))}addInputHandlerForWcsComponents(e){e.addEventListener("wcsInput",(e=>{e.stopImmediatePropagation();this.currentValue=e.detail.target.value;if(this.validateFn){this.isError=!this.validateFn(this.currentValue)}}))}sendCurrentValue(){if(this.currentState===c.EDIT){if(this.value===this.currentValue){this.currentState=c.DISPLAY}else{this.isError=this.validateFn?!this.validateFn(this.currentValue):false;if(!this.isError){this.currentState=c.LOAD;this.wcsChange.emit({newValue:this.currentValue,successHandler:()=>this.forceDisplayStateAndValidate(),errorHandler:()=>this.errorHandler()})}}}}discardChanges(){this.currentValue=this.value;this.currentState=c.DISPLAY;this.isError=false}forceDisplayStateAndValidate(){if(this.currentState===c.LOAD){this.value=this.currentValue;this.currentState=c.DISPLAY}else{throw new Error("You cannot set display state from "+c[this.currentState]+" state")}}onWindowClickEvent(e){if(!this.clickInsideComponent(e)){if(this.currentState===c.EDIT){if(this.isError){this.discardChanges()}else{this.sendCurrentValue()}}}}clickInsideComponent(e){return e.x>=this.el.getBoundingClientRect().x&&e.x<=this.el.getBoundingClientRect().x+this.el.getBoundingClientRect().width&&e.y>=this.el.getBoundingClientRect().y&&e.y<=this.el.getBoundingClientRect().y+this.el.getBoundingClientRect().height}errorHandler(){this.discardChanges()}onValueChange(){this.currentState=c.DISPLAY}onDisplayContainerClick(){if(this.currentState===c.DISPLAY&&this.readonly===false){this.currentState=c.EDIT;this.spiedElement["value"]=this.currentValue;if(this.validateFn){this.isError=!this.validateFn(this.currentValue)}const e=20;setTimeout((()=>{if(this.type==="input"){this.spiedElement.focus()}else if(this.type==="textarea"){this.spiedElement.fitContent();this.spiedElement.focus()}}),e)}}render(){const{formattedValue:e,formattedCurrentValue:i}=this.formatValues();return t(s,{key:"a5866056e6ca3891ba611cb61398b48f0b996045"},t("div",{key:"035c3f7f53224be855d488f2ef5ebf5c9051e757",class:"label"},this.label),t("div",{key:"77273c246c635a7b365863b80e01056e9a550d07",class:"display-container "+(this.currentState!==c.DISPLAY?"display-none":""),onClick:()=>this.onDisplayContainerClick()},e,t("wcs-mat-icon",{key:"5a2617abdc14bd5287c96f95ceb7b4259ac0177f",icon:"edit",size:"s"}),this.readonly?this.getReadonlySvgIcon():null),t("div",{key:"4c8553d8ef949a6398180a9cbc2c8b44b0f703bc",class:"load-container "+(this.currentState!==c.LOAD?"display-none":"")},i,t("wcs-spinner",{key:"5b47f277a289b7b3839d54a05e7cb36538bf20cb"})),t("wcs-form-field",{key:"63c82c27c7eefdc6fe43e91b49673b95bae793bb","is-error":this.isError,class:"edit-container "+(this.currentState!==c.EDIT?"display-none":"")},t("slot",{key:"5826a22012674cfa09294fb7afb493cdae6b34a6"}),this.isError&&this.errorMsg?t("wcs-error",null,this.errorMsg):null))}getReadonlySvgIcon(){return t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"26",height:"24",viewBox:"0 0 27 25",class:"readonly-icon"},t("path",{d:"M26.79,25.05H1.21a.73.73,0,0,0,0,1.45H26.79a.73.73,0,0,0,0-1.45Z",transform:"translate(-0.5 -1.5)"}),t("path",{d:"M19.8,8.87h-.61V6.73a5.23,5.23,0,0,0-10.46,0V8.87H8.2a1.63,1.63,0,0,0-1.63,1.62V21.32A1.62,1.62,0,0,0,8.2,22.94H19.8a1.62,1.62,0,0,0,1.63-1.62V10.49A1.63,1.63,0,0,0,19.8,8.87ZM10.93,6.73a3,3,0,1,1,6.06,0V8.87H10.93Zm3,14.15a5,5,0,1,1,5-5A5,5,0,0,1,14,20.88Z",transform:"translate(-0.5 -1.5)"}),t("path",{d:"M14,12.62a3.29,3.29,0,1,0,3.29,3.29A3.29,3.29,0,0,0,14,12.62Zm0,4.75a1.47,1.47,0,1,1,1.47-1.46A1.46,1.46,0,0,1,14,17.37Z",transform:"translate(-0.5 -1.5)"}))}formatValues(){let e=this.value;let i=this.currentValue;if(this.formatFn){e=this.formatFn(this.value);i=this.formatFn(this.currentValue)}if(Array.isArray(this.value)){e=this.value.join(", ")}if(Array.isArray(this.currentValue)){i=this.currentValue.join(", ")}return{formattedValue:e?t("span",null,e):t("span",null),formattedCurrentValue:i?t("span",null,i):t("span",null)}}get el(){return a(this)}static get watchers(){return{value:["onValueChange"]}}};n.style=o;export{n as wcs_editable_field};
-//# sourceMappingURL=p-dbbf0980.entry.js.map

package/dist/wcs/p-dbbf0980.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["WcsEditableFieldSizeValues","isWcsEditableFieldSize","size","includes","editableFieldCss","WcsEditableFieldStyle0","EditableComponentState","EditableField","this","spiedElement","currentValue","DISPLAY","componentWillLoad","console","warn","join","value","componentDidRender","assignedElements","el","shadowRoot","querySelector","type","initWithInput","initWithTextArea","initWithSelect","element","filter","x","tagName","Error","addInputHandlerForWcsComponents","addEventListener","event","key","sendCurrentValue","discardChanges","ctrlKey","addChangeHandlerForWcsComponents","elt","stopImmediatePropagation","detail","validateFn","isError","target","currentState","EDIT","LOAD","wcsChange","emit","newValue","successHandler","forceDisplayStateAndValidate","errorHandler","onWindowClickEvent","clickInsideComponent","getBoundingClientRect","width","y","height","onValueChange","onDisplayContainerClick","readonly","DELAY_FOR_RENDER","setTimeout","focus","fitContent","render","formattedValue","formattedCurrentValue","formatValues","h","Host","class","label","onClick","icon","getReadonlySvgIcon","errorMsg","xmlns","viewBox","d","transform","formatFn","Array","isArray"],"sources":["src/components/editable-field/editable-field-interface.tsx","src/components/editable-field/editable-field.scss?tag=wcs-editable-field&encapsulation=shadow","src/components/editable-field/editable-field.tsx"],"sourcesContent":["import { WcsSize } from '../../shared-types';\n\nexport type ValidateFn<T> = (value: T) => boolean;\nexport type FormatFn<T> = (value: T) => string;\n\nexport interface EditableComponentUpdateEvent {\n    /**\n     * The new value sent by the component inside the `wcs-editable-field`\n     */\n    newValue: any; // We use any for now, but when components typings will support template, change for parameterized type\n    /**\n     * Used to get from LOAD state to DISPLAY state.  \n     * Only use to commit the value, when the value is not systematically updated at every event firing\n     */\n    successHandler: () => void;\n    /**\n     * Used to get from LOAD state to DISPLAY state.  \n     * Only use to discard the value, when the value should not be updated \n     */\n    errorHandler: () => void;\n}\n\nexport const WcsEditableFieldSizeValues = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsEditableFieldSize = Extract<WcsSize, typeof WcsEditableFieldSizeValues[number]>;\n\nexport function isWcsEditableFieldSize(size: string): size is WcsEditableFieldSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsEditableFieldSizeValues\n    return WcsEditableFieldSizeValues.includes(size);\n}\n\nexport type EditableFieldType = 'input' | 'textarea' | 'select';\n",":host {\n    --wcs-editable-field-label-color: var(--wcs-semantic-color-text-primary);\n    --wcs-editable-field-label-font-weight: var(--wcs-semantic-font-weight-book);\n    --wcs-editable-field-label-gap: var(--wcs-semantic-spacing-base);\n    --wcs-editable-field-label-font-size: var(--wcs-semantic-font-size-m);\n\n    --wcs-editable-field-background-color: var(--wcs-semantic-color-background-control-default);\n    --wcs-editable-field-value-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-editable-field-value-color-default: var(--wcs-semantic-color-text-primary);\n    --wcs-editable-field-value-color-hover: var(--wcs-semantic-color-foreground-brand);\n    --wcs-editable-field-value-color-readonly: var(--wcs-semantic-color-text-tertiary);\n    --wcs-editable-field-height-m: var(--wcs-semantic-size-m);\n    --wcs-editable-field-height-l: var(--wcs-semantic-size-l);\n    --wcs-editable-field-font-size-m: var(--wcs-semantic-font-size-m);\n    --wcs-editable-field-font-size-l: var(--wcs-semantic-font-size-l);\n\n    --wcs-editable-field-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-editable-field-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-editable-field-border-width-focus: var(--wcs-semantic-border-width-large);\n    --wcs-editable-field-border-width-hover: var(--wcs-semantic-border-width-default);\n    --wcs-editable-field-border-color-default: var(--wcs-semantic-color-border-primary);\n    --wcs-editable-field-border-color-hover: var(--wcs-semantic-color-border-control-focus);\n    --wcs-editable-field-border-style: var(--wcs-semantic-border-style-focus-control);\n\n    --wcs-editable-field-padding-vertical-m: 0;\n    --wcs-editable-field-padding-vertical-l: 0;\n    --wcs-editable-field-padding-horizontal-m: calc(var(--wcs-semantic-spacing-large) - var(--wcs-editable-field-border-width));\n    --wcs-editable-field-padding-horizontal-l: calc(var(--wcs-semantic-spacing-large) - var(--wcs-editable-field-border-width));\n\n    --wcs-editable-field-icon-color-readonly: var(--wcs-semantic-color-text-tertiary);\n\n    display: block;\n\n    .display-none {\n        display: none !important;\n    }\n\n    .label {\n        margin-bottom: var(--wcs-editable-field-label-gap);\n        font-weight: var(--wcs-editable-field-label-font-weight);\n        font-size: var(--wcs-editable-field-label-font-size);\n        color: var(--wcs-editable-field-label-color);\n    }\n\n    .edit-container {\n        display: flex;\n        width: 100%;\n    }\n\n    .display-container {\n        box-sizing: border-box;\n        wcs-mat-icon {\n            display: none;\n        }\n        min-height: var(--wcs-editable-field-host-height);\n        white-space: break-spaces;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        background-color: var(--wcs-editable-field-background-color);\n        border-radius: var(--wcs-editable-field-border-radius);\n        font-size: var(--wcs-editable-field-font-size);\n        line-height: 1.5;\n        font-weight: var(--wcs-editable-field-value-font-weight);\n        color: var(--wcs-editable-field-value-color-default);\n        padding: var(--wcs-editable-field-host-padding);\n        transition: 150ms all;\n        outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default);\n    }\n\n    .load-container {\n        box-sizing: border-box;\n        min-height: var(--wcs-editable-field-host-height);\n        white-space: pre;\n        display: flex;\n        justify-content: space-between;\n        background-color: var(--wcs-editable-field-background-color);\n        border-radius: var(--wcs-editable-field-border-radius);\n        font-size: var(--wcs-editable-field-font-size);\n        line-height: 1.5;\n        font-weight: var(--wcs-editable-field-value-font-weight);\n        color: var(--wcs-editable-field-value-color-default);\n        padding: var(--wcs-editable-field-host-padding);\n        transition: 150ms all;\n        outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default);\n        align-items: center;\n    }\n\n    wcs-spinner {\n        height: 24px;\n        width: 24px;\n    }\n\n    .readonly-icon {\n        fill: var(--wcs-editable-field-icon-color-readonly);\n    }\n}\n\n:host([readonly]) {\n    --wcs-editable-field-background-color: var(--wcs-semantic-color-background-control-readonly);\n\n    .display-container {\n        color: var(--wcs-editable-field-value-color-readonly);\n    }\n}\n\n:host(:not([readonly])) {\n    .display-container:hover {\n        wcs-mat-icon {\n            display: flex;\n            align-items: center;\n        }\n        color: var(--wcs-editable-field-value-color-hover);\n        cursor: pointer;\n        outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-hover) var(--wcs-editable-field-border-color-hover);\n    }\n}\n\n:host([size=l]) {\n    --wcs-editable-field-host-padding: var(--wcs-editable-field-padding-vertical-l) var(--wcs-editable-field-padding-horizontal-l);\n    --wcs-editable-field-host-height: var(--wcs-editable-field-height-l);\n    --wcs-editable-field-font-size: var(--wcs-editable-field-font-size-l);\n}\n\n:host([size=m]) { // Default\n    --wcs-editable-field-host-padding: var(--wcs-editable-field-padding-vertical-m) var(--wcs-editable-field-padding-horizontal-m);\n    --wcs-editable-field-host-height: var(--wcs-editable-field-height-m);\n    --wcs-editable-field-font-size: var(--wcs-editable-field-font-size-m);\n}\n","import {\n    Component,\n    ComponentInterface,\n    EventEmitter,\n    h,\n    Prop,\n    Event,\n    State,\n    Host,\n    Element,\n    Watch,\n    Listen\n} from '@stencil/core';\nimport {\n    EditableComponentUpdateEvent,\n    EditableFieldType,\n    FormatFn,\n    isWcsEditableFieldSize,\n    ValidateFn,\n    WcsEditableFieldSize,\n    WcsEditableFieldSizeValues\n} from './editable-field-interface';\n\nenum EditableComponentState {\n    DISPLAY,\n    EDIT,\n    LOAD\n}\n\n/**\n * The editable-field component can be used to simplify the user experience, avoiding the use of a redirection to a form\n * to edit the data of an entity. You can use it with these wrapped components : `wcs-input`, `wcs-textarea`, `wcs-select`. \n *\n * This component is not present in the SNCF design system specifications, so we tried to build it in the most\n * \"discoverable\" way possible (for users who interact with), but it's a first version.\n * \n * **How to use ❓**  \n * This component is mostly used with a server that returns a response to the input sent through the `wcsChange` event.\n * It has 3 internal states :\n * - DISPLAY = the default state of the editable-field\n * - EDIT = the editable-field is editable, the user should input the data\n * - LOADING = the data is submitted and the editable-field is waiting for a **response**\n *\n * A **response** is needed to get the component out of the LOADING state. You can either :\n * - Set the `value` property to a different value to tell the component to refresh and go back into DISPLAY state\n * - Use the `successHandler` callback through the `wcsChange` event (see interface [EditableComponentUpdateEvent](https://gitlab.com/SNCF/wcs/-/blob/develop/src/components/editable-field/editable-field-interface.tsx))\n * - Use the `errorHandler` callback through the `wcsChange` event (see interface [EditableComponentUpdateEvent](https://gitlab.com/SNCF/wcs/-/blob/develop/src/components/editable-field/editable-field-interface.tsx))\n * \n * **Accessibility guidelines 💡**  \n * \n * > - Aria attributes are put on the native component on the first rendering with the `label` and `errorMsg` you provided \n * > - Additional aria attributes put on `<wcs-editable-field>` won't inherit onto the native component : you must use the `setAriaAttribute` method.\n *\n *\n * @cssprop --wcs-editable-field-label-color - Color of the label text\n * @cssprop --wcs-editable-field-label-font-weight - Font weight of the label text\n * @cssprop --wcs-editable-field-label-gap - Gap between the label and the field\n * @cssprop --wcs-editable-field-label-font-size - Font size of the label text\n * \n * @cssprop --wcs-editable-field-background-color - Background color of the editable field\n * @cssprop --wcs-editable-field-value-font-weight - Font weight of the field value text\n * @cssprop --wcs-editable-field-value-color-default - Default color of the field value text\n * @cssprop --wcs-editable-field-value-color-hover - Color of the field value text on hover\n * @cssprop --wcs-editable-field-value-color-readonly - Color of the field value text when readonly\n * \n * @cssprop --wcs-editable-field-height-m - Height of the editable field in medium size\n * @cssprop --wcs-editable-field-height-l - Height of the editable field in large size\n * @cssprop --wcs-editable-field-font-size-m - Font size of the field value text in medium size\n * @cssprop --wcs-editable-field-font-size-l - Font size of the field value text in large size\n * \n * @cssprop --wcs-editable-field-border-radius - Border radius of the editable field\n * @cssprop --wcs-editable-field-border-width - Border width of the editable field\n * @cssprop --wcs-editable-field-border-width-focus - Border width of the editable field when focused\n * @cssprop --wcs-editable-field-border-width-hover - Border width of the editable field on hover\n * @cssprop --wcs-editable-field-border-color-default - Default border color of the editable field\n * @cssprop --wcs-editable-field-border-color-hover - Border color of the editable field on hover\n * @cssprop --wcs-editable-field-border-style - Border style of the editable field\n * \n * @cssprop --wcs-editable-field-padding-vertical-m - Vertical padding of the editable field in medium size\n * @cssprop --wcs-editable-field-padding-vertical-l - Vertical padding of the editable field in large size\n * @cssprop --wcs-editable-field-padding-horizontal-m - Horizontal padding of the editable field in medium size\n * @cssprop --wcs-editable-field-padding-horizontal-l - Horizontal padding of the editable field in large size\n * \n * @cssprop --wcs-editable-field-icon-color-readonly - Color of the icon when the field is readonly\n */\n@Component({\n    tag: 'wcs-editable-field',\n    styleUrl: 'editable-field.scss',\n    shadow: true\n})\nexport class EditableField implements ComponentInterface {\n    @Element() private el!: HTMLWcsEditableFieldElement;\n    \n\n    @State() private currentState: EditableComponentState = EditableComponentState.DISPLAY;\n    /**\n     * Specifies which component is used for editing\n     */\n    @Prop() type: EditableFieldType = 'input';\n    /**\n     * Label of the field\n     */\n    @Prop() label!: string;\n    /**\n     * Event called at each (valid) update of the field.\n     */\n    @Event() wcsChange!: EventEmitter<EditableComponentUpdateEvent>;\n    /**\n     * Specify whether the field is editable or not\n     */\n    @Prop() readonly: boolean = false;\n    /**\n     * Initial value of the field\n     */\n    @Prop({mutable: true}) value: any;\n    /**\n     * Function to customize the validation of the data during the update\n     */\n    @Prop() validateFn: ValidateFn<any>;\n    /**\n     * Function used to format the value\n     */\n    @Prop() formatFn: FormatFn<any>;\n    /**\n     * Error message displayed under the field if validation failed.\n     */\n    @Prop() errorMsg: string = null;\n    /**\n     * Specify the size (height) of the editable field.\n     */\n    @Prop({reflect: true}) size: WcsEditableFieldSize = 'm';\n\n    @State() private isError: boolean = false;\n\n    // fixme: why this attr is never read?\n    // ignoreNextChangeEvent: boolean = false;\n    private spiedElement: HTMLElement = null;\n    private currentValue: any = null;\n\n    componentWillLoad(): Promise<void> | void {\n        if(!isWcsEditableFieldSize(this.size)) {\n            console.warn(`Invalid size value for wcs-editable-field : \"${this.size}\". Must be one of \"${WcsEditableFieldSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n        this.currentValue = this.value;\n    }\n\n    componentDidRender() {\n        const assignedElements = (this.el.shadowRoot.querySelector('slot') as HTMLSlotElement).assignedElements();\n        switch (this.type) {\n            case 'input':\n                this.initWithInput(assignedElements);\n                break;\n            case 'textarea':\n                this.initWithTextArea(assignedElements);\n                break;\n            case 'select':\n                this.initWithSelect(assignedElements)\n                break;\n        }\n    }\n\n    private initWithInput(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-INPUT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted input element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addInputHandlerForWcsComponents(this.spiedElement);\n        this.spiedElement.addEventListener('keydown', (event: KeyboardEvent) => {\n            if (event.key === 'Enter') {\n                this.sendCurrentValue();\n            }\n            if (event.key === 'Escape') {\n                this.discardChanges();\n            }\n        })\n    }\n\n    private initWithTextArea(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-TEXTAREA'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted textarea element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addInputHandlerForWcsComponents(this.spiedElement);\n        this.spiedElement.addEventListener('keydown', (event: KeyboardEvent) => {\n            if (event.key === 'Enter' && event.ctrlKey) {\n                this.sendCurrentValue();\n            }\n            if (event.key === 'Escape') {\n                this.discardChanges();\n            }\n        })\n    }\n\n    private initWithSelect(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-SELECT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted select element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addChangeHandlerForWcsComponents(this.spiedElement);\n    }\n\n    /**\n     * This method subscribes the component to the change events produced by the other WCS components\n     * (provided by the user in slot)\n     * @param elt the element to subscribe to\n     * @private\n     */\n    private addChangeHandlerForWcsComponents(elt: HTMLElement) {\n        elt.addEventListener('wcsChange', (event: CustomEvent) => {\n            event.stopImmediatePropagation();\n            this.currentValue = event.detail.value;\n            if (this.validateFn) {\n                this.isError = !this.validateFn(this.currentValue);\n            }\n        });\n    }\n\n    /**\n     * This method subscribes the component to the input events produced by the other WCS components\n     * @param elt the element to subscribe to\n     * @private\n     */\n    private addInputHandlerForWcsComponents(elt: HTMLElement) {\n        elt.addEventListener('wcsInput', (event: CustomEvent) => {\n            event.stopImmediatePropagation();\n            this.currentValue = event.detail.target.value;\n            if (this.validateFn) {\n                this.isError = !this.validateFn(this.currentValue);\n            }\n        });\n    }\n\n    private sendCurrentValue() {\n        if (this.currentState === EditableComponentState.EDIT) {\n            if (this.value === this.currentValue) {\n                this.currentState = EditableComponentState.DISPLAY\n            } else {\n                this.isError = this.validateFn ? !this.validateFn(this.currentValue) : false;\n                if (!this.isError) {\n                    this.currentState = EditableComponentState.LOAD;\n                    this.wcsChange.emit({\n                        newValue: this.currentValue,\n                        successHandler: () => this.forceDisplayStateAndValidate(),\n                        errorHandler: () => this.errorHandler()\n                    });\n                }\n            }\n        }\n    }\n\n    private discardChanges() {\n        this.currentValue = this.value;\n        this.currentState = EditableComponentState.DISPLAY;\n        this.isError = false;\n    }\n\n\n    forceDisplayStateAndValidate() {\n        if (this.currentState === EditableComponentState.LOAD) {\n            this.value = this.currentValue;\n            this.currentState = EditableComponentState.DISPLAY;\n        } else {\n            throw new Error('You cannot set display state from ' + EditableComponentState[this.currentState] + ' state');\n        }\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        if (!this.clickInsideComponent(event)) {\n            if (this.currentState === EditableComponentState.EDIT) {\n                if (this.isError) {\n                    this.discardChanges();\n                } else {\n                    this.sendCurrentValue();\n                }\n            }\n        }\n    }\n\n    private clickInsideComponent(event: MouseEvent) {\n        return event.x >= this.el.getBoundingClientRect().x && event.x <= this.el.getBoundingClientRect().x + this.el.getBoundingClientRect().width\n            && event.y >= this.el.getBoundingClientRect().y && event.y <= this.el.getBoundingClientRect().y + this.el.getBoundingClientRect().height;\n    }\n\n    /**\n     * discard changes and force component state to DISPLAY\n     * <br/>\n     * This method must be call when component is in LOAD state\n     */\n\n    errorHandler() {\n        this.discardChanges();\n    }\n\n    @Watch('value')\n    onValueChange(): void {\n        this.currentState = EditableComponentState.DISPLAY;\n    }\n\n    private onDisplayContainerClick() {\n        if (this.currentState === EditableComponentState.DISPLAY && this.readonly === false) {\n            this.currentState = EditableComponentState.EDIT;\n            // fixme: why this attr is never read?\n            // this.ignoreNextChangeEvent = true;\n            this.spiedElement['value'] = this.currentValue;\n            if (this.validateFn) {\n                this.isError = !this.validateFn(this.currentValue);\n            }\n            // We wait until the element is displayed on the page otherwise the focus does not work\n            const DELAY_FOR_RENDER = 20;\n            setTimeout(() => {\n                if (this.type === 'input') {\n                    (this.spiedElement as HTMLWcsInputElement).focus();\n                } else if (this.type === 'textarea') {\n                    (this.spiedElement as HTMLWcsTextareaElement).fitContent();\n                    (this.spiedElement as HTMLWcsTextareaElement).focus();\n                }\n            }, DELAY_FOR_RENDER)\n        }\n    }\n\n    render(): any {\n        const {formattedValue, formattedCurrentValue} = this.formatValues();\n        return (\n            <Host>\n                <div class=\"label\">{this.label}</div>\n                <div\n                    class={'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : '')}\n                    onClick={() => this.onDisplayContainerClick()}>\n                    {formattedValue}\n                    <wcs-mat-icon icon=\"edit\" size=\"s\"></wcs-mat-icon>\n                    {this.readonly ? this.getReadonlySvgIcon() : null}\n                </div>\n                <div\n                    class={'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '')}>\n                    {formattedCurrentValue}\n                    <wcs-spinner></wcs-spinner>\n                </div>\n                <wcs-form-field is-error={this.isError}\n                                class={'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '')}>\n                    <slot/>\n                    {\n                        this.isError && this.errorMsg\n                            ? <wcs-error>{this.errorMsg}</wcs-error>\n                            : null\n                    }\n                </wcs-form-field>\n            </Host>\n        );\n    }\n\n    private getReadonlySvgIcon() {\n        return <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"24\" viewBox=\"0 0 27 25\"\n                    class=\"readonly-icon\">\n            <path d=\"M26.79,25.05H1.21a.73.73,0,0,0,0,1.45H26.79a.73.73,0,0,0,0-1.45Z\"\n                  transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M19.8,8.87h-.61V6.73a5.23,5.23,0,0,0-10.46,0V8.87H8.2a1.63,1.63,0,0,0-1.63,1.62V21.32A1.62,1.62,0,0,0,8.2,22.94H19.8a1.62,1.62,0,0,0,1.63-1.62V10.49A1.63,1.63,0,0,0,19.8,8.87ZM10.93,6.73a3,3,0,1,1,6.06,0V8.87H10.93Zm3,14.15a5,5,0,1,1,5-5A5,5,0,0,1,14,20.88Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M14,12.62a3.29,3.29,0,1,0,3.29,3.29A3.29,3.29,0,0,0,14,12.62Zm0,4.75a1.47,1.47,0,1,1,1.47-1.46A1.46,1.46,0,0,1,14,17.37Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n        </svg>;\n    }\n\n    private formatValues() {\n        let formattedValue = this.value;\n        let formattedCurrentValue = this.currentValue;\n        if (this.formatFn) {\n            formattedValue = this.formatFn(this.value);\n            formattedCurrentValue = this.formatFn(this.currentValue);\n        }\n        if (Array.isArray(this.value)) {\n            formattedValue = this.value.join(', ');\n        }\n        if (Array.isArray(this.currentValue)) {\n            formattedCurrentValue = this.currentValue.join(', ');\n        }\n        return {\n            formattedValue: (formattedValue ? (<span>{formattedValue}</span>) : (<span></span>)),\n            formattedCurrentValue: (formattedCurrentValue ? (<span>{formattedCurrentValue}</span>) : (<span></span>))\n        };\n    }\n}\n"],"mappings":"gEAsBO,MAAMA,EAA6B,CAAC,IAAK,K,SAIhCC,EAAuBC,GAEnC,OAAOF,EAA2BG,SAASD,EAC/C,CC7BA,MAAME,EAAmB,4tJACzB,MAAAC,EAAeD,ECsBf,IAAKE,GAAL,SAAKA,GACDA,IAAA,wBACAA,IAAA,kBACAA,IAAA,iBACH,EAJD,CAAKA,MAAsB,K,MAmEdC,EAAa,M,8DA8CdC,KAAAC,aAA4B,KAC5BD,KAAAE,aAAoB,K,kBA3C4BJ,EAAuBK,Q,UAI7C,Q,mCAYN,M,qFAgBD,K,UAIyB,I,aAEhB,K,CAOpC,iBAAAC,GACI,IAAIX,EAAuBO,KAAKN,MAAO,CACnCW,QAAQC,KAAK,gDAAgDN,KAAKN,0BAA0BF,EAA2Be,KAAK,UAC5HP,KAAKN,KAAO,G,CAEhBM,KAAKE,aAAeF,KAAKQ,K,CAG7B,kBAAAC,GACI,MAAMC,EAAoBV,KAAKW,GAAGC,WAAWC,cAAc,QAA4BH,mBACvF,OAAQV,KAAKc,MACT,IAAK,QACDd,KAAKe,cAAcL,GACnB,MACJ,IAAK,WACDV,KAAKgB,iBAAiBN,GACtB,MACJ,IAAK,SACDV,KAAKiB,eAAeP,GACpB,M,CAIJ,aAAAK,CAAcL,GAClB,MAAMQ,EAAUR,EAAiBS,QAAOC,GAC7BA,EAAEC,UAAY,cACtB,GACH,IAAKH,EAAS,MAAM,IAAII,MAAM,8DAC9BtB,KAAKC,aAAeiB,EACpBlB,KAAKuB,gCAAgCvB,KAAKC,cAC1CD,KAAKC,aAAauB,iBAAiB,WAAYC,IAC3C,GAAIA,EAAMC,MAAQ,QAAS,CACvB1B,KAAK2B,kB,CAET,GAAIF,EAAMC,MAAQ,SAAU,CACxB1B,KAAK4B,gB,KAKT,gBAAAZ,CAAiBN,GACrB,MAAMQ,EAAUR,EAAiBS,QAAOC,GAC7BA,EAAEC,UAAY,iBACtB,GACH,IAAKH,EAAS,MAAM,IAAII,MAAM,iEAC9BtB,KAAKC,aAAeiB,EACpBlB,KAAKuB,gCAAgCvB,KAAKC,cAC1CD,KAAKC,aAAauB,iBAAiB,WAAYC,IAC3C,GAAIA,EAAMC,MAAQ,SAAWD,EAAMI,QAAS,CACxC7B,KAAK2B,kB,CAET,GAAIF,EAAMC,MAAQ,SAAU,CACxB1B,KAAK4B,gB,KAKT,cAAAX,CAAeP,GACnB,MAAMQ,EAAUR,EAAiBS,QAAOC,GAC7BA,EAAEC,UAAY,eACtB,GACH,IAAKH,EAAS,MAAM,IAAII,MAAM,+DAC9BtB,KAAKC,aAAeiB,EACpBlB,KAAK8B,iCAAiC9B,KAAKC,a,CASvC,gCAAA6B,CAAiCC,GACrCA,EAAIP,iBAAiB,aAAcC,IAC/BA,EAAMO,2BACNhC,KAAKE,aAAeuB,EAAMQ,OAAOzB,MACjC,GAAIR,KAAKkC,WAAY,CACjBlC,KAAKmC,SAAWnC,KAAKkC,WAAWlC,KAAKE,a,KAUzC,+BAAAqB,CAAgCQ,GACpCA,EAAIP,iBAAiB,YAAaC,IAC9BA,EAAMO,2BACNhC,KAAKE,aAAeuB,EAAMQ,OAAOG,OAAO5B,MACxC,GAAIR,KAAKkC,WAAY,CACjBlC,KAAKmC,SAAWnC,KAAKkC,WAAWlC,KAAKE,a,KAKzC,gBAAAyB,GACJ,GAAI3B,KAAKqC,eAAiBvC,EAAuBwC,KAAM,CACnD,GAAItC,KAAKQ,QAAUR,KAAKE,aAAc,CAClCF,KAAKqC,aAAevC,EAAuBK,O,KACxC,CACHH,KAAKmC,QAAUnC,KAAKkC,YAAclC,KAAKkC,WAAWlC,KAAKE,cAAgB,MACvE,IAAKF,KAAKmC,QAAS,CACfnC,KAAKqC,aAAevC,EAAuByC,KAC3CvC,KAAKwC,UAAUC,KAAK,CAChBC,SAAU1C,KAAKE,aACfyC,eAAgB,IAAM3C,KAAK4C,+BAC3BC,aAAc,IAAM7C,KAAK6C,gB,IAOrC,cAAAjB,GACJ5B,KAAKE,aAAeF,KAAKQ,MACzBR,KAAKqC,aAAevC,EAAuBK,QAC3CH,KAAKmC,QAAU,K,CAInB,4BAAAS,GACI,GAAI5C,KAAKqC,eAAiBvC,EAAuByC,KAAM,CACnDvC,KAAKQ,MAAQR,KAAKE,aAClBF,KAAKqC,aAAevC,EAAuBK,O,KACxC,CACH,MAAM,IAAImB,MAAM,qCAAuCxB,EAAuBE,KAAKqC,cAAgB,S,EAK3G,kBAAAS,CAAmBrB,GACf,IAAKzB,KAAK+C,qBAAqBtB,GAAQ,CACnC,GAAIzB,KAAKqC,eAAiBvC,EAAuBwC,KAAM,CACnD,GAAItC,KAAKmC,QAAS,CACdnC,KAAK4B,gB,KACF,CACH5B,KAAK2B,kB,IAMb,oBAAAoB,CAAqBtB,GACzB,OAAOA,EAAML,GAAKpB,KAAKW,GAAGqC,wBAAwB5B,GAAKK,EAAML,GAAKpB,KAAKW,GAAGqC,wBAAwB5B,EAAIpB,KAAKW,GAAGqC,wBAAwBC,OAC/HxB,EAAMyB,GAAKlD,KAAKW,GAAGqC,wBAAwBE,GAAKzB,EAAMyB,GAAKlD,KAAKW,GAAGqC,wBAAwBE,EAAIlD,KAAKW,GAAGqC,wBAAwBG,M,CAS1I,YAAAN,GACI7C,KAAK4B,gB,CAIT,aAAAwB,GACIpD,KAAKqC,aAAevC,EAAuBK,O,CAGvC,uBAAAkD,GACJ,GAAIrD,KAAKqC,eAAiBvC,EAAuBK,SAAWH,KAAKsD,WAAa,MAAO,CACjFtD,KAAKqC,aAAevC,EAAuBwC,KAG3CtC,KAAKC,aAAa,SAAWD,KAAKE,aAClC,GAAIF,KAAKkC,WAAY,CACjBlC,KAAKmC,SAAWnC,KAAKkC,WAAWlC,KAAKE,a,CAGzC,MAAMqD,EAAmB,GACzBC,YAAW,KACP,GAAIxD,KAAKc,OAAS,QAAS,CACtBd,KAAKC,aAAqCwD,O,MACxC,GAAIzD,KAAKc,OAAS,WAAY,CAChCd,KAAKC,aAAwCyD,aAC7C1D,KAAKC,aAAwCwD,O,IAEnDF,E,EAIX,MAAAI,GACI,MAAMC,eAACA,EAAcC,sBAAEA,GAAyB7D,KAAK8D,eACrD,OACIC,EAACC,EAAI,CAAAtC,IAAA,4CACDqC,EAAA,OAAArC,IAAA,2CAAKuC,MAAM,SAASjE,KAAKkE,OACzBH,EAAA,OAAArC,IAAA,2CACIuC,MAAO,sBAAwBjE,KAAKqC,eAAiBvC,EAAuBK,QAAU,eAAiB,IACvGgE,QAAS,IAAMnE,KAAKqD,2BACnBO,EACDG,EAAA,gBAAArC,IAAA,2CAAc0C,KAAK,OAAO1E,KAAK,MAC9BM,KAAKsD,SAAWtD,KAAKqE,qBAAuB,MAEjDN,EAAA,OAAArC,IAAA,2CACIuC,MAAO,mBAAqBjE,KAAKqC,eAAiBvC,EAAuByC,KAAO,eAAiB,KAChGsB,EACDE,EAAA,eAAArC,IAAA,8CAEJqC,EAAA,kBAAArC,IAAA,sDAA0B1B,KAAKmC,QACf8B,MAAO,mBAAqBjE,KAAKqC,eAAiBvC,EAAuBwC,KAAO,eAAiB,KAC7GyB,EAAA,QAAArC,IAAA,6CAEI1B,KAAKmC,SAAWnC,KAAKsE,SACfP,EAAA,iBAAY/D,KAAKsE,UACjB,M,CAOlB,kBAAAD,GACJ,OAAON,EAAA,OAAKQ,MAAM,6BAA6BtB,MAAM,KAAKE,OAAO,KAAKqB,QAAQ,YAClEP,MAAM,iBACdF,EAAA,QAAMU,EAAE,mEACFC,UAAU,yBAChBX,EAAA,QACIU,EAAE,oQACFC,UAAU,yBACdX,EAAA,QACIU,EAAE,2HACFC,UAAU,yB,CAId,YAAAZ,GACJ,IAAIF,EAAiB5D,KAAKQ,MAC1B,IAAIqD,EAAwB7D,KAAKE,aACjC,GAAIF,KAAK2E,SAAU,CACff,EAAiB5D,KAAK2E,SAAS3E,KAAKQ,OACpCqD,EAAwB7D,KAAK2E,SAAS3E,KAAKE,a,CAE/C,GAAI0E,MAAMC,QAAQ7E,KAAKQ,OAAQ,CAC3BoD,EAAiB5D,KAAKQ,MAAMD,KAAK,K,CAErC,GAAIqE,MAAMC,QAAQ7E,KAAKE,cAAe,CAClC2D,EAAwB7D,KAAKE,aAAaK,KAAK,K,CAEnD,MAAO,CACHqD,eAAiBA,EAAkBG,EAAA,YAAOH,GAA2BG,EAAA,aACrEF,sBAAwBA,EAAyBE,EAAA,YAAOF,GAAkCE,EAAA,a"}

package/dist/wcs/p-e64d7437.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,H as r}from"./p-32e583ea.js";const o=":host{--wcs-list-item-property-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-list-item-property-color:var(--wcs-semantic-color-text-secondary);font-weight:var(--wcs-list-item-property-font-weight);color:var(--wcs-list-item-property-color)}";const c=o;const s=class{constructor(e){t(this,e)}render(){return e(r,{key:"f10eb87301c67c20c4399434fcb86c3fa8873803",slot:"property"},e("slot",{key:"b397fb492c5decdead9a795dfa8e1aa841c3dd3c"}))}};s.style=c;export{s as wcs_list_item_property};
-//# sourceMappingURL=p-e64d7437.entry.js.map

package/dist/wcs/p-e86575d3.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as c}from"./p-32e583ea.js";const r=":host{--wcs-badge-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-badge-height-l:calc(4 * var(--wcs-semantic-size-base));--wcs-badge-font-size-l:var(--wcs-semantic-font-size-label-1);--wcs-badge-height-m:calc(3 * var(--wcs-semantic-size-base));--wcs-badge-font-size-m:var(--wcs-semantic-font-size-label-2);--wcs-badge-height-s:calc(2.5 * var(--wcs-semantic-size-base));--wcs-badge-font-size-s:var(--wcs-semantic-font-size-label-3);--wcs-badge-border-radius-default:var(--wcs-semantic-border-radius-base);--wcs-badge-border-radius-circular:var(--wcs-semantic-border-radius-full);--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse);--wcs-badge-gap:var(--wcs-semantic-spacing-base);--wcs-badge-padding-horizontal-l:var(--wcs-semantic-spacing-base);--wcs-badge-padding-horizontal-m:var(--wcs-semantic-spacing-base);--wcs-badge-padding-horizontal-s:calc(0.75 * var(--wcs-semantic-spacing-base));display:inline-flex;gap:var(--wcs-badge-gap);padding:0 var(--wcs-badge-padding-horizontal);height:var(--wcs-badge-height);font-size:var(--wcs-badge-font-size);box-sizing:border-box;font-weight:var(--wcs-badge-font-weight);line-height:1;text-align:center;align-content:center;align-items:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--wcs-badge-border-radius-default);color:var(--wcs-badge-color);background-color:var(--wcs-badge-background-color)}:host([color=lighter]){--wcs-badge-color:var(--wcs-badge-color-lighter) !important;--wcs-badge-background-color:var(--wcs-badge-background-color-lighter) !important}:host([shape=rounded]){border-radius:var(--wcs-badge-border-radius-circular)}:host([size=l]){--wcs-badge-height:var(--wcs-badge-height-l);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-large) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-l);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-l)}:host([size=m]){--wcs-badge-height:var(--wcs-badge-height-m);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-base) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-m);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-m)}:host([size=s]){--wcs-badge-height:var(--wcs-badge-height-s);--wcs-badge-gap:calc(var(--wcs-semantic-spacing-small) / 2);--wcs-badge-font-size:var(--wcs-badge-font-size-s);--wcs-badge-padding-horizontal:var(--wcs-badge-padding-horizontal-s)}:host(.wcs-secondary){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-secondary);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-success){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-success-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-success-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-info){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-information-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-information-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-warning){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-warning-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-warning-lighter);--wcs-badge-color:var(--wcs-semantic-color-foreground-inverse);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-inverse)}:host(.wcs-critical),:host(.wcs-danger){--wcs-badge-background-color:var(--wcs-semantic-color-background-surface-critical-default);--wcs-badge-background-color-lighter:var(--wcs-semantic-color-background-surface-critical-lightest);--wcs-badge-color:var(--wcs-semantic-color-foreground-primary);--wcs-badge-color-lighter:var(--wcs-semantic-color-foreground-critical)}";const s=r;const e=class{constructor(c){a(this,c);this.shape="normal";this.color="initial";this.size="m"}render(){return c("slot",{key:"03ddc8c170819c33674104a70697291ef5e56a9d"})}};e.style=s;export{e as wcs_badge};
-//# sourceMappingURL=p-e86575d3.entry.js.map

package/dist/wcs/p-e86575d3.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["badgeCss","WcsBadgeStyle0","Badge","render","h","key"],"sources":["src/components/badge/badge.scss?tag=wcs-badge&encapsulation=shadow","src/components/badge/badge.tsx"],"sourcesContent":[":host {\n    --wcs-badge-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-badge-height-l: calc(4 * var(--wcs-semantic-size-base));\n    --wcs-badge-font-size-l: var(--wcs-semantic-font-size-label-1);\n    --wcs-badge-height-m: calc(3 * var(--wcs-semantic-size-base));\n    --wcs-badge-font-size-m: var(--wcs-semantic-font-size-label-2);\n    --wcs-badge-height-s: calc(2.5 * var(--wcs-semantic-size-base));\n    --wcs-badge-font-size-s: var(--wcs-semantic-font-size-label-3);\n\n    --wcs-badge-border-radius-default: var(--wcs-semantic-border-radius-base);\n    --wcs-badge-border-radius-circular: var(--wcs-semantic-border-radius-full);\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-brand);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n    --wcs-badge-gap: var(--wcs-semantic-spacing-base);\n    --wcs-badge-padding-horizontal-l: var(--wcs-semantic-spacing-base);\n    --wcs-badge-padding-horizontal-m: var(--wcs-semantic-spacing-base);\n    --wcs-badge-padding-horizontal-s: calc(0.75 * var(--wcs-semantic-spacing-base));\n\n    display: inline-flex;\n    gap: var(--wcs-badge-gap);\n    padding: 0 var(--wcs-badge-padding-horizontal);\n    height: var(--wcs-badge-height);\n    font-size: var(--wcs-badge-font-size);\n    box-sizing: border-box;\n    font-weight: var(--wcs-badge-font-weight);\n    line-height: 1;\n    text-align: center;\n    align-content: center;\n    align-items: center;\n    white-space: nowrap;\n    vertical-align: baseline;\n    border-radius: var(--wcs-badge-border-radius-default);\n    color: var(--wcs-badge-color);\n    background-color: var(--wcs-badge-background-color);\n}\n\n:host([color=lighter]) {\n    --wcs-badge-color: var(--wcs-badge-color-lighter) !important;\n    --wcs-badge-background-color: var(--wcs-badge-background-color-lighter) !important;\n}\n\n:host([shape=rounded]){\n    border-radius: var(--wcs-badge-border-radius-circular);\n}\n\n:host([size=l]) {\n    --wcs-badge-height: var(--wcs-badge-height-l);\n    --wcs-badge-gap: calc(var(--wcs-semantic-spacing-large) / 2);\n    --wcs-badge-font-size: var(--wcs-badge-font-size-l);\n    --wcs-badge-padding-horizontal: var(--wcs-badge-padding-horizontal-l);\n}\n\n:host([size=m]) { // Default\n    --wcs-badge-height: var(--wcs-badge-height-m);\n    --wcs-badge-gap: calc(var(--wcs-semantic-spacing-base) / 2);\n    --wcs-badge-font-size: var(--wcs-badge-font-size-m);\n    --wcs-badge-padding-horizontal: var(--wcs-badge-padding-horizontal-m);\n}\n\n:host([size=s]) {\n    --wcs-badge-height: var(--wcs-badge-height-s);\n    --wcs-badge-gap: calc(var(--wcs-semantic-spacing-small) / 2);\n    --wcs-badge-font-size: var(--wcs-badge-font-size-s);\n    --wcs-badge-padding-horizontal: var(--wcs-badge-padding-horizontal-s);\n}\n\n\n/* Color variants */\n\n:host(.wcs-secondary) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-inverse);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-secondary);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n}\n\n:host(.wcs-success) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-success-default);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-success-lighter);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n}\n\n:host(.wcs-info) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-information-default);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-information-lighter);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n}\n\n:host(.wcs-warning) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-warning-default);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-warning-lighter);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-inverse);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);\n}\n\n:host(.wcs-critical), :host(.wcs-danger) {\n    --wcs-badge-background-color: var(--wcs-semantic-color-background-surface-critical-default);\n    --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-critical-lightest);\n    --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);\n    --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-critical);\n}\n","import { Component, ComponentInterface, h, Prop } from '@stencil/core';\nimport { BadgeColor, BadgeShape, BadgeSize } from './badge-interface';\n\n/**\n * The badge component is a small label, generally appearing inside or in proximity to another larger interface component,\n * representing a status, property, or some other metadata.  \n *\n * @cssprop --wcs-badge-font-weight - Define the font weight of the badge\n * @cssprop --wcs-badge-height-l - Large height of the badge\n * @cssprop --wcs-badge-font-size-l - Large font size of the badge\n * @cssprop --wcs-badge-height-m - Medium height of the badge\n * @cssprop --wcs-badge-font-size-m - Font size of the badge\n * @cssprop --wcs-badge-height-s - Small height of the badge\n * @cssprop --wcs-badge-font-size-s - Small font size of the badge\n * @cssprop --wcs-badge-border-radius-default - Default border radius of the badge\n * @cssprop --wcs-badge-border-radius-circular - Circular border radius of the badge\n * \n * @cssprop --wcs-badge-background-color - Background color of the badge\n * @cssprop --wcs-badge-background-color-lighter - Background color of the lighter badge\n * @cssprop --wcs-badge-color - Text color of the badge\n * @cssprop --wcs-badge-color-lighter - Text color of the lighter badge\n * @cssporp --wcs-badge-gap - The gap inside the badge\n * \n * @cssprop --wcs-badge-padding-horizontal-l - Horizontal padding of the size L badge\n * @cssprop --wcs-badge-padding-horizontal-m - Horizontal padding of the size M badge\n * @cssprop --wcs-badge-padding-horizontal-s - Horizontal padding of the size S badge\n */\n@Component({\n    tag: 'wcs-badge',\n    styleUrl: 'badge.scss',\n    shadow: true\n})\nexport class Badge implements ComponentInterface {\n    /**\n     * Define the shape of the badge\n     */\n    @Prop() shape: BadgeShape = 'normal';\n    /**\n     * Allows you to change the color of the badge to make it less bright (based on the color chosen by the CSS class).\n     */\n    @Prop() color: BadgeColor = 'initial';\n\n    /**\n     * Specify the size of the badge.\n     */\n    @Prop({ reflect: true }) size: BadgeSize = 'm';\n\n    render() {\n        return (\n            <slot/>\n        );\n    }\n}\n"],"mappings":"2CAAA,MAAMA,EAAW,kuIACjB,MAAAC,EAAeD,E,MC+BFE,EAAK,M,oCAIc,S,WAIA,U,UAKe,G,CAE3C,MAAAC,GACI,OACIC,EAAA,QAAAC,IAAA,4C"}

package/dist/wcs/p-f264d46f.entry.js

@@ -1,2 +0,0 @@
-export{G as wcs_grid_pagination}from"./p-412b0021.js";import"./p-32e583ea.js";import"./p-a3aece7a.js";
-//# sourceMappingURL=p-f264d46f.entry.js.map

package/dist/wcs/p-fd9e731d.entry.js

@@ -1,2 +0,0 @@
-import{r as c,c as s,h as t,H as e,g as i}from"./p-32e583ea.js";import{i as o,a,s as r}from"./p-a3aece7a.js";const n=':host{--wcs-switch-background-color-initial:var(--wcs-semantic-color-background-control-indicator-default);--wcs-switch-background-color-final:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-switch-background-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-switch-background-color-disabled-selected:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-switch-background-color-hover-selected:var(--wcs-semantic-color-background-control-indicator-hover);--wcs-switch-padding-horizontal:var(--wcs-semantic-spacing-small);--wcs-switch-padding-vertical:calc((var(--wcs-switch-height) - var(--wcs-switch-dot-size)) / 2);--wcs-switch-dot-color-default:var(--wcs-semantic-color-foreground-brand);--wcs-switch-dot-color-selected:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-switch-dot-color-disabled:var(--wcs-semantic-color-foreground-control-indicator-disabled);--wcs-switch-text-color-default:var(--wcs-semantic-color-text-secondary);--wcs-switch-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-switch-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-switch-text-font-weight-default:var(--wcs-semantic-font-weight-medium);--wcs-switch-text-font-weight-selected:var(--wcs-semantic-font-weight-medium);--wcs-switch-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-switch-dot-translate-x:calc(var(--wcs-switch-width) - var(--wcs-switch-dot-size) - (2 * var(--wcs-switch-padding-horizontal)));--wcs-switch-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-switch-dot-size:0.875rem;--wcs-switch-height:var(--wcs-semantic-size-xs);--wcs-switch-width:var(--wcs-semantic-size-l);--wcs-switch-border-radius:var(--wcs-semantic-border-radius-full);--wcs-switch-gap:var(--wcs-semantic-spacing-base);display:inline-flex}:host([disabled]) .text{color:var(--wcs-switch-text-color-disabled)}:host([disabled]) .wcs-container{cursor:not-allowed}.wcs-container{position:relative;display:flex;user-select:none;margin-bottom:0;gap:var(--wcs-switch-gap)}.wcs-container:has(input:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-switch-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-switch-border-radius)}@supports not selector(.wcs-container:has(input:focus-visible)){.wcs-container:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-switch-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-switch-border-radius)}}:host([label-alignment=top]) .wcs-container{align-items:start}:host([label-alignment=center]) .wcs-container{align-items:center}:host([label-alignment=bottom]) .wcs-container{align-items:flex-end}.wcs-container input{position:absolute;opacity:0;height:0;width:0}.text{color:var(--wcs-switch-text-color-default);font-weight:var(--wcs-switch-text-font-weight-default);line-height:1.375}.wcs-container:not([aria-disabled]) input:checked~.text{font-weight:var(--wcs-switch-text-font-weight-selected);color:var(--wcs-switch-text-color-selected)}.wcs-checkmark::before{position:absolute;transition:all var(--wcs-switch-transition-duration) ease-out}.wcs-checkmark::before{bottom:var(--wcs-switch-padding-vertical);left:var(--wcs-switch-padding-horizontal);width:var(--wcs-switch-dot-size);height:var(--wcs-switch-dot-size);content:"";border-radius:50%;background-color:var(--wcs-switch-dot-color-default)}:host([disabled]:not([checked])) .wcs-checkmark::before{background-color:var(--wcs-switch-dot-color-disabled)}:host([disabled]:not([checked])) .wcs-checkmark{background-color:var(--wcs-switch-background-color-disabled)}:host([disabled][checked]) .wcs-checkmark{background-color:var(--wcs-switch-background-color-disabled-selected)}:host([disabled]) .text{color:var(--wcs-switch-text-color-disabled)}.wcs-checkmark{top:0;right:0;bottom:0;left:0;width:var(--wcs-switch-width);height:var(--wcs-switch-height);border-radius:var(--wcs-switch-border-radius);background-color:var(--wcs-switch-background-color-initial);min-width:3rem;position:relative}.wcs-container:not([aria-disabled]){cursor:pointer}input:not([disabled]):checked+.wcs-checkmark::before,.wcs-container:focus input:not([disabled])+.wcs-checkmark::before{background-color:var(--wcs-switch-dot-color-selected)}input:checked+.wcs-checkmark::before{transform:translateX(var(--wcs-switch-dot-translate-x))}input:not([disabled]):checked+.wcs-checkmark{background-color:var(--wcs-switch-background-color-final)}.wcs-container:hover input:not([disabled]):checked+.wcs-checkmark{background-color:var(--wcs-switch-background-color-hover-selected)}';const d=n;const l=["tabindex"];const w=class{constructor(t){c(this,t);this.wcsChange=s(this,"wcsChange",7);this.wcsFocus=s(this,"wcsFocus",7);this.wcsBlur=s(this,"wcsBlur",7);this.switchId=`wcs-switch-${h++}`;this.inheritedAttributes={};this.name=this.switchId;this.checked=false;this.labelAlignment="center";this.disabled=false}handleChange(c){c.stopImmediatePropagation();c.preventDefault();this.toggleSwitchState()}async handleHostClick(c){c.preventDefault();c.stopPropagation();this.toggleSwitchState()}handleInputClick(c){if(c.detail){c.stopImmediatePropagation();c.preventDefault()}}toggleSwitchState(){if(this.disabled)return;this.checked=!this.checked;this.wcsChange.emit({checked:this.checked})}handleFocus(c){this.wcsFocus.emit(c)}handleBlur(c){this.wcsBlur.emit(c)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},o(this.el)),a(this.el,l))}async setAriaAttribute(c,s){r(this.nativeInput,c,s)}render(){return t(e,{key:"3ab3c9548de5dc99c1e61e84108e87330a38f9b6"},t("label",{key:"214fae117a98bf6b9ae2f48bff4100a99c0dd7ee",htmlFor:this.name,class:"wcs-container","aria-disabled":this.disabled},t("input",Object.assign({key:"af81163894e9dd2490b96e456c0499434f76bcee",onBlur:this.handleBlur.bind(this),onChange:this.handleChange.bind(this),onClick:this.handleInputClick.bind(this),onFocus:this.handleFocus.bind(this),checked:this.checked,id:this.name,class:"wcs-switch",type:"checkbox",name:this.name,disabled:this.disabled,ref:c=>{this.nativeInput=c}},this.inheritedAttributes)),t("span",{key:"ce3becffc15c94ec5d5564aa1af6288d88bcfb5a",class:"wcs-checkmark"}),t("span",{key:"fb25d610a11239cd27899c9590265378c3822759",class:"text"},t("slot",{key:"ea855be8376f63463d83cc6dfeff57e9e36d8ca7"}))))}static get delegatesFocus(){return true}get el(){return i(this)}};let h=0;w.style=d;export{w as wcs_switch};
-//# sourceMappingURL=p-fd9e731d.entry.js.map

package/dist/wcs/p-fd9e731d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["switchCss","WcsSwitchStyle0","SWITCH_INHERITED_ATTRS","Switch","this","switchId","switchIds","inheritedAttributes","handleChange","ev","stopImmediatePropagation","preventDefault","toggleSwitchState","handleHostClick","e","stopPropagation","handleInputClick","detail","disabled","checked","wcsChange","emit","handleFocus","event","wcsFocus","handleBlur","wcsBlur","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeInput","render","h","Host","key","htmlFor","name","class","onBlur","bind","onChange","onClick","onFocus","id","type","ref"],"sources":["src/components/switch/switch.scss?tag=wcs-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-switch-background-color-initial: var(--wcs-semantic-color-background-control-indicator-default);\n    --wcs-switch-background-color-final: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-switch-background-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-switch-background-color-disabled-selected: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-switch-background-color-hover-selected: var(--wcs-semantic-color-background-control-indicator-hover);\n\n    --wcs-switch-padding-horizontal: var(--wcs-semantic-spacing-small);\n    --wcs-switch-padding-vertical: calc((var(--wcs-switch-height) - var(--wcs-switch-dot-size)) / 2); // to center the dot vertically, at the middle of the dot\n\n    // TODO : Les variables figma sont bindées sur les primitives\n    --wcs-switch-dot-color-default: var(--wcs-semantic-color-foreground-brand); // the dot color when the switch is not checked\n    --wcs-switch-dot-color-selected: var(--wcs-semantic-color-foreground-control-indicator-selected); // the dot color when the switch is checked\n    --wcs-switch-dot-color-disabled: var(--wcs-semantic-color-foreground-control-indicator-disabled);\n\n    --wcs-switch-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-switch-text-color-selected: var(--wcs-semantic-color-text-primary);\n    --wcs-switch-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-switch-text-font-weight-default: var(--wcs-semantic-font-weight-medium);\n    --wcs-switch-text-font-weight-selected: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-switch-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-switch-dot-translate-x: calc(var(--wcs-switch-width) - var(--wcs-switch-dot-size) - (2 * var(--wcs-switch-padding-horizontal)));\n    --wcs-switch-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    --wcs-switch-dot-size: 0.875rem; /* 14px */\n\n    --wcs-switch-height: var(--wcs-semantic-size-xs);\n    --wcs-switch-width: var(--wcs-semantic-size-l);\n\n    --wcs-switch-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-switch-gap: var(--wcs-semantic-spacing-base);\n\n    display: inline-flex;\n}\n\n:host([disabled]) {\n    .text {\n        color: var(--wcs-switch-text-color-disabled);\n    }\n\n    .wcs-container {\n        cursor: not-allowed;\n    }\n}\n\n/* Customize the label (the wcs-container) */\n.wcs-container {\n    position: relative;\n    display: flex;\n    user-select: none;\n    margin-bottom: 0;\n\n    gap: var(--wcs-switch-gap);\n}\n\n.wcs-container:has(input:focus-visible) {\n    @include focus-outline($outline-color: var(--wcs-switch-outline-color-focus), $border-radius: var(--wcs-switch-border-radius));\n}\n\n/* If the selector focus-visible is not supported by the browser, use focus-within instead */\n@supports not selector(.wcs-container:has(input:focus-visible)){\n    .wcs-container:focus-within {\n        @include focus-outline($outline-color: var(--wcs-switch-outline-color-focus), $border-radius: var(--wcs-switch-border-radius));\n    }\n}\n\n/* Let the user choose the alignment of the checkbox with the label text */\n:host([label-alignment=\"top\"]) {\n    .wcs-container {\n        align-items: start;\n    }\n}\n\n:host([label-alignment=\"center\"]) {\n    .wcs-container {\n        align-items: center;\n    }\n}\n\n:host([label-alignment=\"bottom\"]) {\n    .wcs-container {\n        align-items: flex-end;\n    }\n}\n\n/* Hide the browser's default switch */\n.wcs-container input {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n}\n\n.text {\n    color: var(--wcs-switch-text-color-default);\n\n    font-weight: var(--wcs-switch-text-font-weight-default);\n    line-height: 1.375;\n}\n\n.wcs-container:not([aria-disabled]) input:checked ~ .text {\n    font-weight: var(--wcs-switch-text-font-weight-selected);\n    color: var(--wcs-switch-text-color-selected);\n}\n\n.wcs-checkmark::before {\n    position: absolute;\n    transition: all var(--wcs-switch-transition-duration) ease-out;\n}\n\n.wcs-checkmark::before {\n    bottom: var(--wcs-switch-padding-vertical);\n    left: var(--wcs-switch-padding-horizontal);\n    width: var(--wcs-switch-dot-size);\n    height: var(--wcs-switch-dot-size);\n    content: \"\";\n    border-radius: 50%;\n    background-color: var(--wcs-switch-dot-color-default);\n}\n\n:host([disabled]:not([checked])) {\n    .wcs-checkmark::before {\n        background-color: var(--wcs-switch-dot-color-disabled);\n    }\n\n    .wcs-checkmark {\n        background-color: var(--wcs-switch-background-color-disabled);\n    }\n}\n\n:host([disabled][checked]) {\n    .wcs-checkmark {\n        background-color: var(--wcs-switch-background-color-disabled-selected);\n    }\n}\n\n:host([disabled]) {\n    .text {\n        color: var(--wcs-switch-text-color-disabled);\n    }\n}\n\n.wcs-checkmark {\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    width: var(--wcs-switch-width);\n    height: var(--wcs-switch-height);\n    border-radius: var(--wcs-switch-border-radius);\n    background-color: var(--wcs-switch-background-color-initial);\n\n    min-width: 3rem;\n    position: relative;\n}\n\n.wcs-container:not([aria-disabled]) {\n    cursor: pointer;\n}\n\n/* When the switch is checked, change the dot to white */\ninput:not([disabled]):checked + .wcs-checkmark::before,\n.wcs-container:focus input:not([disabled]) + .wcs-checkmark::before {\n    background-color: var(--wcs-switch-dot-color-selected);\n}\n\n/* Switch transition */\ninput:checked + .wcs-checkmark::before {\n    transform: translateX(var(--wcs-switch-dot-translate-x));\n}\n\n/* When the switch is checked, change background */\ninput:not([disabled]):checked + .wcs-checkmark {\n    background-color: var(--wcs-switch-background-color-final);\n}\n\n/* When the switch is checked and hover, change background */\n.wcs-container:hover input:not([disabled]):checked + .wcs-checkmark {\n    background-color: var(--wcs-switch-background-color-hover-selected);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Method,\n    Prop\n} from '@stencil/core';\nimport { SwitchChangeEventDetail, SwitchLabelAlignment } from './switch-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst SWITCH_INHERITED_ATTRS = ['tabindex'];\n\n/**\n * The switch component is a control used to switch between on and off state.\n * \n * @cssprop --wcs-switch-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-switch-text-color-default - Color of the text when the switch is not selected\n * @cssprop --wcs-switch-text-color-selected - Color of the text when the switch is selected\n * @cssprop --wcs-switch-text-color-disabled - Color of the text when the switch is disabled\n\n * \n * @cssprop --wcs-switch-background-color-initial - Background color of the switch when not selected\n * @cssprop --wcs-switch-background-color-final - Background color of the switch when selected\n * @cssprop --wcs-switch-background-color-disabled - Background color of the switch when disabled\n * @cssprop --wcs-switch-background-color-disabled-selected - Background color of the switch when disabled and selected\n * @cssprop --wcs-switch-background-color-hover-selected - Background color of the switch when hovered and selected\n * \n * @cssprop --wcs-switch-height - Height of the switch\n * @cssprop --wcs-switch-width - Width of the switch\n * @cssprop --wcs-switch-border-radius - Border radius of the switch\n * @cssprop --wcs-switch-padding-horizontal - Horizontal padding of the switch\n * @cssprop --wcs-switch-padding-vertical - Vertical padding of the switch\n * \n * @cssprop --wcs-switch-dot-color-default - Color of the dot when not selected\n * @cssprop --wcs-switch-dot-color-selected - Color of the dot when selected\n * @cssprop --wcs-switch-dot-color-disabled - Color of the dot when disabled\n * \n * @cssprop --wcs-switch-dot-translate-x - Horizontal translation of the dot (from left to right = right to left)\n * @cssprop --wcs-switch-dot-size - Size of the dot\n * \n * @cssprop --wcs-switch-gap - Gap between the switch and the text\n */\n@Component({\n    tag: 'wcs-switch',\n    styleUrl: 'switch.scss',\n    shadow: {\n        delegatesFocus: true,\n    }\n})\nexport class Switch implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private switchId = `wcs-switch-${switchIds++}`;\n    private nativeInput!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    @Prop() name = this.switchId;\n\n    /**\n     * If `true`, the switch is selected.\n     */\n    @Prop({reflect: true}) checked = false;\n\n    /**\n     * Specifie the alignment of the switch with the label content\n     */\n    @Prop({reflect: true}) labelAlignment: SwitchLabelAlignment = 'center';\n\n    /**\n     * Specify whether the switch is disabled or not.\n     */\n    @Prop() disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<SwitchChangeEventDetail>;\n\n    /**\n     * Emitted when the switch has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n    \n    /**\n     * Emitted when the switch loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    \n    handleChange(ev: Event) {\n        ev.stopImmediatePropagation();\n        ev.preventDefault();\n        this.toggleSwitchState();\n    }\n\n    @Listen('click')\n    async handleHostClick(e: Event){\n        e.preventDefault();\n        e.stopPropagation();\n\n        this.toggleSwitchState();\n    }\n\n    handleInputClick(ev: PointerEvent) {\n        // If the click event is coming from the mouse we ignore it.\n        // We only want to handle the keyboard interactions as it is the only purpose of this native input\n        if (ev.detail) {\n            ev.stopImmediatePropagation()\n            ev.preventDefault();\n        }\n    }\n\n    toggleSwitchState() {\n        if (this.disabled) return;\n        \n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked,\n        });\n    }\n\n    handleFocus(event: FocusEvent) {\n        this.wcsFocus.emit(event);\n    }\n\n    handleBlur(event: FocusEvent) {\n        this.wcsBlur.emit(event);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, SWITCH_INHERITED_ATTRS),\n        };\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input onBlur={this.handleBlur.bind(this)}\n                           onChange={this.handleChange.bind(this)}\n                           onClick={this.handleInputClick.bind(this)}\n                           onFocus={this.handleFocus.bind(this)}\n                           checked={this.checked}\n                           id={this.name}\n                           class=\"wcs-switch\"\n                           type=\"checkbox\"\n                           name={this.name}\n                           disabled={this.disabled}\n                           ref={el => {this.nativeInput = el}}\n                           {...this.inheritedAttributes}>\n                    </input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot/>\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet switchIds = 0;\n"],"mappings":"6GAAA,MAAMA,EAAY,2mJAClB,MAAAC,EAAeD,ECef,MAAME,EAAyB,CAAC,Y,MAwCnBC,EAAM,M,kIAEPC,KAAAC,SAAW,cAAcC,MAEzBF,KAAAG,oBAA4C,G,UAErCH,KAAKC,S,aAKa,M,oBAK6B,S,cAKlC,K,CAkB5B,YAAAG,CAAaC,GACTA,EAAGC,2BACHD,EAAGE,iBACHP,KAAKQ,mB,CAIT,qBAAMC,CAAgBC,GAClBA,EAAEH,iBACFG,EAAEC,kBAEFX,KAAKQ,mB,CAGT,gBAAAI,CAAiBP,GAGb,GAAIA,EAAGQ,OAAQ,CACXR,EAAGC,2BACHD,EAAGE,gB,EAIX,iBAAAC,GACI,GAAIR,KAAKc,SAAU,OAEnBd,KAAKe,SAAWf,KAAKe,QACrBf,KAAKgB,UAAUC,KAAK,CAChBF,QAASf,KAAKe,S,CAItB,WAAAG,CAAYC,GACRnB,KAAKoB,SAASH,KAAKE,E,CAGvB,UAAAE,CAAWF,GACPnB,KAAKsB,QAAQL,KAAKE,E,CAGtB,iBAAAI,GACIvB,KAAKG,oBAAmBqB,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsB1B,KAAK2B,KAC3BC,EAAkB5B,KAAK2B,GAAI7B,G,CAKtC,sBAAM+B,CAAiBC,EAAyBC,GAC5CC,EAAqBhC,KAAKiC,YAAaH,EAAMC,E,CAGjD,MAAAG,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,SAAAE,IAAA,2CAAOC,QAAStC,KAAKuC,KAAMC,MAAM,gBAAe,gBAAgBxC,KAAKc,UACjEqB,EAAA,QAAAX,OAAAC,OAAA,CAAAY,IAAA,2CAAOI,OAAQzC,KAAKqB,WAAWqB,KAAK1C,MAC7B2C,SAAU3C,KAAKI,aAAasC,KAAK1C,MACjC4C,QAAS5C,KAAKY,iBAAiB8B,KAAK1C,MACpC6C,QAAS7C,KAAKkB,YAAYwB,KAAK1C,MAC/Be,QAASf,KAAKe,QACd+B,GAAI9C,KAAKuC,KACTC,MAAM,aACNO,KAAK,WACLR,KAAMvC,KAAKuC,KACXzB,SAAUd,KAAKc,SACfkC,IAAKrB,IAAO3B,KAAKiC,YAAcN,CAAE,GAC7B3B,KAAKG,sBAEhBgC,EAAA,QAAAE,IAAA,2CAAMG,MAAM,kBACZL,EAAA,QAAAE,IAAA,2CAAMG,MAAM,QACRL,EAAA,QAAAE,IAAA,+C,mEAQxB,IAAInC,EAAY,E"}