wcs-core 7.5.1 → 7.7.0

package/dist/wcs/p-6b86d4fa.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["WcsEditableFieldSizeValues","isWcsEditableFieldSize","size","includes","editableFieldCss","WcsEditableFieldStyle0","EditableComponentState","EDIT_ARIA_LABEL","DELAY_BEFORE_FOCUS","EditableField","this","spiedElement","currentValue","DISPLAY","componentWillLoad","console","warn","join","value","componentDidLoad","assignedElements","el","shadowRoot","querySelector","type","initWithInput","initWithTextArea","initWithSelect","disconnectedCallback","cleanUpSpiedElementEventListeners","keyboardSubmitHandler","event","shouldValidateOnEnterKey","isEnterKey","ctrlKey","sendCurrentValue","isEscapeKey","discardChanges","onWcsInputOrChange","stopImmediatePropagation","detail","target","validateFn","isError","_a","removeEventListener","onInputKeydownCallback","_b","onWcsInputOrChangeCallback","_c","element","filter","x","tagName","Error","addWcsInputEventHandler","addKeyDownHandler","addWcsChangeEventHandler","elt","bind","addEventListener","focusEditModeBtn","setTimeout","editModeBtn","focus","currentState","EDIT","LOAD","wcsChange","emit","newValue","successHandler","forceDisplayStateAndValidate","errorHandler","onWindowClickEvent","isMouseEvent","clickInsideElement","onValueChange","onDisplayContainerClick","readonly","fitContent","getReadonlySvgIcon","h","xmlns","width","height","viewBox","class","d","transform","getSelectElement","computeSelectDisplayTextFromSlottedSelectOptions","selectElement","serverMode","options","Array","from","querySelectorAll","compareWith","optionValue","selectedValue","isArray","map","find","option","innerText","_d","getDisplayValue","formatFn","formatValues","formattedValue","formattedCurrentValue","formattedValueText","render","Host","key","label","onClick","ref","icon","errorMsg"],"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-text-primary);\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-color-focus: 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: var(--wcs-semantic-spacing-large);\n    --wcs-editable-field-padding-horizontal-l: var(--wcs-semantic-spacing-large);\n\n    --wcs-editable-field-icon-color-readonly: var(--wcs-semantic-color-text-tertiary);\n\n    // 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    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        .visually-hidden {\n            position: absolute;\n            width: 1px;\n            height: 1px;\n            overflow: hidden;\n            clip: rect(0, 0, 0, 0);\n            clip-path: inset(50%);\n            white-space: nowrap;\n            outline: 0;\n            outline-offset: 0;\n        }\n    }\n\n    button.display-container {\n        // Reset native button styles\n        width: 100%;\n        border: none;\n        font-family: inherit;\n        text-align: start;\n\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        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        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        &:focus-visible {\n            outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-focus) var(--wcs-editable-field-border-color-default);\n        }\n    }\n}\n\n:host(:not([readonly])) {\n    .display-container:hover,\n    .display-container:focus-visible {\n        wcs-mat-icon {\n            display: flex;\n            align-items: center;\n        }\n    }\n\n    .display-container:hover {\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    .display-container:focus-visible {\n        outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-focus) var(--wcs-editable-field-border-color-focus);\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';\n\nimport {\n    EditableComponentUpdateEvent,\n    EditableFieldType,\n    FormatFn,\n    isWcsEditableFieldSize,\n    ValidateFn,\n    WcsEditableFieldSize,\n    WcsEditableFieldSizeValues\n} from './editable-field-interface';\nimport { clickInsideElement, isEnterKey, isEscapeKey, isMouseEvent } from '../../utils/helpers';\n\nenum EditableComponentState {\n    DISPLAY,\n    EDIT,\n    LOAD\n}\n\n/**\n * Aria-label of the display button\n */\nconst EDIT_ARIA_LABEL = \"Éditer\";\n\n// We wait until the element is displayed on the page otherwise the focus does not work.\n// 20ms is a little more than a 16ms frame at 60fps.\nconst DELAY_BEFORE_FOCUS = 20;\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 * @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-color-focus - Border color of the editable field on focus\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    private spiedElement: HTMLElement = null;\n    private editModeBtn: HTMLButtonElement;\n    private onInputKeydownCallback: (event: KeyboardEvent) => void;\n    private onWcsInputOrChangeCallback: (event: CustomEvent) => void;\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     * Will also be part of the edit button `aria-label`.\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({ reflect: true }) 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    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    componentDidLoad() {\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\n    disconnectedCallback(): void {\n        this.cleanUpSpiedElementEventListeners();\n    }\n\n    private keyboardSubmitHandler(event: KeyboardEvent): void {\n        const shouldValidateOnEnterKey = \n            (this.type === 'textarea' || this.type === 'select')\n            ? (isEnterKey(event) && event.ctrlKey)\n            : isEnterKey(event);\n\n        if (shouldValidateOnEnterKey) {\n            this.sendCurrentValue();\n        }\n        if (isEscapeKey(event)) {\n            this.discardChanges();\n        }\n    }\n\n    private onWcsInputOrChange(event: CustomEvent) {\n        event.stopImmediatePropagation();\n        const value = this.type === 'select' ? event.detail.value : event.detail.target.value;\n        this.currentValue = value;\n        if (this.validateFn) {\n            this.isError = !this.validateFn(this.currentValue);\n        }\n    }\n\n    private cleanUpSpiedElementEventListeners(): void {\n        this.spiedElement?.removeEventListener('keydown', this.onInputKeydownCallback);\n        this.spiedElement?.removeEventListener('wcsInput', this.onWcsInputOrChangeCallback);\n        this.spiedElement?.removeEventListener('wcsChange', this.onWcsInputOrChangeCallback);\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.addWcsInputEventHandler(this.spiedElement);\n        this.addKeyDownHandler(this.spiedElement);\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.addWcsInputEventHandler(this.spiedElement);\n        this.addKeyDownHandler(this.spiedElement);\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.addWcsChangeEventHandler(this.spiedElement);\n        this.addKeyDownHandler(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 addWcsChangeEventHandler(elt: HTMLElement) {\n        this.onWcsInputOrChangeCallback = this.onWcsInputOrChange.bind(this);\n        elt.addEventListener('wcsChange', this.onWcsInputOrChangeCallback);\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 addWcsInputEventHandler(elt: HTMLElement) {\n        this.onWcsInputOrChangeCallback = this.onWcsInputOrChange.bind(this);\n        elt.addEventListener('wcsInput', this.onWcsInputOrChangeCallback);\n    }\n\n    /**\n     * This method subscribes the component to the keydown events produced by the other WCS components \n     * @param elt the element to subscribe to\n     * @private\n     */\n    private addKeyDownHandler(elt: HTMLElement) {\n        this.onInputKeydownCallback = this.keyboardSubmitHandler.bind(this);\n        elt.addEventListener('keydown', this.onInputKeydownCallback);\n    }\n\n    private focusEditModeBtn() {\n        setTimeout(() => {\n            this.editModeBtn?.focus();\n        }, DELAY_BEFORE_FOCUS);\n    }\n\n    private sendCurrentValue() {\n        if (this.currentState === EditableComponentState.EDIT) {\n            if (this.value === this.currentValue) {\n                this.currentState = EditableComponentState.DISPLAY;\n                this.focusEditModeBtn();\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        this.focusEditModeBtn();\n    }\n\n    forceDisplayStateAndValidate() {\n        if (this.currentState === EditableComponentState.LOAD) {\n            this.value = this.currentValue;\n            this.currentState = EditableComponentState.DISPLAY;\n            this.focusEditModeBtn();\n        } else {\n            throw new Error('You cannot set display state from ' + EditableComponentState[this.currentState] + ' state');\n        }\n    }\n\n    // Process only mouse clicks, to avoid interfering with keyboard triggered button clicks. \n    // In some browsers, pressing \"Enter\" or \"Space\" while focused on a button generates a click event\n    // with `event.detail` set to 0. It's a keyboard triggered click, not a real mouse click. \n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent | KeyboardEvent) {\n        // Ensure only true mouse clicks are processed\n        if (isMouseEvent(event) && event.detail !== 0 && !clickInsideElement(event, this.el)) {\n            if (this.currentState === EditableComponentState.EDIT) {\n                if (this.isError) {\n                    this.discardChanges();\n                } else {\n                    this.sendCurrentValue();\n                }\n            }\n        }\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    errorHandler() {\n        this.discardChanges();\n    }\n\n    @Watch('value')\n    onValueChange(): void {\n        this.currentState = EditableComponentState.DISPLAY;\n        this.currentValue = this.value;\n    }\n\n    private onDisplayContainerClick(): void {\n        if (this.currentState === EditableComponentState.DISPLAY && this.readonly === false) {\n            this.currentState = EditableComponentState.EDIT;\n            this.spiedElement['value'] = this.currentValue;\n            if (this.validateFn) {\n                this.isError = !this.validateFn(this.currentValue);\n            }\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_BEFORE_FOCUS)\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 getSelectElement(): HTMLWcsSelectElement {\n        return (this.spiedElement ?? this.el.querySelector('wcs-select')) as HTMLWcsSelectElement;\n    }\n    \n    private computeSelectDisplayTextFromSlottedSelectOptions(value: any): string {\n        const selectElement = this.getSelectElement();\n        \n        // in server mode, selected options could be not found in the DOM so we could not find innerText of option\n        // so we fall back on the value \n        if (selectElement.serverMode) {\n            return value;\n        }\n        \n        const options = Array.from(selectElement?.querySelectorAll('wcs-select-option') ?? []);\n        const compareWith = selectElement?.compareWith ?? ((optionValue: any, selectedValue: any) => optionValue === selectedValue);\n\n        if (Array.isArray(value)) {\n            return value\n                .map(selectedValue => options.find(option => compareWith(option.value, selectedValue))?.innerText ?? selectedValue)\n                .join(', ');\n        }\n\n        return options.find(option => compareWith(option.value, value))?.innerText ?? value;\n    }\n    \n    private getDisplayValue(value: any) {\n        if (this.formatFn) {\n            return this.formatFn(value);\n        }\n\n        if (this.type === 'select') {\n            return this.computeSelectDisplayTextFromSlottedSelectOptions(value);\n        }\n\n        if (Array.isArray(value)) {\n            return value.join(', ');\n        }\n\n        return value;\n    }\n\n    private formatValues() {\n        const formattedValue = this.getDisplayValue(this.value);\n        const formattedCurrentValue = this.getDisplayValue(this.currentValue);\n\n        return {\n            formattedValue: (formattedValue ? (<span>{formattedValue}</span>) : (<span></span>)),\n            formattedValueText: formattedValue,\n            formattedCurrentValue: (formattedCurrentValue ? (<span>{formattedCurrentValue}</span>) : (<span></span>))\n        };\n    }\n    \n    render(): any {\n        const {formattedValue, formattedValueText, formattedCurrentValue} = this.formatValues();\n        return (\n            <Host>\n                <div class=\"label\">{this.label}</div>\n                <button\n                    type=\"button\"\n                    class={'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : '')}\n                    onClick={() => this.onDisplayContainerClick()}\n                    ref={(el) => this.editModeBtn = el}\n                    aria-label={`${EDIT_ARIA_LABEL} ${this.label} ${formattedValueText}`}\n                >\n                    {formattedValue}\n                    <wcs-mat-icon icon=\"edit\" size=\"s\"></wcs-mat-icon>\n                    {this.readonly ? this.getReadonlySvgIcon() : null}\n                </button>\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                >\n                    <wcs-label class=\"visually-hidden\">{this.label}</wcs-label>\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"],"mappings":"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"}

package/dist/wcs/p-6c6841ac.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as c,H as e}from"./p-32e583ea.js";const s=":host{--wcs-card-footer-gap:var(--wcs-semantic-spacing-base);display:flex;flex-direction:row;align-items:center;gap:var(--wcs-card-footer-gap)}";const r=s;const o=class{constructor(c){a(this,c)}render(){return c(e,{key:"b4cb7626b89fd1b2a8a63bf86cdcd7be94f52490"},c("slot",{key:"33ad1bca3da4f4626cd95b023e34ebd0d2769cab"}))}};o.style=r;export{o as wcs_card_footer};
+//# sourceMappingURL=p-6c6841ac.entry.js.map

package/dist/wcs/p-6c78d16e.js

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

