@xplortech/apollo-core 2.10.0 → 2.12.0

package/dist/collection/components/xpl-table/xpl-table.js

@@ -17,13 +17,12 @@ export class Table {
         this.areAllSelected = false;
         this.hasScrolled = false;
         this.sortTypeArray = [];
-        this.selectAllValue = Math.random().toString(36).slice(2);
         this.selectAll = (e) => {
             const checked = e.detail;
             this.areAllSelected = checked;
             this.selected =
                 this.selectedValues.length > 0
-                    ? Array.from(this.el.querySelectorAll('tbody td:first-child xpl-checkbox')).map((checkbox) => (checked ? checkbox.value : checked))
+                    ? Array.from(this.el.querySelectorAll('tbody td:first-child xpl-checkbox')).map((checkbox) => (checked ? (checkbox.value ?? checked) : checked))
                     : this.selected.map(() => checked);
             this.onChange();
         };
@@ -33,7 +32,11 @@ export class Table {
             this.selected = this.selected.map((v, selectedIdx) => {
                 if (selectedIdx !== checkboxIdx)
                     return v;
-                return this.selectedValues.length > 0 ? (checked ? value : checked) : checked;
+                return this.selectedValues.length > 0
+                    ? checked
+                        ? (value ?? checked)
+                        : checked
+                    : checked;
             });
             this.areAllSelected = this.selected.every((v) => !!v);
             this.onChange();
@@ -65,19 +68,15 @@ export class Table {
                     this.rowData.sort((a, b) => handleSort(b, a));
                     break;
                 default:
-                    this.rowData = this.data;
+                    this.rowData = this.data ? Array.from(this.data) : [];
                     this.sortTypeArray[col] = null;
                     break;
             }
             this.rowData = Array.from(this.rowData);
-            this.render();
         };
         this.setData = () => {
             this.rowData = this.data !== undefined ? Array.from(this.data) : [];
         };
-        this.setFooterData = () => {
-            this.rowFooterData = this.footer !== undefined ? Array.from(this.footer) : [];
-        };
     }
     handleSort(clickEvt, isColumnSortable, colNum, colName) {
         clickEvt.preventDefault();
@@ -107,43 +106,63 @@ export class Table {
     watchData() {
         this.setData();
     }
-    watchFooterData() {
-        this.setFooterData();
-    }
     watchColumns() {
         this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
     }
     componentWillLoad() {
+        this.ensureSelectAllValue();
         this.areAllSelected = false;
         this.setData();
-        this.setFooterData();
         this.selected = new Array(this.rowData.length).fill(false);
-        this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
+        this.ensureSortTypeArray();
     }
-    render() {
-        var _a;
+    ensureSelectAllValue() {
+        if (this.selectAllValue !== undefined) {
+            return;
+        }
+        const hostId = this.el.id?.trim();
+        if (hostId) {
+            this.selectAllValue = `${hostId}-select-all`;
+            return;
+        }
+        const persisted = this.el.getAttribute('data-select-all-value');
+        if (persisted) {
+            this.selectAllValue = persisted;
+            return;
+        }
+        Table.selectAllSeq += 1;
+        this.selectAllValue = `select-all-${Table.selectAllSeq}`;
+        this.el.setAttribute('data-select-all-value', this.selectAllValue);
+    }
+    ensureSortTypeArray() {
         if (this.columns &&
             (!this.sortTypeArray || this.sortTypeArray.length !== this.columns.length)) {
             this.sortTypeArray = this.columns.map(() => null);
         }
-        return (h(Host, { key: 'b2ed918c3c434b6403fe6d18619d0a1a5bf864bf' }, h("div", { key: 'd55accaecba09869f07dcc7030eca5cc1175dd95', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
-                this.container = el;
-            } }, h("table", { key: '6406b92ee6717c80f5f363110fda38fa5bbe61ff', class: {
+        else if (!this.columns) {
+            this.sortTypeArray = [];
+        }
+    }
+    render() {
+        const rowFooterData = this.footer !== undefined ? Array.from(this.footer) : [];
+        return (h(Host, { key: 'c1de0e2cfd09c45e3c3f3fb9d8ad47615031a42f' }, h("div", { key: 'ae6f19f8fd43c1b9f647ec901d2f01933625860d', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
+                if (el)
+                    this.container = el;
+            } }, h("table", { key: '0a4b2c06785a26046d95b24a22c1d5bc4abea306', class: {
                 'xpl-table': true,
-                'xpl-table--striped': this.striped,
-                'xpl-table--freeze': this.freeze,
+                'xpl-table--striped': !!this.striped,
+                'xpl-table--freeze': !!this.freeze,
                 'xpl-table--has-scrolled': this.hasScrolled,
-            } }, this.columns && (h("thead", { key: '2f89526153301be4ad9ba2f2ec2dac791b4702ae' }, this.columns.map((column, i) => {
-            var _a;
-            const iconType = getIconType((_a = this.sortTypeArray) === null || _a === void 0 ? void 0 : _a[i]);
+            } }, this.columns && (h("thead", { key: '9298a70476ea69fa530fb50992643f70b4266c26' }, this.columns.map((column, i) => {
+            const iconType = getIconType(this.sortTypeArray?.[i]);
             const isColumnSortable = !!(this.isSortable && this.sortableColumns[i]);
             return (h("th", null, h("label", { onClick: (e) => this.handleSort(e, isColumnSortable, i, column.replace(/ /g, '-').toLowerCase()), class: isColumnSortable ? 'cursor-pointer' : '' }, this.multiselect && i === 0 && (h("xpl-checkbox", { checked: this.areAllSelected, indeterminate: !this.areAllSelected &&
-                    this.selected.some((a) => a), onClick: (e) => e.stopPropagation(), onCheckboxChange: (e) => this.selectAll(e), value: `select-all-${this.selectAllValue}`, "aria-label": "Select all rows" })), column, isColumnSortable && !!this.sortTypeArray[i] && (h("xpl-icon", { icon: iconType, size: 16 })))));
-        }))), h("tbody", { key: 'd1c762bc09191ac0b5b84ade9409d87a726f15f4' }, this.rowData.map((row, rowNum) => (h("tr", { class: this.selected && this.selected[rowNum]
+                    this.selected.some((a) => a), onClick: (e) => e.stopPropagation(), onCheckboxChange: (e) => this.selectAll(e), value: this.selectAllValue, "aria-label": "Select all rows" })), column, isColumnSortable && !!this.sortTypeArray[i] && (h("xpl-icon", { icon: iconType, size: 16 })))));
+        }))), h("tbody", { key: 'b4bb753f41278360c8f34015a982b04771b59064' }, this.rowData.map((row, rowNum) => (h("tr", { class: this.selected && this.selected[rowNum]
                 ? 'xpl-table-row-selected'
                 : '' }, row.map((cell, i) => (h("td", null, this.multiselect && i === 0 ? (h("label", null, h("xpl-checkbox", { checked: !!this.selected[rowNum], onCheckboxChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues.length > 0
                 ? this.selectedValues[rowNum]
-                : `xpl-table-checkbox-${rowNum}`, "aria-label": `Select row ${rowNum + 1}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))))))))), ((_a = this.rowFooterData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("tfoot", { key: '99e0e8cbe768f3c565d5fd6328c6e305483bf3f1' }, this.rowFooterData.map((row) => (h("tr", null, row.map((cell) => (h("td", null, h("div", { innerHTML: cell })))))))))))));
+                : `xpl-table-checkbox-${rowNum}`, "aria-label": `Select row ${rowNum + 1}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))))))))), rowFooterData.length > 0 && (h("tfoot", { key: '571bb59b2a69b0b22bf45297484c2c9e01ae3a78' }, rowFooterData.map((row) => (h("tr", null, row.map((cell) => (h("td", null, h("div", { innerHTML: cell })))))))))))));
     }
     static get is() { return "xpl-table"; }
     static get properties() {
@@ -265,7 +284,7 @@ export class Table {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The values for the input for each row when multiselect is activated."
@@ -283,7 +302,7 @@ export class Table {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Toggles to show the sort button on each table head"
@@ -303,7 +322,7 @@ export class Table {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Manually determined if the column is sortable"
@@ -318,7 +337,6 @@ export class Table {
         return {
             "areAllSelected": {},
             "rowData": {},
-            "rowFooterData": {},
             "hasScrolled": {},
             "selected": {},
             "sortTypeArray": {}
@@ -348,11 +366,11 @@ export class Table {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emits an event whenever the sort changes.\nThe 'sortChanged' event passes an object with colNum (number), colName (string), sortTypeArr(string[]).\nThe default action can be overridden by calling event.preventDefault()."
+                    "text": "Emits an event whenever the sort changes.\nThe 'sortChanged' event passes an object with colNum (number), colName (string), sortTypeArr(('asc' | 'desc' | null)[]).\nThe default action can be overridden by calling event.preventDefault()."
                 },
                 "complexType": {
-                    "original": "{\n        colNum: number;\n        colName: string;\n        sortTypeArr: string[];\n    }",
-                    "resolved": "{ colNum: number; colName: string; sortTypeArr: string[]; }",
+                    "original": "{\n        colNum: number;\n        colName: string;\n        sortTypeArr: ('asc' | 'desc' | null)[];\n    }",
+                    "resolved": "{ colNum: number; colName: string; sortTypeArr: (\"desc\" | \"asc\")[]; }",
                     "references": {}
                 }
             }];
@@ -362,12 +380,10 @@ export class Table {
         return [{
                 "propName": "data",
                 "methodName": "watchData"
-            }, {
-                "propName": "footer",
-                "methodName": "watchFooterData"
             }, {
                 "propName": "columns",
                 "methodName": "watchColumns"
             }];
     }
 }
+Table.selectAllSeq = 0;

package/dist/collection/components/xpl-table-header/table-header.stories.js

@@ -1,3 +1,5 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
 export default {
     title: 'Components/Dynamic Table/Table Header',
     component: 'xpl-table-header',
@@ -48,7 +50,13 @@ export default {
         },
         thirdCellSortable: { control: 'boolean' },
     },
-    tags: ['beta'],
+    tags: ['beta', 'vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement }) {
+        await waitForHydration(canvasElement);
+    },
 };
 export const TableHeader = ({ firstCellType, firstCellLabel, firstCellIcon, firstCellWidth, firstCellSortable, secondCellType, secondCellLabel, secondCellIcon, secondCellWidth, secondCellSortable, thirdCellType, thirdCellLabel, thirdCellIcon, thirdCellWidth, thirdCellSortable, }) => `
     <xpl-dynamic-table>

package/dist/collection/components/xpl-table-header/xpl-table-header.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class TableHeader {
     render() {
-        return (h(Host, { key: 'f50c2c0ca2743e47ad44a368a9ea684c57a72261', role: "row", class: "xpl-table-header" }, h("slot", { key: '7a61b45818de8675015ca3defb9ee8c3280e961a' })));
+        return (h(Host, { key: '6a9997040f64ebc1ede766230c0310a11fd23fd5', role: "row", class: "xpl-table-header" }, h("slot", { key: 'b9359ac81366cc2a0790b2268a0a5443867bbadc' })));
     }
     static get is() { return "xpl-table-header"; }
 }

package/dist/collection/components/xpl-table-header-cell/table-header-cell.stories.js

@@ -1,3 +1,5 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
 export default {
     title: 'Components/Dynamic Table/Table Header Cell',
     component: 'xpl-table-header-cell',
@@ -18,9 +20,15 @@ export default {
         },
         sortable: { control: 'boolean' },
     },
-    tags: ['beta'],
+    tags: ['beta', 'vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement }) {
+        await waitForHydration(canvasElement);
+    },
 };
-export const TableHeaderCell = ({ type, label, icon, width, sortable }) => `
+export const TableHeaderCell = ({ type, label, icon, width, sortable, }) => `
     <xpl-table-header-cell
         type=${type}
         label="${label}"

package/dist/collection/components/xpl-table-header-cell/xpl-table-header-cell.js

@@ -19,7 +19,9 @@ export class TableHeaderCell {
         this.sortChanged.emit(this.sortDirection);
     }
     render() {
-        const colIndex = Array.from(this.el.parentElement.children).indexOf(this.el) + 1;
+        const colIndex = this.el.parentElement
+            ? Array.from(this.el.parentElement.children).indexOf(this.el) + 1
+            : 0;
         const renderContent = () => {
             switch (this.type) {
                 case 'label':
@@ -27,7 +29,7 @@ export class TableHeaderCell {
                 case 'checkbox':
                     return h("xpl-checkbox", null);
                 case 'icon':
-                    return h("xpl-icon", { icon: this.icon, size: 20 });
+                    return this.icon ? h("xpl-icon", { icon: this.icon, size: 20 }) : null;
                 default:
                     return '';
             }

package/dist/collection/components/xpl-tabs/segment-control.stories.js

@@ -1,5 +1,14 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
 import { renderTabsStoryMarkup, segmentControlDefaultArgs, segmentControlStoryArgTypes, tabsPlainDomSegmentStoryHtml, } from "./tabs.shared";
 export default {
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement }) {
+        await waitForHydration(canvasElement);
+    },
     title: 'Components/Segment Control',
     component: 'xpl-tabs',
     parameters: {
@@ -14,7 +23,7 @@ export default {
     },
     argTypes: segmentControlStoryArgTypes,
 };
-export const SegmentControl = (args, context) => renderTabsStoryMarkup(args, context !== null && context !== void 0 ? context : {});
+export const SegmentControl = (args, context) => renderTabsStoryMarkup(args, context ?? {});
 SegmentControl.args = segmentControlDefaultArgs;
 SegmentControl.parameters = {
     layout: 'padded',

package/dist/collection/components/xpl-tabs/tabs.shared.js

@@ -8,7 +8,6 @@ export function clampTabCount(n) {
     return Math.min(200, Math.floor(n));
 }
 export function coerceTabsStoryValue(args) {
-    var _a;
     const n = clampTabCount(args.tabCount);
     const targets = Array.from({ length: n }, (_, i) => `tab${i}`);
     const valueTrim = args.value.trim();
@@ -18,7 +17,7 @@ export function coerceTabsStoryValue(args) {
     if (targets.includes(valueTrim)) {
         return valueTrim;
     }
-    return (_a = targets[0]) !== null && _a !== void 0 ? _a : '';
+    return targets[0] ?? '';
 }
 export function buildTabsMarkup(args) {
     const n = clampTabCount(args.tabCount);
@@ -43,14 +42,19 @@ export function buildTabsMarkup(args) {
     if (args.tabDisabled) {
         firstTabParts.push('disabled');
     }
-    if (args.type === 'segment') {
-        const icon = args.icon.trim();
-        if (icon) {
-            firstTabParts.push(`icon="${escapeHtmlAttr(icon)}"`);
-        }
-        if (args.iconPosition !== 'start') {
-            firstTabParts.push(`icon-position="${args.iconPosition}"`);
-        }
+    const icon = args.icon.trim();
+    if (icon) {
+        firstTabParts.push(`icon="${escapeHtmlAttr(icon)}"`);
+    }
+    if (args.iconPosition !== 'start') {
+        firstTabParts.push(`icon-position="${args.iconPosition}"`);
+    }
+    const badge = args.badge.trim();
+    if (badge) {
+        firstTabParts.push(`badge="${escapeHtmlAttr(badge)}"`);
+    }
+    if (badge && args.badgeVariant !== 'purple') {
+        firstTabParts.push(`badge-variant="${escapeHtmlAttr(args.badgeVariant)}"`);
     }
     const firstHeading = args.type === 'tabs' ? 'Tab' : 'Segment';
     lines.push(`    <xpl-tab ${firstTabParts.join(' ')}>${firstHeading} 1</xpl-tab>`);
@@ -64,12 +68,11 @@ export function buildTabsMarkup(args) {
     return lines.join('\n');
 }
 export function renderTabsStoryMarkup(args, context = {}) {
-    var _a;
     const value = coerceTabsStoryValue(args);
     if (value !== args.value) {
-        (_a = context.updateArgs) === null || _a === void 0 ? void 0 : _a.call(context, { value });
+        context.updateArgs?.({ value });
     }
-    return buildTabsMarkup(Object.assign(Object.assign({}, args), { value }));
+    return buildTabsMarkup({ ...args, value });
 }
 export const tabsPlainDomUnderlineStoryHtml = `<---- Non-interactive plain DOM (tabs.css BEM). Not the <xpl-tabs> API; use the Web Component tab for that. Ids mirror the scoped pattern (data-tabs-instance-id + target). ---->
 <div class="xpl-tabs" data-tabs-instance-id="xpl-tg-1">
@@ -77,10 +80,10 @@ export const tabsPlainDomUnderlineStoryHtml = `<---- Non-interactive plain DOM (
     <nav class="xpl-tabs__headings" role="tablist" aria-orientation="horizontal">
         <div class="xpl-tabs__active-bar"></div>
         <div class="xpl-tab xpl-tab--selected">
-            <button class="xpl-tab__button" type="button" role="tab" id="xpl-tg-1-tab-tab0" aria-controls="xpl-tg-1-panel-tab0" aria-selected="true">Tab 1</button>
+            <button class="xpl-tab__button" type="button" role="tab" id="xpl-tg-1-tab-tab0" aria-controls="xpl-tg-1-panel-tab0" aria-selected="true"><xpl-icon class="xpl-tab__icon" icon="user" size="16"></xpl-icon>Tab 1<xpl-badge class="xpl-tab__badge" dot-only variant="purple">4</xpl-badge></button>
         </div>
         <div class="xpl-tab">
-            <button class="xpl-tab__button" type="button" role="tab" id="xpl-tg-1-tab-tab1" aria-controls="xpl-tg-1-panel-tab1" aria-selected="false">Tab 2</button>
+            <button class="xpl-tab__button" type="button" role="tab" id="xpl-tg-1-tab-tab1" aria-controls="xpl-tg-1-panel-tab1" aria-selected="false"><xpl-icon class="xpl-tab__icon" icon="user" size="16"></xpl-icon>Tab 2<xpl-badge class="xpl-tab__badge" dot-only variant="purple">4</xpl-badge></button>
         </div>
     </nav>
     <div class="xpl-tabs__panels">
@@ -132,17 +135,65 @@ export const tabsStoryBaseArgTypes = {
     },
     icon: {
         control: { type: 'text' },
-        description: 'First `xpl-tab` only — icon (segment). Empty = none.',
+        description: 'First `xpl-tab` only — leading icon name. Empty = none.',
     },
     iconPosition: {
         options: ['start', 'end'],
         control: { type: 'radio' },
         description: 'First `xpl-tab` only — icon position.',
     },
+    badge: {
+        control: { type: 'text' },
+        description: 'First `xpl-tab` only — trailing number badge value. Empty = none.',
+    },
+    badgeVariant: {
+        options: ['purple', 'green', 'yellow', 'orange', 'gray', 'red', 'blue'],
+        control: { type: 'select' },
+        description: 'First `xpl-tab` only — number badge color palette.',
+    },
 };
 const SEGMENT_CATEGORY_XPL_TABS = '01 — xpl-tabs';
 const SEGMENT_CATEGORY_FIRST_TAB = '02 — xpl-tab controls (first tab only for simplicity)';
-export const segmentControlStoryArgTypes = Object.assign(Object.assign({}, tabsStoryBaseArgTypes), { type: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.type), { table: { disable: true } }), disabled: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.disabled), { table: { category: SEGMENT_CATEGORY_XPL_TABS } }), fullWidth: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.fullWidth), { table: { category: SEGMENT_CATEGORY_XPL_TABS } }), value: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.value), { table: { category: SEGMENT_CATEGORY_XPL_TABS } }), tabCount: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.tabCount), { table: { category: SEGMENT_CATEGORY_XPL_TABS } }), tabDisabled: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.tabDisabled), { table: { category: SEGMENT_CATEGORY_FIRST_TAB } }), icon: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.icon), { table: { category: SEGMENT_CATEGORY_FIRST_TAB } }), iconPosition: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.iconPosition), { table: { category: SEGMENT_CATEGORY_FIRST_TAB } }) });
+export const segmentControlStoryArgTypes = {
+    ...tabsStoryBaseArgTypes,
+    type: { ...tabsStoryBaseArgTypes.type, table: { disable: true } },
+    disabled: {
+        ...tabsStoryBaseArgTypes.disabled,
+        table: { category: SEGMENT_CATEGORY_XPL_TABS },
+    },
+    fullWidth: {
+        ...tabsStoryBaseArgTypes.fullWidth,
+        table: { category: SEGMENT_CATEGORY_XPL_TABS },
+    },
+    value: {
+        ...tabsStoryBaseArgTypes.value,
+        table: { category: SEGMENT_CATEGORY_XPL_TABS },
+    },
+    tabCount: {
+        ...tabsStoryBaseArgTypes.tabCount,
+        table: { category: SEGMENT_CATEGORY_XPL_TABS },
+    },
+    tabDisabled: {
+        ...tabsStoryBaseArgTypes.tabDisabled,
+        table: { category: SEGMENT_CATEGORY_FIRST_TAB },
+    },
+    icon: {
+        ...tabsStoryBaseArgTypes.icon,
+        table: { category: SEGMENT_CATEGORY_FIRST_TAB },
+    },
+    iconPosition: {
+        ...tabsStoryBaseArgTypes.iconPosition,
+        table: { category: SEGMENT_CATEGORY_FIRST_TAB },
+    },
+    badge: {
+        ...tabsStoryBaseArgTypes.badge,
+        table: { category: SEGMENT_CATEGORY_FIRST_TAB },
+    },
+    badgeVariant: {
+        ...tabsStoryBaseArgTypes.badgeVariant,
+        table: { category: SEGMENT_CATEGORY_FIRST_TAB },
+    },
+};
 export const tabsUnderlineDefaultArgs = {
     type: 'tabs',
     disabled: false,
@@ -150,7 +201,14 @@ export const tabsUnderlineDefaultArgs = {
     value: 'tab0',
     tabCount: 2,
     tabDisabled: false,
-    icon: '',
+    icon: 'user',
     iconPosition: 'start',
+    badge: '4',
+    badgeVariant: 'purple',
+};
+export const segmentControlDefaultArgs = {
+    ...tabsUnderlineDefaultArgs,
+    type: 'segment',
+    icon: 'house-4',
+    badge: '',
 };
-export const segmentControlDefaultArgs = Object.assign(Object.assign({}, tabsUnderlineDefaultArgs), { type: 'segment', icon: 'house-4' });

package/dist/collection/components/xpl-tabs/tabs.stories.js

@@ -1,5 +1,14 @@
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
 import { renderTabsStoryMarkup, tabsPlainDomUnderlineStoryHtml, tabsStoryBaseArgTypes, tabsUnderlineDefaultArgs, } from "./tabs.shared";
 export default {
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement }) {
+        await waitForHydration(canvasElement);
+    },
     title: 'Components/Tabs',
     component: 'xpl-tabs',
     parameters: {
@@ -12,9 +21,12 @@ export default {
             },
         },
     },
-    argTypes: Object.assign(Object.assign({}, tabsStoryBaseArgTypes), { type: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.type), { table: { disable: true } }), icon: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.icon), { table: { disable: true } }), iconPosition: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.iconPosition), { table: { disable: true } }) }),
+    argTypes: {
+        ...tabsStoryBaseArgTypes,
+        type: { ...tabsStoryBaseArgTypes.type, table: { disable: true } },
+    },
 };
-export const Tabs = (args, context) => renderTabsStoryMarkup(args, context !== null && context !== void 0 ? context : {});
+export const Tabs = (args, context) => renderTabsStoryMarkup(args, context ?? {});
 Tabs.args = tabsUnderlineDefaultArgs;
 Tabs.parameters = {
     layout: 'padded',

package/dist/collection/components/xpl-tabs/xpl-tabs.js

@@ -1,14 +1,13 @@
 import { Host, h, } from "@stencil/core";
-const PILL_LABEL_ICON_SELECTORS = '.xpl-button__icon, xpl-icon';
+const PILL_LABEL_ICON_SELECTORS = '.xpl-button__icon, xpl-icon, xpl-badge';
 let xplTabsInstanceCounter = 0;
 function tabHeadingLabelFromElement(tab) {
-    var _a, _b;
     const pillInner = tab.querySelector('xpl-button button');
     if (pillInner) {
         const clone = pillInner.cloneNode(true);
         if (clone instanceof HTMLElement) {
             clone.querySelectorAll(PILL_LABEL_ICON_SELECTORS).forEach((node) => node.remove());
-            const text = (_a = clone.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, ' ').trim();
+            const text = clone.textContent?.replace(/\s+/g, ' ').trim();
             if (text) {
                 return text;
             }
@@ -16,12 +15,17 @@ function tabHeadingLabelFromElement(tab) {
     }
     const underline = tab.querySelector('.xpl-tab__button');
     if (underline) {
-        return Array.from(underline.childNodes)
+        const text = Array.from(underline.childNodes)
             .filter((node) => node.nodeType === Node.TEXT_NODE)
-            .map((node) => { var _a; return ((_a = node.textContent) !== null && _a !== void 0 ? _a : '').trim(); })
-            .join(' ');
+            .map((node) => (node.textContent ?? '').trim())
+            .join(' ')
+            .replace(/\s+/g, ' ')
+            .trim();
+        if (text) {
+            return text;
+        }
     }
-    return (_b = tab.getAttribute('target')) !== null && _b !== void 0 ? _b : '';
+    return tab.getAttribute('target') ?? '';
 }
 export class Tabs {
     constructor() {
@@ -42,11 +46,10 @@ export class Tabs {
             this.applySelection(target);
         };
         this.onTablistKeydown = async (ev) => {
-            var _a, _b;
             if (this.disabled) {
                 return;
             }
-            const tabHost = (_b = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, 'xpl-tab');
+            const tabHost = ev.target?.closest?.('xpl-tab');
             if (!tabHost || !this.tabHeadings.includes(tabHost)) {
                 return;
             }
@@ -98,7 +101,7 @@ export class Tabs {
                 nextIndex = enabled.length - 1;
             }
             const nextTab = enabled[nextIndex];
-            const nextValue = nextTab === null || nextTab === void 0 ? void 0 : nextTab.getAttribute('target');
+            const nextValue = nextTab?.getAttribute('target');
             if (!nextValue) {
                 return;
             }
@@ -144,8 +147,7 @@ export class Tabs {
         });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.observer?.disconnect();
         if (this.headingsContainerRef && this.tablistKeydownBound) {
             this.headingsContainerRef.removeEventListener('keydown', this.onTablistKeydown);
             this.tablistKeydownBound = false;
@@ -238,16 +240,14 @@ export class Tabs {
         });
     }
     getDefaultValue() {
-        var _a, _b;
-        return this.value || ((_b = (_a = this.tabHeadings) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.getAttribute('target')) || '';
+        return this.value || this.tabHeadings?.[0]?.getAttribute('target') || '';
     }
     async syncRovingTabindex() {
         if (this.disabled) {
             return;
         }
         await Promise.all(this.tabHeadings.map(async (tabHeading) => {
-            var _a;
-            const target = (_a = tabHeading.getAttribute('target')) !== null && _a !== void 0 ? _a : '';
+            const target = tabHeading.getAttribute('target') ?? '';
             const isSelected = target === this.selectedValue;
             await tabHeading.setTabIndex(isSelected ? 0 : -1);
         }));
@@ -280,11 +280,15 @@ export class Tabs {
     }
     renderChoices() {
         return this.tabHeadings.map((tabHeading) => {
-            var _a;
-            const target = (_a = tabHeading.getAttribute('target')) !== null && _a !== void 0 ? _a : '';
+            const target = tabHeading.getAttribute('target') ?? '';
             const tabDisabled = this.disabled || tabHeading.hasAttribute('disabled');
-            const icon = this.type === 'segment' ? tabHeading.getAttribute('icon') || undefined : undefined;
-            return Object.assign({ label: tabHeadingLabelFromElement(tabHeading), value: target, isDisabled: tabDisabled }, (icon ? { icon } : {}));
+            const icon = tabHeading.getAttribute('icon') || undefined;
+            return {
+                label: tabHeadingLabelFromElement(tabHeading),
+                value: target,
+                isDisabled: tabDisabled,
+                ...(icon ? { icon } : {}),
+            };
         });
     }
     updateActiveBarPosition() {
@@ -317,11 +321,11 @@ export class Tabs {
     }
     render() {
         const isSegment = this.type === 'segment';
-        return (h(Host, { key: 'a030a35038572d70f3fb2b979adbaa56d77a1d49', class: {
+        return (h(Host, { key: 'a863b42f5319f956e3cd698b52c93cec54279fa5', class: {
                 'xpl-tabs': true,
                 'xpl-tabs--full-width': this.fullWidth,
                 'xpl-tabs--segment': isSegment,
-            }, "data-choices-tick": this.choicesTick }, h("xpl-select", { key: '8260974c68020dea475f6e0780c766abfca94fda', classNames: this.mobileSelectClassNames(), choices: this.renderChoices(), disabled: this.disabled, selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
+            }, "data-choices-tick": this.choicesTick }, h("xpl-select", { key: '4f8bf1edbb495e898576ca8024871d40a9df9073', classNames: this.mobileSelectClassNames(), choices: this.renderChoices(), disabled: this.disabled, selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
                 if (event.detail) {
                     this.isMobileSelectChange = true;
                 }
@@ -332,17 +336,17 @@ export class Tabs {
                     this.tabChange.emit(selectedValue);
                     this.isMobileSelectChange = false;
                 }
-            } }), h("nav", { key: '73a1e4ad4830b9b22b4eee00bad5793705cf3ac3', "aria-orientation": "horizontal", class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
+            } }), h("nav", { key: 'c1e9234eb57af90d6aeff31be11ee3c6d758477f', "aria-orientation": "horizontal", class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
                 this.headingsContainerRef = el;
             }, onTabChange: (event) => {
                 event.stopPropagation();
                 this.isMobileSelectChange = false;
                 this.handleTabChange(event.detail);
                 this.tabChange.emit(event.detail);
-            } }, !isSegment && (h("div", { key: '8008620a99470824fe61ea535fb46a3dea75afc3', class: "xpl-tabs__active-bar", style: {
+            } }, !isSegment && (h("div", { key: '86543a7b4edc639e4cf617953fa8f3cd4446895b', class: "xpl-tabs__active-bar", style: {
                 transform: `translateX(${this.activeBarPosition.left}px)`,
                 width: `${this.activeBarPosition.width}px`,
-            } })), h("slot", { key: 'be53fe549e5b9c887ad90cbafcc8f95631361fee', name: "heading" })), h("div", { key: 'd97b138b5fcb0207684698752ec72c1dcd9464a3', class: "xpl-tabs__panels" }, h("slot", { key: 'fe40edbf2c9f20d02d75ab62a142e7df04ef0afd', name: "panel" }))));
+            } })), h("slot", { key: '0e651ef5fb2413200e40fa95016b546926f012a3', name: "heading" })), h("div", { key: 'd9bd0669b7618edf56f518fe797d86da51526018', class: "xpl-tabs__panels" }, h("slot", { key: '7c9f18ab1d25351c57b7750c7dd1a528a14c26bb', name: "panel" }))));
     }
     static get is() { return "xpl-tabs"; }
     static get properties() {