wcs-core 7.5.1 → 7.6.0

package/bundle/wcs-editable-field.js.map

@@ -1 +1 @@
-{"version":3,"names":["WcsEditableFieldSizeValues","isWcsEditableFieldSize","size","includes","editableFieldCss","WcsEditableFieldStyle0","EditableComponentState","EDIT_ARIA_LABEL","DELAY_BEFORE_FOCUS","EditableField","proxyCustomElement","H","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","formatValues","formattedValue","formattedCurrentValue","formatFn","Array","isArray","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    }\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 formatValues() {\n        let formattedValue = this.value;\n        let formattedCurrentValue = this.currentValue;\n        if (this.formatFn) {\n            formattedValue = this.formatFn(this.value);\n            formattedCurrentValue = this.formatFn(this.currentValue);\n        }\n        if (Array.isArray(this.value)) {\n            formattedValue = this.value.join(', ');\n        }\n        if (Array.isArray(this.currentValue)) {\n            formattedCurrentValue = this.currentValue.join(', ');\n        }\n        return {\n            formattedValue: (formattedValue ? (<span>{formattedValue}</span>) : (<span></span>)),\n            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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"}
+{"version":3,"names":["WcsEditableFieldSizeValues","isWcsEditableFieldSize","size","includes","editableFieldCss","WcsEditableFieldStyle0","EditableComponentState","EDIT_ARIA_LABEL","DELAY_BEFORE_FOCUS","EditableField","proxyCustomElement","H","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/bundle/wcs-form-field.js

@@ -1,2 +1,2 @@
-import{F as o,d as s}from"./p-010cf905.js";const t=o;const c=s;export{t as WcsFormField,c as defineCustomElement};
+import{F as o,d as s}from"./p-5ef2bc63.js";const t=o;const c=s;export{t as WcsFormField,c as defineCustomElement};
 //# sourceMappingURL=wcs-form-field.js.map

package/bundle/wcs-galactic-menu.js

@@ -1,2 +1,2 @@
-import{p as e,H as a,h as t,c}from"./p-2bef72c7.js";import{i as o,a as i,s,l as n,b as r}from"./p-2e9b9605.js";import{d as l}from"./p-98bd8a96.js";import{c as d}from"./p-e1fb3625.js";const u=':host{--wcs-galactic-menu-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-galactic-menu-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-gap:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-height:var(--wcs-semantic-size-s);--wcs-galactic-menu-icon-focus-outline-color:var(--wcs-galactic-text-color, white);--wcs-galactic-menu-overlay-color:var(--wcs-semantic-color-text-inverse);--wcs-galactic-menu-overlay-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-galactic-menu-overlay-padding:var(--wcs-semantic-spacing-large);display:flex;align-items:center;box-sizing:border-box;height:var(--wcs-galactic-menu-height);gap:var(--wcs-galactic-menu-gap);padding:0 var(--wcs-galactic-menu-padding-horizontal);background-color:var(--wcs-galactic-menu-background-color)}#menu{display:none;background-color:var(--wcs-galactic-menu-overlay-background-color);color:var(--wcs-galactic-menu-overlay-color);padding:var(--wcs-galactic-menu-overlay-padding);--wcs-semantic-color-border-focus-base:var(--wcs-semantic-color-text-inverse, white)}#menu[data-show]{display:block;z-index:9999}#menu[data-popper-placement^=top]>#arrow{bottom:-4px}#menu[data-popper-placement^=bottom]>#arrow{top:-4px}#menu[data-popper-placement^=left]>#arrow{right:-4px}#menu[data-popper-placement^=right]>#arrow{left:-4px}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit}#arrow{visibility:hidden}#arrow::before{visibility:visible;content:"";transform:rotate(45deg)}button{background:transparent;border:none;color:inherit;cursor:pointer;user-select:none}button:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-galactic-menu-icon-focus-outline-color);outline-offset:0;border-radius:0.1rem}';const m=u;const p=["tabindex","title"];const b=e(class e extends a{constructor(){super();this.__registerHost();this.__attachShadow();this.inheritedAttributes={};this.showPopoverMenu=false;this.text=undefined}componentDidLoad(){this.menu=this.el.shadowRoot.getElementById("toggle-menu-icon");this.tooltip=this.el.shadowRoot.getElementById("menu");this.popper=d(this.menu,this.tooltip,{placement:"bottom-end",modifiers:[{name:"offset",options:{offset:[0,8]}}]})}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},o(this.el)),i(this.el,p))}async setAriaAttribute(e,a){s(this.menuButton,e,a)}onWindowClickEvent(e){if(n(e,this.tooltip)||n(e,this.menu)){return}else{if(this.showPopoverMenu){this.toggleMenu()}}}onKeyDown(e){var a;if(r(e)){e.preventDefault();this.showPopoverMenu=false;(a=this.menuButton)===null||a===void 0?void 0:a.focus()}}toggleMenu(){this.showPopoverMenu=!this.showPopoverMenu}componentDidRender(){if(this.popper){this.popper.update()}}render(){return t(c,{key:"bc460c17b222723b8cc037042cc758f8ca0e50ec"},t("span",{key:"d324ff624a9e5c9f6984134d4091986cac11f18b"},this.text),t("button",Object.assign({key:"7b0160174a249b30e082b9b2a77aca334ee6256a","aria-haspopup":"true","aria-controls":"menu",ref:e=>{this.menuButton=e},"aria-expanded":this.showPopoverMenu?"true":"false"},this.inheritedAttributes,{onClick:e=>this.toggleMenu()}),t("wcs-mat-icon",{key:"96b20053845f5490791ea278c2444392ba630600",id:"toggle-menu-icon",icon:"more_horiz",size:"m"})),t("span",{key:"6f959f220edbf293fe6922f7aaeaab0f213bf736",id:"menu",role:"menu","data-show":this.showPopoverMenu},t("div",{key:"6a05e468d65252ecbb57b421a53be0a0a1974f98",id:"arrow","data-popper-arrow":true}),t("slot",{key:"c9398cbb856d836820ac1cddf3113710eeaff5fb"})))}get el(){return this}static get style(){return m}},[1,"wcs-galactic-menu",{text:[1],showPopoverMenu:[32],setAriaAttribute:[64]},[[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"]]]);function g(){if(typeof customElements==="undefined"){return}const e=["wcs-galactic-menu","wcs-mat-icon"];e.forEach((e=>{switch(e){case"wcs-galactic-menu":if(!customElements.get(e)){customElements.define(e,b)}break;case"wcs-mat-icon":if(!customElements.get(e)){l()}break}}))}const h=b;const f=g;export{h as WcsGalacticMenu,f as defineCustomElement};
+import{p as e,H as a,h as t,c}from"./p-2bef72c7.js";import{i as o,a as i,s,l as n,b as r}from"./p-bf326ae8.js";import{d as l}from"./p-d018450c.js";import{c as d}from"./p-e1fb3625.js";const u=':host{--wcs-galactic-menu-background-color:var(--wcs-semantic-color-background-surface-brand);--wcs-galactic-menu-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-gap:var(--wcs-semantic-spacing-large);--wcs-galactic-menu-height:var(--wcs-semantic-size-s);--wcs-galactic-menu-icon-focus-outline-color:var(--wcs-galactic-text-color, white);--wcs-galactic-menu-overlay-color:var(--wcs-semantic-color-text-inverse);--wcs-galactic-menu-overlay-background-color:var(--wcs-semantic-color-background-surface-inverse);--wcs-galactic-menu-overlay-padding:var(--wcs-semantic-spacing-large);display:flex;align-items:center;box-sizing:border-box;height:var(--wcs-galactic-menu-height);gap:var(--wcs-galactic-menu-gap);padding:0 var(--wcs-galactic-menu-padding-horizontal);background-color:var(--wcs-galactic-menu-background-color)}#menu{display:none;background-color:var(--wcs-galactic-menu-overlay-background-color);color:var(--wcs-galactic-menu-overlay-color);padding:var(--wcs-galactic-menu-overlay-padding);--wcs-semantic-color-border-focus-base:var(--wcs-semantic-color-text-inverse, white)}#menu[data-show]{display:block;z-index:9999}#menu[data-popper-placement^=top]>#arrow{bottom:-4px}#menu[data-popper-placement^=bottom]>#arrow{top:-4px}#menu[data-popper-placement^=left]>#arrow{right:-4px}#menu[data-popper-placement^=right]>#arrow{left:-4px}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit}#arrow{visibility:hidden}#arrow::before{visibility:visible;content:"";transform:rotate(45deg)}button{background:transparent;border:none;color:inherit;cursor:pointer;user-select:none}button:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-galactic-menu-icon-focus-outline-color);outline-offset:0;border-radius:0.1rem}';const m=u;const p=["tabindex","title"];const b=e(class e extends a{constructor(){super();this.__registerHost();this.__attachShadow();this.inheritedAttributes={};this.showPopoverMenu=false;this.text=undefined}componentDidLoad(){this.menu=this.el.shadowRoot.getElementById("toggle-menu-icon");this.tooltip=this.el.shadowRoot.getElementById("menu");this.popper=d(this.menu,this.tooltip,{placement:"bottom-end",modifiers:[{name:"offset",options:{offset:[0,8]}}]})}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},o(this.el)),i(this.el,p))}async setAriaAttribute(e,a){s(this.menuButton,e,a)}onWindowClickEvent(e){if(n(e,this.tooltip)||n(e,this.menu)){return}else{if(this.showPopoverMenu){this.toggleMenu()}}}onKeyDown(e){var a;if(r(e)){e.preventDefault();this.showPopoverMenu=false;(a=this.menuButton)===null||a===void 0?void 0:a.focus()}}toggleMenu(){this.showPopoverMenu=!this.showPopoverMenu}componentDidRender(){if(this.popper){this.popper.update()}}render(){return t(c,{key:"bc460c17b222723b8cc037042cc758f8ca0e50ec"},t("span",{key:"d324ff624a9e5c9f6984134d4091986cac11f18b"},this.text),t("button",Object.assign({key:"7b0160174a249b30e082b9b2a77aca334ee6256a","aria-haspopup":"true","aria-controls":"menu",ref:e=>{this.menuButton=e},"aria-expanded":this.showPopoverMenu?"true":"false"},this.inheritedAttributes,{onClick:e=>this.toggleMenu()}),t("wcs-mat-icon",{key:"96b20053845f5490791ea278c2444392ba630600",id:"toggle-menu-icon",icon:"more_horiz",size:"m"})),t("span",{key:"6f959f220edbf293fe6922f7aaeaab0f213bf736",id:"menu",role:"menu","data-show":this.showPopoverMenu},t("div",{key:"6a05e468d65252ecbb57b421a53be0a0a1974f98",id:"arrow","data-popper-arrow":true}),t("slot",{key:"c9398cbb856d836820ac1cddf3113710eeaff5fb"})))}get el(){return this}static get style(){return m}},[1,"wcs-galactic-menu",{text:[1],showPopoverMenu:[32],setAriaAttribute:[64]},[[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"]]]);function g(){if(typeof customElements==="undefined"){return}const e=["wcs-galactic-menu","wcs-mat-icon"];e.forEach((e=>{switch(e){case"wcs-galactic-menu":if(!customElements.get(e)){customElements.define(e,b)}break;case"wcs-mat-icon":if(!customElements.get(e)){l()}break}}))}const h=b;const f=g;export{h as WcsGalacticMenu,f as defineCustomElement};
 //# sourceMappingURL=wcs-galactic-menu.js.map

package/bundle/wcs-grid-column.js

@@ -1,2 +1,2 @@
-import{p as t,H as r,d as e,h as s,c as o}from"./p-2bef72c7.js";import{h as i}from"./p-d3404c52.js";import{i as n,a,s as d,c,d as h}from"./p-2e9b9605.js";const l=({state:t})=>i("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",fill:"none"},i("g",{class:(t==="none"?"":t)+" arrow-group"},i("path",{class:"arrow",fill:"#333333",d:"M10.0973 5.34619C9.79269 5.67941 9.29832 5.67941 8.99348 5.34619L6.78316 2.92128L6.78316 11.144C6.78316 11.6168 6.43368 12 6.00289 12C5.57187 12 5.22261 11.6168 5.22261 11.144L5.22261 2.92128L3.01219 5.34619C2.70802 5.67941 2.21341 5.67941 1.90881 5.34619C1.75655 5.17859 1.68005 4.95932 1.68005 4.73997C1.68005 4.52061 1.75655 4.30192 1.90881 4.13433L5.45122 0.250846C5.75597 -0.0836145 6.24977 -0.0836145 6.55454 0.250846L10.0973 4.13433C10.4017 4.46883 10.4017 5.01168 10.0973 5.34619Z"})));const u=":host{display:contents}:host th{color:var(--wcs-grid-header-text-color);background-color:var(--wcs-grid-header-background-color-default);border-bottom:var(--wcs-grid-header-border-bottom);border-left:var(--wcs-grid-header-border-left);border-radius:var(--wcs-grid-header-border-radius);padding:var(--wcs-grid-header-padding-vertical) var(--wcs-grid-header-padding-horizontal);text-align:left;align-content:center;transition:background-color var(--wcs-grid-header-transition-duration) ease-in-out;}:host th .grid-column-th-content{-webkit-appearance:none;appearance:none;background:none;border:none;outline:none;margin:0;padding:0;font-size:var(--wcs-grid-header-font-size);line-height:var(--wcs-grid-header-line-height);color:var(--wcs-grid-header-text-color);cursor:inherit;display:inline-flex;border-collapse:separate;font-family:inherit;text-align:left;align-items:center;gap:var(--wcs-semantic-spacing-base)}:host th .grid-column-th-content span{font-weight:var(--wcs-grid-header-font-weight)}:host th[aria-sort]:hover{background-color:var(--wcs-grid-header-background-color-hover)}:host th[aria-sort]:active{background-color:var(--wcs-grid-header-background-color-press)}:host th[aria-sort=ascending],:host th[aria-sort=descending]{--wcs-grid-header-sort-arrow-color:var(--wcs-grid-header-sort-arrow-color-default)}:host th[aria-sort=none]:hover{--wcs-grid-header-sort-arrow-color:var(--wcs-grid-header-sort-arrow-color-hover)}:host th:focus-visible,:host th:has(:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-outline-color);outline-offset:0;border-radius:0.1rem}@supports not selector(&:has(:focus-visible)){:host th:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-outline-color);outline-offset:0;border-radius:0.1rem}}:host .pointer{cursor:pointer}:host([hidden]){display:none !important}";const g=u;const f=".arrow-group{transform-origin:50% 50%;transition:transform var(--wcs-semantic-motion-duration-feedback-base, 150ms) ease-in-out}.arrow{fill:var(--wcs-grid-header-sort-arrow-color, transparent)}.desc{transform:rotate(180deg)}";const w=f;const b=["tabindex","title"];const p=t(class t extends r{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsSortChange=e(this,"wcsSortChange",7);this.wcsHiddenChange=e(this,"wcsHiddenChange",7);this.inheritedAttributes={};this.path=undefined;this.name=undefined;this.sort=false;this.sortFn=undefined;this.formatter=undefined;this.sortOrder="none";this.width=undefined;this.customCells=false;this.hidden=false;this.cursorPosition=undefined;this.columnPosition=undefined}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),a(this.el,b))}async setAriaAttribute(t,r){d(this.nativeTh,t,r)}parseMyObjectProp(t){this.wcsHiddenChange.emit(t)}sortOrderChange(t){this.emitSortConfig()}emitSortConfig(){if(!this.sort)return;this.wcsSortChange.emit({column:this.el,order:this.sortOrder,sortFn:this.sortFn})}getSortOrderForAriaSort(t){switch(t){case"asc":return"ascending";case"desc":return"descending";case"none":default:return"none"}}getTabIndex(){var t,r;return((t=this.cursorPosition)===null||t===void 0?void 0:t.col)===this.columnPosition&&((r=this.cursorPosition)===null||r===void 0?void 0:r.row)===0?0:-1}getTagName(){return this.sort?"button":"div"}delegateFocusToButton(){if(this.sort){this.buttonOrDiv.focus()}}render(){const t=this.getTagName();return s(o,{key:"e2c93e817abc5a61d6285f32779d915ff7368710",slot:"grid-column"},s("th",Object.assign({key:"c23695b8680146e66e75ea958dc9dd9cac6056ac",style:{width:this.width},class:this.sort?"pointer":"",tabIndex:this.sort?-1:this.getTabIndex(),scope:"col",onClick:this.onSortClick.bind(this),onKeyDown:this.handleSortKeyDown.bind(this),onFocus:this.delegateFocusToButton.bind(this),"aria-sort":this.sort?this.getSortOrderForAriaSort(this.sortOrder):null,ref:t=>this.nativeTh=t},this.inheritedAttributes),s(t,{key:"e936f0bd861b2d243071d45ccb4fa6bf8448f7a6",class:"grid-column-th-content",ref:t=>this.buttonOrDiv=t,tabIndex:this.sort?this.getTabIndex():-1},s("span",{key:"33e9e0238aa5cea93bff5f0522e30b7cfa787283"},this.name),this.sort?s("div",{class:"sort-arrow-container"},s(l,{state:this.sortOrder})):"")))}onSortClick(){if(!this.sort)return;this.sortOrder=this.sortOrder==="none"||this.sortOrder==="desc"?"asc":"desc"}handleSortKeyDown(t){if(c(t)||h(t)){t.preventDefault();this.onSortClick()}}get el(){return this}static get watchers(){return{hidden:["parseMyObjectProp"],sortOrder:["sortOrderChange"]}}static get style(){return g+w}},[1,"wcs-grid-column",{path:[1],name:[1],sort:[516],sortFn:[16],formatter:[16],sortOrder:[1025,"sort-order"],width:[1],customCells:[516,"custom-cells"],hidden:[516],cursorPosition:[16],columnPosition:[2,"column-position"],setAriaAttribute:[64]},undefined,{hidden:["parseMyObjectProp"],sortOrder:["sortOrderChange"]}]);function m(){if(typeof customElements==="undefined"){return}const t=["wcs-grid-column"];t.forEach((t=>{switch(t){case"wcs-grid-column":if(!customElements.get(t)){customElements.define(t,p)}break}}))}const v=p;const k=m;export{v as WcsGridColumn,k as defineCustomElement};
+import{p as t,H as r,d as e,h as s,c as o}from"./p-2bef72c7.js";import{h as i}from"./p-d3404c52.js";import{i as a,a as n,s as d,c,d as h}from"./p-bf326ae8.js";const l=({state:t})=>i("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",fill:"none"},i("g",{class:(t==="none"?"":t)+" arrow-group"},i("path",{class:"arrow",fill:"#333333",d:"M10.0973 5.34619C9.79269 5.67941 9.29832 5.67941 8.99348 5.34619L6.78316 2.92128L6.78316 11.144C6.78316 11.6168 6.43368 12 6.00289 12C5.57187 12 5.22261 11.6168 5.22261 11.144L5.22261 2.92128L3.01219 5.34619C2.70802 5.67941 2.21341 5.67941 1.90881 5.34619C1.75655 5.17859 1.68005 4.95932 1.68005 4.73997C1.68005 4.52061 1.75655 4.30192 1.90881 4.13433L5.45122 0.250846C5.75597 -0.0836145 6.24977 -0.0836145 6.55454 0.250846L10.0973 4.13433C10.4017 4.46883 10.4017 5.01168 10.0973 5.34619Z"})));const u=":host{display:contents}:host th{color:var(--wcs-grid-header-text-color);background-color:var(--wcs-grid-header-background-color-default);border-bottom:var(--wcs-grid-header-border-bottom);border-left:var(--wcs-grid-header-border-left);border-radius:var(--wcs-grid-header-border-radius);padding:var(--wcs-grid-header-padding-vertical) var(--wcs-grid-header-padding-horizontal);text-align:left;align-content:center;transition:background-color var(--wcs-grid-header-transition-duration) ease-in-out;}:host th .grid-column-th-content{-webkit-appearance:none;appearance:none;background:none;border:none;outline:none;margin:0;padding:0;font-size:var(--wcs-grid-header-font-size);line-height:var(--wcs-grid-header-line-height);color:var(--wcs-grid-header-text-color);cursor:inherit;display:inline-flex;border-collapse:separate;font-family:inherit;text-align:left;align-items:center;gap:var(--wcs-semantic-spacing-base)}:host th .grid-column-th-content span{font-weight:var(--wcs-grid-header-font-weight)}:host th[aria-sort]:hover{background-color:var(--wcs-grid-header-background-color-hover)}:host th[aria-sort]:active{background-color:var(--wcs-grid-header-background-color-press)}:host th[aria-sort=ascending],:host th[aria-sort=descending]{--wcs-grid-header-sort-arrow-color:var(--wcs-grid-header-sort-arrow-color-default)}:host th[aria-sort=none]:hover{--wcs-grid-header-sort-arrow-color:var(--wcs-grid-header-sort-arrow-color-hover)}:host th:focus-visible,:host th:has(:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-outline-color);outline-offset:0;border-radius:0.1rem}@supports not selector(&:has(:focus-visible)){:host th:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-outline-color);outline-offset:0;border-radius:0.1rem}}:host .pointer{cursor:pointer}:host([hidden]){display:none !important}";const g=u;const f=".arrow-group{transform-origin:50% 50%;transition:transform var(--wcs-semantic-motion-duration-feedback-base, 150ms) ease-in-out}.arrow{fill:var(--wcs-grid-header-sort-arrow-color, transparent)}.desc{transform:rotate(180deg)}";const w=f;const b=["tabindex","title"];const p=t(class t extends r{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsSortChange=e(this,"wcsSortChange",7);this.wcsHiddenChange=e(this,"wcsHiddenChange",7);this.inheritedAttributes={};this.path=undefined;this.name=undefined;this.sort=false;this.sortFn=undefined;this.formatter=undefined;this.sortOrder="none";this.width=undefined;this.customCells=false;this.hidden=false;this.cursorPosition=undefined;this.columnPosition=undefined}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},a(this.el)),n(this.el,b))}async setAriaAttribute(t,r){d(this.nativeTh,t,r)}parseMyObjectProp(t){this.wcsHiddenChange.emit(t)}sortOrderChange(t){this.emitSortConfig()}emitSortConfig(){if(!this.sort)return;this.wcsSortChange.emit({column:this.el,order:this.sortOrder,sortFn:this.sortFn})}getSortOrderForAriaSort(t){switch(t){case"asc":return"ascending";case"desc":return"descending";case"none":default:return"none"}}getTabIndex(){var t,r;return((t=this.cursorPosition)===null||t===void 0?void 0:t.col)===this.columnPosition&&((r=this.cursorPosition)===null||r===void 0?void 0:r.row)===0?0:-1}getTagName(){return this.sort?"button":"div"}delegateFocusToButton(){if(this.sort){this.buttonOrDiv.focus()}}render(){const t=this.getTagName();return s(o,{key:"dae8ba0823c68e3029faa505a061b80ae911f84a",slot:"grid-column"},s("th",Object.assign({key:"02d892d695ee9faa1f91be08c67c200aa770d489",style:{width:this.width},class:this.sort?"pointer":"",tabIndex:this.sort?-1:this.getTabIndex(),scope:"col",onClick:this.onSortClick.bind(this),onKeyDown:this.handleSortKeyDown.bind(this),onFocus:this.delegateFocusToButton.bind(this),"aria-sort":this.sort?this.getSortOrderForAriaSort(this.sortOrder):null,ref:t=>this.nativeTh=t},this.inheritedAttributes),s(t,{key:"2da3c848ac260aa272e78e52f282ff0078ecc1e1",class:"grid-column-th-content",ref:t=>this.buttonOrDiv=t,tabIndex:this.sort?this.getTabIndex():-1},s("span",{key:"063de5c95a3fb63444cf5e10e291252bc3474fad"},this.name),this.sort?s("div",{class:"sort-arrow-container"},s(l,{state:this.sortOrder})):"")))}onSortClick(){if(!this.sort)return;this.sortOrder=this.sortOrder==="none"||this.sortOrder==="desc"?"asc":"desc"}handleSortKeyDown(t){if(c(t)||h(t)){t.preventDefault();this.onSortClick()}}get el(){return this}static get watchers(){return{hidden:["parseMyObjectProp"],sortOrder:["sortOrderChange"]}}static get style(){return g+w}},[1,"wcs-grid-column",{path:[1],name:[1],sort:[516],sortFn:[16],formatter:[16],sortOrder:[1025,"sort-order"],width:[1],customCells:[516,"custom-cells"],hidden:[516],cursorPosition:[16],columnPosition:[2,"column-position"],setAriaAttribute:[64]},undefined,{hidden:["parseMyObjectProp"],sortOrder:["sortOrderChange"]}]);function m(){if(typeof customElements==="undefined"){return}const t=["wcs-grid-column"];t.forEach((t=>{switch(t){case"wcs-grid-column":if(!customElements.get(t)){customElements.define(t,p)}break}}))}const v=p;const k=m;export{v as WcsGridColumn,k as defineCustomElement};
 //# sourceMappingURL=wcs-grid-column.js.map

