@xplortech/apollo-core 2.11.0 → 3.0.0

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

@@ -0,0 +1,24 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+var tabA11yIds = require('./tab-a11y-ids--A4ZoXEj.js');
+
+const TabPanel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.selected = false;
+    }
+    render() {
+        const groupId = tabA11yIds.getTabGroupInstanceId(this.el);
+        const t = this.target ?? '';
+        const panelId = tabA11yIds.tabPanelDomId(groupId, t);
+        const labelledBy = tabA11yIds.tabTriggerId(groupId, t);
+        return (index.h(index.Host, { key: 'b92d723fe68be63d6438fab8ae8f93a06122c29a', "aria-labelledby": labelledBy, class: {
+                'xpl-tab-panel': true,
+                'xpl-tab-panel--selected': this.selected,
+            }, id: panelId, role: "tabpanel" }, index.h("slot", { key: 'e18aeb92b7082c0c2e809396570b43ac41c34f87' })));
+    }
+    get el() { return index.getElement(this); }
+};
+
+exports.xpl_tab_panel = TabPanel;

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

@@ -0,0 +1,87 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+var tabA11yIds = require('./tab-a11y-ids--A4ZoXEj.js');
+
+const Tab = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tabChange = index.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 = tabA11yIds.getTabGroupInstanceId(this.el);
+        const t = this.target ?? '';
+        return {
+            panelId: tabA11yIds.tabPanelDomId(groupId, t),
+            triggerId: tabA11yIds.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 (index.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 (index.h(index.Host, { class: hostClass }, index.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' }, index.h("slot", null), this.renderBadge())));
+        }
+        const iconEl = this.icon ? (index.h("xpl-icon", { class: "xpl-tab__icon", icon: this.icon, size: 16 })) : null;
+        return (index.h(index.Host, { class: hostClass }, index.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, index.h("slot", null), this.iconPosition === 'end' ? iconEl : null, this.renderBadge())));
+    }
+    get el() { return index.getElement(this); }
+};
+
+exports.xpl_tab = Tab;

package/dist/cjs/xpl-table-body.cjs.entry.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const XplTableBody = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '5a82de617cad4d37dace81ad6a636db1e3a944df', class: "xpl-table-body", role: "rowgroup" }, index.h("slot", { key: 'd141e2e041789142eb69c6b3453b25523e4ecf59' })));
+    }
+};
+
+exports.xpl_table_body = XplTableBody;

package/dist/cjs/xpl-table-footer-cell.cjs.entry.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const XplTableFooterCell = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.align = 'left';
+    }
+    render() {
+        return (index.h(index.Host, { key: '331e85728bbd31aa7cde4fe169874879518b92bd', class: {
+                'xpl-table-footer-cell': true,
+                [`xpl-table-footer-cell--align-${this.align}`]: true,
+            }, role: "gridcell" }, index.h("slot", { key: '29f074c9c81b9cf38bca0ef3eb92a54a408b2436' })));
+    }
+};
+
+exports.xpl_table_footer_cell = XplTableFooterCell;

package/dist/cjs/xpl-table-footer.cjs.entry.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const XplTableFooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '7c0c20a91c48433b21a8a83094d614de532b317b', class: "xpl-table-footer", role: "rowgroup" }, index.h("slot", { key: 'aebc40fc1edc9ced7b2420303d3a38897c24939f' })));
+    }
+};
+
+exports.xpl_table_footer = XplTableFooter;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BaXVr8ux.js');
+var index = require('./index-3cBvw409.js');
 
 const TableHeaderCell = class {
     constructor(hostRef) {
@@ -24,7 +24,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':
@@ -32,7 +34,7 @@ const TableHeaderCell = class {
                 case 'checkbox':
                     return index.h("xpl-checkbox", null);
                 case 'icon':
-                    return index.h("xpl-icon", { icon: this.icon, size: 20 });
+                    return this.icon ? index.h("xpl-icon", { icon: this.icon, size: 20 }) : null;
                 default:
                     return '';
             }

package/dist/cjs/xpl-table-header.cjs.entry.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-BaXVr8ux.js');
+var index = require('./index-3cBvw409.js');
 
 const TableHeader = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '1123c671d82d987a74264ef2869494155746d7d8', role: "row", class: "xpl-table-header" }, index.h("slot", { key: 'f1a238ba023ce03559f87cf92214a1804c8ac821' })));
