@xplortech/apollo-core 2.11.0 → 2.12.0

package/dist/esm/xpl-tab-panel.entry.js

@@ -0,0 +1,22 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-ukZKsqqq.js';
+import { g as getTabGroupInstanceId, a as tabPanelDomId, t as tabTriggerId } from './tab-a11y-ids-BQtbf88X.js';
+
+const TabPanel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.selected = false;
+    }
+    render() {
+        const groupId = getTabGroupInstanceId(this.el);
+        const t = this.target ?? '';
+        const panelId = tabPanelDomId(groupId, t);
+        const labelledBy = tabTriggerId(groupId, t);
+        return (h(Host, { key: '89c4bb26274f9cd2f317e308d58b03ee48d80ac8', "aria-labelledby": labelledBy, class: {
+                'xpl-tab-panel': true,
+                'xpl-tab-panel--selected': this.selected,
+            }, id: panelId, role: "tabpanel" }, h("slot", { key: '2d8ccc1f14e7415528bbb09fa9ed174e5cea8e00' })));
+    }
+    get el() { return getElement(this); }
+};
+
+export { TabPanel as xpl_tab_panel };

package/dist/esm/xpl-tab.entry.js

@@ -0,0 +1,85 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ukZKsqqq.js';
+import { g as getTabGroupInstanceId, t as tabTriggerId, a as tabPanelDomId } from './tab-a11y-ids-BQtbf88X.js';
+
+const Tab = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tabChange = createEvent(this, "tabChange", 7);
+        this.badgeVariant = 'purple';
+        this.disabled = false;
+        this.fullWidth = false;
+        this.groupDisabled = false;
+        this.iconPosition = 'start';
+        this.selected = false;
+        this.variant = 'tabs';
+        this.handleTabClick = () => {
+            if (this.effectivelyDisabled) {
+                return;
+            }
+            this.tabChange.emit(this.target);
+        };
+    }
+    async getFocusableElement() {
+        if (this.isSegment) {
+            return this.el.querySelector('xpl-button button');
+        }
+        return this.el.querySelector('.xpl-tab__button');
+    }
+    async setTabIndex(value) {
+        const btn = await this.getFocusableElement();
+        if (btn) {
+            btn.tabIndex = value;
+        }
+    }
+    async focusTrigger() {
+        const btn = await this.getFocusableElement();
+        btn?.focus();
+    }
+    get a11yIds() {
+        const groupId = getTabGroupInstanceId(this.el);
+        const t = this.target ?? '';
+        return {
+            panelId: tabPanelDomId(groupId, t),
+            triggerId: tabTriggerId(groupId, t),
+        };
+    }
+    get effectivelyDisabled() {
+        return this.disabled || this.groupDisabled;
+    }
+    get isSegment() {
+        return this.variant === 'segment';
+    }
+    get hasBadge() {
+        return this.badge != null && this.badge.length > 0;
+    }
+    renderBadge() {
+        if (!this.hasBadge) {
+            return null;
+        }
+        return (h("xpl-badge", { class: "xpl-tab__badge", dotOnly: true, variant: this.badgeVariant }, this.badge));
+    }
+    render() {
+        const segment = this.isSegment;
+        const { panelId, triggerId } = this.a11yIds;
+        const ariaSelected = this.selected ? 'true' : 'false';
+        const hostClass = {
+            'xpl-tab': true,
+            'xpl-tab--selected': this.selected,
+            'xpl-tab--segment': segment,
+            'xpl-tab--disabled': this.effectivelyDisabled,
+        };
+        if (segment) {
+            return (h(Host, { class: hostClass }, h("xpl-button", { controlAttrs: {
+                    id: triggerId,
+                    role: 'tab',
+                    'aria-controls': panelId,
+                    'aria-selected': ariaSelected,
+                }, disabled: this.effectivelyDisabled, fullWidth: this.fullWidth, icon: this.icon ?? '', iconPosition: this.iconPosition, onClick: this.handleTabClick, size: "sm", type: "button", variant: this.selected ? 'primary' : 'tertiary' }, h("slot", null), this.renderBadge())));
+        }
+        const iconEl = this.icon ? (h("xpl-icon", { class: "xpl-tab__icon", icon: this.icon, size: 16 })) : null;
+        return (h(Host, { class: hostClass }, h("button", { "aria-controls": panelId, "aria-selected": ariaSelected, class: "xpl-tab__button", disabled: this.effectivelyDisabled, id: triggerId, onClick: this.handleTabClick, role: "tab", type: "button" }, this.iconPosition === 'start' ? iconEl : null, h("slot", null), this.iconPosition === 'end' ? iconEl : null, this.renderBadge())));
+    }
+    get el() { return getElement(this); }
+};
+
+export { Tab as xpl_tab };