package/bundle/wcs-grid-column.js.map

@@ -1 +1 @@
-{"version":3,"names":["GridSortArrow","state","h","xmlns","width","height","viewBox","fill","class","d","gridColumnCss","WcsGridColumnStyle0","gridSortArrowCss","WcsGridColumnStyle1","GRID_COLUMN_INHERITED_ATTRS","GridColumn","proxyCustomElement","H","this","inheritedAttributes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeTh","parseMyObjectProp","newValue","wcsHiddenChange","emit","sortOrderChange","_","emitSortConfig","sort","wcsSortChange","column","order","sortOrder","sortFn","getSortOrderForAriaSort","getTabIndex","_a","cursorPosition","col","columnPosition","_b","row","getTagName","delegateFocusToButton","buttonOrDiv","focus","render","ButtonOrDiv","Host","key","slot","style","tabIndex","scope","onClick","onSortClick","bind","onKeyDown","handleSortKeyDown","onFocus","ref","name","_event","isSpaceKey","isEnterKey","preventDefault"],"sources":["src/components/grid-column/grid-sort-arrow.tsx","src/components/grid-column/grid-column.scss?tag=wcs-grid-column&encapsulation=shadow","src/components/grid-column/grid-sort-arrow.scss?tag=wcs-grid-column&encapsulation=shadow","src/components/grid-column/grid-column.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { WcsSortOrder } from '../grid/grid-interface';\n\ninterface GridSortArrowProps {\n    state: WcsSortOrder;\n}\n\nexport const GridSortArrow: FunctionalComponent<GridSortArrowProps> = ({state}) => (\n    <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n        <g class={(state === 'none' ? '' : state) + ' arrow-group'}>\n            <path class=\"arrow\"\n                  fill=\"#333333\"\n                  d=\"M10.0973 5.34619C9.79269 5.67941 9.29832 5.67941 8.99348 5.34619L6.78316 2.92128L6.78316 11.144C6.78316 11.6168 6.43368 12 6.00289 12C5.57187 12 5.22261 11.6168 5.22261 11.144L5.22261 2.92128L3.01219 5.34619C2.70802 5.67941 2.21341 5.67941 1.90881 5.34619C1.75655 5.17859 1.68005 4.95932 1.68005 4.73997C1.68005 4.52061 1.75655 4.30192 1.90881 4.13433L5.45122 0.250846C5.75597 -0.0836145 6.24977 -0.0836145 6.55454 0.250846L10.0973 4.13433C10.4017 4.46883 10.4017 5.01168 10.0973 5.34619Z\"\n            />\n        </g>\n    </svg>\n\n);\n","@import '../../style/focus-outline.scss';\n\n:host {\n\n    /* All css variables are in grid.scss.\n       Any variable can be overridden here for a single grid-column by using the correct selector in CSS */\n\n    display: contents;\n\n    th {\n        color: var(--wcs-grid-header-text-color);\n        background-color: var(--wcs-grid-header-background-color-default);\n        border-bottom: var(--wcs-grid-header-border-bottom);\n        border-left: var(--wcs-grid-header-border-left);\n        border-radius: var(--wcs-grid-header-border-radius);\n        padding: var(--wcs-grid-header-padding-vertical) var(--wcs-grid-header-padding-horizontal);\n        text-align: left;\n        align-content: center;\n        transition: background-color var(--wcs-grid-header-transition-duration) ease-in-out;\n\n        .grid-column-th-content {\n            // The following lines aim to avoid displaying the native button style of the agent\n            -webkit-appearance: none;\n            appearance: none;\n            background: none;\n            border: none;\n            outline: none;\n            margin: 0;\n            padding: 0;\n            font-size: var(--wcs-grid-header-font-size);\n            line-height: var(--wcs-grid-header-line-height);\n            color: var(--wcs-grid-header-text-color);\n            cursor: inherit;\n            display: inline-flex;\n            border-collapse: separate;\n            font-family: inherit;\n            text-align: left;\n            align-items: center;\n            gap: var(--wcs-semantic-spacing-base);\n\n            span {\n                font-weight: var(--wcs-grid-header-font-weight);\n            }\n        }\n\n        /* Hovered grid header */\n        &[aria-sort]:hover {\n            background-color: var(--wcs-grid-header-background-color-hover);\n        }\n\n        /* Pressed grid header */\n        &[aria-sort]:active {\n            background-color: var(--wcs-grid-header-background-color-press);\n        }\n\n        /* Grid header with asc or desc sort-config */\n        &[aria-sort=ascending],\n        &[aria-sort=descending] {\n            --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-default);\n        }\n\n        /* Hovered grid header, not sorted yet */\n        &[aria-sort=none]:hover {\n            --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-hover);\n        }\n\n        // XXX: This code works in Firefox as well, but there is a browser-side rendering bug that prevents it from displaying correctly.\n        // We decided to wait for Firefox to fix the bug instead adding a dirty fix here\n        &:focus-visible, &:has(:focus-visible) {\n            @include focus-outline($outline-color: var(--wcs-grid-outline-color), $outline-offset: 0);\n        }\n\n        @supports not selector(&:has(:focus-visible)) {\n            &:focus-within {\n                @include focus-outline($outline-color: var(--wcs-grid-outline-color), $outline-offset: 0);\n            }\n        }\n    }\n    .pointer {\n        cursor: pointer;\n    }\n}\n\n:host([hidden]) {\n    display: none !important;\n}\n",".arrow-group {\n    transform-origin: 50% 50%;\n    transition: transform var(--wcs-semantic-motion-duration-feedback-base, 150ms) ease-in-out;\n}\n\n.arrow {\n    fill: var(--wcs-grid-header-sort-arrow-color, transparent);\n}\n\n.desc {\n    transform: rotate(180deg);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host, Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport {\n    WcsCellFormatter,\n    WcsGridColumnSortChangeEventDetails,\n    WcsSortFn,\n    WcsSortOrder\n} from '../grid/grid-interface';\nimport { GridSortArrow } from './grid-sort-arrow';\nimport {\n    inheritAriaAttributes,\n    inheritAttributes,\n    isEnterKey,\n    isSpaceKey,\n    setOrRemoveAttribute\n} from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst GRID_COLUMN_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The grid column is a subcomponent of `wcs-grid` that represents a column of the table.\n * \n * @csspart [path]-column - CSS part for each column for styling. e.g: first_name-column, email-column\n */\n@Component({\n    tag: 'wcs-grid-column',\n    styleUrls: ['grid-column.scss', 'grid-sort-arrow.scss'],\n    shadow: true\n})\nexport class GridColumn implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLWcsGridColumnElement;\n    private nativeTh!: HTMLTableHeaderCellElement;\n    private buttonOrDiv: HTMLButtonElement | HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    /**\n     * Represents the name of the field from the `data` object (e.g: first_name, last_name, email, ...)\n     */\n    @Prop() path: string;\n    /**\n     * The name of the column displayed on the table (e.g: First Name, Last Name, Email, ...)\n     */\n    @Prop() name: string;\n    /**\n     * Make the column sortable.\n     */\n    @Prop({ reflect: true }) sort: boolean = false;\n    /**\n     * Customizable sort function to change the comparison of values.\n     */\n    @Prop() sortFn: WcsSortFn;\n    /**\n     * Customizable formatter function to render the cell differently.\n     */\n    @Prop() formatter: WcsCellFormatter;\n    /**\n     * Defines if the column sort is ascending or descending.  \n     * `none` = the column is not sorted.\n     */\n    @Prop({mutable: true}) sortOrder: WcsSortOrder = 'none';\n    /**\n     * Set the column `<th>` element width.\n     */\n    @Prop() width: string;\n    /**\n     * Set to true if using a `wcs-custom-cell` linked to it.\n     */\n    @Prop({ reflect: true }) customCells: boolean = false;\n    /**\n     * Flag to hide the column.\n     */\n    @Prop({ reflect: true }) hidden: boolean = false;\n    /**\n     * Event emitted when the sort of the column is changed.\n     */\n    @Event() wcsSortChange!: EventEmitter<WcsGridColumnSortChangeEventDetails>;\n    /**\n     * Event emitted if the column is dynamically switching visibility.\n     */\n    @Event() wcsHiddenChange!: EventEmitter<boolean>;\n\n    /**\n     * This property mustn't be set by hand, it is set by the wcs-grid component to move the focus between grid columns\n     * using keyboard.\n     * @internal\n     */\n    @Prop() public cursorPosition: {col: number, row: number};\n\n    /**\n     * This property mustn't be set by hand, it is set by the wcs-grid component to register the column index in a\n     * grid in order to move the focus between the grid columns.\n     * @internal\n     */\n    @Prop() public columnPosition: number;\n    \n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, GRID_COLUMN_INHERITED_ATTRS),\n        };\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeTh, attr, value);\n    }\n\n    @Watch('hidden')\n    parseMyObjectProp(newValue: boolean) {\n        this.wcsHiddenChange.emit(newValue);\n    }\n\n    @Watch('sortOrder')\n    sortOrderChange(_: WcsSortOrder) {\n        this.emitSortConfig();\n    }\n\n    emitSortConfig() {\n        if (!this.sort) return;\n        this.wcsSortChange.emit({\n            column: this.el,\n            order: this.sortOrder,\n            sortFn: this.sortFn\n        });\n    }\n\n    getSortOrderForAriaSort(sortOrder: WcsSortOrder) {\n        switch (sortOrder) {\n            case 'asc':\n                return 'ascending';\n            case 'desc':\n                return 'descending';\n            case 'none':\n            default:\n                return 'none';\n        }\n    }\n    \n    private getTabIndex() {\n        return this.cursorPosition?.col === this.columnPosition\n        && this.cursorPosition?.row === 0 ? 0 : -1;\n    }\n\n    private getTagName() {\n        return this.sort ? 'button' : 'div';\n    }\n    \n    private delegateFocusToButton() {\n        if (this.sort) {\n            this.buttonOrDiv.focus();\n        }\n    }\n\n    render(): any {\n        const ButtonOrDiv = this.getTagName();\n        return (<Host slot=\"grid-column\">\n            <th style={{width: this.width}}\n                class={this.sort ? 'pointer' : ''}\n                tabIndex={this.sort ? -1 : this.getTabIndex()}\n                scope=\"col\"\n                onClick={this.onSortClick.bind(this)}\n                onKeyDown={this.handleSortKeyDown.bind(this)}\n                onFocus={this.delegateFocusToButton.bind(this)}\n                aria-sort={this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null}\n                ref={(el) => (this.nativeTh = el)}\n                {...this.inheritedAttributes}\n            >\n                <ButtonOrDiv class=\"grid-column-th-content\"\n                        ref={(el: HTMLButtonElement | HTMLDivElement) => this.buttonOrDiv = el}\n                        tabIndex={this.sort ? this.getTabIndex() : -1}>\n                    <span>{this.name}</span>\n                    {\n                        this.sort ? <div class=\"sort-arrow-container\"><GridSortArrow state={this.sortOrder}/></div> : ''\n                    }\n                </ButtonOrDiv>\n            </th>\n        </Host>)\n    }\n\n    private onSortClick() {\n        if (!this.sort) return;\n        \n        // @Watch on sortOrder property will trigger wcsSortChange event\n        this.sortOrder = this.sortOrder === 'none' || this.sortOrder === 'desc' ? 'asc' : 'desc';\n    }\n    \n    private handleSortKeyDown(_event: KeyboardEvent) {\n        if (isSpaceKey(_event) || isEnterKey(_event)) {\n            _event.preventDefault();\n            this.onSortClick();\n        }\n    }\n}\n"],"mappings":"0JAOO,MAAMA,EAAyD,EAAEC,WACpEC,EAAA,qBAAiB,OAAOC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAAYC,KAAK,QACvGL,EAAA,KAAGM,OAAQP,IAAU,OAAS,GAAKA,GAAS,gBACxCC,EAAA,QAAMM,MAAM,QACND,KAAK,UACLE,EAAE,+eCZpB,MAAMC,EAAgB,80DACtB,MAAAC,EAAeD,ECDf,MAAME,EAAmB,mOACzB,MAAAC,EAAeD,EC0Bf,MAAME,EAA8B,CAAC,WAAY,S,MAYpCC,EAAUC,EAAA,MAAAD,UAAAE,E,gKAIXC,KAAAC,oBAA4C,G,kDAYX,M,8DAaQ,O,sCAQD,M,YAIL,M,4DAwB3C,iBAAAC,GACIF,KAAKC,oBAAmBE,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBL,KAAKM,KAC3BC,EAAkBP,KAAKM,GAAIV,G,CAKtC,sBAAMY,CAAiBC,EAAyBC,GAC5CC,EAAqBX,KAAKY,SAAUH,EAAMC,E,CAI9C,iBAAAG,CAAkBC,GACdd,KAAKe,gBAAgBC,KAAKF,E,CAI9B,eAAAG,CAAgBC,GACZlB,KAAKmB,gB,CAGT,cAAAA,GACI,IAAKnB,KAAKoB,KAAM,OAChBpB,KAAKqB,cAAcL,KAAK,CACpBM,OAAQtB,KAAKM,GACbiB,MAAOvB,KAAKwB,UACZC,OAAQzB,KAAKyB,Q,CAIrB,uBAAAC,CAAwBF,GACpB,OAAQA,GACJ,IAAK,MACD,MAAO,YACX,IAAK,OACD,MAAO,aACX,IAAK,OACL,QACI,MAAO,O,CAIX,WAAAG,G,QACJ,QAAOC,EAAA5B,KAAK6B,kBAAc,MAAAD,SAAA,SAAAA,EAAEE,OAAQ9B,KAAK+B,kBACtCC,EAAAhC,KAAK6B,kBAAc,MAAAG,SAAA,SAAAA,EAAEC,OAAQ,EAAI,GAAK,C,CAGrC,UAAAC,GACJ,OAAOlC,KAAKoB,KAAO,SAAW,K,CAG1B,qBAAAe,GACJ,GAAInC,KAAKoB,KAAM,CACXpB,KAAKoC,YAAYC,O,EAIzB,MAAAC,GACI,MAAMC,EAAcvC,KAAKkC,aACzB,OAAQlD,EAACwD,EAAI,CAAAC,IAAA,2CAACC,KAAK,eACf1D,qEAAI2D,MAAO,CAACzD,MAAOc,KAAKd,OACpBI,MAAOU,KAAKoB,KAAO,UAAY,GAC/BwB,SAAU5C,KAAKoB,MAAQ,EAAIpB,KAAK2B,cAChCkB,MAAM,MACNC,QAAS9C,KAAK+C,YAAYC,KAAKhD,MAC/BiD,UAAWjD,KAAKkD,kBAAkBF,KAAKhD,MACvCmD,QAASnD,KAAKmC,sBAAsBa,KAAKhD,MAAK,YACnCA,KAAKoB,KAAOpB,KAAK0B,wBAAwB1B,KAAKwB,WAAa,KACtE4B,IAAM9C,GAAQN,KAAKY,SAAWN,GAC1BN,KAAKC,qBAETjB,EAACuD,EAAW,CAAAE,IAAA,2CAACnD,MAAM,yBACX8D,IAAM9C,GAA2CN,KAAKoC,YAAc9B,EACpEsC,SAAU5C,KAAKoB,KAAOpB,KAAK2B,eAAiB,GAChD3C,0DAAOgB,KAAKqD,MAERrD,KAAKoB,KAAOpC,SAAKM,MAAM,wBAAuBN,EAACF,EAAa,CAACC,MAAOiB,KAAKwB,aAAqB,K,CAO1G,WAAAuB,GACJ,IAAK/C,KAAKoB,KAAM,OAGhBpB,KAAKwB,UAAYxB,KAAKwB,YAAc,QAAUxB,KAAKwB,YAAc,OAAS,MAAQ,M,CAG9E,iBAAA0B,CAAkBI,GACtB,GAAIC,EAAWD,IAAWE,EAAWF,GAAS,CAC1CA,EAAOG,iBACPzD,KAAK+C,a"}
+{"version":3,"names":["GridSortArrow","state","h","xmlns","width","height","viewBox","fill","class","d","gridColumnCss","WcsGridColumnStyle0","gridSortArrowCss","WcsGridColumnStyle1","GRID_COLUMN_INHERITED_ATTRS","GridColumn","proxyCustomElement","H","this","inheritedAttributes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeTh","parseMyObjectProp","newValue","wcsHiddenChange","emit","sortOrderChange","_","emitSortConfig","sort","wcsSortChange","column","order","sortOrder","sortFn","getSortOrderForAriaSort","getTabIndex","_a","cursorPosition","col","columnPosition","_b","row","getTagName","delegateFocusToButton","buttonOrDiv","focus","render","ButtonOrDiv","Host","key","slot","style","tabIndex","scope","onClick","onSortClick","bind","onKeyDown","handleSortKeyDown","onFocus","ref","name","_event","isSpaceKey","isEnterKey","preventDefault"],"sources":["src/components/grid-column/grid-sort-arrow.tsx","src/components/grid-column/grid-column.scss?tag=wcs-grid-column&encapsulation=shadow","src/components/grid-column/grid-sort-arrow.scss?tag=wcs-grid-column&encapsulation=shadow","src/components/grid-column/grid-column.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { WcsSortOrder } from '../grid/grid-interface';\n\ninterface GridSortArrowProps {\n    state: WcsSortOrder;\n}\n\nexport const GridSortArrow: FunctionalComponent<GridSortArrowProps> = ({state}) => (\n    <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n        <g class={(state === 'none' ? '' : state) + ' arrow-group'}>\n            <path class=\"arrow\"\n                  fill=\"#333333\"\n                  d=\"M10.0973 5.34619C9.79269 5.67941 9.29832 5.67941 8.99348 5.34619L6.78316 2.92128L6.78316 11.144C6.78316 11.6168 6.43368 12 6.00289 12C5.57187 12 5.22261 11.6168 5.22261 11.144L5.22261 2.92128L3.01219 5.34619C2.70802 5.67941 2.21341 5.67941 1.90881 5.34619C1.75655 5.17859 1.68005 4.95932 1.68005 4.73997C1.68005 4.52061 1.75655 4.30192 1.90881 4.13433L5.45122 0.250846C5.75597 -0.0836145 6.24977 -0.0836145 6.55454 0.250846L10.0973 4.13433C10.4017 4.46883 10.4017 5.01168 10.0973 5.34619Z\"\n            />\n        </g>\n    </svg>\n\n);\n","@import '../../style/focus-outline.scss';\n\n:host {\n\n    /* All css variables are in grid.scss.\n       Any variable can be overridden here for a single grid-column by using the correct selector in CSS */\n\n    display: contents;\n\n    th {\n        color: var(--wcs-grid-header-text-color);\n        background-color: var(--wcs-grid-header-background-color-default);\n        border-bottom: var(--wcs-grid-header-border-bottom);\n        border-left: var(--wcs-grid-header-border-left);\n        border-radius: var(--wcs-grid-header-border-radius);\n        padding: var(--wcs-grid-header-padding-vertical) var(--wcs-grid-header-padding-horizontal);\n        text-align: left;\n        align-content: center;\n        transition: background-color var(--wcs-grid-header-transition-duration) ease-in-out;\n\n        .grid-column-th-content {\n            // The following lines aim to avoid displaying the native button style of the agent\n            -webkit-appearance: none;\n            appearance: none;\n            background: none;\n            border: none;\n            outline: none;\n            margin: 0;\n            padding: 0;\n            font-size: var(--wcs-grid-header-font-size);\n            line-height: var(--wcs-grid-header-line-height);\n            color: var(--wcs-grid-header-text-color);\n            cursor: inherit;\n            display: inline-flex;\n            border-collapse: separate;\n            font-family: inherit;\n            text-align: left;\n            align-items: center;\n            gap: var(--wcs-semantic-spacing-base);\n\n            span {\n                font-weight: var(--wcs-grid-header-font-weight);\n            }\n        }\n\n        /* Hovered grid header */\n        &[aria-sort]:hover {\n            background-color: var(--wcs-grid-header-background-color-hover);\n        }\n\n        /* Pressed grid header */\n        &[aria-sort]:active {\n            background-color: var(--wcs-grid-header-background-color-press);\n        }\n\n        /* Grid header with asc or desc sort-config */\n        &[aria-sort=ascending],\n        &[aria-sort=descending] {\n            --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-default);\n        }\n\n        /* Hovered grid header, not sorted yet */\n        &[aria-sort=none]:hover {\n            --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-hover);\n        }\n\n        // XXX: This code works in Firefox as well, but there is a browser-side rendering bug that prevents it from displaying correctly.\n        // We decided to wait for Firefox to fix the bug instead adding a dirty fix here\n        &:focus-visible, &:has(:focus-visible) {\n            @include focus-outline($outline-color: var(--wcs-grid-outline-color), $outline-offset: 0);\n        }\n\n        @supports not selector(&:has(:focus-visible)) {\n            &:focus-within {\n                @include focus-outline($outline-color: var(--wcs-grid-outline-color), $outline-offset: 0);\n            }\n        }\n    }\n    .pointer {\n        cursor: pointer;\n    }\n}\n\n:host([hidden]) {\n    display: none !important;\n}\n",".arrow-group {\n    transform-origin: 50% 50%;\n    transition: transform var(--wcs-semantic-motion-duration-feedback-base, 150ms) ease-in-out;\n}\n\n.arrow {\n    fill: var(--wcs-grid-header-sort-arrow-color, transparent);\n}\n\n.desc {\n    transform: rotate(180deg);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host, Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport {\n    WcsCellFormatter,\n    WcsGridColumnSortChangeEventDetails,\n    WcsSortFn,\n    WcsSortOrder\n} from '../grid/grid-interface';\nimport { GridSortArrow } from './grid-sort-arrow';\nimport {\n    inheritAriaAttributes,\n    inheritAttributes,\n    isEnterKey,\n    isSpaceKey,\n    setOrRemoveAttribute\n} from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst GRID_COLUMN_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The grid column is a subcomponent of `wcs-grid` that represents a column of the table.\n * \n * @csspart [path]-column - CSS part for each column for styling. e.g: first_name-column, email-column\n */\n@Component({\n    tag: 'wcs-grid-column',\n    styleUrls: ['grid-column.scss', 'grid-sort-arrow.scss'],\n    shadow: true\n})\nexport class GridColumn implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLWcsGridColumnElement;\n    private nativeTh!: HTMLTableHeaderCellElement;\n    private buttonOrDiv: HTMLButtonElement | HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    /**\n     * Represents the name of the field from the `data` object (e.g: first_name, last_name, email, ...)\n     */\n    @Prop() path: string;\n    /**\n     * The name of the column displayed on the table (e.g: First Name, Last Name, Email, ...)\n     */\n    @Prop() name: string;\n    /**\n     * Make the column sortable.\n     */\n    @Prop({ reflect: true }) sort: boolean = false;\n    /**\n     * Customizable sort function to change the comparison of values.\n     */\n    @Prop() sortFn: WcsSortFn;\n    /**\n     * Customizable formatter function to render the cell differently.\n     */\n    @Prop() formatter: WcsCellFormatter;\n    /**\n     * Defines if the column sort is ascending or descending.  \n     * `none` = the column is not sorted.\n     */\n    @Prop({mutable: true}) sortOrder: WcsSortOrder = 'none';\n    /**\n     * Set the column `<th>` element width.\n     */\n    @Prop() width: string;\n    /**\n     * Set to true if using a `wcs-custom-cell` linked to it.\n     */\n    @Prop({ reflect: true }) customCells: boolean = false;\n    /**\n     * Flag to hide the column.\n     */\n    @Prop({ reflect: true }) hidden: boolean = false;\n    /**\n     * Event emitted when the sort of the column is changed.\n     */\n    @Event() wcsSortChange!: EventEmitter<WcsGridColumnSortChangeEventDetails>;\n    /**\n     * Event emitted if the column is dynamically switching visibility.\n     */\n    @Event() wcsHiddenChange!: EventEmitter<boolean>;\n\n    /**\n     * This property mustn't be set by hand, it is set by the wcs-grid component to move the focus between grid columns\n     * using keyboard.\n     * @internal\n     */\n    @Prop() public cursorPosition: {col: number, row: number};\n\n    /**\n     * This property mustn't be set by hand, it is set by the wcs-grid component to register the column index in a\n     * grid in order to move the focus between the grid columns.\n     * @internal\n     */\n    @Prop() public columnPosition: number;\n    \n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, GRID_COLUMN_INHERITED_ATTRS),\n        };\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeTh, attr, value);\n    }\n\n    @Watch('hidden')\n    parseMyObjectProp(newValue: boolean) {\n        this.wcsHiddenChange.emit(newValue);\n    }\n\n    @Watch('sortOrder')\n    sortOrderChange(_: WcsSortOrder) {\n        this.emitSortConfig();\n    }\n\n    emitSortConfig() {\n        if (!this.sort) return;\n        this.wcsSortChange.emit({\n            column: this.el,\n            order: this.sortOrder,\n            sortFn: this.sortFn\n        });\n    }\n\n    getSortOrderForAriaSort(sortOrder: WcsSortOrder) {\n        switch (sortOrder) {\n            case 'asc':\n                return 'ascending';\n            case 'desc':\n                return 'descending';\n            case 'none':\n            default:\n                return 'none';\n        }\n    }\n    \n    private getTabIndex() {\n        return this.cursorPosition?.col === this.columnPosition\n        && this.cursorPosition?.row === 0 ? 0 : -1;\n    }\n\n    private getTagName() {\n        return this.sort ? 'button' : 'div';\n    }\n    \n    private delegateFocusToButton() {\n        if (this.sort) {\n            this.buttonOrDiv.focus();\n        }\n    }\n\n    render(): any {\n        const ButtonOrDiv = this.getTagName();\n        return (<Host slot=\"grid-column\">\n            <th style={{width: this.width}}\n                class={this.sort ? 'pointer' : ''}\n                tabIndex={this.sort ? -1 : this.getTabIndex()}\n                scope=\"col\"\n                onClick={this.onSortClick.bind(this)}\n                onKeyDown={this.handleSortKeyDown.bind(this)}\n                onFocus={this.delegateFocusToButton.bind(this)}\n                aria-sort={this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null}\n                ref={(el) => (this.nativeTh = el)}\n                {...this.inheritedAttributes}\n            >\n                <ButtonOrDiv class=\"grid-column-th-content\"\n                        ref={(el: HTMLButtonElement | HTMLDivElement) => this.buttonOrDiv = el}\n                        tabIndex={this.sort ? this.getTabIndex() : -1}>\n                    <span>{this.name}</span>\n                    {\n                        this.sort ? <div class=\"sort-arrow-container\"><GridSortArrow state={this.sortOrder}/></div> : ''\n                    }\n                </ButtonOrDiv>\n            </th>\n        </Host>)\n    }\n\n    private onSortClick() {\n        if (!this.sort) return;\n        \n        // @Watch on sortOrder property will trigger wcsSortChange event\n        this.sortOrder = this.sortOrder === 'none' || this.sortOrder === 'desc' ? 'asc' : 'desc';\n    }\n    \n    private handleSortKeyDown(_event: KeyboardEvent) {\n        if (isSpaceKey(_event) || isEnterKey(_event)) {\n            _event.preventDefault();\n            this.onSortClick();\n        }\n    }\n}\n"],"mappings":"+JAOO,MAAMA,EAAyD,EAAEC,WACpEC,EAAA,qBAAiB,OAAOC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAAYC,KAAK,QACvGL,EAAA,KAAGM,OAAQP,IAAU,OAAS,GAAKA,GAAS,gBACxCC,EAAA,QAAMM,MAAM,QACND,KAAK,UACLE,EAAE,+eCZpB,MAAMC,EAAgB,80DACtB,MAAAC,EAAeD,ECDf,MAAME,EAAmB,mOACzB,MAAAC,EAAeD,EC0Bf,MAAME,EAA8B,CAAC,WAAY,S,MAYpCC,EAAUC,EAAA,MAAAD,UAAAE,E,gKAIXC,KAAAC,oBAA4C,G,kDAYX,M,8DAaQ,O,sCAQD,M,YAIL,M,4DAwB3C,iBAAAC,GACIF,KAAKC,oBAAmBE,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBL,KAAKM,KAC3BC,EAAkBP,KAAKM,GAAIV,G,CAKtC,sBAAMY,CAAiBC,EAAyBC,GAC5CC,EAAqBX,KAAKY,SAAUH,EAAMC,E,CAI9C,iBAAAG,CAAkBC,GACdd,KAAKe,gBAAgBC,KAAKF,E,CAI9B,eAAAG,CAAgBC,GACZlB,KAAKmB,gB,CAGT,cAAAA,GACI,IAAKnB,KAAKoB,KAAM,OAChBpB,KAAKqB,cAAcL,KAAK,CACpBM,OAAQtB,KAAKM,GACbiB,MAAOvB,KAAKwB,UACZC,OAAQzB,KAAKyB,Q,CAIrB,uBAAAC,CAAwBF,GACpB,OAAQA,GACJ,IAAK,MACD,MAAO,YACX,IAAK,OACD,MAAO,aACX,IAAK,OACL,QACI,MAAO,O,CAIX,WAAAG,G,QACJ,QAAOC,EAAA5B,KAAK6B,kBAAc,MAAAD,SAAA,SAAAA,EAAEE,OAAQ9B,KAAK+B,kBACtCC,EAAAhC,KAAK6B,kBAAc,MAAAG,SAAA,SAAAA,EAAEC,OAAQ,EAAI,GAAK,C,CAGrC,UAAAC,GACJ,OAAOlC,KAAKoB,KAAO,SAAW,K,CAG1B,qBAAAe,GACJ,GAAInC,KAAKoB,KAAM,CACXpB,KAAKoC,YAAYC,O,EAIzB,MAAAC,GACI,MAAMC,EAAcvC,KAAKkC,aACzB,OAAQlD,EAACwD,EAAI,CAAAC,IAAA,2CAACC,KAAK,eACf1D,qEAAI2D,MAAO,CAACzD,MAAOc,KAAKd,OACpBI,MAAOU,KAAKoB,KAAO,UAAY,GAC/BwB,SAAU5C,KAAKoB,MAAQ,EAAIpB,KAAK2B,cAChCkB,MAAM,MACNC,QAAS9C,KAAK+C,YAAYC,KAAKhD,MAC/BiD,UAAWjD,KAAKkD,kBAAkBF,KAAKhD,MACvCmD,QAASnD,KAAKmC,sBAAsBa,KAAKhD,MAAK,YACnCA,KAAKoB,KAAOpB,KAAK0B,wBAAwB1B,KAAKwB,WAAa,KACtE4B,IAAM9C,GAAQN,KAAKY,SAAWN,GAC1BN,KAAKC,qBAETjB,EAACuD,EAAW,CAAAE,IAAA,2CAACnD,MAAM,yBACX8D,IAAM9C,GAA2CN,KAAKoC,YAAc9B,EACpEsC,SAAU5C,KAAKoB,KAAOpB,KAAK2B,eAAiB,GAChD3C,0DAAOgB,KAAKqD,MAERrD,KAAKoB,KAAOpC,SAAKM,MAAM,wBAAuBN,EAACF,EAAa,CAACC,MAAOiB,KAAKwB,aAAqB,K,CAO1G,WAAAuB,GACJ,IAAK/C,KAAKoB,KAAM,OAGhBpB,KAAKwB,UAAYxB,KAAKwB,YAAc,QAAUxB,KAAKwB,YAAc,OAAS,MAAQ,M,CAG9E,iBAAA0B,CAAkBI,GACtB,GAAIC,EAAWD,IAAWE,EAAWF,GAAS,CAC1CA,EAAOG,iBACPzD,KAAK+C,a"}