package/dist/wcs/p-714c3cd7.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as s,h as i,H as r,g as e}from"./p-32e583ea.js";import{r as o,i as n,a,s as c}from"./p-71af107c.js";const d=":host{--wcs-input-icon-color-default:var(--wcs-semantic-color-foreground-brand);--wcs-input-icon-color-focus:var(--wcs-semantic-color-foreground-brand);--wcs-input-icon-color-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-input-background-color:var(--wcs-semantic-color-background-control-default);--wcs-input-border-radius-left:var(--wcs-semantic-border-radius-base);--wcs-input-border-radius-right:var(--wcs-semantic-border-radius-base);--wcs-input-border-width:var(--wcs-semantic-border-width-default);--wcs-input-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-input-height-l:var(--wcs-semantic-size-l);--wcs-input-height-m:var(--wcs-semantic-size-m);--wcs-input-height-s:var(--wcs-semantic-size-s);--wcs-input-font-size-l:var(--wcs-semantic-font-size-l);--wcs-input-font-size-m:var(--wcs-semantic-font-size-m);--wcs-input-font-size-s:var(--wcs-semantic-font-size-s);--wcs-input-prefix-suffix-background-color:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-input-prefix-suffix-color:var(--wcs-semantic-color-foreground-on-accent);--wcs-input-prefix-suffix-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-input-prefix-suffix-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-input-border-style-default:solid;--wcs-input-border-style-focus:var(--wcs-semantic-border-style-focus-control);--wcs-input-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-input-border-color-disabled:var(--wcs-semantic-color-border-disabled);--wcs-input-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-input-reveal-password-button-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-input-border-color-error:var(--wcs-semantic-color-border-critical);--wcs-input-value-color:var(--wcs-semantic-color-text-primary);--wcs-input-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-input-placeholder-color:var(--wcs-semantic-color-text-tertiary);--wcs-input-placeholder-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-input-placeholder-font-style:var(--wcs-semantic-font-style-control-placeholder);--wcs-input-text-color-disabled:var(--wcs-semantic-color-text-disabled);--wcs-input-min-height:var(--wcs-semantic-size-s);--wcs-input-padding-horizontal-s:calc(1.5 * var(--wcs-semantic-spacing-base));--wcs-input-padding-horizontal-m:var(--wcs-semantic-spacing-large);--wcs-input-padding-horizontal-l:var(--wcs-semantic-spacing-large);--wcs-input-gap:var(--wcs-semantic-spacing-base);--wcs-input-host-height:var(--wcs-input-height-m);--wcs-input-font-size:var(--wcs-input-font-size-m);padding-left:calc(var(--wcs-input-padding-horizontal-m));padding-right:calc(var(--wcs-input-padding-horizontal-m));display:flex;width:100%;height:var(--wcs-input-host-height);box-sizing:border-box;border-radius:var(--wcs-input-border-radius-left) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-left);background-color:var(--wcs-input-background-color);outline:var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-default);outline-offset:calc(var(--wcs-input-border-width) * -1);background-clip:padding-box;gap:var(--wcs-input-gap)}:host input{overflow:hidden;height:var(--wcs-input-host-height);width:100%;padding:0;background-color:transparent;font-family:var(--wcs-font-sans-serif);color:var(--wcs-input-value-color);font-weight:var(--wcs-input-value-font-weight) !important;border:none;font-size:var(--wcs-input-font-size, 1rem);line-height:1.5}:host input::placeholder{color:var(--wcs-input-placeholder-color);opacity:1;font-weight:var(--wcs-input-placeholder-font-weight);font-style:var(--wcs-input-placeholder-font-style)}:host input:focus{box-shadow:none;outline:0}:host button.toggle_password{background:transparent;border:none;color:inherit;cursor:pointer}:host button.toggle_password:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-input-reveal-password-button-border-color-focus);outline-offset:calc(-2 * var(--wcs-input-border-width-focus));border-radius:0.1rem}:host .prefix,:host .suffix{color:var(--wcs-input-prefix-suffix-color);display:flex;white-space:nowrap;align-items:center;font-size:var(--wcs-input-font-size, 1rem);padding:0 calc(var(--wcs-input-padding-horizontal-m) / 2);font-weight:var(--wcs-input-prefix-suffix-font-weight) !important;background-color:var(--wcs-input-prefix-suffix-background-color)}:host .prefix{border-radius:var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left)}:host .suffix{border-radius:0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0}:host wcs-mat-icon{color:var(--wcs-input-icon-color-default)}:host([size=l]){--wcs-input-host-height:var(--wcs-input-height-l);--wcs-input-font-size:var(--wcs-input-font-size-l);padding-left:calc(var(--wcs-input-padding-horizontal-l));padding-right:calc(var(--wcs-input-padding-horizontal-l))}:host([size=m]){--wcs-input-host-height:var(--wcs-input-height-m);--wcs-input-font-size:var(--wcs-input-font-size-m);padding-left:calc(var(--wcs-input-padding-horizontal-m));padding-right:calc(var(--wcs-input-padding-horizontal-m))}:host([size=s]){--wcs-input-host-height:var(--wcs-input-height-s);--wcs-input-font-size:var(--wcs-input-font-size-s);padding-left:calc(var(--wcs-input-padding-horizontal-s));padding-right:calc(var(--wcs-input-padding-horizontal-s))}:host([state=error]){outline-color:var(--wcs-input-border-color-error) !important}:host([data-has-prefix]){padding-left:0}:host([data-has-suffix]){padding-right:0}:host([disabled]){cursor:not-allowed;outline:var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-disabled);--wcs-input-background-color:var(--wcs-semantic-color-background-control-disabled)}:host([disabled]) input{cursor:not-allowed;color:var(--wcs-input-text-color-disabled)}:host([disabled]) input::placeholder{color:var(--wcs-input-text-color-disabled)}:host([disabled]) .prefix,:host([disabled]) .suffix{color:var(--wcs-input-prefix-suffix-color-disabled);cursor:text}:host([disabled]) wcs-mat-icon{color:var(--wcs-input-icon-color-disabled);cursor:not-allowed}:host([readonly]){--wcs-input-background-color:var(--wcs-semantic-color-background-control-readonly);--wcs-input-border-width:0}:host(:focus-within){outline:var(--wcs-input-border-style-focus) var(--wcs-input-border-width-focus) var(--wcs-input-border-color-focus);outline-offset:calc(var(--wcs-input-border-width-focus) * -1)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-input-icon-color-focus)}";const l=d;const u=["tabindex","title"];const h=class{constructor(i){t(this,i);this.wcsInput=s(this,"wcsInput",7);this.wcsChange=s(this,"wcsChange",7);this.wcsBlur=s(this,"wcsBlur",7);this.wcsFocus=s(this,"wcsFocus",7);this.inputId=`wcs-input-${p++}`;this.inheritedAttributes={};this.iconPassword="visibility";this.onInput=t=>{const s=t.target;if(s){this.value=s.value||""}this.wcsInput.emit(t)};this.onChange=t=>{this.wcsChange.emit({value:this.nativeInput.value})};this.onBlur=t=>{if(this.fireFocusEvents){this.wcsBlur.emit(t)}};this.onFocus=t=>{if(this.fireFocusEvents){this.wcsFocus.emit(t)}};this.fireFocusEvents=true;this.passwordReveal=false;this.accept=undefined;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.debounce=0;this.prefixLabel=undefined;this.suffixLabel=undefined;this.disabled=false;this.enterkeyhint=undefined;this.size="m";this.icon=undefined;this.inputmode=undefined;this.max=undefined;this.maxlength=undefined;this.min=undefined;this.minlength=undefined;this.multiple=undefined;this.name=this.inputId;this.hidePasswordButtonAriaLabel="Cacher le mot de passe";this.showPasswordButtonAriaLabel="Afficher le mot de passe";this.pattern=undefined;this.placeholder=undefined;this.readonly=false;this.required=false;this.spellcheck=false;this.state="initial";this.step=undefined;this.type="text";this.value=""}debounceChanged(){this.wcsInput=o(this.wcsInput,this.debounce)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),a(this.el,u))}connectedCallback(){this.debounceChanged();{document.dispatchEvent(new CustomEvent("wcsInputDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("wcsInputDidUnload",{detail:this.el}))}}async setBlur(){if(this.nativeInput){this.nativeInput.blur()}}getInputElement(){return Promise.resolve(this.nativeInput)}async setAriaAttribute(t,s){c(this.nativeInput,t,s)}getValueAsString(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}passwordRevealIconClick(){this.passwordReveal=!this.passwordReveal}onPasswordRevealChange(){this.iconPassword=this.passwordReveal?"visibility_off":"visibility"}render(){const t=this.getValueAsString();return i(r,{key:"27fd1df5da31b16cd286e8d3ec53f67408c99a6b","aria-disabled":this.disabled?"true":null,"data-has-prefix":!!this.prefixLabel,"data-has-suffix":!!this.suffixLabel},this.prefixLabel?i("span",{class:"prefix",part:"prefix"},this.prefixLabel):null,this.icon?i("wcs-mat-icon",{icon:this.icon,size:"m"}):null,i("input",Object.assign({key:"9731bd23ee6bdfe5f61f449a2f050d6bf3332b83",class:"native-input",ref:t=>this.nativeInput=t,disabled:this.disabled,accept:this.accept,autoCapitalize:this.autocapitalize,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:this.placeholder||"",readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,step:this.step,type:this.passwordReveal?"text":this.type,value:t,onInput:this.onInput,onChange:this.onChange,onBlur:this.onBlur,onFocus:this.onFocus},this.inheritedAttributes)),this.type==="password"?i("button",{title:this.passwordReveal?this.hidePasswordButtonAriaLabel:this.showPasswordButtonAriaLabel,class:"toggle_password",onClick:()=>this.passwordRevealIconClick()},i("wcs-mat-icon",{icon:this.iconPassword,size:"m"})):null,this.suffixLabel?i("span",{class:"suffix",part:"suffix"},this.suffixLabel):null)}static get delegatesFocus(){return true}get el(){return e(this)}static get watchers(){return{debounce:["debounceChanged"],passwordReveal:["onPasswordRevealChange"]}}};let p=0;h.style=l;export{h as wcs_input};
+//# sourceMappingURL=p-714c3cd7.entry.js.map

package/dist/wcs/p-714c3cd7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["inputCss","WcsInputStyle0","INPUT_INHERITED_ATTRS","Input","this","inputId","inputIds","inheritedAttributes","iconPassword","onInput","ev","input","target","value","wcsInput","emit","onChange","_","wcsChange","nativeInput","onBlur","fireFocusEvents","wcsBlur","onFocus","wcsFocus","debounceChanged","debounceEvent","debounce","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","connectedCallback","document","dispatchEvent","CustomEvent","detail","disconnectedCallback","setBlur","blur","getInputElement","Promise","resolve","setAriaAttribute","attr","setOrRemoveAttribute","getValueAsString","toString","passwordRevealIconClick","passwordReveal","onPasswordRevealChange","render","h","Host","key","disabled","prefixLabel","suffixLabel","class","part","icon","size","ref","accept","autoCapitalize","autocapitalize","autoComplete","autocomplete","autoCorrect","autocorrect","autoFocus","autofocus","enterKeyHint","enterkeyhint","inputMode","inputmode","min","max","minLength","minlength","maxLength","maxlength","multiple","name","pattern","placeholder","readOnly","readonly","required","spellcheck","step","type","title","hidePasswordButtonAriaLabel","showPasswordButtonAriaLabel","onClick"],"sources":["src/components/input/input.scss?tag=wcs-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n@import '../../style/placeholder.scss';\n\n:host {\n    --wcs-input-icon-color-default: var(--wcs-semantic-color-foreground-brand);\n    --wcs-input-icon-color-focus: var(--wcs-semantic-color-foreground-brand);\n    --wcs-input-icon-color-disabled: var(--wcs-semantic-color-foreground-disabled);\n\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-default);\n\n    --wcs-input-border-radius-left: var(--wcs-semantic-border-radius-base); // Overridden from prefix suffix group in form-field\n    --wcs-input-border-radius-right: var(--wcs-semantic-border-radius-base); // Overridden from prefix suffix group in form-field\n\n    --wcs-input-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-input-border-width-focus: var(--wcs-semantic-border-width-large);\n\n    --wcs-input-height-l: var(--wcs-semantic-size-l);\n    --wcs-input-height-m: var(--wcs-semantic-size-m);\n    --wcs-input-height-s: var(--wcs-semantic-size-s);\n    --wcs-input-font-size-l: var(--wcs-semantic-font-size-l);\n    --wcs-input-font-size-m: var(--wcs-semantic-font-size-m);\n    --wcs-input-font-size-s: var(--wcs-semantic-font-size-s);\n\n    --wcs-input-prefix-suffix-background-color: var(--wcs-semantic-color-background-surface-accent-lighter);\n    --wcs-input-prefix-suffix-color: var(--wcs-semantic-color-foreground-on-accent);\n    --wcs-input-prefix-suffix-color-disabled: var(--wcs-semantic-color-text-disabled);\n    --wcs-input-prefix-suffix-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-input-border-style-default: solid;\n    --wcs-input-border-style-focus: var(--wcs-semantic-border-style-focus-control);\n\n    --wcs-input-border-color-default: var(--wcs-semantic-color-border-primary);\n    --wcs-input-border-color-disabled: var(--wcs-semantic-color-border-disabled);\n    --wcs-input-border-color-focus: var(--wcs-semantic-color-border-control-focus);\n    --wcs-input-reveal-password-button-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n    --wcs-input-border-color-error: var(--wcs-semantic-color-border-critical);\n\n    --wcs-input-value-color: var(--wcs-semantic-color-text-primary);\n    --wcs-input-value-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-input-placeholder-color: var(--wcs-semantic-color-text-tertiary);\n    --wcs-input-placeholder-font-weight: var(--wcs-semantic-font-weight-roman);\n    --wcs-input-placeholder-font-style: var(--wcs-semantic-font-style-control-placeholder);\n\n    --wcs-input-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-input-min-height: var(--wcs-semantic-size-s);\n    --wcs-input-padding-horizontal-s: calc(1.5 * var(--wcs-semantic-spacing-base));\n    --wcs-input-padding-horizontal-m: var(--wcs-semantic-spacing-large);\n    --wcs-input-padding-horizontal-l: var(--wcs-semantic-spacing-large);\n    --wcs-input-gap: var(--wcs-semantic-spacing-base);\n\n    // Default\n    --wcs-input-host-height: var(--wcs-input-height-m);\n    --wcs-input-font-size: var(--wcs-input-font-size-m);\n    padding-left: calc(var(--wcs-input-padding-horizontal-m));\n    padding-right: calc(var(--wcs-input-padding-horizontal-m));\n\n    display: flex;\n    width: 100%;\n    height: var(--wcs-input-host-height);\n    box-sizing: border-box;\n    border-radius: var(--wcs-input-border-radius-left) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-right) var(--wcs-input-border-radius-left);\n    background-color: var(--wcs-input-background-color);\n    outline: var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-default);\n    outline-offset: calc(var(--wcs-input-border-width) * -1);\n    background-clip: padding-box;\n\n    gap: var(--wcs-input-gap);\n\n    input {\n        overflow: hidden;\n        height: var(--wcs-input-host-height);\n        width: 100%;\n        padding: 0; // Reset padding from user agent stylesheet, it's the container that will handle padding\n        background-color: transparent;\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-input-value-color);\n        font-weight: var(--wcs-input-value-font-weight) !important;\n        border: none;\n        font-size: var(--wcs-input-font-size, 1rem);\n        line-height: 1.5;\n\n        &::placeholder {\n            @include placeholder(var(--wcs-input-placeholder-color), var(--wcs-input-placeholder-font-weight), var(--wcs-input-placeholder-font-style));\n        }\n    }\n\n    input:focus {\n        box-shadow: none;\n        outline: 0;\n    }\n\n    button.toggle_password {\n        background: transparent;\n        border: none;\n        color: inherit;\n\n        cursor: pointer;\n\n\n        &:focus-visible {\n            @include focus-outline(var(--wcs-input-reveal-password-button-border-color-focus), $outline-offset: calc(-2 * var(--wcs-input-border-width-focus)));\n        }\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-input-prefix-suffix-color);\n        display: flex;\n        white-space: nowrap;\n        align-items: center;\n        font-size: var(--wcs-input-font-size, 1rem);\n        padding: 0 calc(var(--wcs-input-padding-horizontal-m) / 2);\n        font-weight: var(--wcs-input-prefix-suffix-font-weight) !important;\n        background-color: var(--wcs-input-prefix-suffix-background-color);\n    }\n\n    .prefix {\n        border-radius: var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left);\n    }\n\n    .suffix {\n        border-radius: 0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0;\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-default);\n    }\n}\n\n:host([size=l]) {\n    --wcs-input-host-height: var(--wcs-input-height-l);\n    --wcs-input-font-size: var(--wcs-input-font-size-l);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-l));\n    padding-right: calc(var(--wcs-input-padding-horizontal-l));\n}\n\n:host([size=m]) { // Default\n    --wcs-input-host-height: var(--wcs-input-height-m);\n    --wcs-input-font-size: var(--wcs-input-font-size-m);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-m));\n    padding-right: calc(var(--wcs-input-padding-horizontal-m));\n}\n\n:host([size=s]) {\n    --wcs-input-host-height: var(--wcs-input-height-s);\n    --wcs-input-font-size: var(--wcs-input-font-size-s);\n\n    padding-left: calc(var(--wcs-input-padding-horizontal-s));\n    padding-right: calc(var(--wcs-input-padding-horizontal-s));\n}\n\n:host([state=error]) {\n    outline-color: var(--wcs-input-border-color-error) !important;\n}\n\n:host([data-has-prefix]) {\n    padding-left: 0;\n}\n\n:host([data-has-suffix]) {\n    padding-right: 0;\n}\n\n:host([disabled]) {\n    cursor: not-allowed; // padding is handled by the container, so we need to set cursor not allowed on it\n    outline: var(--wcs-input-border-style-default) var(--wcs-input-border-width) var(--wcs-input-border-color-disabled);\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-disabled);\n\n    input {\n        cursor: not-allowed;\n        color: var(--wcs-input-text-color-disabled);\n\n        &::placeholder {\n            color: var(--wcs-input-text-color-disabled);\n        }\n    }\n\n    .prefix, .suffix {\n        color: var(--wcs-input-prefix-suffix-color-disabled);\n        cursor: text; // reset cursor to text for prefix and suffix, to be able to select text\n    }\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-disabled);\n        cursor: not-allowed;\n    }\n}\n\n:host([readonly]) {\n    --wcs-input-background-color: var(--wcs-semantic-color-background-control-readonly);\n    --wcs-input-border-width: 0;\n}\n\n:host(:focus-within) {\n    outline: var(--wcs-input-border-style-focus) var(--wcs-input-border-width-focus) var(--wcs-input-border-color-focus);\n    outline-offset: calc(var(--wcs-input-border-width-focus) * -1);\n\n    wcs-mat-icon {\n        color: var(--wcs-input-icon-color-focus);\n    }\n}\n","import {\n    Build,\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport {\n    debounceEvent,\n    inheritAriaAttributes,\n    inheritAttributes,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport {\n    AutocompleteTypes,\n    InputChangeEventDetail,\n    TextFieldTypes,\n    WcsInputSize,\n    WcsInputAutocorrect,\n    WcsInputEnterKeyHint,\n    WcsInputInputMode,\n    WcsInputState\n} from './input-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst INPUT_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The input component is a form control that accepts a single line of text.\n * Implementation mainly inspired from Ionic Input Component.\n *\n * ## Accessibility guidelines 💡\n * > - If you use wcs-input outside a wcs-form-field, you have to manage the label and the error message yourself.\n * > You can use the `aria-label` attribute to provide a label for screen readers but adds no visual label.\n * \n * @cssprop --wcs-input-icon-color-default - default icon color when the input is not focused\n * @cssprop --wcs-input-icon-color-focus - icon color when the input is focused\n * @cssprop --wcs-input-icon-color-disabled - icon color when the input is disabled\n *\n * @cssprop --wcs-input-background-color - background color of the input\n *\n * @cssprop --wcs-input-border-radius-left - border radius of the left side of the input\n * @cssprop --wcs-input-border-radius-right - border radius of the right side of the input\n * \n * @cssprop --wcs-input-border-width - border width of the input\n * @cssprop --wcs-input-border-width-focus - border width of the input when focused\n *\n * @cssprop --wcs-input-height-l - large height of the input\n * @cssprop --wcs-input-height-m - medium height of the input\n * @cssprop --wcs-input-height-s - small height of the input\n * @cssprop --wcs-input-font-size-l - large font size of the input\n * @cssprop --wcs-input-font-size-m - medium font size of the input\n * @cssprop --wcs-input-font-size-s - small font size of the input\n *\n * @cssprop --wcs-input-border-style-default - default border style of the input\n * @cssprop --wcs-input-border-style-focus - border style of the input when focused\n * \n * @cssprop --wcs-input-prefix-suffix-background-color - background color of the suffix/prefix\n * @cssprop --wcs-input-prefix-suffix-color - color of the suffix/prefix\n * @cssprop --wcs-input-prefix-suffix-color-disabled - color of the suffix/prefix when the input is disabled\n * @cssprop --wcs-input-prefix-suffix-font-weight - font weight of the suffix/prefix\n *\n * @cssprop --wcs-input-border-color-default - default border color of the input when not focused\n * @cssprop --wcs-input-border-color-disabled - border color of the input when disabled\n * @cssprop --wcs-input-border-color-focus - border color of the input when focused\n * @cssprop --wcs-input-reveal-password-button-border-color-focus - border color of the show/hide password button when focused\n * @cssprop --wcs-input-border-color-error - border color of the input when in error state\n *\n * @cssprop --wcs-input-value-color - color of the input value\n * @cssprop --wcs-input-value-font-weight - font weight of the input value\n * \n * @cssprop --wcs-input-placeholder-color - color of the input placeholder\n * @cssprop --wcs-input-placeholder-font-weight - font weight of the input placeholder\n * @cssprop --wcs-input-placeholder-font-style - font style of the input placeholder\n * \n * @cssprop --wcs-input-text-color-disabled - color of the input when disabled\n *\n * @cssprop --wcs-input-padding-horizontal-s - horizontal padding of the input in small size\n * @cssprop --wcs-input-padding-horizontal-m - horizontal padding of the input in medium size\n * @cssprop --wcs-input-padding-horizontal-l - horizontal padding of the input in large size\n * \n * @cssprop --wcs-input-gap - gap between text input and icon\n */\n@Component({\n    tag: 'wcs-input',\n    styleUrl: 'input.scss',\n    shadow: { delegatesFocus: true },\n})\nexport class Input implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeInput?: HTMLInputElement;\n    private inputId = `wcs-input-${inputIds++}`;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private iconPassword = \"visibility\";\n\n    /**\n     * This is required for a WebKit bug which requires us to\n     * blur and focus an input to properly focus the input in\n     * an item with delegatesFocus. It will no longer be needed\n     * with iOS 14.\n     *\n     * @internal\n     */\n    @Prop() fireFocusEvents: boolean = true;\n\n    @State() private passwordReveal: boolean = false;\n\n    /**\n     * If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the\n     * server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n     */\n    @Prop() accept?: string;\n\n    /**\n     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n     * Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n     */\n    @Prop() autocapitalize = 'off';\n\n    /**\n     * Indicates whether the value of the control can be automatically completed by the browser.\n     */\n    @Prop() autocomplete: AutocompleteTypes = 'off';\n\n    /**\n     * Whether auto correction should be enabled when the user is entering/editing the text value.\n     */\n    @Prop() autocorrect: WcsInputAutocorrect = 'off';\n\n    /**\n     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n     */\n    @Prop() autofocus: boolean = false;\n\n    /**\n     * Set the amount of time, in milliseconds, to wait to trigger the `wcsInput` event after each keystroke.\n     * This also impacts form bindings such as `ngModel` or `v-model`.\n     */\n    @Prop() debounce = 0;\n\n    @Watch('debounce')\n    protected debounceChanged() {\n        this.wcsInput = debounceEvent(this.wcsInput, this.debounce);\n    }\n\n    /**\n     * Prefix displayed before the text field contents. This is not included in the value.\n     */\n    @Prop() prefixLabel: string;\n\n    /**\n     * Suffix displayed after the text field contents. This is not included in the value.\n     */\n    @Prop() suffixLabel: string;\n\n    /**\n     * If `true`, the user cannot interact with the input.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * A hint to the browser for which enter key to display.\n     */\n    @Prop() enterkeyhint?: WcsInputEnterKeyHint;\n\n    /**\n     * Specify the size (height) of the input.\n     */\n    @Prop({reflect: true}) size: WcsInputSize = 'm';\n\n    /**\n     * Name of the material icon to add to the input\n     */\n    @Prop() icon: string;\n\n    /**\n     * A hint to the browser for which keyboard to display.\n     */\n    @Prop() inputmode?: WcsInputInputMode;\n\n    /**\n     * The maximum value, which must not be less than its minimum (min attribute) value.\n     */\n    @Prop() max?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n     * specifies the maximum number of characters that the user can enter.\n     */\n    @Prop() maxlength?: number;\n\n    /**\n     * The minimum value, which must not be greater than its maximum (max attribute) value.\n     */\n    @Prop() min?: string;\n\n    /**\n     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n     * specifies the minimum number of characters that the user can enter.\n     */\n    @Prop() minlength?: number;\n\n    /**\n     * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to\n     * `\"email\"` or `\"file\"`, otherwise it is ignored.\n     */\n    @Prop({ reflect: true }) multiple?: boolean;\n\n    /**\n     * The name of the control, which is submitted with the form data.\n     */\n    @Prop() name: string = this.inputId;\n\n    @Prop() hidePasswordButtonAriaLabel: string = \"Cacher le mot de passe\";\n    @Prop() showPasswordButtonAriaLabel: string = \"Afficher le mot de passe\";\n\n    /**\n     * A regular expression that the value is checked against. The pattern must match the entire value, not just some\n     * subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value\n     * of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise\n     * it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support\n     * the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for\n     * more information.\n     */\n    @Prop() pattern?: string;\n\n    /**\n     * Instructional text that shows before the input has a value.\n     */\n    @Prop() placeholder?: string | null;\n\n    /**\n     * If `true`, the user cannot modify the value.\n     */\n    @Prop({ reflect: true }) readonly: boolean = false;\n\n    /**\n     * If `true`, the user must fill in a value before submitting a form.\n     */\n    @Prop({ reflect: true }) required: boolean = false;\n\n    /**\n     * If `true`, the element will have its spelling and grammar checked.\n     */\n    @Prop() spellcheck: boolean = false;\n\n    /**\n     * Specifies the state of the input. By default the input is in an normal state but you can to set it to 'error'\n     * state if the data given by the user is not valid.\n     */\n    @Prop({reflect: true}) state: WcsInputState = 'initial';\n\n    /**\n     * Works with the min and max attributes to limit the increments at which a value can be set.\n     * Possible values are: `\"any\"` or a positive floating point number.\n     */\n    @Prop() step?: string;\n\n    /**\n     * The type of control to display. The default type is text.\n     */\n    @Prop() type: TextFieldTypes = 'text';\n\n    /**\n     * The value of the input.\n     */\n    @Prop({mutable: true}) value?: string | number | null = '';\n\n    /**\n     * Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input\n     */\n    @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n    /**\n     * Emitted when the value has changed. See https://developer.mozilla.org/en-US/docs/Web/Events/change\n     */\n    @Event() wcsChange!: EventEmitter<InputChangeEventDetail>;\n\n    /**\n     * Emitted when the input loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the input has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, INPUT_INHERITED_ATTRS)\n        };\n    }\n\n    connectedCallback() {\n        this.debounceChanged();\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n                detail: this.el\n            }));\n        }\n    }\n\n    disconnectedCallback() {\n        if (Build.isBrowser) {\n            document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n                detail: this.el\n            }));\n        }\n    }\n\n    /**\n     * Sets blur on the native `input` in `wcs-input`. Use this method instead of the global\n     * `input.blur()`.\n     * @internal\n     */\n    @Method()\n    async setBlur() {\n        if (this.nativeInput) {\n            this.nativeInput.blur();\n        }\n    }\n\n    /**\n     * Returns the native `<input>` element used under the hood.\n     */\n    @Method()\n    getInputElement(): Promise<HTMLInputElement> {\n        return Promise.resolve(this.nativeInput!);\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n    \n    private getValueAsString(): string {\n        return typeof this.value === 'number' ? this.value.toString() :\n            (this.value || '').toString();\n    }\n\n    private onInput = (ev: Event) => {\n        const input = ev.target as HTMLInputElement | null;\n        if (input) {\n            this.value = input.value || '';\n        }\n        this.wcsInput.emit(ev as KeyboardEvent);\n    }\n\n    private onChange = (_: Event) => {\n        this.wcsChange.emit({value: this.nativeInput.value});\n    }\n\n    private onBlur = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsBlur.emit(ev);\n        }\n    }\n\n    private onFocus = (ev: FocusEvent) => {\n        if (this.fireFocusEvents) {\n            this.wcsFocus.emit(ev);\n        }\n    }\n\n    private passwordRevealIconClick(): void {\n        this.passwordReveal = !this.passwordReveal;\n    }\n\n    @Watch('passwordReveal')\n    onPasswordRevealChange(): void {\n        this.iconPassword = this.passwordReveal ? 'visibility_off' : 'visibility';\n    }\n\n    render() {\n        const value = this.getValueAsString();\n\n        return (\n            <Host\n                aria-disabled={this.disabled ? 'true' : null}\n                data-has-prefix={!!this.prefixLabel}\n                data-has-suffix={!!this.suffixLabel}\n            >\n                {this.prefixLabel ? (<span class=\"prefix\" part=\"prefix\">{this.prefixLabel}</span>) : null}\n                {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n                <input\n                    class=\"native-input\"\n                    ref={input => this.nativeInput = input}\n                    disabled={this.disabled}\n                    accept={this.accept}\n                    autoCapitalize={this.autocapitalize}\n                    autoComplete={this.autocomplete}\n                    autoCorrect={this.autocorrect}\n                    autoFocus={this.autofocus}\n                    enterKeyHint={this.enterkeyhint}\n                    inputMode={this.inputmode}\n                    min={this.min}\n                    max={this.max}\n                    minLength={this.minlength}\n                    maxLength={this.maxlength}\n                    multiple={this.multiple}\n                    name={this.name}\n                    pattern={this.pattern}\n                    placeholder={this.placeholder || ''}\n                    readOnly={this.readonly}\n                    required={this.required}\n                    spellcheck={this.spellcheck}\n                    step={this.step}\n                    type={this.passwordReveal ? 'text' : this.type}\n                    value={value}\n                    onInput={this.onInput}\n                    onChange={this.onChange}\n                    onBlur={this.onBlur}\n                    onFocus={this.onFocus}\n                    {...this.inheritedAttributes}\n                />\n                {this.type === \"password\" ? (\n                    <button title={this.passwordReveal ? this.hidePasswordButtonAriaLabel : this.showPasswordButtonAriaLabel} class=\"toggle_password\" onClick={() => this.passwordRevealIconClick()}>\n                        <wcs-mat-icon icon={this.iconPassword} size=\"m\"></wcs-mat-icon>\n                    </button>\n                ) : null}\n                {this.suffixLabel ? (<span class=\"suffix\" part=\"suffix\">{this.suffixLabel}</span>) : null}\n            </Host>\n        );\n    }\n}\n\nlet inputIds = 0;\n"],"mappings":"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"}

package/dist/wcs/p-71af107c.js

@@ -0,0 +1,2 @@
+function a(a){return"clientWidth"in a&&"clientHeight"in a}function r(a){return!!a.shadowRoot&&!!a.attachShadow}const n=(a,r)=>{const n=a._original||a;return{_original:a,emit:e(n.emit.bind(n),r)}};const e=(a,r=0)=>{let n;return(...e)=>{clearTimeout(n);n=setTimeout(a,r,...e)}};const i=(a,r=[])=>{const n={};r.forEach((r=>{if(a.hasAttribute(r)){const e=a.getAttribute(r);if(e!==null){n[r]=a.getAttribute(r)}a.removeAttribute(r)}}));return n};const t=["role","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-errormessage","aria-expanded","aria-flowto","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext"];const o=(a,r)=>{let n=t;if(r&&r.length>0){n=n.filter((a=>!r.includes(a)))}return i(a,n)};function s(a,r,n){if(a){if(n===undefined||n===null){a.removeAttribute(r)}else{a.setAttribute(r,n)}}}const u=(a,r,n)=>{const e=a.filter((a=>!r.some((r=>n(a,r)))));const i=a.filter((a=>r.some((r=>n(a,r)))));const t=r.filter((r=>!a.some((a=>n(r,a)))));return{removed:e,kept:i,added:t}};function c(a){var r,n;return(n=(r=a===null||a===void 0?void 0:a.replace(/\s+/g," "))===null||r===void 0?void 0:r.trim())!==null&&n!==void 0?n:""}const l=a=>{if(typeof __zone_symbol__requestAnimationFrame==="function"){return __zone_symbol__requestAnimationFrame(a)}if(typeof requestAnimationFrame==="function"){return requestAnimationFrame(a)}return setTimeout(a)};const d=(a,r)=>a.x>=r.getBoundingClientRect().x&&a.x<=r.getBoundingClientRect().x+r.getBoundingClientRect().width&&a.y>=r.getBoundingClientRect().y&&a.y<=r.getBoundingClientRect().y+r.getBoundingClientRect().height;const f=(a,r)=>a.target instanceof Node&&r.contains(a.target);function m(a){return a+"-"+Math.random().toString(36)}function p(a){return"clientX"in a}function w(a){return a.code==="ArrowUp"}function b(a){return a.code==="ArrowDown"}function v(a){return a.code==="Escape"}function x(a){return a.code==="Space"}function A(a){return a.key==="Enter"}function _(a){return a.code==="Home"}function h(a){return a.code==="End"}function y(a){return a.key==="ArrowUp"}function g(a){return a.key==="ArrowDown"}function q(a){return a.key==="ArrowLeft"}function k(a){return a.key==="ArrowRight"}function z(a){return a.key==="PageDown"}function F(a){return a.key==="PageUp"}function T(a){return a.key==="Tab"}function D(a){return window.getComputedStyle(document.body).getPropertyValue(a)||null}function E(a){if(!a)return 0;const r=/^([\d.]+)(?:(ms|s))?$/;const n=a.trim();if(!/^\d/.test(n))return 0;const e=r.exec(n);if(!e)return 0;const i=Number(e[1]);if(!Number.isFinite(i))return 0;return e[2]==="s"?i*1e3:i}export{u as A,a as B,r as C,i as a,v as b,x as c,A as d,w as e,b as f,D as g,_ as h,o as i,h as j,f as k,F as l,z as m,T as n,p as o,E as p,d as q,n as r,s,g as t,k as u,y as v,q as w,l as x,c as y,m as z};
+//# sourceMappingURL=p-71af107c.js.map

package/dist/wcs/p-71af107c.js.map

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

package/dist/wcs/{p-ad286030.entry.js → p-7b67cec9.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,c as e,h as t,H as a,g as c}from"./p-32e583ea.js";import{c as s,d as n,i,a as r,s as l}from"./p-52d77e1f.js";import{c as m}from"./p-0017d766.js";const d=':host{--wcs-com-nav-category-label-mobile-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-category-label-mobile-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-category-label-font-size:var(--wcs-semantic-font-size-label-1);--wcs-com-nav-category-label-desktop-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-category-label-desktop-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-category-label-desktop-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-category-label-desktop-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-category-item-mobile-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-category-item-mobile-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-category-item-mobile-spacing-top:var(--wcs-semantic-spacing-large);--wcs-com-nav-category-item-mobile-spacing-left:calc(var(--wcs-semantic-spacing-base) * 3);--wcs-com-nav-category-item-mobile-gap:calc(var(--wcs-semantic-spacing-base) * 1.5);--wcs-com-nav-category-desktop-menu-background-color:transparent;--wcs-com-nav-category-desktop-menu-border-left-width:var(--wcs-semantic-border-width-default);--wcs-com-nav-category-desktop-menu-border-left-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-category-desktop-menu-background-indicator-color:transparent;--wcs-com-nav-category-desktop-menu-gap:calc(var(--wcs-semantic-spacing-base) * 3);--wcs-com-nav-category-item-desktop-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-category-item-desktop-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-category-desktop-menu-padding-top:50px;--wcs-com-nav-category-desktop-menu-padding-bottom:50px;--wcs-com-nav-category-desktop-menu-padding-left:50px;--wcs-com-nav-category-desktop-menu-padding-right:0;display:block;height:fit-content}:host button{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:initial}:host .label-container{margin:0;font-size:var(--wcs-com-nav-category-label-font-size);font-weight:var(--wcs-com-nav-category-label-mobile-font-weight);display:block;color:var(--wcs-com-nav-category-label-mobile-color)}:host .label-container .arrow-container{display:none}:host .label-container .arrow-icon{display:none}:host .item-container{display:flex;flex-direction:column;gap:var(--wcs-com-nav-category-item-mobile-gap);margin-left:var(--wcs-com-nav-category-item-mobile-spacing-left);margin-top:var(--wcs-com-nav-category-item-mobile-spacing-top)}:host .item-container ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-category-item-mobile-color);font-weight:var(--wcs-com-nav-category-item-mobile-font-weight)}@media (min-width: 576px){:host{padding-bottom:unset}:host .item-container:not([data-open]){display:none}:host button{cursor:pointer}:host .label-container{display:flex;align-items:center;gap:var(--wcs-com-nav-category-label-desktop-gap);font-weight:var(--wcs-com-nav-category-label-desktop-font-weight);cursor:pointer;user-select:none;padding-left:unset;color:var(--wcs-com-nav-category-label-desktop-color)}:host .label-container .arrow-icon{display:inline-block;font-family:icons;font-size:0.6rem;line-height:1;box-sizing:border-box}:host .label-container .arrow-container{display:unset}:host .label-container:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-category-label-desktop-focus-outline-color);outline-offset:0.1rem;border-radius:5px}@supports not selector(.label-container:focus-visible){:host .label-container:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-category-label-desktop-focus-outline-color);outline-offset:0.1rem;border-radius:5px}}:host button.label-container[aria-expanded=true]:after{position:absolute;left:calc(50% + var(--wcs-com-content-max-width) / 8 - 0.5625rem);z-index:2;display:block;width:1.125rem;height:1.125rem;content:"";background-color:var(--wcs-com-nav-category-desktop-menu-background-indicator-color);transform:rotate(45deg)}:host .item-container[data-open]{position:absolute;border-left:solid var(--wcs-com-nav-category-desktop-menu-border-left-width) var(--wcs-com-nav-category-desktop-menu-border-left-color);left:calc(50% + var(--wcs-com-content-max-width) / 8);top:0;right:0;padding:var(--wcs-com-nav-category-desktop-menu-padding-top) var(--wcs-com-nav-category-desktop-menu-padding-right) var(--wcs-com-nav-category-desktop-menu-padding-bottom) var(--wcs-com-nav-category-desktop-menu-padding-left);background-blend-mode:multiply;background-color:var(--wcs-com-nav-category-desktop-menu-background-color);box-sizing:border-box;height:100%;margin-left:unset;margin-top:unset;display:flex;flex-direction:column;gap:var(--wcs-com-nav-category-desktop-menu-gap);align-items:start}:host .item-container[data-open] ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-category-item-desktop-color);font-weight:var(--wcs-com-nav-category-item-desktop-font-weight)}:host .item-container[data-open] ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-category-item-desktop-color);outline-offset:0.1rem;border-radius:2px}}';const g=d;const p=["title"];const w=class{constructor(t){o(this,t);this.wcsCategoryOpened=e(this,"wcsCategoryOpened",7);this.inheritedAttributes={};this.categoryItemsId=`wcs-com-nav-category-items`;this.label=undefined;this.categoryOpen=false;this.currentActiveSizing="desktop"}onWindowClickEvent(o){if(this.categoryOpen)this.categoryOpen=false}onSubmenuOpened(o){if(o.detail.categoryElement!==this.el){this.categoryOpen=false}}componentDidLoad(){if(!this.resizeObserver){this.resizeObserver=m(this);this.resizeObserver.observe(document.body)}}handleCategoryItemsKeyDown(o){if(s(o)||n(o)){this.handleItemClick(o)}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},i(this.el)),r(this.el,p))}async setAriaAttribute(o,e){l(this.nativeButton,o,e)}async close(){this.categoryOpen=false}async open(){this.categoryOpen=true}onClick(o){o.stopPropagation();this.wcsCategoryOpened.emit({categoryElement:this.el})}handleItemClick(o){if(o.target.tagName==="A"){this.close()}}disconnectedCallback(){var o;(o=this.resizeObserver)===null||o===void 0?void 0:o.disconnect()}render(){return t(a,{key:"0b5d69d30228c1585c17d74bf8183f6fe91c1696",role:"listitem",onClick:o=>this.onClick(o)},this.currentActiveSizing==="mobile"?t("h3",{role:"presentation",class:"label-container"},t("span",{class:"label"},this.label)):t("button",Object.assign({class:"label-container","aria-controls":this.categoryItemsId,"aria-expanded":this.categoryOpen?"true":"false",ref:o=>this.nativeButton=o,onClick:o=>this.categoryOpen=!this.categoryOpen},this.inheritedAttributes),t("span",{class:"label"},this.label),t("span",{class:"arrow-container"},t("span",{"aria-hidden":"true",class:"arrow-icon"},""))),t("div",{key:"8269a3a8eb304343e6beef3cfde1e20976e02bbb",class:"item-container",role:"list","aria-label":this.label,id:this.categoryItemsId,tabIndex:-1,"data-open":this.categoryOpen,onKeyDown:o=>this.handleCategoryItemsKeyDown(o),onClick:o=>this.handleItemClick(o)},t("slot",{key:"0cd3f5916499f4e14d554e7fe963a2a384c4b39d"})))}get el(){return c(this)}};w.style=g;export{w as wcs_com_nav_category};
-//# sourceMappingURL=p-ad286030.entry.js.map
+import{r as o,c as e,h as t,H as a,g as c}from"./p-32e583ea.js";import{c as s,d as n,i,a as r,s as l}from"./p-71af107c.js";import{c as m}from"./p-6c78d16e.js";const d=':host{--wcs-com-nav-category-label-mobile-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-category-label-mobile-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-category-label-font-size:var(--wcs-semantic-font-size-label-1);--wcs-com-nav-category-label-desktop-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-category-label-desktop-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-category-label-desktop-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-category-label-desktop-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-category-item-mobile-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-category-item-mobile-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-category-item-mobile-spacing-top:var(--wcs-semantic-spacing-large);--wcs-com-nav-category-item-mobile-spacing-left:calc(var(--wcs-semantic-spacing-base) * 3);--wcs-com-nav-category-item-mobile-gap:calc(var(--wcs-semantic-spacing-base) * 1.5);--wcs-com-nav-category-desktop-menu-background-color:transparent;--wcs-com-nav-category-desktop-menu-border-left-width:var(--wcs-semantic-border-width-default);--wcs-com-nav-category-desktop-menu-border-left-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-category-desktop-menu-background-indicator-color:transparent;--wcs-com-nav-category-desktop-menu-gap:calc(var(--wcs-semantic-spacing-base) * 3);--wcs-com-nav-category-item-desktop-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-category-item-desktop-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-category-desktop-menu-padding-top:50px;--wcs-com-nav-category-desktop-menu-padding-bottom:50px;--wcs-com-nav-category-desktop-menu-padding-left:50px;--wcs-com-nav-category-desktop-menu-padding-right:0;display:block;height:fit-content}:host button{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:initial}:host .label-container{margin:0;font-size:var(--wcs-com-nav-category-label-font-size);font-weight:var(--wcs-com-nav-category-label-mobile-font-weight);display:block;color:var(--wcs-com-nav-category-label-mobile-color)}:host .label-container .arrow-container{display:none}:host .label-container .arrow-icon{display:none}:host .item-container{display:flex;flex-direction:column;gap:var(--wcs-com-nav-category-item-mobile-gap);margin-left:var(--wcs-com-nav-category-item-mobile-spacing-left);margin-top:var(--wcs-com-nav-category-item-mobile-spacing-top)}:host .item-container ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-category-item-mobile-color);font-weight:var(--wcs-com-nav-category-item-mobile-font-weight)}@media (min-width: 576px){:host{padding-bottom:unset}:host .item-container:not([data-open]){display:none}:host button{cursor:pointer}:host .label-container{display:flex;align-items:center;gap:var(--wcs-com-nav-category-label-desktop-gap);font-weight:var(--wcs-com-nav-category-label-desktop-font-weight);cursor:pointer;user-select:none;padding-left:unset;color:var(--wcs-com-nav-category-label-desktop-color)}:host .label-container .arrow-icon{display:inline-block;font-family:icons;font-size:0.6rem;line-height:1;box-sizing:border-box}:host .label-container .arrow-container{display:unset}:host .label-container:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-category-label-desktop-focus-outline-color);outline-offset:0.1rem;border-radius:5px}@supports not selector(.label-container:focus-visible){:host .label-container:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-category-label-desktop-focus-outline-color);outline-offset:0.1rem;border-radius:5px}}:host button.label-container[aria-expanded=true]:after{position:absolute;left:calc(50% + var(--wcs-com-content-max-width) / 8 - 0.5625rem);z-index:2;display:block;width:1.125rem;height:1.125rem;content:"";background-color:var(--wcs-com-nav-category-desktop-menu-background-indicator-color);transform:rotate(45deg)}:host .item-container[data-open]{position:absolute;border-left:solid var(--wcs-com-nav-category-desktop-menu-border-left-width) var(--wcs-com-nav-category-desktop-menu-border-left-color);left:calc(50% + var(--wcs-com-content-max-width) / 8);top:0;right:0;padding:var(--wcs-com-nav-category-desktop-menu-padding-top) var(--wcs-com-nav-category-desktop-menu-padding-right) var(--wcs-com-nav-category-desktop-menu-padding-bottom) var(--wcs-com-nav-category-desktop-menu-padding-left);background-blend-mode:multiply;background-color:var(--wcs-com-nav-category-desktop-menu-background-color);box-sizing:border-box;height:100%;margin-left:unset;margin-top:unset;display:flex;flex-direction:column;gap:var(--wcs-com-nav-category-desktop-menu-gap);align-items:start}:host .item-container[data-open] ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-category-item-desktop-color);font-weight:var(--wcs-com-nav-category-item-desktop-font-weight)}:host .item-container[data-open] ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-category-item-desktop-color);outline-offset:0.1rem;border-radius:2px}}';const g=d;const p=["title"];const w=class{constructor(t){o(this,t);this.wcsCategoryOpened=e(this,"wcsCategoryOpened",7);this.inheritedAttributes={};this.categoryItemsId=`wcs-com-nav-category-items`;this.label=undefined;this.categoryOpen=false;this.currentActiveSizing="desktop"}onWindowClickEvent(o){if(this.categoryOpen)this.categoryOpen=false}onSubmenuOpened(o){if(o.detail.categoryElement!==this.el){this.categoryOpen=false}}componentDidLoad(){if(!this.resizeObserver){this.resizeObserver=m(this);this.resizeObserver.observe(document.body)}}handleCategoryItemsKeyDown(o){if(s(o)||n(o)){this.handleItemClick(o)}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},i(this.el)),r(this.el,p))}async setAriaAttribute(o,e){l(this.nativeButton,o,e)}async close(){this.categoryOpen=false}async open(){this.categoryOpen=true}onClick(o){o.stopPropagation();this.wcsCategoryOpened.emit({categoryElement:this.el})}handleItemClick(o){if(o.target.tagName==="A"){this.close()}}disconnectedCallback(){var o;(o=this.resizeObserver)===null||o===void 0?void 0:o.disconnect()}render(){return t(a,{key:"cab005c22a1390a75127cc8ee4691a90fb06443c",role:"listitem",onClick:o=>this.onClick(o)},this.currentActiveSizing==="mobile"?t("h3",{role:"presentation",class:"label-container"},t("span",{class:"label"},this.label)):t("button",Object.assign({class:"label-container","aria-controls":this.categoryItemsId,"aria-expanded":this.categoryOpen?"true":"false",ref:o=>this.nativeButton=o,onClick:o=>this.categoryOpen=!this.categoryOpen},this.inheritedAttributes),t("span",{class:"label"},this.label),t("span",{class:"arrow-container"},t("span",{"aria-hidden":"true",class:"arrow-icon"},""))),t("div",{key:"2e6b6e969a0fff4bc6e9ce70ffeb0dc0cb599865",class:"item-container",role:"list","aria-label":this.label,id:this.categoryItemsId,tabIndex:-1,"data-open":this.categoryOpen,onKeyDown:o=>this.handleCategoryItemsKeyDown(o),onClick:o=>this.handleItemClick(o)},t("slot",{key:"ee841a45fa5d9ec6a80c8015246551c4eb793dcf"})))}get el(){return c(this)}};w.style=g;export{w as wcs_com_nav_category};
+//# sourceMappingURL=p-7b67cec9.entry.js.map

