wcs-core 7.1.0 → 7.2.0

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

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

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

@@ -8,7 +8,7 @@ const Field = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'fb2c8c01280829e581dda580158aa646771324d0' }, h("slot", { key: '26ad71454a94463bc4f0b9c32ad7b9a1cca72196', name: "label" }), h("slot", { key: '2bb5c1c03c3e26e07cc6da22b20a581b7fb4a4aa', name: "content" })));
+        return (h(Host, { key: 'ae0a6c7224dc199cd6cd342d77878bfff17aa49b' }, h("slot", { key: '408c146f3e6bfa1868964a29934494215627fb59', name: "label" }), h("slot", { key: '9c2151491f6acc4a5a6da36676e21e8dee6f156a', name: "content" })));
     }
 };
 Field.style = WcsFieldStyle0;

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

@@ -8,7 +8,7 @@ const Footer = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '98c10026067800d6d448f8f294f17b94d3f47bff' }, h("footer", { key: '6cba4d564d2febebb9a86489f664fa11f15a915a', role: "contentinfo" }, h("div", { key: '435b4010ba33fd6426dc9b55f2d38ad35883cc8d', class: "container" }, h("div", { key: 'a3a5f625ac9d40d3550d43f1be880f53995cdca1' }, h("slot", { key: '720270631183615417cf4436bb8977e54e167d70' })), h("div", { key: '48bc00852f3ef7703153dfc185e2dab24a47b921', class: "end" }, h("div", { key: '591e2769df499367ff23948ba1960c67bf068e0c', class: "end-left" }, h("slot", { key: 'edcfaa3ef55a895a975fe0571e0346a86ac784d6', name: "end-left" })), h("div", { key: '0ef66c2342f680b5ebd6ff6bfdd90b67b7675d47', class: "end-right" }, h("slot", { key: '8a58b3a68a545e1cb7941784e2d437dd9099b9ab', name: "end-right" })))))));
+        return (h(Host, { key: '6fe975235d6de2793e55e8d10860649b5684c093' }, h("footer", { key: '80b0ff721eedab3e4cc00fd2484a638718fc8b13', role: "contentinfo" }, h("div", { key: 'f7d676d79f4d8780736e3a28e3e4b2aa1f0786e1', class: "container" }, h("div", { key: 'e1f9ea823133d972d3eb2bc8e7eaa18558448a73' }, h("slot", { key: 'd7177b9e98ac24ad39008669de01899e71c27079' })), h("div", { key: '849ceafdd459f24b672e1f68edf86ffd4fcce733', class: "end" }, h("div", { key: '7077861e872bbb50e7e5de0c968fe2222e9bf7d7', class: "end-left" }, h("slot", { key: 'dded653e62bf683e0514c51b06e55ccb44f70c54', name: "end-left" })), h("div", { key: 'ec25d2a5f84cb477eaa6a63de4df6ce6e9db07c5', class: "end-right" }, h("slot", { key: '4201096294b44a29f74112c2acaa2163f9ecfcb9', name: "end-right" })))))));
     }
 };
 Footer.style = WcsFooterStyle0;

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