package/bundle/wcs-grid-custom-cell.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,h as t,c}from"./p-2bef72c7.js";const o=e(class e extends s{constructor(){super();this.__registerHost();this.__attachShadow();this.columnId=undefined;this.rowId=undefined}render(){return t(c,{key:"3353e4de7a3eeb4d903a63d5adf257ed3427beb8",slot:this.columnId+"-"+this.rowId},t("slot",{key:"cc3297d327379b74a385c4909964b8371da68a97"}))}},[1,"wcs-grid-custom-cell",{columnId:[1,"column-id"],rowId:[8,"row-id"]}]);function d(){if(typeof customElements==="undefined"){return}const e=["wcs-grid-custom-cell"];e.forEach((e=>{switch(e){case"wcs-grid-custom-cell":if(!customElements.get(e)){customElements.define(e,o)}break}}))}const n=o;const i=d;export{n as WcsGridCustomCell,i as defineCustomElement};
+import{p as c,H as s,h as e,c as t}from"./p-2bef72c7.js";const o=c(class c extends s{constructor(){super();this.__registerHost();this.__attachShadow();this.columnId=undefined;this.rowId=undefined}render(){return e(t,{key:"dd57a3792ccd2dbf7bb23f5055eb3136a06a9acb",slot:this.columnId+"-"+this.rowId},e("slot",{key:"5fa475118d263c77b9ccbc1bb7e0c808b1578e87"}))}},[1,"wcs-grid-custom-cell",{columnId:[1,"column-id"],rowId:[8,"row-id"]}]);function n(){if(typeof customElements==="undefined"){return}const c=["wcs-grid-custom-cell"];c.forEach((c=>{switch(c){case"wcs-grid-custom-cell":if(!customElements.get(c)){customElements.define(c,o)}break}}))}const d=o;const i=n;export{d as WcsGridCustomCell,i as defineCustomElement};
 //# sourceMappingURL=wcs-grid-custom-cell.js.map

