@xplortech/apollo-core 3.1.0 → 3.2.0

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

@@ -0,0 +1,228 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+var tableInternal = require('./table-internal-DssCrBs_.js');
+
+const CELL_MANAGED_DISABLED_ATTR = 'data-xpl-table-cell-managed-disabled';
+function isDisablableControl(el) {
+    if ('disabled' in el) {
+        return true;
+    }
+    switch (el.tagName) {
+        case 'BUTTON':
+        case 'INPUT':
+        case 'SELECT':
+        case 'TEXTAREA':
+        case 'FIELDSET':
+        case 'OPTGROUP':
+        case 'OPTION':
+            return true;
+        default:
+            return false;
+    }
+}
+const XplTableCell = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.align = 'left';
+        this.bold = false;
+        this.disabled = false;
+        this.underline = false;
+    }
+    onDisabledChange() {
+        this.propagateDisabledToSlotted();
+    }
+    componentDidLoad() {
+        this.propagateDisabledToSlotted();
+    }
+    propagateDisabledToSlotted() {
+        const setControlDisabled = (element) => {
+            if (!isDisablableControl(element)) {
+                return;
+            }
+            const control = element;
+            if (this.disabled) {
+                if (control.disabled) {
+                    return;
+                }
+                control.disabled = true;
+                control.setAttribute('disabled', '');
+                control.setAttribute(CELL_MANAGED_DISABLED_ATTR, '');
+                return;
+            }
+            if (!control.hasAttribute(CELL_MANAGED_DISABLED_ATTR)) {
+                return;
+            }
+            control.disabled = false;
+            control.removeAttribute('disabled');
+            control.removeAttribute(CELL_MANAGED_DISABLED_ATTR);
+        };
+        const walk = (parent) => {
+            Array.from(parent.children).forEach((child) => {
+                if (child.tagName === 'XPL-TABLE') {
+                    return;
+                }
+                setControlDisabled(child);
+                walk(child);
+            });
+        };
+        walk(this.el);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'f4e7639b0cb35eda08fdbb13cf1e0ddcb380cb7a', role: "gridcell", class: {
+                'xpl-table-cell': true,
+                [`xpl-table-cell--align-${this.align}`]: true,
+                'xpl-table-cell--bold': this.bold,
+                'xpl-table-cell--underline': this.underline,
+                'xpl-table-cell--disabled': this.disabled,
+            } }, index.h("slot", { key: '16d9a63cb992b9bbeb56500b5d6537b824336b40' })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "disabled": [{
+                "onDisabledChange": 0
+            }]
+    }; }
+};
+
+const XplTableFooterCell = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.align = 'left';
+    }
+    render() {
+        return (index.h(index.Host, { key: '1434aa38de9894875e70b2a7b3c55479726727d5', class: {
+                'xpl-table-footer-cell': true,
+                [`xpl-table-footer-cell--align-${this.align}`]: true,
+            }, role: "gridcell" }, index.h("slot", { key: 'e3bac594dbd5265f44c7bd620e1fccfc9248abf0' })));
+    }
+};
+
+const TableHeaderCell = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.headerCheckboxChange = index.createEvent(this, "headerCheckboxChange", 7);
+        this.headerSortChange = index.createEvent(this, "headerSortChange", 7);
+        this.align = 'left';
+        this.checked = false;
+        this.indeterminate = false;
+        this.label = '';
+        this.sortable = false;
+        this.type = 'label';
+        this.onHeaderInnerCheckboxChange = (ev) => {
+            const { detail } = ev;
+            const checked = typeof detail === 'boolean' ? detail : Boolean(detail);
+            this.headerCheckboxChange.emit(checked);
+        };
+        this.onSortActivate = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!this.sortable || this.type !== 'label')
+                return;
+            const columnIndex = this.getColumnIndex0();
+            const sortKey = this.getSortKeySlug();
+            if (!this.el.closest('xpl-table')) {
+                this.sortDirection = tableInternal.cycleSortDirection(this.sortDirection);
+            }
+            this.headerSortChange.emit({
+                columnIndex,
+                sortKey,
+            });
+        };
+    }
+    watchColumnWidth() {
+        this.notifyColumnWidthsChange();
+    }
+    watchWidth() {
+        this.notifyColumnWidthsChange();
+    }
+    componentDidLoad() {
+        this.notifyColumnWidthsChange();
+    }
+    notifyColumnWidthsChange() {
+        this.el.dispatchEvent(new CustomEvent(tableInternal.XPL_TABLE_COLUMN_WIDTHS_CHANGE_EVENT, {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    getColumnIndex0() {
+        return Array.from(this.el.parentElement?.children ?? []).indexOf(this.el);
+    }
+    getSortKeySlug() {
+        const raw = (this.sortKey ?? this.label ?? '').trim();
+        if (raw.length > 0) {
+            return raw.replace(/ /g, '-').toLowerCase();
+        }
+        return `column-${this.getColumnIndex0()}`;
+    }
+    renderLabelText() {
+        return (index.h("span", { class: "xpl-table-header-cell__text" }, this.label, index.h("slot", null)));
+    }
+    renderLabelContent() {
+        if (this.sortable) {
+            const iconName = tableInternal.getSortAffordanceIconName(this.sortDirection);
+            const sortActive = this.sortDirection === 'asc' || this.sortDirection === 'desc';
+            return (index.h("button", { type: "button", class: "xpl-table-header-cell__sort", onClick: this.onSortActivate }, this.renderLabelText(), index.h("xpl-icon", { class: {
+                    'xpl-table-header-cell__sort-icon': true,
+                    'xpl-table-header-cell__sort-icon--active': sortActive,
+                    'xpl-table-header-cell__sort-icon--default': !sortActive,
+                }, icon: iconName, size: 16 })));
+        }
+        return this.renderLabelText();
+    }
+    render() {
+        const colIndex = this.getColumnIndex0() + 1;
+        const renderContent = () => {
+            switch (this.type) {
+                case 'label':
+                    return this.renderLabelContent();
+                case 'checkbox':
+                    return (index.h("xpl-checkbox", { ariaLabel: this.checkboxAriaLabel ?? 'Select all rows', checked: this.checked, indeterminate: this.indeterminate, onCheckboxChange: this.onHeaderInnerCheckboxChange }));
+                case 'icon':
+                    return this.icon ? index.h("xpl-icon", { icon: this.icon, size: 20 }) : null;
+                case 'empty':
+                    return null;
+                default:
+                    return '';
+            }
+        };
+        const effectiveAlign = (this.type === 'checkbox' || this.type === 'icon') && this.align === 'left'
+            ? 'center'
+            : this.align;
+        const alignClass = `xpl-table-header-cell--align-${effectiveAlign}`;
+        const ariaSort = this.type === 'label' && this.sortable
+            ? this.sortDirection === 'asc'
+                ? 'ascending'
+                : this.sortDirection === 'desc'
+                    ? 'descending'
+                    : 'none'
+            : undefined;
+        return (index.h(index.Host, { role: "columnheader", "aria-colindex": colIndex, class: {
+                'xpl-table-header-cell': true,
+                [alignClass]: true,
+                'xpl-table-header-cell--checkbox': this.type === 'checkbox',
+                'xpl-table-header-cell--icon': this.type === 'icon',
+                'xpl-table-header-cell--empty': this.type === 'empty',
+                'xpl-table-header-cell--sortable': this.sortable && this.type === 'label',
+            }, "aria-checked": this.type === 'checkbox'
+                ? this.indeterminate
+                    ? 'mixed'
+                    : this.checked
+                        ? 'true'
+                        : 'false'
+                : undefined, "aria-sort": ariaSort }, this.type === 'empty' ? null : renderContent()));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "columnWidth": [{
+                "watchColumnWidth": 0
+            }],
+        "width": [{
+                "watchWidth": 0
+            }]
+    }; }
+};
+
+exports.xpl_table_cell = XplTableCell;
+exports.xpl_table_footer_cell = XplTableFooterCell;
+exports.xpl_table_header_cell = TableHeaderCell;

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

@@ -7,7 +7,7 @@ const XplTableFooter = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '7c0c20a91c48433b21a8a83094d614de532b317b', class: "xpl-table-footer", role: "rowgroup" }, index.h("slot", { key: 'aebc40fc1edc9ced7b2420303d3a38897c24939f' })));
+        return (index.h(index.Host, { key: '57872baa33166a8146bd0c9b3d7af1597e1fb41e', class: "xpl-table-footer", role: "rowgroup" }, index.h("slot", { key: '65def2bdfee1be95fa966f7f746dedc7176b91e6' })));
     }
 };
 

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