package/dist/wcs/{p-781a956e.entry.js → p-7cd88886.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as a}from"./p-32e583ea.js";const t=':host{background-color:var(--wcs-semantic-color-background-surface-secondary);margin:0;display:grid;grid-template-areas:"header header" "sidebar content";grid-template-columns:min-content auto;overflow-y:hidden}::slotted(main){padding:8px;grid-area:content;overflow-y:scroll;height:calc(100vh - 64px)}::slotted(wcs-header){grid-area:header}@media screen and (max-width: 768px){:host{grid-template-areas:"header" "sidebar" "content";grid-template-columns:auto}::slotted(header){position:relative}::slotted(main){overflow-y:visible;height:initial}}';const r=t;const o=class{constructor(a){e(this,a)}render(){return[a("slot",{key:"615427e4b1e7219b1b78fbca36f8385f64119314",name:"header"}),a("slot",{key:"da5fbe3b8d0eb3963d9e42a9e3396f9bf3d49c0d",name:"sidebar"}),a("slot",{key:"3227284afd347f4af0c47ad0f9b46712502df225",name:"content"})]}};o.style=r;export{o as wcs_app};
-//# sourceMappingURL=p-781a956e.entry.js.map
+import{r as e,h as a}from"./p-32e583ea.js";const t=':host{background-color:var(--wcs-semantic-color-background-surface-secondary);margin:0;display:grid;grid-template-areas:"header header" "sidebar content";grid-template-columns:min-content auto;overflow-y:hidden}::slotted(main){padding:8px;grid-area:content;overflow-y:scroll;height:calc(100vh - 64px)}::slotted(wcs-header){grid-area:header}@media screen and (max-width: 768px){:host{grid-template-areas:"header" "sidebar" "content";grid-template-columns:auto}::slotted(header){position:relative}::slotted(main){overflow-y:visible;height:initial}}';const r=t;const o=class{constructor(a){e(this,a)}render(){return[a("slot",{key:"3238c405d5fbe3ff12228c573d8bc3e9752fbde0",name:"header"}),a("slot",{key:"7a77769a0554d193169427f2acf14afae4ebd929",name:"sidebar"}),a("slot",{key:"52a5516e1a554263ce6bd203b73701af7e7e5cc3",name:"content"})]}};o.style=r;export{o as wcs_app};
+//# sourceMappingURL=p-7cd88886.entry.js.map