package/bundle/wcs-grid-custom-cell.js.map

@@ -1 +1 @@
-{"version":3,"names":["GridCustomCell","proxyCustomElement","H","render","h","Host","key","slot","this","columnId","rowId"],"sources":["src/components/grid-custom-cell/grid-custom-cell.tsx"],"sourcesContent":["import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\n/**\n * The grid custom cell is a subcomponent of `wcs-grid`.\n */\n@Component({\n    tag: 'wcs-grid-custom-cell',\n    shadow: true\n})\nexport class GridCustomCell implements ComponentInterface {\n    /**\n     * ID of the column for which to render the cell\n     */\n    @Prop() columnId: string;\n    /**\n     * Key value of the object rendered for the cell's row\n     */\n    @Prop() rowId: any;\n\n    render(): any {\n        return (\n            <Host slot={this.columnId + '-' + this.rowId}>\n                <slot />\n            </Host>\n        );\n    }\n}\n"],"mappings":"0DASaA,EAAcC,EAAA,MAAAD,UAAAE,E,+GAUvB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAMC,KAAKC,SAAW,IAAMD,KAAKE,OACnCN,EAAA,QAAAE,IAAA,6C"}
+{"version":3,"names":["GridCustomCell","proxyCustomElement","H","render","h","Host","key","slot","this","columnId","rowId"],"sources":["src/components/grid-custom-cell/grid-custom-cell.tsx"],"sourcesContent":["import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\n/**\n * The grid custom cell is a subcomponent of `wcs-grid`.\n */\n@Component({\n    tag: 'wcs-grid-custom-cell',\n    shadow: true\n})\nexport class GridCustomCell implements ComponentInterface {\n    /**\n     * ID of the column for which to render the cell\n     */\n    @Prop() columnId: string;\n    /**\n     * Key value of the object rendered for the cell's row\n     */\n    @Prop() rowId: any;\n\n    render(): any {\n        return (\n            <Host slot={this.columnId + '-' + this.rowId}>\n                <slot />\n            </Host>\n        );\n    }\n}\n"],"mappings":"+DASaA,EAAcC,EAAA,MAAAD,UAAAE,E,+GAUvB,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAMC,KAAKC,SAAW,IAAMD,KAAKE,OACnCN,EAAA,QAAAE,IAAA,6C"}

package/bundle/wcs-grid-pagination.js

@@ -1,2 +1,2 @@
-import{G as o,d as s}from"./p-30d83d3d.js";const d=o;const t=s;export{d as WcsGridPagination,t as defineCustomElement};
+import{G as o,d as s}from"./p-2f7bca1e.js";const t=o;const a=s;export{t as WcsGridPagination,a as defineCustomElement};
 //# sourceMappingURL=wcs-grid-pagination.js.map

package/bundle/wcs-grid.js