@@ -61,9 +61,9 @@ const Galactic = class {
         }
     }
     render() {
-        return (h(Host, { key: '57fa555ec72e13761295e18aa779d5ac5be81111' }, h("span", { key: '91b4fe9a2f6ee303c3ba00c2ba1a1ded0ac7a761' }, this.text), h("button", Object.assign({ key: '324d0c458e500ba5d47187bdd59297f67e067374', "aria-haspopup": "true", "aria-controls": "menu", ref: el => {
+        return (h(Host, { key: 'bc460c17b222723b8cc037042cc758f8ca0e50ec' }, h("span", { key: 'd324ff624a9e5c9f6984134d4091986cac11f18b' }, this.text), h("button", Object.assign({ key: '7b0160174a249b30e082b9b2a77aca334ee6256a', "aria-haspopup": "true", "aria-controls": "menu", ref: el => {
                 this.menuButton = el;
-            }, "aria-expanded": this.showPopoverMenu ? "true" : "false" }, this.inheritedAttributes, { onClick: _ => this.toggleMenu() }), h("wcs-mat-icon", { key: 'accf07fb4f5d737f30f16c5cd96b96a5b66ba1d0', id: "toggle-menu-icon", icon: "more_horiz", size: "m" })), h("span", { key: 'f9ae129e58d7911a7a88d8b2449a8b2e19be516f', id: "menu", role: "menu", "data-show": this.showPopoverMenu }, h("div", { key: 'f4b78cf4631a7fa1b6ca1e68a7eb633d52c7b994', id: "arrow", "data-popper-arrow": true }), h("slot", { key: 'c9eb687e1b82f075a5ef1b84d09b69bdbf9c292f' }))));
+            }, "aria-expanded": this.showPopoverMenu ? "true" : "false" }, this.inheritedAttributes, { onClick: _ => this.toggleMenu() }), h("wcs-mat-icon", { key: '96b20053845f5490791ea278c2444392ba630600', id: "toggle-menu-icon", icon: "more_horiz", size: "m" })), h("span", { key: '6f959f220edbf293fe6922f7aaeaab0f213bf736', id: "menu", role: "menu", "data-show": this.showPopoverMenu }, h("div", { key: '6a05e468d65252ecbb57b421a53be0a0a1974f98', id: "arrow", "data-popper-arrow": true }), h("slot", { key: 'c9398cbb856d836820ac1cddf3113710eeaff5fb' }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -10,7 +10,7 @@ const Galactic = class {
         this.show = false;
     }
     render() {
-        return (h(Host, { key: '650d312b2d662bb9e900d330d9e89a279af10160' }, h("div", { key: 'eee212ebe7bc3031b700cbcd959133ba3ab05457', class: "container" }, h("div", { key: 'ee49e9c2e3cf1ed93c93812747374f4b2fb3c5aa', class: "logo-container" }, h("img", { key: 'd40d693d547591e088e7b2d9e45a39db0152a166', src: SNCF_BASE64_SVG_LOGO, id: "sncf-logo", alt: "SNCF" }), h("span", { key: 'e8e1ab2521b54b73ad3a9b27b82e19cc9a534b70' }, this.text)), h("div", { key: '2be508619dad9c082a129e2ec20fa298ebc4b0b5', class: "actions-container" }, h("slot", { key: '4df31395f1507d942e86971c041c41b17442c3a7' })))));
+        return (h(Host, { key: 'bcede9aa03d2014887eeaa4d5728d57c32a69de2' }, h("div", { key: '2d031655b20b592b77e2227a195f15535071c069', class: "container" }, h("div", { key: '1d3a345c56925946f5b39ad9edaad7ee927343cc', class: "logo-container" }, h("img", { key: '3f7e9a0a7df3a954d21e328da562189771baf8a8', src: SNCF_BASE64_SVG_LOGO, id: "sncf-logo", alt: "SNCF" }), h("span", { key: '68c00801e7f2564930d6a5f77fc6f45511a321cf' }, this.text)), h("div", { key: '3724b08dca457a9be21ecb84925ed3fea4e49f95', class: "actions-container" }, h("slot", { key: '572f4ca9036c737a579f2c58ec113cada4dd421c' })))));
     }
 };
 const SNCF_BASE64_SVG_LOGO = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVy' +

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

@@ -77,7 +77,7 @@ const GridColumn = class {
     }
     render() {
         const ButtonOrDiv = this.getTagName();
-        return (h(Host, { key: '46989c38681747daf1a458eeda881657aa5acdfb', slot: "grid-column" }, h("th", Object.assign({ key: '3e6fdcb1db342dc6b974fc709fb1adea92b0d731', style: { width: this.width }, class: this.sort ? 'pointer' : '', tabIndex: this.sort ? -1 : this.getTabIndex(), scope: "col", onClick: this.onSortClick.bind(this), onKeyDown: this.handleSortKeyDown.bind(this), onFocus: this.delegateFocusToButton.bind(this), "aria-sort": this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null, ref: (el) => (this.nativeTh = el) }, this.inheritedAttributes), h(ButtonOrDiv, { key: 'cb49f504363332cb9c586bc906804cc4295d6ec5', class: "grid-column-th-content", ref: (el) => this.buttonOrDiv = el, tabIndex: this.sort ? this.getTabIndex() : -1 }, h("span", { key: '801194d92757db834561dd11396223a939b1c6cb' }, this.name), this.sort ? h("div", { class: "sort-arrow-container" }, h(GridSortArrow, { state: this.sortOrder })) : ''))));
+        return (h(Host, { key: 'e2c93e817abc5a61d6285f32779d915ff7368710', slot: "grid-column" }, h("th", Object.assign({ key: 'c23695b8680146e66e75ea958dc9dd9cac6056ac', style: { width: this.width }, class: this.sort ? 'pointer' : '', tabIndex: this.sort ? -1 : this.getTabIndex(), scope: "col", onClick: this.onSortClick.bind(this), onKeyDown: this.handleSortKeyDown.bind(this), onFocus: this.delegateFocusToButton.bind(this), "aria-sort": this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null, ref: (el) => (this.nativeTh = el) }, this.inheritedAttributes), h(ButtonOrDiv, { key: 'e936f0bd861b2d243071d45ccb4fa6bf8448f7a6', class: "grid-column-th-content", ref: (el) => this.buttonOrDiv = el, tabIndex: this.sort ? this.getTabIndex() : -1 }, h("span", { key: '33e9e0238aa5cea93bff5f0522e30b7cfa787283' }, this.name), this.sort ? h("div", { class: "sort-arrow-container" }, h(GridSortArrow, { state: this.sortOrder })) : ''))));
     }
     onSortClick() {
         if (!this.sort)

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

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

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

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

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

@@ -1,4 +1,4 @@
-export { G as wcs_grid_pagination } from './grid-pagination-976a86e9.js';
+export { G as wcs_grid_pagination } from './grid-pagination-731726a6.js';
 import './index-d9de61ce.js';
 import './helpers-ece6a2d3.js';
 

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

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