package/dist/wcs/{p-850fa9c9.entry.js → p-7f5eea6a.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as s,h as t,H as n,g as o}from"./p-32e583ea.js";import{i as a,a as i,b as c,s as r,c as m,d}from"./p-52d77e1f.js";import{r as u,c as l}from"./p-0017d766.js";const b=":host{--wcs-com-nav-submenu-button-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-button-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-submenu-button-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-submenu-button-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-submenu-desktop-menu-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-com-nav-submenu-desktop-menu-text-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-desktop-menu-link-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-desktop-menu-heading-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-com-nav-submenu-desktop-menu-description-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-desktop-menu-description-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-submenu-desktop-menu-padding:50px;--wcs-com-nav-submenu-desktop-menu-items-padding-left:50px;--wcs-com-nav-submenu-desktop-menu-items-padding-right:80px;--wcs-com-nav-submenu-mobile-text-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-mobile-link-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-mobile-spacing-top:var(--wcs-semantic-spacing-large);--wcs-com-nav-submenu-mobile-spacing-bottom:var(--wcs-semantic-spacing-large);--wcs-com-nav-submenu-mobile-spacing-left:calc(var(--wcs-semantic-spacing-base) * 3);--wcs-com-nav-submenu-mobile-gap:calc(var(--wcs-semantic-spacing-base) * 3);display:block;padding-bottom:var(--wcs-com-nav-submenu-mobile-spacing-bottom)}:host button{display:block;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host .arrow-icon{display:none}:host .arrow-container{display:none}:host .label{text-transform:uppercase;font-size:16px;cursor:unset;font-weight:var(--wcs-com-nav-submenu-button-font-weight);color:var(--wcs-com-nav-submenu-button-color);text-decoration:none}:host .drawer{display:contents}:host .drawer-container{display:contents}:host .drawer-description{display:none}:host .menu-items{display:flex;flex-direction:column;gap:var(--wcs-com-nav-submenu-mobile-gap)}:host .menu-items ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-submenu-mobile-text-color);font-weight:var(--wcs-com-nav-submenu-mobile-link-font-weight)}@media (max-width: 575px){:host .menu-button{margin:0}:host .menu-items{margin-top:var(--wcs-com-nav-submenu-mobile-spacing-top);margin-left:var(--wcs-com-nav-submenu-mobile-spacing-left)}}@media (min-width: 576px){:host{height:100%;padding-bottom:unset}:host .menu-button{display:flex;align-items:center;height:100%;cursor:pointer;user-select:none;font-weight:unset;padding-left:unset}:host .menu-button:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-button-focus-outline-color);outline-offset:0.1rem;border-radius:2px}@supports not selector(.menu-button:focus-visible){:host{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-button-focus-outline-color);outline-offset:0.1rem;border-radius:2px}}:host .label{text-transform:unset;cursor:pointer}:host .arrow-icon{display:inline-block;font-family:icons;font-size:0.6rem;line-height:1;box-sizing:border-box}:host .arrow-container{display:unset;margin-left:var(--wcs-com-nav-submenu-button-gap)}:host .arrow-icon:not([data-open]){transform:rotate(90deg)}:host .arrow-icon[data-open]{transform:rotate(-90deg)}:host .drawer{display:none;position:absolute;top:calc(var(--wcs-com-nav-menu-bar-height) + var(--wcs-com-nav-border-width));z-index:8888;left:0;width:100%;box-sizing:border-box;padding:var(--wcs-com-nav-submenu-desktop-menu-padding);background-color:var(--wcs-com-nav-submenu-desktop-menu-background-color);color:var(--wcs-com-nav-submenu-desktop-menu-text-color);box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.08)}:host .drawer-content{display:flex;justify-content:space-between;max-width:62.5%;flex:1}:host .drawer-content div:first-child{flex:0.8}:host .drawer-content div{max-width:260px}:host .menu-items{padding:0 var(--wcs-com-nav-submenu-desktop-menu-items-padding-right) 0 var(--wcs-com-nav-submenu-desktop-menu-items-padding-left);display:flex;flex-direction:column;align-items:flex-end}:host .menu-items ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-submenu-desktop-menu-text-color);font-weight:var(--wcs-com-nav-submenu-desktop-menu-link-font-weight)}:host .menu-items ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-desktop-menu-text-color);outline-offset:0.1rem;border-radius:2px}:host .drawer-container{display:flex;max-width:var(--wcs-com-content-max-width);margin:0 auto}:host .drawer-container h3{margin:0 0 var(--wcs-com-nav-submenu-desktop-menu-description-gap) 0;font-size:1.5rem;line-height:1.25;font-weight:var(--wcs-com-nav-submenu-desktop-menu-heading-font-weight)}:host .drawer-container p{margin-top:0;margin-bottom:1rem;font-weight:var(--wcs-com-nav-submenu-desktop-menu-description-font-weight);font-size:1rem;line-height:1.375}:host .drawer[data-open]{display:block}:host .drawer-description{display:block}}";const h=b;const p=["title"];const w="WCS-COM-NAV-CATEGORY";const f=class{constructor(t){e(this,t);this.wcsSubmenuOpened=s(this,"wcsSubmenuOpened",7);this.inheritedAttributes={};this.menuItemsId=`wcs-com-nav-submenu-items`;this.label=undefined;this.panelTitle=undefined;this.panelDescription=undefined;this.menuOpen=false;this.currentActiveSizing="desktop"}componentWillLoad(){const e=this.el.querySelectorAll(":scope > wcs-com-nav-category:not([slot])");u(e,w);this.inheritedAttributes=Object.assign(Object.assign({},a(this.el)),i(this.el,p))}componentDidLoad(){if(!this.resizeObserver){this.resizeObserver=l(this);this.resizeObserver.observe(document.body)}}onWindowClickEvent(e){if(this.menuOpen)this.menuOpen=false}onSubmenuOpened(e){if(e.detail.menuElement!==this.el){this.menuOpen=false}}onEscapeKeyDown(e){if(c(e)&&this.menuOpen){this.menuOpen=false}}async setAriaAttribute(e,s){r(this.nativeButton,e,s)}async close(){this.menuOpen=false}async open(){this.menuOpen=true}onClick(e){e.stopPropagation();this.wcsSubmenuOpened.emit({menuElement:this.el})}handleMenuItemsKeyDown(e){if(m(e)||d(e)){this.handleMenuItemsClick(e)}}handleMenuItemsClick(e){if(e.target.tagName==="A"){this.close()}}wcsCategoryItemClickedHandler(e){this.close()}disconnectedCallback(){var e;(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect()}render(){return t(n,{key:"935e78a3daf751160c21e7375e86be186bcfdec9",onClick:e=>this.onClick(e),role:"listitem","data-open":this.menuOpen},this.currentActiveSizing==="mobile"?t("h2",{role:"presentation",class:"menu-button"},t("span",{class:"label"},this.label),t("span",{class:"arrow-container"},t("span",{class:"arrow-icon","data-open":this.menuOpen},""))):t("button",Object.assign({onClick:e=>this.menuOpen=!this.menuOpen,"aria-expanded":this.menuOpen?"true":"false","aria-controls":this.menuItemsId,class:"menu-button",ref:e=>this.nativeButton=e},this.inheritedAttributes),t("span",{class:"label"},this.label),t("span",{class:"arrow-container"},t("span",{"aria-hidden":"true",class:"arrow-icon","data-open":this.menuOpen},""))),t("div",{key:"1e654c7f9a74f3e6bb92e9cd3589ea3b7ee9ed99",class:"drawer","data-open":this.menuOpen,tabIndex:-1},t("div",{key:"1c2d8a56d7e91071fcb43f537173850ecf62fb28",class:"drawer-container"},t("div",{key:"4880e09bcf8e06464db2984ac43dbd01ee9a0af3",class:"drawer-content"},t("div",{key:"d2e6e97442a73ff8d24ba4165587fd544b2ff853",class:"drawer-description"},t("h3",{key:"04b20b11befc1dc63e719fda8dda51fe248e93cd"},this.panelTitle),t("p",{key:"69810728510063a77b97845d91f684fe2abfa347"},this.panelDescription)),t("div",{key:"ed35406cc3a5ced0155181239dc96b4afcaa2871",role:"list","aria-label":this.label,id:this.menuItemsId,class:"menu-items",onClick:e=>this.handleMenuItemsClick(e),onKeyDown:e=>this.handleMenuItemsKeyDown(e)},t("slot",{key:"3059b3ccbef8b9483e05e4d400b1643d9ab23273"}))))))}get el(){return o(this)}};f.style=h;export{f as wcs_com_nav_submenu};
-//# sourceMappingURL=p-850fa9c9.entry.js.map
+import{r as e,c as s,h as t,H as n,g as o}from"./p-32e583ea.js";import{i as a,a as i,b as c,s as r,c as m,d}from"./p-71af107c.js";import{r as u,c as l}from"./p-6c78d16e.js";const b=":host{--wcs-com-nav-submenu-button-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-button-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-submenu-button-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-submenu-button-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-submenu-desktop-menu-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-com-nav-submenu-desktop-menu-text-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-desktop-menu-link-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-desktop-menu-heading-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-com-nav-submenu-desktop-menu-description-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-desktop-menu-description-gap:var(--wcs-semantic-spacing-base);--wcs-com-nav-submenu-desktop-menu-padding:50px;--wcs-com-nav-submenu-desktop-menu-items-padding-left:50px;--wcs-com-nav-submenu-desktop-menu-items-padding-right:80px;--wcs-com-nav-submenu-mobile-text-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-submenu-mobile-link-font-weight:var(--wcs-semantic-font-weight-roman);--wcs-com-nav-submenu-mobile-spacing-top:var(--wcs-semantic-spacing-large);--wcs-com-nav-submenu-mobile-spacing-bottom:var(--wcs-semantic-spacing-large);--wcs-com-nav-submenu-mobile-spacing-left:calc(var(--wcs-semantic-spacing-base) * 3);--wcs-com-nav-submenu-mobile-gap:calc(var(--wcs-semantic-spacing-base) * 3);display:block;padding-bottom:var(--wcs-com-nav-submenu-mobile-spacing-bottom)}:host button{display:block;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host .arrow-icon{display:none}:host .arrow-container{display:none}:host .label{text-transform:uppercase;font-size:16px;cursor:unset;font-weight:var(--wcs-com-nav-submenu-button-font-weight);color:var(--wcs-com-nav-submenu-button-color);text-decoration:none}:host .drawer{display:contents}:host .drawer-container{display:contents}:host .drawer-description{display:none}:host .menu-items{display:flex;flex-direction:column;gap:var(--wcs-com-nav-submenu-mobile-gap)}:host .menu-items ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-submenu-mobile-text-color);font-weight:var(--wcs-com-nav-submenu-mobile-link-font-weight)}@media (max-width: 575px){:host .menu-button{margin:0}:host .menu-items{margin-top:var(--wcs-com-nav-submenu-mobile-spacing-top);margin-left:var(--wcs-com-nav-submenu-mobile-spacing-left)}}@media (min-width: 576px){:host{height:100%;padding-bottom:unset}:host .menu-button{display:flex;align-items:center;height:100%;cursor:pointer;user-select:none;font-weight:unset;padding-left:unset}:host .menu-button:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-button-focus-outline-color);outline-offset:0.1rem;border-radius:2px}@supports not selector(.menu-button:focus-visible){:host{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-button-focus-outline-color);outline-offset:0.1rem;border-radius:2px}}:host .label{text-transform:unset;cursor:pointer}:host .arrow-icon{display:inline-block;font-family:icons;font-size:0.6rem;line-height:1;box-sizing:border-box}:host .arrow-container{display:unset;margin-left:var(--wcs-com-nav-submenu-button-gap)}:host .arrow-icon:not([data-open]){transform:rotate(90deg)}:host .arrow-icon[data-open]{transform:rotate(-90deg)}:host .drawer{display:none;position:absolute;top:calc(var(--wcs-com-nav-menu-bar-height) + var(--wcs-com-nav-border-width));z-index:8888;left:0;width:100%;box-sizing:border-box;padding:var(--wcs-com-nav-submenu-desktop-menu-padding);background-color:var(--wcs-com-nav-submenu-desktop-menu-background-color);color:var(--wcs-com-nav-submenu-desktop-menu-text-color);box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.08)}:host .drawer-content{display:flex;justify-content:space-between;max-width:62.5%;flex:1}:host .drawer-content div:first-child{flex:0.8}:host .drawer-content div{max-width:260px}:host .menu-items{padding:0 var(--wcs-com-nav-submenu-desktop-menu-items-padding-right) 0 var(--wcs-com-nav-submenu-desktop-menu-items-padding-left);display:flex;flex-direction:column;align-items:flex-end}:host .menu-items ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-submenu-desktop-menu-text-color);font-weight:var(--wcs-com-nav-submenu-desktop-menu-link-font-weight)}:host .menu-items ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-submenu-desktop-menu-text-color);outline-offset:0.1rem;border-radius:2px}:host .drawer-container{display:flex;max-width:var(--wcs-com-content-max-width);margin:0 auto}:host .drawer-container h3{margin:0 0 var(--wcs-com-nav-submenu-desktop-menu-description-gap) 0;font-size:1.5rem;line-height:1.25;font-weight:var(--wcs-com-nav-submenu-desktop-menu-heading-font-weight)}:host .drawer-container p{margin-top:0;margin-bottom:1rem;font-weight:var(--wcs-com-nav-submenu-desktop-menu-description-font-weight);font-size:1rem;line-height:1.375}:host .drawer[data-open]{display:block}:host .drawer-description{display:block}}";const h=b;const p=["title"];const w="WCS-COM-NAV-CATEGORY";const v=class{constructor(t){e(this,t);this.wcsSubmenuOpened=s(this,"wcsSubmenuOpened",7);this.inheritedAttributes={};this.menuItemsId=`wcs-com-nav-submenu-items`;this.label=undefined;this.panelTitle=undefined;this.panelDescription=undefined;this.menuOpen=false;this.currentActiveSizing="desktop"}componentWillLoad(){const e=this.el.querySelectorAll(":scope > wcs-com-nav-category:not([slot])");u(e,w);this.inheritedAttributes=Object.assign(Object.assign({},a(this.el)),i(this.el,p))}componentDidLoad(){if(!this.resizeObserver){this.resizeObserver=l(this);this.resizeObserver.observe(document.body)}}onWindowClickEvent(e){if(this.menuOpen)this.menuOpen=false}onSubmenuOpened(e){if(e.detail.menuElement!==this.el){this.menuOpen=false}}onEscapeKeyDown(e){if(c(e)&&this.menuOpen){this.menuOpen=false}}async setAriaAttribute(e,s){r(this.nativeButton,e,s)}async close(){this.menuOpen=false}async open(){this.menuOpen=true}onClick(e){e.stopPropagation();this.wcsSubmenuOpened.emit({menuElement:this.el})}handleMenuItemsKeyDown(e){if(m(e)||d(e)){this.handleMenuItemsClick(e)}}handleMenuItemsClick(e){if(e.target.tagName==="A"){this.close()}}wcsCategoryItemClickedHandler(e){this.close()}disconnectedCallback(){var e;(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect()}render(){return t(n,{key:"e6de47cc3e8d11be47b32229dc74a58aaf2f23c4",onClick:e=>this.onClick(e),role:"listitem","data-open":this.menuOpen},this.currentActiveSizing==="mobile"?t("h2",{role:"presentation",class:"menu-button"},t("span",{class:"label"},this.label),t("span",{class:"arrow-container"},t("span",{class:"arrow-icon","data-open":this.menuOpen},""))):t("button",Object.assign({onClick:e=>this.menuOpen=!this.menuOpen,"aria-expanded":this.menuOpen?"true":"false","aria-controls":this.menuItemsId,class:"menu-button",ref:e=>this.nativeButton=e},this.inheritedAttributes),t("span",{class:"label"},this.label),t("span",{class:"arrow-container"},t("span",{"aria-hidden":"true",class:"arrow-icon","data-open":this.menuOpen},""))),t("div",{key:"99667d527d33591f69d9591ca039a8b416322bc5",class:"drawer","data-open":this.menuOpen,tabIndex:-1},t("div",{key:"cece9395bfb103342f9f54fc89bc207ccb18db9c",class:"drawer-container"},t("div",{key:"19482a5a7393852da570431292c0f0cde86cfdcd",class:"drawer-content"},t("div",{key:"85387b5371209178cb451065ddd9124143bb0112",class:"drawer-description"},t("h3",{key:"4692b2d757408142da7357cddcfb55f8efa154e7"},this.panelTitle),t("p",{key:"e21e9eda294bac55a85e16e82178e9ad127907f4"},this.panelDescription)),t("div",{key:"984f302624daf4341fbb3236cde16ff7e640f458",role:"list","aria-label":this.label,id:this.menuItemsId,class:"menu-items",onClick:e=>this.handleMenuItemsClick(e),onKeyDown:e=>this.handleMenuItemsKeyDown(e)},t("slot",{key:"286906e6ab84bed9d990eb4cbb10fea119a9d060"}))))))}get el(){return o(this)}};v.style=h;export{v as wcs_com_nav_submenu};
+//# sourceMappingURL=p-7f5eea6a.entry.js.map

package/dist/wcs/{p-e56b9ce2.entry.js → p-882886ae.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as e,H as i}from"./p-32e583ea.js";const c=":host{--wcs-list-item-padding:var(--wcs-semantic-spacing-large);--wcs-list-item-border-width:var(--wcs-semantic-border-width-default);--wcs-list-item-border-color:var(--wcs-semantic-color-border-secondary);--wcs-list-item-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-list-item-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-list-item-background-color-active:var(--wcs-semantic-color-background-action-secondary-selected-default);--wcs-list-item-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-list-item-title-color:var(--wcs-semantic-color-text-primary);--wcs-list-item-title-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-list-item-title-line-height:var(--wcs-semantic-font-line-height-medium);--wcs-list-item-title-margin-bottom:var(--wcs-semantic-spacing-base);--wcs-list-item-icon-color:var(--wcs-semantic-color-text-secondary);--wcs-list-item-icon-margin-right:var(--wcs-semantic-spacing-large);--wcs-list-item-actions-margin-left:var(--wcs-semantic-spacing-base);display:flex;padding:var(--wcs-list-item-padding);border:solid var(--wcs-list-item-border-width) var(--wcs-list-item-border-color);margin-bottom:calc(-1 * var(--wcs-list-item-border-width));background-color:var(--wcs-list-item-background-color-default)}:host(:hover){background-color:var(--wcs-list-item-background-color-hover);transition:var(--wcs-list-item-transition-duration)}:host([activated]){background-color:var(--wcs-list-item-background-color-active)}::slotted([slot=title]){color:var(--wcs-list-item-title-color);margin-bottom:var(--wcs-list-item-title-margin-bottom);line-height:var(--wcs-list-item-title-line-height);font-weight:var(--wcs-list-item-title-font-weight);font-family:inherit}::slotted([slot=icon]){color:var(--wcs-list-item-icon-color);margin-right:var(--wcs-list-item-icon-margin-right)}::slotted([slot=actions]){margin-left:var(--wcs-list-item-actions-margin-left)}.content{display:flex;flex-direction:column;flex-grow:1}.header{display:flex;justify-content:space-between}";const a=c;const s=class{constructor(e){t(this,e);this.activated=false}render(){return e(i,{key:"12f53246cdb5922136d782f186573f3558bebbed"},e("slot",{key:"e03247aafa44501292b6c86d58455dc91240151c",name:"icon"}),e("div",{key:"24b4b6b485457e2c37001360f55ce1f4e843366e",class:"content"},e("div",{key:"736464f3f43ccbdd2a204c3a7b54b78f8ef79c4e",class:"header"},e("div",{key:"13da0ca922bf545f5610326f5abfc135b66389c5"},e("slot",{key:"1eb08b7d5aa3bef934f39527204f2633f51325df",name:"title"}),e("slot",{key:"3d506707345797e7e40246b18dc0aac557726d3c",name:"properties"})),e("slot",{key:"1a2afea410fe835bc8570e10e5f72a044d7a0218",name:"actions"})),e("slot",{key:"b0e4e3ed4cb20abb4d80ac7ff8893cd7b6311aec",name:"description"})))}};s.style=a;export{s as wcs_list_item};
-//# sourceMappingURL=p-e56b9ce2.entry.js.map
+import{r as t,h as e,H as i}from"./p-32e583ea.js";const c=":host{--wcs-list-item-padding:var(--wcs-semantic-spacing-large);--wcs-list-item-border-width:var(--wcs-semantic-border-width-default);--wcs-list-item-border-color:var(--wcs-semantic-color-border-secondary);--wcs-list-item-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-list-item-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-list-item-background-color-active:var(--wcs-semantic-color-background-action-secondary-selected-default);--wcs-list-item-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);--wcs-list-item-title-color:var(--wcs-semantic-color-text-primary);--wcs-list-item-title-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-list-item-title-line-height:var(--wcs-semantic-font-line-height-medium);--wcs-list-item-title-margin-bottom:var(--wcs-semantic-spacing-base);--wcs-list-item-icon-color:var(--wcs-semantic-color-text-secondary);--wcs-list-item-icon-margin-right:var(--wcs-semantic-spacing-large);--wcs-list-item-actions-margin-left:var(--wcs-semantic-spacing-base);display:flex;padding:var(--wcs-list-item-padding);border:solid var(--wcs-list-item-border-width) var(--wcs-list-item-border-color);margin-bottom:calc(-1 * var(--wcs-list-item-border-width));background-color:var(--wcs-list-item-background-color-default)}:host(:hover){background-color:var(--wcs-list-item-background-color-hover);transition:var(--wcs-list-item-transition-duration)}:host([activated]){background-color:var(--wcs-list-item-background-color-active)}::slotted([slot=title]){color:var(--wcs-list-item-title-color);margin-bottom:var(--wcs-list-item-title-margin-bottom);line-height:var(--wcs-list-item-title-line-height);font-weight:var(--wcs-list-item-title-font-weight);font-family:inherit}::slotted([slot=icon]){color:var(--wcs-list-item-icon-color);margin-right:var(--wcs-list-item-icon-margin-right)}::slotted([slot=actions]){margin-left:var(--wcs-list-item-actions-margin-left)}.content{display:flex;flex-direction:column;flex-grow:1}.header{display:flex;justify-content:space-between}";const a=c;const s=class{constructor(e){t(this,e);this.activated=false}render(){return e(i,{key:"f835a0a24bfdfeadeb60a29b73f589caf66abd19"},e("slot",{key:"dc932c86fef704e6c799b69b9a93b97b9e6c0cc3",name:"icon"}),e("div",{key:"93c6cfef8e8488e63f9306bb786eaf262b7a8587",class:"content"},e("div",{key:"6181d61f98684a6df0c4d262264a001c32555e81",class:"header"},e("div",{key:"ce07788c1aaf9718cf318629f0b9ab06d919a33d"},e("slot",{key:"6eda723480b519381d0f9ad4eebfca78b5f1a1a6",name:"title"}),e("slot",{key:"3d484c4b521d2bf1315e85be71911d27f13be239",name:"properties"})),e("slot",{key:"f20cdf8cc69b3a7c773e0f0d7013dd1affc5b962",name:"actions"})),e("slot",{key:"f17ffd62de7ed2c2ded7c75608ce574cdd839ff3",name:"description"})))}};s.style=a;export{s as wcs_list_item};
+//# sourceMappingURL=p-882886ae.entry.js.map

package/dist/wcs/p-8fd515a3.entry.js

@@ -0,0 +1,2 @@
+import{r as a,h as s,H as c}from"./p-32e583ea.js";const e=":host{--wcs-card-body-padding:var(--wcs-semantic-spacing-base-300);--wcs-card-body-gap:var(--wcs-semantic-spacing-base);flex:1 1 auto;padding:var(--wcs-card-body-padding)}:host(.horizontal),:host(.vertical){display:flex;flex-direction:column;gap:var(--wcs-card-body-gap)}::slotted(p){margin:0}";const t=e;const d=class{constructor(s){a(this,s);this.orientation=null}async setOrientation(a){this.orientation=a}render(){return s(c,{key:"cae1b8af34a96e747e3e8b281d7bff90d2e55f40",class:this.orientation},s("slot",{key:"d62727e6291f2e0913ac3dd29b44bda542101687"}))}};d.style=t;export{d as wcs_card_body};
+//# sourceMappingURL=p-8fd515a3.entry.js.map

package/dist/wcs/{p-352e1f99.entry.js → p-95f35254.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as i,H as t}from"./p-32e583ea.js";const s=":host{--wcs-skeleton-width:100%;--wcs-skeleton-height:100%;--wcs-skeleton-min-height:1rem;--wcs-skeleton-background-color:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);--wcs-skeleton-animation-duration:var(--wcs-semantic-motion-duration-animation-base);display:block;position:relative;overflow:hidden}:host span{display:flex;flex:1 1 auto;height:var(--wcs-skeleton-height);width:var(--wcs-skeleton-width);min-height:var(--wcs-skeleton-min-height);background:var(--wcs-skeleton-background-color);background-size:400% 100%}:host([animation=glide]) span{animation:glide var(--wcs-skeleton-animation-duration) ease-in-out infinite}:host([animation=pulse]){animation:pulse var(--wcs-skeleton-animation-duration) ease-in-out infinite}@keyframes glide{from{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}:host{--wcs-skeleton-circle-border-radius:var(--wcs-semantic-border-radius-full);aspect-ratio:1/1;border-radius:var(--wcs-skeleton-circle-border-radius)}";const a=s;const o=class{constructor(i){e(this,i);this.animation="glide";this.radius=50}render(){return i(t,{key:"0d5704fdc6c41256665994d2a2d63c525e14ee6c",style:{width:`${this.radius}px`,height:`${this.radius}px`}},i("span",{key:"e2712e309be66af8be9fd3aee2b34ee20b67a980","aria-hidden":"true"}))}};o.style=a;export{o as wcs_skeleton_circle};
-//# sourceMappingURL=p-352e1f99.entry.js.map
+import{r as e,h as i,H as a}from"./p-32e583ea.js";const t=":host{--wcs-skeleton-width:100%;--wcs-skeleton-height:100%;--wcs-skeleton-min-height:1rem;--wcs-skeleton-background-color:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);--wcs-skeleton-animation-duration:var(--wcs-semantic-motion-duration-animation-base);display:block;position:relative;overflow:hidden}:host span{display:flex;flex:1 1 auto;height:var(--wcs-skeleton-height);width:var(--wcs-skeleton-width);min-height:var(--wcs-skeleton-min-height);background:var(--wcs-skeleton-background-color);background-size:400% 100%}:host([animation=glide]) span{animation:glide var(--wcs-skeleton-animation-duration) ease-in-out infinite}:host([animation=pulse]){animation:pulse var(--wcs-skeleton-animation-duration) ease-in-out infinite}@keyframes glide{from{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}:host{--wcs-skeleton-circle-border-radius:var(--wcs-semantic-border-radius-full);aspect-ratio:1/1;border-radius:var(--wcs-skeleton-circle-border-radius)}";const s=t;const o=class{constructor(i){e(this,i);this.animation="glide";this.radius=50}render(){return i(a,{key:"d6af1043a00360a88e30dc8ba5f5ad93a92e97f0",style:{width:`${this.radius}px`,height:`${this.radius}px`}},i("span",{key:"aa8281b154fe9ef96513cecbcd3e3b23fabf7192","aria-hidden":"true"}))}};o.style=s;export{o as wcs_skeleton_circle};
+//# sourceMappingURL=p-95f35254.entry.js.map

package/dist/wcs/{p-b0a6eec6.entry.js → p-9d47a628.entry.js}

@@ -1,2 +1,2 @@
-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-52d77e1f.js";import{g as n}from"./p-a7468a3a.js";const d=':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 l=d;const h=["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-${b++}`;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,h))}async setAriaAttribute(c,s){r(this.nativeInput,c,s)}async getLabel(){return n(this.el)}render(){return t(e,{key:"cedd87377ee17731f5422f42117321f23d944281"},t("label",{key:"1bb8e511921d30ccf6153738eb6a0844ea3f4082",htmlFor:this.name,class:"wcs-container","aria-disabled":this.disabled},t("input",Object.assign({key:"b05af8decb4cd3c23b2c814fd849612370c896e6",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:"fcc0664435cb4d40d6fd95571ff233ae44806f58",class:"wcs-checkmark"}),t("span",{key:"67a951e606c537e911352799de289e4eefc87e23",class:"text"},t("slot",{key:"dbe2ced66c88f5184144661215c9332d464c01fc"}))))}static get delegatesFocus(){return true}get el(){return i(this)}};let b=0;w.style=l;export{w as wcs_switch};
-//# sourceMappingURL=p-b0a6eec6.entry.js.map
+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-71af107c.js";import{g as n}from"./p-a7468a3a.js";const d=':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 l=d;const h=["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-${b++}`;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,h))}async setAriaAttribute(c,s){r(this.nativeInput,c,s)}async getLabel(){return n(this.el)}render(){return t(e,{key:"84f13bc693503d19ff543c0ff9d915b5759a74c6"},t("label",{key:"f0230dcdccdcb5673f3f250850427383ef8962eb",htmlFor:this.name,class:"wcs-container","aria-disabled":this.disabled},t("input",Object.assign({key:"ca40b1867d863bb3a93d48faf12e21bca9349c45",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:"b0fa80ef305db1fc2ba59f00502968b36c6a3b27",class:"wcs-checkmark"}),t("span",{key:"f0ad8d08234489bd9a8f6df9c98f1bc8c1267166",class:"text"},t("slot",{key:"ff27b093741e17a5b0440cd5cfc4eb09a14eee49"}))))}static get delegatesFocus(){return true}get el(){return i(this)}};let b=0;w.style=l;export{w as wcs_switch};
+//# sourceMappingURL=p-9d47a628.entry.js.map