@@ -7,7 +7,7 @@ const TableHeader = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '94e6c6f38fa4672ef3c728bf196946801da855d4', role: "row", class: "xpl-table-header" }, index.h("slot", { key: 'fa41686f082c65d27555273945f734a36c670869' })));
+        return (index.h(index.Host, { key: 'fb6c6d0ab301f41a22428583ffa0fea60a30719b', role: "row", class: "xpl-table-header" }, index.h("slot", { key: '54b058d43266fa281e30d26a644ad93d6559408b' })));
     }
 };
 

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

@@ -2,19 +2,60 @@
 
 var index = require('./index-3cBvw409.js');
 
+function isTableCell(node) {
+    return node.nodeName === 'XPL-TABLE-CELL';
+}
 const XplTableRow = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.disabled = false;
         this.selected = false;
     }
+    onDisabledChange() {
+        this.propagateDisabledToCells();
+    }
+    connectedCallback() {
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.cellObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type !== 'childList')
+                    return;
+                mutation.addedNodes.forEach((node) => {
+                    if (isTableCell(node)) {
+                        node.disabled = this.disabled;
+                    }
+                });
+            });
+        });
+        this.cellObserver.observe(this.el, { childList: true });
+    }
+    disconnectedCallback() {
+        this.cellObserver?.disconnect();
+        this.cellObserver = undefined;
+    }
+    componentDidLoad() {
+        this.propagateDisabledToCells();
+    }
+    propagateDisabledToCells() {
+        const cells = Array.from(this.el.children).filter(isTableCell);
+        cells.forEach((cell) => {
+            cell.disabled = this.disabled;
+        });
+    }
     render() {
-        return (index.h(index.Host, { key: '506e56b764d82707482e58a0715fd342219ef7d9', class: {
+        return (index.h(index.Host, { key: '8c49ba27b39d934cb774140b43e811e5ee2bb904', class: {
                 'xpl-table-row': true,
                 'xpl-table-row--disabled': this.disabled,
                 'xpl-table-row--selected': this.selected,
-            }, role: "row" }, index.h("slot", { key: 'db534bcb1e92bb92441476542c0eaa920f6914e8' })));
+            }, role: "row" }, index.h("slot", { key: '30788ce629c65d7eab04d268da978d46f0145e99' })));
     }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "disabled": [{
+                "onDisabledChange": 0
+            }]
+    }; }
 };
 
 exports.xpl_table_row = XplTableRow;