package/dist/esm/xpl-table-header-cell.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CXkZUm1c.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ukZKsqqq.js';
 
 const TableHeaderCell = class {
     constructor(hostRef) {
@@ -22,7 +22,9 @@ const TableHeaderCell = class {
         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':
@@ -30,7 +32,7 @@ const TableHeaderCell = class {
                 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/esm/xpl-table-header.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, h, H as Host } from './index-CXkZUm1c.js';
+import { r as registerInstance, h, H as Host } from './index-ukZKsqqq.js';
 
 const TableHeader = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '1123c671d82d987a74264ef2869494155746d7d8', role: "row", class: "xpl-table-header" }, h("slot", { key: 'f1a238ba023ce03559f87cf92214a1804c8ac821' })));
+        return (h(Host, { key: '6a9997040f64ebc1ede766230c0310a11fd23fd5', role: "row", class: "xpl-table-header" }, h("slot", { key: 'b9359ac81366cc2a0790b2268a0a5443867bbadc' })));
     }
 };
 

package/dist/esm/xpl-table.entry.js

@@ -0,0 +1,183 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ukZKsqqq.js';
+
+const getIconType = (sortType) => {
+    switch (sortType) {
+        case 'asc':
+            return 'arrow-up';
+        case 'desc':
+            return 'arrow-down';
+        default:
+            return 'dash';
+    }
+};
+const Table = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tableSelect = createEvent(this, "tableSelect", 7);
+        this.sortChanged = createEvent(this, "sortChanged", 3);
+        this.selectedValues = [];
+        this.isSortable = false;
+        this.sortableColumns = [];
+        this.areAllSelected = false;
+        this.hasScrolled = false;
+        this.sortTypeArray = [];
+        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) : checked))
+                    : this.selected.map(() => checked);
+            this.onChange();
+        };
+        this.selectOne = (e, checkboxIdx) => {
+            const checked = e.detail;
+            const { value } = e.target;
+            this.selected = this.selected.map((v, selectedIdx) => {
+                if (selectedIdx !== checkboxIdx)
+                    return v;
+                return this.selectedValues.length > 0
+                    ? checked
+                        ? (value ?? checked)
+                        : checked
+                    : checked;
+            });
+            this.areAllSelected = this.selected.every((v) => !!v);
+            this.onChange();
+        };
+        this.onChange = () => {
+            this.tableSelect.emit({
+                selected: this.selected,
+                areAllSelected: this.areAllSelected,
+            });
+        };
+        this.onScroll = () => {
+            this.hasScrolled = this.container.scrollLeft > 0;
+        };
+        this.sortBy = (col, sortTypeArray) => {
+            const handleSort = (a, b) => {
+                if (a[col].toLocaleLowerCase() < b[col].toLocaleLowerCase()) {
+                    return -1;
+                }
+                if (a[col].toLocaleLowerCase() > b[col].toLocaleLowerCase()) {
+                    return 1;
+                }
+                return 0;
+            };
+            switch (sortTypeArray[col]) {
+                case 'asc':
+                    this.rowData.sort((a, b) => handleSort(a, b));
+                    break;
+                case 'desc':
+                    this.rowData.sort((a, b) => handleSort(b, a));
+                    break;
+                default:
+                    this.rowData = this.data ? Array.from(this.data) : [];
+                    this.sortTypeArray[col] = null;
+                    break;
+            }
+            this.rowData = Array.from(this.rowData);
+        };
+        this.setData = () => {
+            this.rowData = this.data !== undefined ? Array.from(this.data) : [];
+        };
+    }
+    handleSort(clickEvt, isColumnSortable, colNum, colName) {
+        clickEvt.preventDefault();
+        clickEvt.stopPropagation();
+        if (!isColumnSortable)
+            return;
+        this.sortTypeArray = this.sortTypeArray.map((val, i) => {
+            if (i !== colNum)
+                return null;
+            switch (val) {
+                case 'asc':
+                    return 'desc';
+                case 'desc':
+                    return null;
+                default:
+                    return 'asc';
+            }
+        });
+        const evt = this.sortChanged.emit({
+            colNum,
+            colName,
+            sortTypeArr: this.sortTypeArray,
+        });
+        if (!evt.defaultPrevented)
+            this.sortBy(colNum, this.sortTypeArray);
+    }
+    watchData() {
+        this.setData();
+    }
+    watchColumns() {
+        this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
+    }
+    componentWillLoad() {
+        this.ensureSelectAllValue();
+        this.areAllSelected = false;
+        this.setData();
+        this.selected = new Array(this.rowData.length).fill(false);
+        this.ensureSortTypeArray();
+    }
+    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);
+        }
+        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--has-scrolled': this.hasScrolled,
+            } }, 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: 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 }))))))))), rowFooterData.length > 0 && (h("tfoot", { key: '571bb59b2a69b0b22bf45297484c2c9e01ae3a78' }, rowFooterData.map((row) => (h("tr", null, row.map((cell) => (h("td", null, h("div", { innerHTML: cell })))))))))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "data": [{
+                "watchData": 0
+            }],
+        "columns": [{
+                "watchColumns": 0
+            }]
+    }; }
+};
+Table.selectAllSeq = 0;
+
+export { Table as xpl_table };