package/dist/wcs/p-9d683786.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as s,H as a}from"./p-32e583ea.js";const c=class{constructor(s){e(this,s);this.columnId=undefined;this.rowId=undefined}render(){return s(a,{key:"aac258f291f690ca8e124414d265f5fec7fc6a56",slot:this.columnId+"-"+this.rowId},s("slot",{key:"7371fc04b30f46ada2ae94c8b4c64d6e0aa07789"}))}};export{c as wcs_grid_custom_cell};
+//# sourceMappingURL=p-9d683786.entry.js.map

package/dist/wcs/{p-22620c69.entry.js → p-a45a1f25.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as r,H as s,g as o}from"./p-32e583ea.js";import{i as t}from"./p-a0f32ead.js";import{z as i,i as c,a,s as l}from"./p-52d77e1f.js";import{i as d}from"./p-a7468a3a.js";const f=":host{--wcs-error-color:var(--wcs-semantic-color-text-critical);--wcs-error-font-size:var(--wcs-semantic-font-size-caption-2);--wcs-error-font-weight:var(--wcs-semantic-font-weight-book);color:var(--wcs-error-color);font-size:var(--wcs-error-font-size);font-weight:var(--wcs-error-font-weight)}";const n=f;const u=class{constructor(r){e(this,r)}render(){return r(s,{key:"7dffcb3487f7210c5c9a45af709fc942a1410679",role:"alert",slot:"error"},r("slot",{key:"251fbdc26fe58be4296328c4ebaed77329c6c507"}))}};u.style=n;const w=":host{--wcs-form-field-gap:var(--wcs-semantic-spacing-small);--wcs-form-field-prefix-suffix-border-radius:var(--wcs-semantic-border-radius-base);--wcs-form-field-prefix-icon-color:var(--wcs-semantic-color-foreground-primary);--wcs-form-field-prefix-value-color:var(--wcs-semantic-color-text-inverse);--wcs-form-field-prefix-placeholder-color:var(--wcs-semantic-color-text-inverse);display:flex;flex-direction:column;gap:var(--wcs-form-field-gap);}:host .input-container{display:flex}:host ::slotted([slot=prefix]){--wcs-select-value-color:var(--wcs-semantic-color-text-inverse);--wcs-select-placeholder-color:var(--wcs-semantic-color-text-inverse);--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-default);--wcs-select-control-arrow-color:var(--wcs-form-field-prefix-icon-color);--wcs-select-control-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);--wcs-select-control-border-width-default:0;--wcs-select-control-border-style-focus:dashed;--wcs-select-control-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-native-select-value-color:var(--wcs-semantic-color-text-inverse);--wcs-native-select-placeholder-color:var(--wcs-semantic-color-text-inverse);--wcs-native-select-arrow-color:var(--wcs-form-field-prefix-icon-color);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-default);--wcs-native-select-border-width:0;--wcs-native-select-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-native-select-border-style-focus:dashed;--wcs-native-select-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);--wcs-native-select-option-color:var(--wcs-semantic-color-text-inverse);--wcs-button-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius)}:host ::slotted([slot=suffix]){--wcs-button-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;--wcs-select-control-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;--wcs-native-select-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0}::slotted([slot=prefix][disabled]),::slotted([slot=prefix]:disabled),::slotted([slot=prefix][aria-disabled=true]),::slotted([slot=prefix][data-disabled]){--wcs-semantic-color-background-control-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-semantic-color-text-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-select-value-color:var(--wcs-semantic-color-text-disabled);--wcs-select-placeholder-color:var(--wcs-semantic-color-text-disabled);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-native-select-placeholder-color:var(--wcs-semantic-color-text-disabled);--wcs-native-select-value-color:var(--wcs-semantic-color-text-disabled)}::slotted([slot=prefix]:hover:not([disabled]):not([data-disabled])){--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-hover);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-hover)}::slotted([slot=prefix]:active:not([disabled]):not([data-disabled])){--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-press);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-press)}.input-container{display:flex}::slotted(wcs-select:not([slot=prefix])){width:100%}::slotted(wcs-native-select:not([slot=prefix])){width:100%}:host(.has-prefix) ::slotted(:not([slot=prefix])){--wcs-input-border-radius-left:0;--wcs-select-control-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;--wcs-native-select-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0}:host(.has-suffix) ::slotted(:not([slot=suffix])){--wcs-input-border-radius-right:0;--wcs-select-control-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);--wcs-native-select-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius)}:host(.has-prefix.has-suffix) ::slotted(:not([slot=prefix]):not([slot=suffix])){--wcs-input-border-radius-left:0;--wcs-input-border-radius-right:0;--wcs-select-control-border-radius:0;--wcs-native-select-border-radius:0}";const b=w;const v=class{constructor(r){e(this,r);this.isError=false;this.hasPrefix=false;this.hasSuffix=false;this.spiedElement=undefined}componentWillLoad(){this.hasSuffix=this.el.querySelector("[slot=suffix]")!==null;this.hasPrefix=this.el.querySelector("[slot=prefix]")!==null}componentDidLoad(){this.initSpiedElement();this.addRequiredMarkerToLabel();this.updateErrorStateOnInput(this.isError)}isErrorChange(e){this.updateErrorStateOnInput(e);this.updateAriaAttributes()}updateErrorStateOnInput(e){if(this.spiedElementIsOfType("wcs-input","wcs-textarea")){if(e){this.spiedElement.setAttribute("state","error")}else{this.spiedElement.setAttribute("state","initial")}}}spiedElementIsOfType(...e){var r;for(const s of e){if(((r=this.spiedElement)===null||r===void 0?void 0:r.tagName)===s.toUpperCase())return true}return false}addRequiredMarkerToLabel(){var e;const r=this.el.querySelector("wcs-label");this.observer=new MutationObserver((e=>{var s;const o=e.filter((e=>e.attributeName==="required"))[0];if(o){this.updateLabelRequiredFlag((s=this.spiedElement)===null||s===void 0?void 0:s.hasAttribute("required"),r)}}));if(this.spiedElement){this.observer.observe(this.spiedElement,{attributes:true})}const s=(e=this.spiedElement)===null||e===void 0?void 0:e.hasAttribute("required");this.updateLabelRequiredFlag(s,r)}initSpiedElement(){var e,r;const s=["wcs-input","wcs-select","wcs-native-select","wcs-textarea","wcs-radio-group","wcs-switch","wcs-checkbox","wcs-native-select","wcs-counter"];this.spiedElement=(e=this.el.shadowRoot.querySelector("slot:not([name])"))===null||e===void 0?void 0:e.assignedElements().filter((e=>[...s,"SLOT"].map((e=>e.toUpperCase())).indexOf(e.nodeName)!==-1))[0];if(((r=this.spiedElement)===null||r===void 0?void 0:r.tagName)==="SLOT"){this.spiedElement=this.spiedElement.assignedElements().filter((e=>s.map((e=>e.toUpperCase())).indexOf(e.nodeName)!==-1))[0]}if(!this.spiedElement){console.warn("Form-field component support only "+s.toString()+". Some features may not work with the provided component.");return}}async updateAriaAttributes(){if(t(this.spiedElement)){const e=[];if(d(this.spiedElement)){const r=await this.spiedElement.getLabel();const s=`${this.label||""} ${r||""}`.trim();if(s){e.push(i(s))}}else{if(this.label){e.push(i(this.label))}}if(this.description){e.push(i(this.description))}if(this.isError){this.spiedElement.setAriaAttribute("aria-invalid","true");if(this.error){e.push(i(this.error))}}else{this.spiedElement.setAriaAttribute("aria-invalid","false")}this.spiedElement.setAriaAttribute("aria-label",e.length>0?e.join(" "):null)}}get label(){var e;return((e=this.el.querySelector("wcs-label"))===null||e===void 0?void 0:e.textContent)||null}get description(){var e;return((e=this.el.querySelector("wcs-hint"))===null||e===void 0?void 0:e.textContent)||null}get error(){var e;return((e=this.el.querySelector("wcs-error"))===null||e===void 0?void 0:e.textContent)||null}updateLabelRequiredFlag(e,r){if(e&&r){r.setAttribute("required","true")}else if(!e&&r){r.removeAttribute("required")}}disconnectedCallback(){var e;(e=this.observer)===null||e===void 0?void 0:e.disconnect()}render(){let e="";const o=this.isError;if(this.hasSuffix){e+=" has-suffix"}if(this.hasPrefix){e+=" has-prefix"}return r(s,{key:"d8a5d2023add393b0a31173351a3d16d9fa0b1a6",class:e},r("slot",{key:"3f347f4dce239c0106fbbe52bdc217fa37c05d01",name:"label"}),r("div",{key:"d6cb92104d72530059ecb9a383ff832afb0c2141",class:"input-container"},r("slot",{key:"8be28f721ff351d41dced80c97c0e34337703d0e",name:"prefix"}),r("slot",{key:"cc58d463877a1e8513736a987286e965870e096d",onSlotchange:()=>this.onFormInputSlotChange()}),r("slot",{key:"898709cfcf0ae1cd43dabd55547d62199d6230c9",name:"suffix"})),o?r("slot",{name:"error"}):"",r("slot",{key:"aaf2d35dfbdfda47b440f96d7f9aa22cb09f6a06",name:"messages"}))}onFormInputSlotChange(){this.initSpiedElement();this.updateAriaAttributes();this.addRequiredMarkerToLabel();this.updateErrorStateOnInput(this.isError)}get el(){return o(this)}static get watchers(){return{isError:["isErrorChange"]}}};v.style=b;const h=':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-flex;align-items:center;gap:var(--wcs-label-gap);color:var(--wcs-label-color);font-weight:var(--wcs-label-font-weight)}';const p=h;const m=["title"];const x=class{constructor(r){e(this,r);this.inheritedAttributes={};this.required=false}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},c(this.el)),a(this.el,m))}async setAriaAttribute(e,r){l(this.nativeLabel,e,r)}render(){return r(s,{key:"62f8ca37637cc792483f24476dbbd63ff3c077e5",slot:"label"},r("label",Object.assign({key:"3cef9a517d57652b75af3157d2c96a34693b258f",ref:e=>this.nativeLabel=e},this.inheritedAttributes),r("slot",{key:"a614b379b45ac3d4cc1d58c45d39b64c0312c1d7"})))}get el(){return o(this)}};x.style=p;export{u as wcs_error,v as wcs_form_field,x as wcs_label};
-//# sourceMappingURL=p-22620c69.entry.js.map
+import{r as e,h as r,H as s,g as t}from"./p-32e583ea.js";import{i as o}from"./p-a0f32ead.js";import{y as i,i as c,a,s as l}from"./p-71af107c.js";import{i as d}from"./p-a7468a3a.js";const n=":host{--wcs-error-color:var(--wcs-semantic-color-text-critical);--wcs-error-font-size:var(--wcs-semantic-font-size-caption-2);--wcs-error-font-weight:var(--wcs-semantic-font-weight-book);color:var(--wcs-error-color);font-size:var(--wcs-error-font-size);font-weight:var(--wcs-error-font-weight)}";const f=n;const u=class{constructor(r){e(this,r)}render(){return r(s,{key:"89cbcbdb9057296fb11e99bd6f92b7b92bdad988",role:"alert",slot:"error"},r("slot",{key:"81f37240e47e345a01901772bd095ee19d793963"}))}};u.style=f;const w=":host{--wcs-form-field-gap:var(--wcs-semantic-spacing-small);--wcs-form-field-prefix-suffix-border-radius:var(--wcs-semantic-border-radius-base);--wcs-form-field-prefix-icon-color:var(--wcs-semantic-color-foreground-primary);--wcs-form-field-prefix-value-color:var(--wcs-semantic-color-text-inverse);--wcs-form-field-prefix-placeholder-color:var(--wcs-semantic-color-text-inverse);display:flex;flex-direction:column;gap:var(--wcs-form-field-gap);}:host .input-container{display:flex}:host ::slotted([slot=prefix]){--wcs-select-value-color:var(--wcs-semantic-color-text-inverse);--wcs-select-placeholder-color:var(--wcs-semantic-color-text-inverse);--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-default);--wcs-select-control-arrow-color:var(--wcs-form-field-prefix-icon-color);--wcs-select-control-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);--wcs-select-control-border-width-default:0;--wcs-select-control-border-style-focus:dashed;--wcs-select-control-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-native-select-value-color:var(--wcs-semantic-color-text-inverse);--wcs-native-select-placeholder-color:var(--wcs-semantic-color-text-inverse);--wcs-native-select-arrow-color:var(--wcs-form-field-prefix-icon-color);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-default);--wcs-native-select-border-width:0;--wcs-native-select-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-native-select-border-style-focus:dashed;--wcs-native-select-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);--wcs-native-select-option-color:var(--wcs-semantic-color-text-inverse);--wcs-button-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius)}:host ::slotted([slot=suffix]){--wcs-button-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;--wcs-select-control-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;--wcs-native-select-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0}::slotted([slot=prefix][disabled]),::slotted([slot=prefix]:disabled),::slotted([slot=prefix][aria-disabled=true]),::slotted([slot=prefix][data-disabled]){--wcs-semantic-color-background-control-disabled:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-semantic-color-text-disabled:var(--wcs-semantic-color-foreground-disabled);--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-select-value-color:var(--wcs-semantic-color-text-disabled);--wcs-select-placeholder-color:var(--wcs-semantic-color-text-disabled);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-disabled);--wcs-native-select-placeholder-color:var(--wcs-semantic-color-text-disabled);--wcs-native-select-value-color:var(--wcs-semantic-color-text-disabled)}::slotted([slot=prefix]:hover:not([disabled]):not([data-disabled])){--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-hover);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-hover)}::slotted([slot=prefix]:active:not([disabled]):not([data-disabled])){--wcs-select-control-background-color:var(--wcs-semantic-color-background-action-primary-press);--wcs-native-select-background-color:var(--wcs-semantic-color-background-action-primary-press)}.input-container{display:flex}::slotted(wcs-select:not([slot=prefix])){width:100%}::slotted(wcs-native-select:not([slot=prefix])){width:100%}:host(.has-prefix) ::slotted(:not([slot=prefix])){--wcs-input-border-radius-left:0;--wcs-select-control-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;--wcs-native-select-border-radius:0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0}:host(.has-suffix) ::slotted(:not([slot=suffix])){--wcs-input-border-radius-right:0;--wcs-select-control-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);--wcs-native-select-border-radius:var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius)}:host(.has-prefix.has-suffix) ::slotted(:not([slot=prefix]):not([slot=suffix])){--wcs-input-border-radius-left:0;--wcs-input-border-radius-right:0;--wcs-select-control-border-radius:0;--wcs-native-select-border-radius:0}";const b=w;const v=class{constructor(r){e(this,r);this.isError=false;this.hasPrefix=false;this.hasSuffix=false;this.spiedElement=undefined}componentWillLoad(){this.hasSuffix=this.el.querySelector("[slot=suffix]")!==null;this.hasPrefix=this.el.querySelector("[slot=prefix]")!==null}componentDidLoad(){this.initSpiedElement();this.addRequiredMarkerToLabel();this.updateErrorStateOnInput(this.isError)}isErrorChange(e){this.updateErrorStateOnInput(e);this.updateAriaAttributes()}updateErrorStateOnInput(e){if(this.spiedElementIsOfType("wcs-input","wcs-textarea")){if(e){this.spiedElement.setAttribute("state","error")}else{this.spiedElement.setAttribute("state","initial")}}}spiedElementIsOfType(...e){var r;for(const s of e){if(((r=this.spiedElement)===null||r===void 0?void 0:r.tagName)===s.toUpperCase())return true}return false}addRequiredMarkerToLabel(){var e;const r=this.el.querySelector("wcs-label");this.observer=new MutationObserver((e=>{var s;const t=e.filter((e=>e.attributeName==="required"))[0];if(t){this.updateLabelRequiredFlag((s=this.spiedElement)===null||s===void 0?void 0:s.hasAttribute("required"),r)}}));if(this.spiedElement){this.observer.observe(this.spiedElement,{attributes:true})}const s=(e=this.spiedElement)===null||e===void 0?void 0:e.hasAttribute("required");this.updateLabelRequiredFlag(s,r)}initSpiedElement(){var e,r;const s=["wcs-input","wcs-select","wcs-native-select","wcs-textarea","wcs-radio-group","wcs-switch","wcs-checkbox","wcs-native-select","wcs-counter"];this.spiedElement=(e=this.el.shadowRoot.querySelector("slot:not([name])"))===null||e===void 0?void 0:e.assignedElements().filter((e=>[...s,"SLOT"].map((e=>e.toUpperCase())).indexOf(e.nodeName)!==-1))[0];if(((r=this.spiedElement)===null||r===void 0?void 0:r.tagName)==="SLOT"){this.spiedElement=this.spiedElement.assignedElements().filter((e=>s.map((e=>e.toUpperCase())).indexOf(e.nodeName)!==-1))[0]}if(!this.spiedElement){console.warn("Form-field component support only "+s.toString()+". Some features may not work with the provided component.");return}}async updateAriaAttributes(){if(o(this.spiedElement)){const e=[];if(d(this.spiedElement)){const r=await this.spiedElement.getLabel();const s=`${this.label||""} ${r||""}`.trim();if(s){e.push(i(s))}}else{if(this.label){e.push(i(this.label))}}if(this.description){e.push(i(this.description))}if(this.isError){this.spiedElement.setAriaAttribute("aria-invalid","true");if(this.error){e.push(i(this.error))}}else{this.spiedElement.setAriaAttribute("aria-invalid","false")}this.spiedElement.setAriaAttribute("aria-label",e.length>0?e.join(" "):null)}}get label(){var e;return((e=this.el.querySelector("wcs-label"))===null||e===void 0?void 0:e.textContent)||null}get description(){var e;return((e=this.el.querySelector("wcs-hint"))===null||e===void 0?void 0:e.textContent)||null}get error(){var e;return((e=this.el.querySelector("wcs-error"))===null||e===void 0?void 0:e.textContent)||null}updateLabelRequiredFlag(e,r){if(e&&r){r.setAttribute("required","true")}else if(!e&&r){r.removeAttribute("required")}}disconnectedCallback(){var e;(e=this.observer)===null||e===void 0?void 0:e.disconnect()}render(){let e="";const t=this.isError;if(this.hasSuffix){e+=" has-suffix"}if(this.hasPrefix){e+=" has-prefix"}return r(s,{key:"9cfd2ef4834a62bfe77366b99ec637b71008178e",class:e},r("slot",{key:"26a0f59515e28ec045e8ccee2e74e143466ca183",name:"label"}),r("div",{key:"338b49d772bc0b9ec2621a783a051e4bdc8096bc",class:"input-container"},r("slot",{key:"f51bf6dc00f529f70a8ccf37ff54c29093fb1e20",name:"prefix"}),r("slot",{key:"ccab32ee521ec419c89e561d4ac099a0953b6188",onSlotchange:()=>this.onFormInputSlotChange()}),r("slot",{key:"b54d01ac5b4f7f6761923b94c436b2728ff036e5",name:"suffix"})),t?r("slot",{name:"error"}):"",r("slot",{key:"40665251b2e5acc2fb8e31a4e8b46d34959b74e1",name:"messages"}))}onFormInputSlotChange(){this.initSpiedElement();this.updateAriaAttributes();this.addRequiredMarkerToLabel();this.updateErrorStateOnInput(this.isError)}get el(){return t(this)}static get watchers(){return{isError:["isErrorChange"]}}};v.style=b;const h=":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)}label{display:inline-block;color:var(--wcs-label-color);font-weight:var(--wcs-label-font-weight)}label ::slotted(wcs-mat-icon){display:inline-flex;vertical-align:text-top;margin-left:var(--wcs-label-gap)}.required-marker{margin-left:4px;vertical-align:text-top;color:var(--wcs-label-required-marker-color);font-weight:var(--wcs-label-font-weight)}";const p=h;const m=["title"];const x=class{constructor(r){e(this,r);this.inheritedAttributes={};this.required=false}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},c(this.el)),a(this.el,m))}async setAriaAttribute(e,r){l(this.nativeLabel,e,r)}render(){return r(s,{key:"d5fff8ed9237d97dee4683e4994084bec2f72503",slot:"label"},r("label",Object.assign({key:"418f9021685cb0f942f6e44557ad237be1a3019e",ref:e=>this.nativeLabel=e},this.inheritedAttributes),r("slot",{key:"9cde60902ca12c8b0301f247c22bbd8581f988a3"}),this.required&&r("span",{key:"b12767c7901b18e24fcf422ba0ed1ef43df21641","aria-hidden":"true",class:"required-marker"},"*")))}get el(){return t(this)}};x.style=p;export{u as wcs_error,v as wcs_form_field,x as wcs_label};
+//# sourceMappingURL=p-a45a1f25.entry.js.map

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

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