+        return (index.h(index.Host, { key: '94e6c6f38fa4672ef3c728bf196946801da855d4', role: "row", class: "xpl-table-header" }, index.h("slot", { key: 'fa41686f082c65d27555273945f734a36c670869' })));
     }
 };
 

package/dist/cjs/xpl-table-row.cjs.entry.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const XplTableRow = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.disabled = false;
+        this.selected = false;
+    }
+    render() {
+        return (index.h(index.Host, { key: '506e56b764d82707482e58a0715fd342219ef7d9', class: {
+                'xpl-table-row': true,
+                'xpl-table-row--disabled': this.disabled,
+                'xpl-table-row--selected': this.selected,
+            }, role: "row" }, index.h("slot", { key: 'db534bcb1e92bb92441476542c0eaa920f6914e8' })));
+    }
+};
+
+exports.xpl_table_row = XplTableRow;

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

@@ -0,0 +1,185 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+
+const getIconType = (sortType) => {
+    switch (sortType) {
+        case 'asc':
+            return 'arrow-up';
+        case 'desc':
+            return 'arrow-down';
+        default:
+            return 'dash';
+    }
+};
+const Table = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tableSelect = index.createEvent(this, "tableSelect", 7);
+        this.sortChanged = index.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 (index.h(index.Host, { key: '1e6bf436320a44e1e22e8590a881bc90c4a091d5' }, index.h("div", { key: '3d2e5361fbe615a6ae8ebe916ce07e00f82c444c', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
+                if (el)
+                    this.container = el;
+            } }, index.h("table", { key: '036672b3ba45a90a42f906c155ce3d59e33c8a7a', class: {
+                'xpl-table': true,
+                'xpl-table--striped': !!this.striped,
+                'xpl-table--freeze': !!this.freeze,
+                'xpl-table--has-scrolled': this.hasScrolled,
+            } }, this.columns && (index.h("thead", { key: 'bf0d5a808624234ba985c1c32064f1dab11bfefa' }, this.columns.map((column, i) => {
+            const iconType = getIconType(this.sortTypeArray?.[i]);
+            const isColumnSortable = !!(this.isSortable && this.sortableColumns[i]);
+            return (index.h("th", null, index.h("label", { onClick: (e) => this.handleSort(e, isColumnSortable, i, column.replace(/ /g, '-').toLowerCase()), class: isColumnSortable ? 'cursor-pointer' : '' }, this.multiselect && i === 0 && (index.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] && (index.h("xpl-icon", { icon: iconType, size: 16 })))));
+        }))), index.h("tbody", { key: '7915dbfbf1a9b68719c4168e09c5f0e3ab7fa35a' }, this.rowData.map((row, rowNum) => (index.h("tr", { class: this.selected && this.selected[rowNum]
+                ? 'xpl-table-row-selected'
+                : '' }, row.map((cell, i) => (index.h("td", null, this.multiselect && i === 0 ? (index.h("label", null, index.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}` }), index.h("div", { innerHTML: cell }))) : (index.h("div", { innerHTML: cell }))))))))), rowFooterData.length > 0 && (index.h("tfoot", { key: '78ee72f80c77e61c6234be9500770780952ca669' }, rowFooterData.map((row) => (index.h("tr", null, row.map((cell) => (index.h("td", null, index.h("div", { innerHTML: cell })))))))))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "data": [{
+                "watchData": 0
+            }],
+        "columns": [{
+                "watchColumns": 0
+            }]
+    }; }
+};
+Table.selectAllSeq = 0;
+
+exports.xpl_table = Table;