@@ -1,2 +1,2 @@
-import{p as r,H as t,d as e,f as i,h as o,c as s}from"./p-2bef72c7.js";import{G as n}from"./p-30d83d3d.js";import{k as a}from"./p-97e70e10.js";import{h as c}from"./p-d3404c52.js";import{i as d,a as l,s as u}from"./p-2e9b9605.js";import{d as h}from"./p-cdc6f6c2.js";import{d as f}from"./p-44a3b0b9.js";import{d as g}from"./p-c8b73e93.js";import{i as b,b as w,a as v,S as m,c as p,g as k,e as y,d as C,f as j,h as x,M as A,o as _,k as R,r as E,j as S,s as I,l as O,m as F,U as P,n as D,p as M,q as G,t as T,u as W,v as H,w as U}from"./p-763371a0.js";function N(r){switch(r){case"asc":return 1;case"desc":return-1}}var z;var B=new Uint8Array(16);function L(){if(!z){z=typeof crypto!=="undefined"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||typeof msCrypto!=="undefined"&&typeof msCrypto.getRandomValues==="function"&&msCrypto.getRandomValues.bind(msCrypto);if(!z){throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported")}}return z(B)}const $=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;function K(r){return typeof r==="string"&&$.test(r)}var V=[];for(var q=0;q<256;++q){V.push((q+256).toString(16).substr(1))}function J(r){var t=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;var e=(V[r[t+0]]+V[r[t+1]]+V[r[t+2]]+V[r[t+3]]+"-"+V[r[t+4]]+V[r[t+5]]+"-"+V[r[t+6]]+V[r[t+7]]+"-"+V[r[t+8]]+V[r[t+9]]+"-"+V[r[t+10]]+V[r[t+11]]+V[r[t+12]]+V[r[t+13]]+V[r[t+14]]+V[r[t+15]]).toLowerCase();if(!K(e)){throw TypeError("Stringified UUID is invalid")}return e}function Q(r,t,e){r=r||{};var i=r.random||(r.rng||L)();i[6]=i[6]&15|64;i[8]=i[8]&63|128;if(t){e=e||0;for(var o=0;o<16;++o){t[e+o]=i[o]}return t}return J(i)}var X="[object Symbol]";function Y(r){return typeof r=="symbol"||b(r)&&w(r)==X}function Z(r,t){var e=-1,i=r==null?0:r.length,o=Array(i);while(++e<i){o[e]=t(r[e],e,r)}return o}var rr=1/0;var tr=m?m.prototype:undefined,er=tr?tr.toString:undefined;function ir(r){if(typeof r=="string"){return r}if(v(r)){return Z(r,ir)+""}if(Y(r)){return er?er.call(r):""}var t=r+"";return t=="0"&&1/r==-rr?"-0":t}var or=Object.create;var sr=function(){function r(){}return function(t){if(!p(t)){return{}}if(or){return or(t)}r.prototype=t;var e=new r;r.prototype=undefined;return e}}();const nr=sr;function ar(r,t){var e=-1,i=r.length;t||(t=Array(i));while(++e<i){t[e]=r[e]}return t}var cr=function(){try{var r=k(Object,"defineProperty");r({},"",{});return r}catch(r){}}();const dr=cr;function lr(r,t){var e=-1,i=r==null?0:r.length;while(++e<i){if(t(r[e],e,r)===false){break}}return r}function ur(r,t,e){if(t=="__proto__"&&dr){dr(r,t,{configurable:true,enumerable:true,value:e,writable:true})}else{r[t]=e}}var hr=Object.prototype;var fr=hr.hasOwnProperty;function gr(r,t,e){var i=r[t];if(!(fr.call(r,t)&&y(i,e))||e===undefined&&!(t in r)){ur(r,t,e)}}function br(r,t,e,i){var o=!e;e||(e={});var s=-1,n=t.length;while(++s<n){var a=t[s];var c=i?i(e[a],r[a],a,e,r):undefined;if(c===undefined){c=r[a]}if(o){ur(e,a,c)}else{gr(e,a,c)}}return e}function wr(r){var t=[];if(r!=null){for(var e in Object(r)){t.push(e)}}return t}var vr=Object.prototype;var mr=vr.hasOwnProperty;function pr(r){if(!p(r)){return wr(r)}var t=C(r),e=[];for(var i in r){if(!(i=="constructor"&&(t||!mr.call(r,i)))){e.push(i)}}return e}function kr(r){return j(r)?x(r,true):pr(r)}var yr=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,Cr=/^\w*$/;function jr(r,t){if(v(r)){return false}var e=typeof r;if(e=="number"||e=="symbol"||e=="boolean"||r==null||Y(r)){return true}return Cr.test(r)||!yr.test(r)||t!=null&&r in Object(t)}var xr="Expected a function";function Ar(r,t){if(typeof r!="function"||t!=null&&typeof t!="function"){throw new TypeError(xr)}var e=function(){var i=arguments,o=t?t.apply(this,i):i[0],s=e.cache;if(s.has(o)){return s.get(o)}var n=r.apply(this,i);e.cache=s.set(o,n)||s;return n};e.cache=new(Ar.Cache||A);return e}Ar.Cache=A;var _r=500;function Rr(r){var t=Ar(r,(function(r){if(e.size===_r){e.clear()}return r}));var e=t.cache;return t}var Er=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g;var Sr=/\\(\\)?/g;var Ir=Rr((function(r){var t=[];if(r.charCodeAt(0)===46){t.push("")}r.replace(Er,(function(r,e,i,o){t.push(i?o.replace(Sr,"$1"):e||r)}));return t}));const Or=Ir;function Fr(r){return r==null?"":ir(r)}function Pr(r,t){if(v(r)){return r}return jr(r,t)?[r]:Or(Fr(r))}var Dr=1/0;function Mr(r){if(typeof r=="string"||Y(r)){return r}var t=r+"";return t=="0"&&1/r==-Dr?"-0":t}function Gr(r,t){t=Pr(t,r);var e=0,i=t.length;while(r!=null&&e<i){r=r[Mr(t[e++])]}return e&&e==i?r:undefined}function Tr(r,t,e){var i=r==null?undefined:Gr(r,t);return i===undefined?e:i}var Wr=_(Object.getPrototypeOf,Object);const Hr=Wr;function Ur(r,t){return r&&br(t,R(t),r)}function Nr(r,t){return r&&br(t,kr(t),r)}var zr=typeof exports=="object"&&exports&&!exports.nodeType&&exports;var Br=zr&&typeof module=="object"&&module&&!module.nodeType&&module;var Lr=Br&&Br.exports===zr;var $r=Lr?E.Buffer:undefined,Kr=$r?$r.allocUnsafe:undefined;function Vr(r,t){if(t){return r.slice()}var e=r.length,i=Kr?Kr(e):new r.constructor(e);r.copy(i);return i}function qr(r,t){return br(r,S(r),t)}var Jr=Object.getOwnPropertySymbols;var Qr=!Jr?I:function(r){var t=[];while(r){O(t,S(r));r=Hr(r)}return t};const Xr=Qr;function Yr(r,t){return br(r,Xr(r),t)}function Zr(r){return F(r,kr,Xr)}var rt=Object.prototype;var tt=rt.hasOwnProperty;function et(r){var t=r.length,e=new r.constructor(t);if(t&&typeof r[0]=="string"&&tt.call(r,"index")){e.index=r.index;e.input=r.input}return e}function it(r){var t=new r.constructor(r.byteLength);new P(t).set(new P(r));return t}function ot(r,t){var e=t?it(r.buffer):r.buffer;return new r.constructor(e,r.byteOffset,r.byteLength)}var st=/\w*$/;function nt(r){var t=new r.constructor(r.source,st.exec(r));t.lastIndex=r.lastIndex;return t}var at=m?m.prototype:undefined,ct=at?at.valueOf:undefined;function dt(r){return ct?Object(ct.call(r)):{}}function lt(r,t){var e=t?it(r.buffer):r.buffer;return new r.constructor(e,r.byteOffset,r.length)}var ut="[object Boolean]",ht="[object Date]",ft="[object Map]",gt="[object Number]",bt="[object RegExp]",wt="[object Set]",vt="[object String]",mt="[object Symbol]";var pt="[object ArrayBuffer]",kt="[object DataView]",yt="[object Float32Array]",Ct="[object Float64Array]",jt="[object Int8Array]",xt="[object Int16Array]",At="[object Int32Array]",_t="[object Uint8Array]",Rt="[object Uint8ClampedArray]",Et="[object Uint16Array]",St="[object Uint32Array]";function It(r,t,e){var i=r.constructor;switch(t){case pt:return it(r);case ut:case ht:return new i(+r);case kt:return ot(r,e);case yt:case Ct:case jt:case xt:case At:case _t:case Rt:case Et:case St:return lt(r,e);case ft:return new i;case gt:case vt:return new i(r);case bt:return nt(r);case wt:return new i;case mt:return dt(r)}}function Ot(r){return typeof r.constructor=="function"&&!C(r)?nr(Hr(r)):{}}var Ft="[object Map]";function Pt(r){return b(r)&&D(r)==Ft}var Dt=G&&G.isMap;var Mt=Dt?M(Dt):Pt;const Gt=Mt;var Tt="[object Set]";function Wt(r){return b(r)&&D(r)==Tt}var Ht=G&&G.isSet;var Ut=Ht?M(Ht):Wt;const Nt=Ut;var zt=1,Bt=2,Lt=4;var $t="[object Arguments]",Kt="[object Array]",Vt="[object Boolean]",qt="[object Date]",Jt="[object Error]",Qt="[object Function]",Xt="[object GeneratorFunction]",Yt="[object Map]",Zt="[object Number]",re="[object Object]",te="[object RegExp]",ee="[object Set]",ie="[object String]",oe="[object Symbol]",se="[object WeakMap]";var ne="[object ArrayBuffer]",ae="[object DataView]",ce="[object Float32Array]",de="[object Float64Array]",le="[object Int8Array]",ue="[object Int16Array]",he="[object Int32Array]",fe="[object Uint8Array]",ge="[object Uint8ClampedArray]",be="[object Uint16Array]",we="[object Uint32Array]";var ve={};ve[$t]=ve[Kt]=ve[ne]=ve[ae]=ve[Vt]=ve[qt]=ve[ce]=ve[de]=ve[le]=ve[ue]=ve[he]=ve[Yt]=ve[Zt]=ve[re]=ve[te]=ve[ee]=ve[ie]=ve[oe]=ve[fe]=ve[ge]=ve[be]=ve[we]=true;ve[Jt]=ve[Qt]=ve[se]=false;function me(r,t,e,i,o,s){var n,a=t&zt,c=t&Bt,d=t&Lt;if(e){n=o?e(r,i,o,s):e(r)}if(n!==undefined){return n}if(!p(r)){return r}var l=v(r);if(l){n=et(r);if(!a){return ar(r,n)}}else{var u=D(r),h=u==Qt||u==Xt;if(T(r)){return Vr(r,a)}if(u==re||u==$t||h&&!o){n=c||h?{}:Ot(r);if(!a){return c?Yr(r,Nr(n,r)):qr(r,Ur(n,r))}}else{if(!ve[u]){return o?r:{}}n=It(r,u,a)}}s||(s=new W);var f=s.get(r);if(f){return f}s.set(r,n);if(Nt(r)){r.forEach((function(i){n.add(me(i,t,e,i,r,s))}))}else if(Gt(r)){r.forEach((function(i,o){n.set(o,me(i,t,e,o,r,s))}))}var g=d?c?Zr:H:c?kr:R;var b=l?undefined:g(r);lr(b||r,(function(i,o){if(b){o=i;i=r[o]}gr(n,o,me(i,t,e,o,r,s))}));return n}var pe=1,ke=4;function ye(r){return me(r,pe|ke)}function Ce(r,t){const e=a(r);if(e==="UNKNOWN"){return[]}switch(e){case"UP_ARROW":return[{kind:"FocusCell",target:"up"}];case"DOWN_ARROW":return[{kind:"FocusCell",target:"down"}];case"LEFT_ARROW":return[{kind:"FocusCell",target:"left"}];case"RIGHT_ARROW":return[{kind:"FocusCell",target:"right"}];case"HOME":return[{kind:"FocusCell",target:"first_of_row"}];case"END":return[{kind:"FocusCell",target:"last_of_row"}];case"MAJ+SPACE":switch(t){case"grid_selection_single":case"grid_selection_multiple":return[{kind:"SelectRow",target:"one"}]}break;case"CTRL+A":switch(t){case"grid_selection_multiple":return[{kind:"SelectRow",target:"all"}]}break;case"CTRL+HOME":return[{kind:"FocusCell",target:"first_of_grid"}];case"CTRL+END":return[{kind:"FocusCell",target:"last_of_grid"}]}return[]}const je=({checked:r,row:t,rowIndex:e,totalRows:i,onClick:o})=>{let s;return c("div",{class:`grid-radio ${r?"checked":""}`,onClick:r=>s.click()},c("input",{type:"radio",name:"selection","aria-setsize":i,"aria-posinset":e,tabindex:"-1",checked:r,"aria-checked":`${r}`,ref:r=>s=r,onClick:r=>o(t)}))};const xe=":host{--wcs-grid-gap:0;--wcs-grid-vertical-align:middle;--wcs-grid-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-grid-cell-text-color:var(--wcs-semantic-color-text-secondary);--wcs-grid-cell-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-grid-cell-padding-vertical:var(--wcs-semantic-spacing-base);--wcs-grid-cell-border-bottom:none;--wcs-grid-cell-separator-border:none;--wcs-grid-first-cell-border-radius:0;--wcs-grid-last-cell-border-radius:0;--wcs-grid-highlight-color:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-grid-row-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-grid-row-odd-background-color:var(--wcs-grid-row-background-color);--wcs-grid-row-even-background-color:var(--wcs-semantic-color-background-surface-accent-lightest);--wcs-grid-header-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-grid-header-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-grid-header-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-grid-header-text-color:var(--wcs-semantic-color-text-primary);--wcs-grid-header-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-grid-header-font-size:var(--wcs-semantic-font-size-label-1);--wcs-grid-header-line-height:var(--wcs-primitive-font-line-height-140);--wcs-grid-header-padding-vertical:var(--wcs-semantic-spacing-base);--wcs-grid-header-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-grid-header-border-left:none;--wcs-grid-header-border-radius:0;--wcs-grid-header-border-bottom:solid var(--wcs-semantic-border-width-default) var(--wcs-semantic-color-border-secondary);--wcs-grid-header-transition-duration:var(--wcs-semantic-motion-duration-feedback-fast);--wcs-grid-first-header-background-color:var(--wcs-semantic-color-background-action-secondary-default);--wcs-grid-first-header-border-radius:0;--wcs-grid-last-header-border-radius:0;--wcs-grid-column-selection-width:calc(5 * var(--wcs-semantic-spacing-base));--wcs-grid-header-sort-arrow-color-default:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-grid-header-sort-arrow-color-hover:var(--wcs-semantic-color-foreground-action-neutral-hover);display:block}:host th{border-radius:var(--wcs-grid-first-header-border-radius);background-color:var(--wcs-grid-first-header-background-color)}:host ::slotted([slot=grid-column]:first-child){--wcs-grid-header-border-left:none}:host :host([selection]) ::slotted([slot=grid-column]:first-child){--wcs-component-grid-header-border-radius-first:0;--wcs-grid-header-border-left:var(--wcs-grid-header-border-left)}:host table{width:100%;border-collapse:collapse;border-spacing:var(--wcs-grid-gap)}:host table thead{border-bottom:var(--wcs-grid-header-border-bottom)}:host table tbody{vertical-align:var(--wcs-grid-vertical-align)}:host td{color:var(--wcs-grid-cell-text-color);margin:0;padding:var(--wcs-grid-cell-padding-vertical) var(--wcs-grid-cell-padding-horizontal)}:host td:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-outline-color);outline-offset:0;border-radius:0.1rem}:host td:first-child{border-radius:var(--wcs-grid-first-cell-border-radius)}:host td:last-child{border-radius:var(--wcs-grid-last-cell-border-radius)}:host td:not(:first-child){border-left:var(--wcs-grid-cell-separator-border)}:host tr{background-color:var(--wcs-grid-row-background-color)}:host tr:nth-child(odd){background-color:var(--wcs-grid-row-odd-background-color, var(--wcs-grid-row-background-color))}:host tr:nth-child(even){background-color:var(--wcs-grid-row-even-background-color, var(--wcs-grid-row-background-color))}:host tr:not(:last-child) td{border-bottom:var(--wcs-grid-cell-border-bottom)}:host .wcs-grid-selection-column{padding:var(--wcs-grid-cell-padding-vertical) var(--wcs-grid-cell-padding-horizontal);width:var(--wcs-grid-column-selection-width);text-align:start}:host tr.selected{background-color:var(--wcs-grid-highlight-color)}:host .loading{text-align:center}";const Ae=xe;const _e='.grid-radio{--wcs-grid-radio-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-grid-radio-padding:calc(var(--wcs-semantic-size-base) / 4);--wcs-grid-radio-transition:var(--wcs-semantic-motion-duration-feedback-base);--wcs-grid-radio-border-color-default:var(--wcs-semantic-color-border-control-indicator-default);--wcs-grid-radio-border-color-selected:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-grid-radio-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-grid-radio-border-color-disabled:var(--wcs-semantic-color-border-control-indicator-disabled);--wcs-grid-radio-background-color-default:transparent;--wcs-grid-radio-background-color-selected:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-grid-radio-background-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-grid-radio-inner-border-color:white;width:fit-content;cursor:pointer;padding:var(--wcs-grid-radio-padding, 0.125rem);}.grid-radio:has(input:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-radio-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}@supports not selector(:has(input:focus-visible)){.grid-radio:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-radio-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}}.grid-radio input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.grid-radio::before{content:"";display:flex;border-radius:50%;border:2px solid var(--wcs-grid-radio-border-color-default);position:relative;width:1.125rem;height:1.125rem;box-sizing:border-box;background-color:var(--wcs-grid-radio-background-color-default);transition:var(--wcs-grid-radio-transition, 0.175s) ease-in-out}.grid-radio:hover::before{border-color:var(--wcs-grid-radio-border-color-hover)}.grid-radio.checked::before{border-color:var(--wcs-grid-radio-border-color-selected);background-color:var(--wcs-grid-radio-background-color-selected);outline:solid 2px var(--wcs-grid-radio-inner-border-color);outline-offset:-4px}';const Re=_e;const Ee=["title"];const Se=r(class r extends t{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsGridSelectionChange=e(this,"wcsGridSelectionChange",7);this.wcsGridAllSelectionChange=e(this,"wcsGridAllSelectionChange",7);this.wcsFocus=e(this,"wcsFocus",7);this.wcsBlur=e(this,"wcsBlur",7);this.inheritedAttributes={};this.serverMode=false;this.data=undefined;this.loading=undefined;this.selectionConfig="none";this.selectedItems=[];this.wcsGridPaginationId=undefined;this.rowIdPath=undefined;this.rowCssPartsFn=r=>null;this.columns=undefined;this.paginationEl=undefined;this.rows=[];this.cursorPosition={col:0,row:1}}onCursorPositionChange(r){this.getGridColumnsFromTemplate().forEach((t=>t.cursorPosition=r))}onDataChange(r){this.updateGridRows(r);this.refreshSort(false);this.updatePageIndex()}onSelectedItemsPropertyChange(r){this.updateSelectionWithValues(r)}onFocus(r){var t;(t=this.getElementToFocusAtCursorPosition())===null||t===void 0?void 0:t.focus();this.wcsFocus.emit(r)}onBlur(r){this.wcsBlur.emit(r)}async focusFirstCell(){var r;this.cursorPosition={col:this.selectionConfig==="none"?0:1,row:1};(r=this.getElementToFocusAtCursorPosition())===null||r===void 0?void 0:r.focus()}hasSelectionColumn(){return this.selectionConfig!=="none"}getElementToFocusAtCursorPosition(){var r,t;const e=(r=this.gridElementsWithCoordinates.find((r=>{var t,e;return r.col===((t=this.cursorPosition)===null||t===void 0?void 0:t.col)&&r.row===((e=this.cursorPosition)===null||e===void 0?void 0:e.row)})))===null||r===void 0?void 0:r.el;return this.hasSelectionColumn()?(t=e.querySelector('wcs-checkbox,input[type="radio"]'))!==null&&t!==void 0?t:e:e}moveCursorPosition(r,t){var e;this.cursorPosition={col:r==="first"?0:r==="last"?this.totalDisplayedColumnCount()-1:Math.min(Math.max(this.cursorPosition.col+r,0),this.totalDisplayedColumnCount()-1),row:t==="first"?0:t==="last"?this.getRowsForCurrentPage().length:Math.min(Math.max(this.cursorPosition.row+t,0),this.getRowsForCurrentPage().length)};this.handleCursorPositionOnEmptyTh();(e=this.getElementToFocusAtCursorPosition())===null||e===void 0?void 0:e.focus()}handleCursorPositionOnEmptyTh(){if(this.selectionConfig==="single"&&this.cursorPosition.col===0&&this.cursorPosition.row===0){this.cursorPosition={col:1,row:0}}}onHiddenColumnChange(){i(this);this.cursorPosition={col:0,row:1}}onKeyDown(r){var t;if(((t=document.activeElement)===null||t===void 0?void 0:t.tagName)==="WCS-GRID-PAGINATION"){return}let e;switch(this.selectionConfig){case"multiple":e="grid_selection_multiple";break;case"single":e="grid_selection_single";break;case"none":e="grid_no_selection";break}const i=Ce(r,e);if(i.length!=0){r.preventDefault()}for(const t of i){this.doActionFromKeyboardEventAssociatedAction(t,r)}}doActionFromKeyboardEventAssociatedAction(r,t){switch(r.kind){case"FocusCell":switch(r.target){case"up":this.moveCursorPosition(0,-1);break;case"down":this.moveCursorPosition(0,1);break;case"left":this.moveCursorPosition(-1,0);break;case"right":this.moveCursorPosition(1,0);break;case"first_of_row":this.moveCursorPosition("first",0);break;case"last_of_row":this.moveCursorPosition("last",0);break;case"first_of_grid":this.moveCursorPosition("first","first");break;case"last_of_grid":this.moveCursorPosition("last","last");break}case"SelectRow":switch(r.target){case"one":t.preventDefault();if(this.cursorPosition.row>0){this.onRowSelection(this.rows[this.cursorPosition.row-1])}break;case"all":this.selectAllRows();break}break;default:throw new Error("Internal error")}}onClick(r){const t=r.composedPath().filter((r=>["TD","TH"].includes(r.nodeName)))[0];if(!t)return;const e=this.gridElementsWithCoordinates.find((r=>r.el===t));this.cursorPosition={col:e.col,row:e.row}}updateSelectionWithValues(r){if(this.selectionConfig==="single"){this.rows.map((r=>r.selected=false));for(const t of this.rows){if(U(t.data,r)){t.selected=true;break}}}else if(this.selectionConfig==="multiple"){this.rows.map((r=>r.selected=false));for(const t of this.rows){if(r.find((r=>U(r,t.data)))){t.selected=true}}}this.rows=ye(this.rows)}wcsGridRowToWcsGridRowData(r){return{selected:r.selected,page:r.page,data:r.data}}updateGridRows(r){const t=[];if(r&&this.columns){for(let e=0;e<r.length;e++){const i={uuid:Q(),data:r[e],selected:false,cells:[]};let o=0;for(const t of this.columns){t.columnPosition=o+(this.hasSelectionColumn()?1:0);o++;i.cells.push({content:Tr(r[e],t.path),column:t,formatter:t.formatter})}t.push(i)}this.rows=t}}componentDidLoad(){this.columns=this.getGridColumnsFromTemplate();this.paginationEl=this.wcsGridPaginationId?document.getElementById(this.wcsGridPaginationId):this.getGridPaginationsFromTemplate()[0];this.updateGridRows(this.data);if(this.selectedItems){this.updateSelectionWithValues(this.selectedItems)}this.refreshSort(true);this.updatePageIndex()}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},d(this.el)),l(this.el,Ee))}async setAriaAttribute(r,t){u(this.nativeTable,r,t)}refreshSort(r){if(this.columns){const[t,...e]=this.columns.filter((r=>r.sortOrder!=="none"));if(t&&!this.serverMode){this.sortBy(t)}r&&this.disableSortOrderForColumns(e)}}disableSortOrderForColumns(r){r===null||r===void 0?void 0:r.forEach((r=>r.sortOrder="none"))}getGridColumnsFromTemplate(){const r=this.el.shadowRoot.querySelector('slot[name="grid-column"]');return r.assignedElements()}getGridPaginationsFromTemplate(){const r=this.el.shadowRoot.querySelector('slot[name="grid-pagination"]');return r.assignedElements()}get gridElementsWithCoordinates(){const r=[];if(this.selectionConfig==="multiple"){r.push({el:this.el.shadowRoot.querySelector("th"),row:0,col:0})}this.getGridColumnsFromTemplate().filter((r=>!r.hidden)).forEach(((t,e)=>{r.push({el:t.shadowRoot.querySelector("th"),row:0,col:e+(this.hasSelectionColumn()?1:0)})}));this.el.shadowRoot.querySelectorAll("td").forEach(((t,e)=>{r.push({el:t,row:1+Math.floor(e/this.totalDisplayedColumnCount()),col:e%this.totalDisplayedColumnCount()})}));return r}sortChangeEventHandler(r){if(r.detail.order==="none"||!this.columns)return;this.disableSortOrderForColumns(this.columns.filter((t=>t!==r.detail.column)));if(this.serverMode)return;this.sortBy(r.detail.column);this.updatePageIndex()}sortBy(r){if(r.sortFn){this.rows=ye(this.rows).sort(((t,e)=>r.sortFn(t.data,e.data,r)*N(r.sortOrder)))}else{this.rows=ye(this.rows).sort(((t,e)=>{const i=r.path;return(Tr(t.data,i)<Tr(e.data,i)?-1:Tr(t.data,i)>Tr(e.data,i)?1:0)*N(r.sortOrder)}))}}updatePageIndex(){if(!this.serverMode&&this.paginationEl){this.paginationEl.itemsCount=this.data.length;this.paginationEl.pageCount=Math.ceil(this.data.length/this.paginationEl.pageSize);if(this.paginationEl.pageCount<=1){this.paginationEl.currentPage=n.INDEX_FIRST_PAGE}else if(this.paginationEl.pageCount>0&&this.paginationEl.currentPage+1>this.paginationEl.pageCount){this.paginationEl.currentPage=this.paginationEl.pageCount-1}const r=ye(this.rows);r.forEach(((r,t)=>r.page=Math.floor(t/this.paginationEl.pageSize)));this.rows=[...r]}}paginationChangeEventHandler(){this.onPaginationChange()}paginationChangeEventHandlerOutside(r){if(this.wcsGridPaginationId&&this.wcsGridPaginationId===r.target.id){this.onPaginationChange()}}onPaginationChange(){if(this.serverMode)return;this.updatePageIndex()}onRowSelection(r){if(this.selectionConfig==="single"){this.rows.filter((t=>t.uuid!==r.uuid)).map((r=>r.selected=false))}r.selected=!r.selected;if(this.selectionConfig!=="single"||r.selected){this.wcsGridSelectionChange.emit({selectedRows:this.selectedRows.map((r=>this.wcsGridRowToWcsGridRowData(r))),changedRow:this.wcsGridRowToWcsGridRowData(r)})}this.rows=ye(this.rows)}get selectedRows(){return this.rows.filter((r=>r.selected))}selectAllRows(){const r=this.getRowsForCurrentPage();const t=!this.allRowsAreSelected();r.map((r=>r.selected=t));this.wcsGridAllSelectionChange.emit({rows:t?r.map((r=>this.wcsGridRowToWcsGridRowData(r))):[]});this.wcsGridSelectionChange.emit({selectedRows:this.selectedRows.map((r=>this.wcsGridRowToWcsGridRowData(r))),changedRow:"allCheckbox"});this.rows=ye(this.rows)}allRowsAreSelected(){const r=this.getRowsForCurrentPage();return r.length>0&&r.filter((r=>r.selected)).length===r.length}getRowsForCurrentPage(){if(!this.serverMode&&this.paginationEl){return this.rows.filter((r=>r.page===this.paginationEl.currentPage))}return this.rows}renderSelectionColumn(r,t){var e,i,s,n;switch(this.selectionConfig){case"none":return;case"single":return o("td",{"aria-colindex":this.atLeastOneColumnHidden()?1:null,tabIndex:((e=this.cursorPosition)===null||e===void 0?void 0:e.col)===0&&t+1===((i=this.cursorPosition)===null||i===void 0?void 0:i.row)?0:-1},o(je,{checked:r.selected,row:r,rowIndex:t+1,totalRows:this.rows.length,onClick:r=>{if(!r.selected){this.onRowSelection(r)}}}));case"multiple":return o("td",{"aria-colindex":this.atLeastOneColumnHidden()?1:null,tabIndex:((s=this.cursorPosition)===null||s===void 0?void 0:s.col)===0&&t+1===((n=this.cursorPosition)===null||n===void 0?void 0:n.row)?0:-1},o("wcs-checkbox",{tabIndex:-1,part:"row-checkbox",checked:r.selected,onWcsChange:this.onRowSelection.bind(this,r)}))}}getCellContent(r,t){if(t.formatter){return t.formatter(o,t.column,this.wcsGridRowToWcsGridRowData(r))}return t.content}totalColumnCount(){if(!this.columns){return 0}return this.columns.length+(this.hasSelectionColumn()?1:0)}totalDisplayedColumnCount(){var r,t;return(t=this.totalColumnCount()-((r=this.columns)===null||r===void 0?void 0:r.filter((r=>r.hidden)).length))!==null&&t!==void 0?t:0}atLeastOneColumnHidden(){return this.totalDisplayedColumnCount()!==this.totalColumnCount()}render(){var r,t,e,i;return o(s,{key:"1e9b1d5dc405c67428750276de3e38e8e163d20e"},o("table",Object.assign({key:"42e610c403c108f36c2f5e4eb276b9e1c6349b8c",role:"grid",ref:r=>this.nativeTable=r,"aria-rowcount":!this.loading&&((r=this.rows)===null||r===void 0?void 0:r.length),"aria-colcount":!this.loading&&this.totalDisplayedColumnCount()},this.inheritedAttributes),o("thead",{key:"365bf4de9329c94c5c891040b14ca844c6e8fd99"},o("tr",{key:"9d1e4c4cf0418f585679a055edbb88ca08493d3d","aria-rowindex":"1"},this.selectionConfig==="none"?"":o("th",{class:"wcs-grid-selection-column"},this.selectionConfig==="single"?"":o("wcs-checkbox",{tabIndex:((t=this.cursorPosition)===null||t===void 0?void 0:t.col)===0&&((e=this.cursorPosition)===null||e===void 0?void 0:e.row)===0?0:-1,part:"all-rows-checkbox",checked:this.allRowsAreSelected(),onWcsChange:this.selectAllRows.bind(this)})),o("slot",{key:"4c1ed31eeaf61d0f94a156cc97b393abafdfb6e3",name:"grid-column"}))),o("tbody",{key:"5758c76c248e9e54759bd008310047a5c670339a"},this.loading?o("tr",{"aria-busy":"true"},o("td",{colSpan:this.totalColumnCount(),class:"loading"},o("wcs-spinner",null))):(i=this.rows)===null||i===void 0?void 0:i.filter((r=>this.serverMode||!this.paginationEl||r.page===this.paginationEl.currentPage)).map(((r,t)=>this.renderRow(r,t))))),o("slot",{key:"170e79b086e8235ae736c8cc54512b0e3bb0e7ab",name:"grid-pagination"}))}renderRow(r,t){var e,i;let s=0;return o("tr",{class:r.selected?"selected":"",part:(e=this.rowCssPartsWithoutEmptyList(r))===null||e===void 0?void 0:e.join(" "),"aria-selected":r.selected?"true":null,"aria-rowindex":t+2},this.renderSelectionColumn(r,t),(i=r.cells)===null||i===void 0?void 0:i.map(((e,i)=>{var n,a;if(e.column.hidden){s++;return}const c=i-s+1+(this.hasSelectionColumn()?1:0);const d=c-1===((n=this.cursorPosition)===null||n===void 0?void 0:n.col)&&t+1===((a=this.cursorPosition)===null||a===void 0?void 0:a.row);return e.column.customCells?o("td",{tabIndex:d?0:-1,"aria-colindex":this.atLeastOneColumnHidden()?c:null},o("slot",{name:e.column.id+"-"+Tr(r.data,this.rowIdPath)})):o("td",{tabIndex:d?0:-1,"aria-colindex":this.atLeastOneColumnHidden()?c:null,part:e.column.path+"-column"},this.getCellContent(r,e))})))}rowCssPartsWithoutEmptyList(r){const t=this.rowCssPartsFn(r);return(t===null||t===void 0?void 0:t.length)===0?null:t}get el(){return this}static get watchers(){return{cursorPosition:["onCursorPositionChange"],data:["onDataChange"],selectedItems:["onSelectedItemsPropertyChange"]}}static get style(){return Ae+Re}},[1,"wcs-grid",{serverMode:[516,"server-mode"],data:[16],loading:[516],selectionConfig:[1,"selection-config"],selectedItems:[8,"selected-items"],wcsGridPaginationId:[1,"wcs-grid-pagination-id"],rowIdPath:[1,"row-id-path"],rowCssPartsFn:[16],columns:[32],paginationEl:[32],rows:[32],cursorPosition:[32],focusFirstCell:[64],setAriaAttribute:[64]},[[0,"focus","onFocus"],[0,"blur","onBlur"],[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"keydown","onKeyDown"],[1,"mousedown","onClick"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]],{cursorPosition:["onCursorPositionChange"],data:["onDataChange"],selectedItems:["onSelectedItemsPropertyChange"]}]);function Ie(){if(typeof customElements==="undefined"){return}const r=["wcs-grid","wcs-button","wcs-checkbox","wcs-spinner"];r.forEach((r=>{switch(r){case"wcs-grid":if(!customElements.get(r)){customElements.define(r,Se)}break;case"wcs-button":if(!customElements.get(r)){h()}break;case"wcs-checkbox":if(!customElements.get(r)){f()}break;case"wcs-spinner":if(!customElements.get(r)){g()}break}}))}const Oe=Se;const Fe=Ie;export{Oe as WcsGrid,Fe as defineCustomElement};
+import{p as r,H as t,d as e,f as i,h as o,c as s}from"./p-2bef72c7.js";import{G as n}from"./p-2f7bca1e.js";import{k as a}from"./p-475be4d2.js";import{h as c}from"./p-d3404c52.js";import{i as d,a as l,s as u}from"./p-bf326ae8.js";import{d as h}from"./p-ff261e50.js";import{d as f}from"./p-7a06295b.js";import{d as g}from"./p-bce8c93f.js";import{i as w,b,a as v,S as m,c as p,g as k,e as y,d as C,f as j,h as x,M as A,o as _,k as R,r as E,j as S,s as I,l as O,m as F,U as P,n as D,p as M,q as G,t as T,u as W,v as H,w as U}from"./p-1329a1af.js";function N(r){switch(r){case"asc":return 1;case"desc":return-1}}var z;var B=new Uint8Array(16);function L(){if(!z){z=typeof crypto!=="undefined"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||typeof msCrypto!=="undefined"&&typeof msCrypto.getRandomValues==="function"&&msCrypto.getRandomValues.bind(msCrypto);if(!z){throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported")}}return z(B)}const $=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;function K(r){return typeof r==="string"&&$.test(r)}var V=[];for(var q=0;q<256;++q){V.push((q+256).toString(16).substr(1))}function J(r){var t=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;var e=(V[r[t+0]]+V[r[t+1]]+V[r[t+2]]+V[r[t+3]]+"-"+V[r[t+4]]+V[r[t+5]]+"-"+V[r[t+6]]+V[r[t+7]]+"-"+V[r[t+8]]+V[r[t+9]]+"-"+V[r[t+10]]+V[r[t+11]]+V[r[t+12]]+V[r[t+13]]+V[r[t+14]]+V[r[t+15]]).toLowerCase();if(!K(e)){throw TypeError("Stringified UUID is invalid")}return e}function Q(r,t,e){r=r||{};var i=r.random||(r.rng||L)();i[6]=i[6]&15|64;i[8]=i[8]&63|128;if(t){e=e||0;for(var o=0;o<16;++o){t[e+o]=i[o]}return t}return J(i)}var X="[object Symbol]";function Y(r){return typeof r=="symbol"||w(r)&&b(r)==X}function Z(r,t){var e=-1,i=r==null?0:r.length,o=Array(i);while(++e<i){o[e]=t(r[e],e,r)}return o}var rr=1/0;var tr=m?m.prototype:undefined,er=tr?tr.toString:undefined;function ir(r){if(typeof r=="string"){return r}if(v(r)){return Z(r,ir)+""}if(Y(r)){return er?er.call(r):""}var t=r+"";return t=="0"&&1/r==-rr?"-0":t}var or=Object.create;var sr=function(){function r(){}return function(t){if(!p(t)){return{}}if(or){return or(t)}r.prototype=t;var e=new r;r.prototype=undefined;return e}}();const nr=sr;function ar(r,t){var e=-1,i=r.length;t||(t=Array(i));while(++e<i){t[e]=r[e]}return t}var cr=function(){try{var r=k(Object,"defineProperty");r({},"",{});return r}catch(r){}}();const dr=cr;function lr(r,t){var e=-1,i=r==null?0:r.length;while(++e<i){if(t(r[e],e,r)===false){break}}return r}function ur(r,t,e){if(t=="__proto__"&&dr){dr(r,t,{configurable:true,enumerable:true,value:e,writable:true})}else{r[t]=e}}var hr=Object.prototype;var fr=hr.hasOwnProperty;function gr(r,t,e){var i=r[t];if(!(fr.call(r,t)&&y(i,e))||e===undefined&&!(t in r)){ur(r,t,e)}}function wr(r,t,e,i){var o=!e;e||(e={});var s=-1,n=t.length;while(++s<n){var a=t[s];var c=i?i(e[a],r[a],a,e,r):undefined;if(c===undefined){c=r[a]}if(o){ur(e,a,c)}else{gr(e,a,c)}}return e}function br(r){var t=[];if(r!=null){for(var e in Object(r)){t.push(e)}}return t}var vr=Object.prototype;var mr=vr.hasOwnProperty;function pr(r){if(!p(r)){return br(r)}var t=C(r),e=[];for(var i in r){if(!(i=="constructor"&&(t||!mr.call(r,i)))){e.push(i)}}return e}function kr(r){return j(r)?x(r,true):pr(r)}var yr=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,Cr=/^\w*$/;function jr(r,t){if(v(r)){return false}var e=typeof r;if(e=="number"||e=="symbol"||e=="boolean"||r==null||Y(r)){return true}return Cr.test(r)||!yr.test(r)||t!=null&&r in Object(t)}var xr="Expected a function";function Ar(r,t){if(typeof r!="function"||t!=null&&typeof t!="function"){throw new TypeError(xr)}var e=function(){var i=arguments,o=t?t.apply(this,i):i[0],s=e.cache;if(s.has(o)){return s.get(o)}var n=r.apply(this,i);e.cache=s.set(o,n)||s;return n};e.cache=new(Ar.Cache||A);return e}Ar.Cache=A;var _r=500;function Rr(r){var t=Ar(r,(function(r){if(e.size===_r){e.clear()}return r}));var e=t.cache;return t}var Er=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g;var Sr=/\\(\\)?/g;var Ir=Rr((function(r){var t=[];if(r.charCodeAt(0)===46){t.push("")}r.replace(Er,(function(r,e,i,o){t.push(i?o.replace(Sr,"$1"):e||r)}));return t}));const Or=Ir;function Fr(r){return r==null?"":ir(r)}function Pr(r,t){if(v(r)){return r}return jr(r,t)?[r]:Or(Fr(r))}var Dr=1/0;function Mr(r){if(typeof r=="string"||Y(r)){return r}var t=r+"";return t=="0"&&1/r==-Dr?"-0":t}function Gr(r,t){t=Pr(t,r);var e=0,i=t.length;while(r!=null&&e<i){r=r[Mr(t[e++])]}return e&&e==i?r:undefined}function Tr(r,t,e){var i=r==null?undefined:Gr(r,t);return i===undefined?e:i}var Wr=_(Object.getPrototypeOf,Object);const Hr=Wr;function Ur(r,t){return r&&wr(t,R(t),r)}function Nr(r,t){return r&&wr(t,kr(t),r)}var zr=typeof exports=="object"&&exports&&!exports.nodeType&&exports;var Br=zr&&typeof module=="object"&&module&&!module.nodeType&&module;var Lr=Br&&Br.exports===zr;var $r=Lr?E.Buffer:undefined,Kr=$r?$r.allocUnsafe:undefined;function Vr(r,t){if(t){return r.slice()}var e=r.length,i=Kr?Kr(e):new r.constructor(e);r.copy(i);return i}function qr(r,t){return wr(r,S(r),t)}var Jr=Object.getOwnPropertySymbols;var Qr=!Jr?I:function(r){var t=[];while(r){O(t,S(r));r=Hr(r)}return t};const Xr=Qr;function Yr(r,t){return wr(r,Xr(r),t)}function Zr(r){return F(r,kr,Xr)}var rt=Object.prototype;var tt=rt.hasOwnProperty;function et(r){var t=r.length,e=new r.constructor(t);if(t&&typeof r[0]=="string"&&tt.call(r,"index")){e.index=r.index;e.input=r.input}return e}function it(r){var t=new r.constructor(r.byteLength);new P(t).set(new P(r));return t}function ot(r,t){var e=t?it(r.buffer):r.buffer;return new r.constructor(e,r.byteOffset,r.byteLength)}var st=/\w*$/;function nt(r){var t=new r.constructor(r.source,st.exec(r));t.lastIndex=r.lastIndex;return t}var at=m?m.prototype:undefined,ct=at?at.valueOf:undefined;function dt(r){return ct?Object(ct.call(r)):{}}function lt(r,t){var e=t?it(r.buffer):r.buffer;return new r.constructor(e,r.byteOffset,r.length)}var ut="[object Boolean]",ht="[object Date]",ft="[object Map]",gt="[object Number]",wt="[object RegExp]",bt="[object Set]",vt="[object String]",mt="[object Symbol]";var pt="[object ArrayBuffer]",kt="[object DataView]",yt="[object Float32Array]",Ct="[object Float64Array]",jt="[object Int8Array]",xt="[object Int16Array]",At="[object Int32Array]",_t="[object Uint8Array]",Rt="[object Uint8ClampedArray]",Et="[object Uint16Array]",St="[object Uint32Array]";function It(r,t,e){var i=r.constructor;switch(t){case pt:return it(r);case ut:case ht:return new i(+r);case kt:return ot(r,e);case yt:case Ct:case jt:case xt:case At:case _t:case Rt:case Et:case St:return lt(r,e);case ft:return new i;case gt:case vt:return new i(r);case wt:return nt(r);case bt:return new i;case mt:return dt(r)}}function Ot(r){return typeof r.constructor=="function"&&!C(r)?nr(Hr(r)):{}}var Ft="[object Map]";function Pt(r){return w(r)&&D(r)==Ft}var Dt=G&&G.isMap;var Mt=Dt?M(Dt):Pt;const Gt=Mt;var Tt="[object Set]";function Wt(r){return w(r)&&D(r)==Tt}var Ht=G&&G.isSet;var Ut=Ht?M(Ht):Wt;const Nt=Ut;var zt=1,Bt=2,Lt=4;var $t="[object Arguments]",Kt="[object Array]",Vt="[object Boolean]",qt="[object Date]",Jt="[object Error]",Qt="[object Function]",Xt="[object GeneratorFunction]",Yt="[object Map]",Zt="[object Number]",re="[object Object]",te="[object RegExp]",ee="[object Set]",ie="[object String]",oe="[object Symbol]",se="[object WeakMap]";var ne="[object ArrayBuffer]",ae="[object DataView]",ce="[object Float32Array]",de="[object Float64Array]",le="[object Int8Array]",ue="[object Int16Array]",he="[object Int32Array]",fe="[object Uint8Array]",ge="[object Uint8ClampedArray]",we="[object Uint16Array]",be="[object Uint32Array]";var ve={};ve[$t]=ve[Kt]=ve[ne]=ve[ae]=ve[Vt]=ve[qt]=ve[ce]=ve[de]=ve[le]=ve[ue]=ve[he]=ve[Yt]=ve[Zt]=ve[re]=ve[te]=ve[ee]=ve[ie]=ve[oe]=ve[fe]=ve[ge]=ve[we]=ve[be]=true;ve[Jt]=ve[Qt]=ve[se]=false;function me(r,t,e,i,o,s){var n,a=t&zt,c=t&Bt,d=t&Lt;if(e){n=o?e(r,i,o,s):e(r)}if(n!==undefined){return n}if(!p(r)){return r}var l=v(r);if(l){n=et(r);if(!a){return ar(r,n)}}else{var u=D(r),h=u==Qt||u==Xt;if(T(r)){return Vr(r,a)}if(u==re||u==$t||h&&!o){n=c||h?{}:Ot(r);if(!a){return c?Yr(r,Nr(n,r)):qr(r,Ur(n,r))}}else{if(!ve[u]){return o?r:{}}n=It(r,u,a)}}s||(s=new W);var f=s.get(r);if(f){return f}s.set(r,n);if(Nt(r)){r.forEach((function(i){n.add(me(i,t,e,i,r,s))}))}else if(Gt(r)){r.forEach((function(i,o){n.set(o,me(i,t,e,o,r,s))}))}var g=d?c?Zr:H:c?kr:R;var w=l?undefined:g(r);lr(w||r,(function(i,o){if(w){o=i;i=r[o]}gr(n,o,me(i,t,e,o,r,s))}));return n}var pe=1,ke=4;function ye(r){return me(r,pe|ke)}function Ce(r,t){const e=a(r);if(e==="UNKNOWN"){return[]}switch(e){case"UP_ARROW":return[{kind:"FocusCell",target:"up"}];case"DOWN_ARROW":return[{kind:"FocusCell",target:"down"}];case"LEFT_ARROW":return[{kind:"FocusCell",target:"left"}];case"RIGHT_ARROW":return[{kind:"FocusCell",target:"right"}];case"HOME":return[{kind:"FocusCell",target:"first_of_row"}];case"END":return[{kind:"FocusCell",target:"last_of_row"}];case"MAJ+SPACE":switch(t){case"grid_selection_single":case"grid_selection_multiple":return[{kind:"SelectRow",target:"one"}]}break;case"CTRL+A":switch(t){case"grid_selection_multiple":return[{kind:"SelectRow",target:"all"}]}break;case"CTRL+HOME":return[{kind:"FocusCell",target:"first_of_grid"}];case"CTRL+END":return[{kind:"FocusCell",target:"last_of_grid"}]}return[]}const je=({checked:r,row:t,rowIndex:e,totalRows:i,onClick:o})=>{let s;return c("div",{class:`grid-radio ${r?"checked":""}`,onClick:r=>s.click()},c("input",{type:"radio",name:"selection","aria-setsize":i,"aria-posinset":e,tabindex:"-1",checked:r,"aria-checked":`${r}`,ref:r=>s=r,onClick:r=>o(t)}))};const xe=":host{--wcs-grid-gap:0;--wcs-grid-vertical-align:middle;--wcs-grid-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-grid-cell-text-color:var(--wcs-semantic-color-text-secondary);--wcs-grid-cell-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-grid-cell-padding-vertical:var(--wcs-semantic-spacing-base);--wcs-grid-cell-border-bottom:none;--wcs-grid-cell-separator-border:none;--wcs-grid-first-cell-border-radius:0;--wcs-grid-last-cell-border-radius:0;--wcs-grid-highlight-color:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-grid-row-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-grid-row-odd-background-color:var(--wcs-grid-row-background-color);--wcs-grid-row-even-background-color:var(--wcs-semantic-color-background-surface-accent-lightest);--wcs-grid-header-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-grid-header-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-grid-header-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-grid-header-text-color:var(--wcs-semantic-color-text-primary);--wcs-grid-header-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-grid-header-font-size:var(--wcs-semantic-font-size-label-1);--wcs-grid-header-line-height:var(--wcs-primitive-font-line-height-140);--wcs-grid-header-padding-vertical:var(--wcs-semantic-spacing-base);--wcs-grid-header-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-grid-header-border-left:none;--wcs-grid-header-border-radius:0;--wcs-grid-header-border-bottom:solid var(--wcs-semantic-border-width-default) var(--wcs-semantic-color-border-secondary);--wcs-grid-header-transition-duration:var(--wcs-semantic-motion-duration-feedback-fast);--wcs-grid-first-header-background-color:var(--wcs-semantic-color-background-action-secondary-default);--wcs-grid-first-header-border-radius:0;--wcs-grid-last-header-border-radius:0;--wcs-grid-column-selection-width:calc(5 * var(--wcs-semantic-spacing-base));--wcs-grid-header-sort-arrow-color-default:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-grid-header-sort-arrow-color-hover:var(--wcs-semantic-color-foreground-action-neutral-hover);display:block}:host th{border-radius:var(--wcs-grid-first-header-border-radius);background-color:var(--wcs-grid-first-header-background-color)}:host ::slotted([slot=grid-column]:first-child){--wcs-grid-header-border-left:none}:host :host([selection]) ::slotted([slot=grid-column]:first-child){--wcs-component-grid-header-border-radius-first:0;--wcs-grid-header-border-left:var(--wcs-grid-header-border-left)}:host table{width:100%;border-collapse:collapse;border-spacing:var(--wcs-grid-gap)}:host table thead{border-bottom:var(--wcs-grid-header-border-bottom)}:host table tbody{vertical-align:var(--wcs-grid-vertical-align)}:host td{color:var(--wcs-grid-cell-text-color);margin:0;padding:var(--wcs-grid-cell-padding-vertical) var(--wcs-grid-cell-padding-horizontal)}:host td:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-outline-color);outline-offset:0;border-radius:0.1rem}:host td:first-child{border-radius:var(--wcs-grid-first-cell-border-radius)}:host td:last-child{border-radius:var(--wcs-grid-last-cell-border-radius)}:host td:not(:first-child){border-left:var(--wcs-grid-cell-separator-border)}:host tr{background-color:var(--wcs-grid-row-background-color)}:host tr:nth-child(odd){background-color:var(--wcs-grid-row-odd-background-color, var(--wcs-grid-row-background-color))}:host tr:nth-child(even){background-color:var(--wcs-grid-row-even-background-color, var(--wcs-grid-row-background-color))}:host tr:not(:last-child) td{border-bottom:var(--wcs-grid-cell-border-bottom)}:host .wcs-grid-selection-column{padding:var(--wcs-grid-cell-padding-vertical) var(--wcs-grid-cell-padding-horizontal);width:var(--wcs-grid-column-selection-width);text-align:start}:host tr.selected{background-color:var(--wcs-grid-highlight-color)}:host .loading{text-align:center}";const Ae=xe;const _e='.grid-radio{--wcs-grid-radio-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-grid-radio-padding:calc(var(--wcs-semantic-size-base) / 4);--wcs-grid-radio-transition:var(--wcs-semantic-motion-duration-feedback-base);--wcs-grid-radio-border-color-default:var(--wcs-semantic-color-border-control-indicator-default);--wcs-grid-radio-border-color-selected:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-grid-radio-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-grid-radio-border-color-disabled:var(--wcs-semantic-color-border-control-indicator-disabled);--wcs-grid-radio-background-color-default:transparent;--wcs-grid-radio-background-color-selected:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-grid-radio-background-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-grid-radio-inner-border-color:white;width:fit-content;cursor:pointer;padding:var(--wcs-grid-radio-padding, 0.125rem);position:relative;}.grid-radio:has(input:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-radio-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}@supports not selector(:has(input:focus-visible)){.grid-radio:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-radio-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}}.grid-radio input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.grid-radio::before{content:"";display:flex;border-radius:50%;border:2px solid var(--wcs-grid-radio-border-color-default);position:relative;width:1.125rem;height:1.125rem;box-sizing:border-box;background-color:var(--wcs-grid-radio-background-color-default);transition:var(--wcs-grid-radio-transition, 0.175s) ease-in-out}.grid-radio:hover::before{border-color:var(--wcs-grid-radio-border-color-hover)}.grid-radio.checked::before{border-color:var(--wcs-grid-radio-border-color-selected);background-color:var(--wcs-grid-radio-background-color-selected);outline:solid 2px var(--wcs-grid-radio-inner-border-color);outline-offset:-4px}';const Re=_e;const Ee=["title"];const Se=r(class r extends t{constructor(){super();this.__registerHost();this.__attachShadow();this.wcsGridSelectionChange=e(this,"wcsGridSelectionChange",7);this.wcsGridAllSelectionChange=e(this,"wcsGridAllSelectionChange",7);this.wcsFocus=e(this,"wcsFocus",7);this.wcsBlur=e(this,"wcsBlur",7);this.inheritedAttributes={};this.serverMode=false;this.data=undefined;this.loading=undefined;this.selectionConfig="none";this.selectedItems=[];this.wcsGridPaginationId=undefined;this.rowIdPath=undefined;this.rowCssPartsFn=r=>null;this.columns=undefined;this.paginationEl=undefined;this.rows=[];this.cursorPosition={col:0,row:1}}onCursorPositionChange(r){this.getGridColumnsFromTemplate().forEach((t=>t.cursorPosition=r))}onDataChange(r){this.updateGridRows(r);this.refreshSort(false);this.updatePageIndex()}onSelectedItemsPropertyChange(r){this.updateSelectionWithValues(r)}onFocus(r){var t;(t=this.getElementToFocusAtCursorPosition())===null||t===void 0?void 0:t.focus();this.wcsFocus.emit(r)}onBlur(r){this.wcsBlur.emit(r)}async focusFirstCell(){var r;this.cursorPosition={col:this.selectionConfig==="none"?0:1,row:1};(r=this.getElementToFocusAtCursorPosition())===null||r===void 0?void 0:r.focus()}hasSelectionColumn(){return this.selectionConfig!=="none"}getElementToFocusAtCursorPosition(){var r,t;const e=(r=this.gridElementsWithCoordinates.find((r=>{var t,e;return r.col===((t=this.cursorPosition)===null||t===void 0?void 0:t.col)&&r.row===((e=this.cursorPosition)===null||e===void 0?void 0:e.row)})))===null||r===void 0?void 0:r.el;return this.hasSelectionColumn()?(t=e.querySelector('wcs-checkbox,input[type="radio"]'))!==null&&t!==void 0?t:e:e}moveCursorPosition(r,t){var e;this.cursorPosition={col:r==="first"?0:r==="last"?this.totalDisplayedColumnCount()-1:Math.min(Math.max(this.cursorPosition.col+r,0),this.totalDisplayedColumnCount()-1),row:t==="first"?0:t==="last"?this.getRowsForCurrentPage().length:Math.min(Math.max(this.cursorPosition.row+t,0),this.getRowsForCurrentPage().length)};this.handleCursorPositionOnEmptyTh();(e=this.getElementToFocusAtCursorPosition())===null||e===void 0?void 0:e.focus()}handleCursorPositionOnEmptyTh(){if(this.selectionConfig==="single"&&this.cursorPosition.col===0&&this.cursorPosition.row===0){this.cursorPosition={col:1,row:0}}}onHiddenColumnChange(){i(this);this.cursorPosition={col:0,row:1}}onKeyDown(r){var t;if(((t=document.activeElement)===null||t===void 0?void 0:t.tagName)==="WCS-GRID-PAGINATION"){return}let e;switch(this.selectionConfig){case"multiple":e="grid_selection_multiple";break;case"single":e="grid_selection_single";break;case"none":e="grid_no_selection";break}const i=Ce(r,e);if(i.length!=0){r.preventDefault()}for(const t of i){this.doActionFromKeyboardEventAssociatedAction(t,r)}}doActionFromKeyboardEventAssociatedAction(r,t){switch(r.kind){case"FocusCell":switch(r.target){case"up":this.moveCursorPosition(0,-1);break;case"down":this.moveCursorPosition(0,1);break;case"left":this.moveCursorPosition(-1,0);break;case"right":this.moveCursorPosition(1,0);break;case"first_of_row":this.moveCursorPosition("first",0);break;case"last_of_row":this.moveCursorPosition("last",0);break;case"first_of_grid":this.moveCursorPosition("first","first");break;case"last_of_grid":this.moveCursorPosition("last","last");break}case"SelectRow":switch(r.target){case"one":t.preventDefault();if(this.cursorPosition.row>0){this.onRowSelection(this.rows[this.cursorPosition.row-1])}break;case"all":this.selectAllRows();break}break;default:throw new Error("Internal error")}}onClick(r){const t=r.composedPath().filter((r=>["TD","TH"].includes(r.nodeName)))[0];if(!t)return;const e=this.gridElementsWithCoordinates.find((r=>r.el===t));this.cursorPosition={col:e.col,row:e.row}}updateSelectionWithValues(r){if(this.selectionConfig==="single"){this.rows.map((r=>r.selected=false));for(const t of this.rows){if(U(t.data,r)){t.selected=true;break}}}else if(this.selectionConfig==="multiple"){this.rows.map((r=>r.selected=false));for(const t of this.rows){if(r.find((r=>U(r,t.data)))){t.selected=true}}}this.rows=ye(this.rows)}wcsGridRowToWcsGridRowData(r){return{selected:r.selected,page:r.page,data:r.data}}updateGridRows(r){const t=[];if(r&&this.columns){for(let e=0;e<r.length;e++){const i={uuid:Q(),data:r[e],selected:false,cells:[]};let o=0;for(const t of this.columns){t.columnPosition=o+(this.hasSelectionColumn()?1:0);o++;i.cells.push({content:Tr(r[e],t.path),column:t,formatter:t.formatter})}t.push(i)}this.rows=t}}componentDidLoad(){this.columns=this.getGridColumnsFromTemplate();this.paginationEl=this.wcsGridPaginationId?document.getElementById(this.wcsGridPaginationId):this.getGridPaginationsFromTemplate()[0];this.updateGridRows(this.data);if(this.selectedItems){this.updateSelectionWithValues(this.selectedItems)}this.refreshSort(true);this.updatePageIndex()}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},d(this.el)),l(this.el,Ee))}async setAriaAttribute(r,t){u(this.nativeTable,r,t)}refreshSort(r){if(this.columns){const[t,...e]=this.columns.filter((r=>r.sortOrder!=="none"));if(t&&!this.serverMode){this.sortBy(t)}r&&this.disableSortOrderForColumns(e)}}disableSortOrderForColumns(r){r===null||r===void 0?void 0:r.forEach((r=>r.sortOrder="none"))}getGridColumnsFromTemplate(){const r=this.el.shadowRoot.querySelector('slot[name="grid-column"]');return r.assignedElements()}getGridPaginationsFromTemplate(){const r=this.el.shadowRoot.querySelector('slot[name="grid-pagination"]');return r.assignedElements()}get gridElementsWithCoordinates(){const r=[];if(this.selectionConfig==="multiple"){r.push({el:this.el.shadowRoot.querySelector("th"),row:0,col:0})}this.getGridColumnsFromTemplate().filter((r=>!r.hidden)).forEach(((t,e)=>{r.push({el:t.shadowRoot.querySelector("th"),row:0,col:e+(this.hasSelectionColumn()?1:0)})}));this.el.shadowRoot.querySelectorAll("td").forEach(((t,e)=>{r.push({el:t,row:1+Math.floor(e/this.totalDisplayedColumnCount()),col:e%this.totalDisplayedColumnCount()})}));return r}sortChangeEventHandler(r){if(r.detail.order==="none"||!this.columns)return;this.disableSortOrderForColumns(this.columns.filter((t=>t!==r.detail.column)));if(this.serverMode)return;this.sortBy(r.detail.column);this.updatePageIndex()}sortBy(r){if(r.sortFn){this.rows=ye(this.rows).sort(((t,e)=>r.sortFn(t.data,e.data,r)*N(r.sortOrder)))}else{this.rows=ye(this.rows).sort(((t,e)=>{const i=r.path;return(Tr(t.data,i)<Tr(e.data,i)?-1:Tr(t.data,i)>Tr(e.data,i)?1:0)*N(r.sortOrder)}))}}updatePageIndex(){if(!this.serverMode&&this.paginationEl){this.paginationEl.itemsCount=this.data.length;this.paginationEl.pageCount=Math.ceil(this.data.length/this.paginationEl.pageSize);if(this.paginationEl.pageCount<=1){this.paginationEl.currentPage=n.INDEX_FIRST_PAGE}else if(this.paginationEl.pageCount>0&&this.paginationEl.currentPage+1>this.paginationEl.pageCount){this.paginationEl.currentPage=this.paginationEl.pageCount-1}const r=ye(this.rows);r.forEach(((r,t)=>r.page=Math.floor(t/this.paginationEl.pageSize)));this.rows=[...r]}}paginationChangeEventHandler(){this.onPaginationChange()}paginationChangeEventHandlerOutside(r){if(this.wcsGridPaginationId&&this.wcsGridPaginationId===r.target.id){this.onPaginationChange()}}onPaginationChange(){if(this.serverMode)return;this.updatePageIndex()}onRowSelection(r){if(this.selectionConfig==="single"){this.rows.filter((t=>t.uuid!==r.uuid)).map((r=>r.selected=false))}r.selected=!r.selected;if(this.selectionConfig!=="single"||r.selected){this.wcsGridSelectionChange.emit({selectedRows:this.selectedRows.map((r=>this.wcsGridRowToWcsGridRowData(r))),changedRow:this.wcsGridRowToWcsGridRowData(r)})}this.rows=ye(this.rows)}get selectedRows(){return this.rows.filter((r=>r.selected))}selectAllRows(){const r=this.getRowsForCurrentPage();const t=!this.allRowsAreSelected();r.map((r=>r.selected=t));this.wcsGridAllSelectionChange.emit({rows:t?r.map((r=>this.wcsGridRowToWcsGridRowData(r))):[]});this.wcsGridSelectionChange.emit({selectedRows:this.selectedRows.map((r=>this.wcsGridRowToWcsGridRowData(r))),changedRow:"allCheckbox"});this.rows=ye(this.rows)}allRowsAreSelected(){const r=this.getRowsForCurrentPage();return r.length>0&&r.filter((r=>r.selected)).length===r.length}getRowsForCurrentPage(){if(!this.serverMode&&this.paginationEl){return this.rows.filter((r=>r.page===this.paginationEl.currentPage))}return this.rows}renderSelectionColumn(r,t){var e,i,s,n;switch(this.selectionConfig){case"none":return;case"single":return o("td",{"aria-colindex":this.atLeastOneColumnHidden()?1:null,tabIndex:((e=this.cursorPosition)===null||e===void 0?void 0:e.col)===0&&t+1===((i=this.cursorPosition)===null||i===void 0?void 0:i.row)?0:-1},o(je,{checked:r.selected,row:r,rowIndex:t+1,totalRows:this.rows.length,onClick:r=>{if(!r.selected){this.onRowSelection(r)}}}));case"multiple":return o("td",{"aria-colindex":this.atLeastOneColumnHidden()?1:null,tabIndex:((s=this.cursorPosition)===null||s===void 0?void 0:s.col)===0&&t+1===((n=this.cursorPosition)===null||n===void 0?void 0:n.row)?0:-1},o("wcs-checkbox",{tabIndex:-1,part:"row-checkbox",checked:r.selected,onWcsChange:this.onRowSelection.bind(this,r)}))}}getCellContent(r,t){if(t.formatter){return t.formatter(o,t.column,this.wcsGridRowToWcsGridRowData(r))}return t.content}totalColumnCount(){if(!this.columns){return 0}return this.columns.length+(this.hasSelectionColumn()?1:0)}totalDisplayedColumnCount(){var r,t;return(t=this.totalColumnCount()-((r=this.columns)===null||r===void 0?void 0:r.filter((r=>r.hidden)).length))!==null&&t!==void 0?t:0}atLeastOneColumnHidden(){return this.totalDisplayedColumnCount()!==this.totalColumnCount()}render(){var r,t,e,i;return o(s,{key:"b19822a50c13e2c45df1457d9e7a5100b2ba62ef"},o("table",Object.assign({key:"26b9e13d87544a151d6b31e6019f44f980541153",role:"grid",ref:r=>this.nativeTable=r,"aria-rowcount":!this.loading&&((r=this.rows)===null||r===void 0?void 0:r.length),"aria-colcount":!this.loading&&this.totalDisplayedColumnCount()},this.inheritedAttributes),o("thead",{key:"1e5a328e858cbf3a6ad29e2db070c4c44c67bfe5"},o("tr",{key:"121c5b20769d31b4366b3c563fd3fce695f6ef83","aria-rowindex":"1"},this.selectionConfig==="none"?"":o("th",{class:"wcs-grid-selection-column"},this.selectionConfig==="single"?"":o("wcs-checkbox",{tabIndex:((t=this.cursorPosition)===null||t===void 0?void 0:t.col)===0&&((e=this.cursorPosition)===null||e===void 0?void 0:e.row)===0?0:-1,part:"all-rows-checkbox",checked:this.allRowsAreSelected(),onWcsChange:this.selectAllRows.bind(this)})),o("slot",{key:"20977331e2ea13fae89d239155d9800764dd2695",name:"grid-column"}))),o("tbody",{key:"6587df7ab7251139904249def1a347f3e6718f70"},this.loading?o("tr",{"aria-busy":"true"},o("td",{colSpan:this.totalColumnCount(),class:"loading"},o("wcs-spinner",null))):(i=this.rows)===null||i===void 0?void 0:i.filter((r=>this.serverMode||!this.paginationEl||r.page===this.paginationEl.currentPage)).map(((r,t)=>this.renderRow(r,t))))),o("slot",{key:"134dcd235b562cd2734889cfd6eb43e4eda012ad",name:"grid-pagination"}))}renderRow(r,t){var e,i;let s=0;return o("tr",{class:r.selected?"selected":"",part:(e=this.rowCssPartsWithoutEmptyList(r))===null||e===void 0?void 0:e.join(" "),"aria-selected":r.selected?"true":null,"aria-rowindex":t+2},this.renderSelectionColumn(r,t),(i=r.cells)===null||i===void 0?void 0:i.map(((e,i)=>{var n,a;if(e.column.hidden){s++;return}const c=i-s+1+(this.hasSelectionColumn()?1:0);const d=c-1===((n=this.cursorPosition)===null||n===void 0?void 0:n.col)&&t+1===((a=this.cursorPosition)===null||a===void 0?void 0:a.row);return e.column.customCells?o("td",{tabIndex:d?0:-1,"aria-colindex":this.atLeastOneColumnHidden()?c:null},o("slot",{name:e.column.id+"-"+Tr(r.data,this.rowIdPath)})):o("td",{tabIndex:d?0:-1,"aria-colindex":this.atLeastOneColumnHidden()?c:null,part:e.column.path+"-column"},this.getCellContent(r,e))})))}rowCssPartsWithoutEmptyList(r){const t=this.rowCssPartsFn(r);return(t===null||t===void 0?void 0:t.length)===0?null:t}get el(){return this}static get watchers(){return{cursorPosition:["onCursorPositionChange"],data:["onDataChange"],selectedItems:["onSelectedItemsPropertyChange"]}}static get style(){return Ae+Re}},[1,"wcs-grid",{serverMode:[516,"server-mode"],data:[16],loading:[516],selectionConfig:[1,"selection-config"],selectedItems:[8,"selected-items"],wcsGridPaginationId:[1,"wcs-grid-pagination-id"],rowIdPath:[1,"row-id-path"],rowCssPartsFn:[16],columns:[32],paginationEl:[32],rows:[32],cursorPosition:[32],focusFirstCell:[64],setAriaAttribute:[64]},[[0,"focus","onFocus"],[0,"blur","onBlur"],[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"keydown","onKeyDown"],[1,"mousedown","onClick"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]],{cursorPosition:["onCursorPositionChange"],data:["onDataChange"],selectedItems:["onSelectedItemsPropertyChange"]}]);function Ie(){if(typeof customElements==="undefined"){return}const r=["wcs-grid","wcs-button","wcs-checkbox","wcs-spinner"];r.forEach((r=>{switch(r){case"wcs-grid":if(!customElements.get(r)){customElements.define(r,Se)}break;case"wcs-button":if(!customElements.get(r)){h()}break;case"wcs-checkbox":if(!customElements.get(r)){f()}break;case"wcs-spinner":if(!customElements.get(r)){g()}break}}))}const Oe=Se;const Fe=Ie;export{Oe as WcsGrid,Fe as defineCustomElement};
 //# sourceMappingURL=wcs-grid.js.map