@xplortech/apollo-core 3.1.0 → 3.2.0

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

@@ -0,0 +1,402 @@
+import { Host, h } from "@stencil/core";
+import { XPL_TABLE_COLUMN_WIDTHS_CHANGE_EVENT, cycleSortDirection, getSortAffordanceIconName, } from "../utils/table-internal";
+export class TableHeaderCell {
+    constructor() {
+        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 = cycleSortDirection(this.sortDirection);
+            }
+            this.headerSortChange.emit({
+                columnIndex,
+                sortKey,
+            });
+        };
+    }
+    watchColumnWidth() {
+        this.notifyColumnWidthsChange();
+    }
+    watchWidth() {
+        this.notifyColumnWidthsChange();
+    }
+    componentDidLoad() {
+        this.notifyColumnWidthsChange();
+    }
+    notifyColumnWidthsChange() {
+        this.el.dispatchEvent(new CustomEvent(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 (h("span", { class: "xpl-table-header-cell__text" }, this.label, h("slot", null)));
+    }
+    renderLabelContent() {
+        if (this.sortable) {
+            const iconName = getSortAffordanceIconName(this.sortDirection);
+            const sortActive = this.sortDirection === 'asc' || this.sortDirection === 'desc';
+            return (h("button", { type: "button", class: "xpl-table-header-cell__sort", onClick: this.onSortActivate }, this.renderLabelText(), 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 (h("xpl-checkbox", { ariaLabel: this.checkboxAriaLabel ?? 'Select all rows', checked: this.checked, indeterminate: this.indeterminate, onCheckboxChange: this.onHeaderInnerCheckboxChange }));
+                case 'icon':
+                    return this.icon ? 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 (h(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()));
+    }
+    static get is() { return "xpl-table-header-cell"; }
+    static get properties() {
+        return {
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right' | 'center'",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Horizontal text alignment within the header cell."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'left'"
+            },
+            "checkboxAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the header checkbox (native `aria-label`).\nDefaults to \u201CSelect all rows\u201D when `type` is `checkbox`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checkbox-aria-label"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the header checkbox is checked"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "columnWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS grid track size for this column (e.g. `1fr`, `minmax(120px, 1fr)`, `auto`). When set, overrides `width`.\nUse this when you need flexible columns; default layout uses `auto` per column unless you set a track here."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "column-width"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to display in the cell.\n\nSee [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox is in indeterminate (partially selected) state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to display in the cell."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "sortDirection": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'asc' | 'desc' | null",
+                    "resolved": "\"asc\" | \"desc\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Active sort direction for this column when `sortable`. Set by `xpl-table` when used inside\na compositional table; may be set by the app for controlled updates."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "sort-direction"
+            },
+            "sortKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "When `sortable` is true, optional stable id used as the key in `sortChanged`\u2019s detail object.\nFalls back to a slug of `label` when omitted."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sort-key"
+            },
+            "sortable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true (and `type` is `label`), renders a sort control (button + affordance icon)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sortable",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'label' | 'checkbox' | 'icon' | 'empty'",
+                    "resolved": "\"checkbox\" | \"empty\" | \"icon\" | \"label\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of cell to render. **Reflected** to the host `type` attribute so `xpl-table` (and CSS\n`[type=\"checkbox\"]`) can find the selection column after frameworks set the prop without syncing\nthe attribute (e.g. Vue `:type=\"'checkbox'\"`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'label'"
+            },
+            "width": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fixed width for this column in pixels (minimum 48px). Sets the grid track to `Npx`.\nIgnored when `columnWidth` is set. When omitted, the column track defaults to `auto` (content-sized)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "width"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "headerCheckboxChange",
+                "name": "headerCheckboxChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when header checkbox changes"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "headerSortChange",
+                "name": "headerSortChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a sortable label header is activated. Parent `xpl-table` coordinates columns and emits `sortChanged`."
+                },
+                "complexType": {
+                    "original": "HeaderSortChangeDetail",
+                    "resolved": "HeaderSortChangeDetail",
+                    "references": {
+                        "HeaderSortChangeDetail": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-table/xpl-table-header-cell/xpl-table-header-cell.tsx",
+                            "id": "src/components/components/xpl-table/xpl-table-header-cell/xpl-table-header-cell.tsx::HeaderSortChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "columnWidth",
+                "methodName": "watchColumnWidth"
+            }, {
+                "propName": "width",
+                "methodName": "watchWidth"
+            }];
+    }
+}

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

@@ -1,15 +1,50 @@
 import { Host, h } from "@stencil/core";
+function isTableCell(node) {
+    return node.nodeName === 'XPL-TABLE-CELL';
+}
 export class XplTableRow {
     constructor() {
         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 (h(Host, { key: '506e56b764d82707482e58a0715fd342219ef7d9', class: {
+        return (h(Host, { key: '8c49ba27b39d934cb774140b43e811e5ee2bb904', class: {
                 'xpl-table-row': true,
                 'xpl-table-row--disabled': this.disabled,
                 'xpl-table-row--selected': this.selected,
-            }, role: "row" }, h("slot", { key: 'db534bcb1e92bb92441476542c0eaa920f6914e8' })));
+            }, role: "row" }, h("slot", { key: '30788ce629c65d7eab04d268da978d46f0145e99' })));
     }
     static get is() { return "xpl-table-row"; }
     static get properties() {
@@ -75,4 +110,11 @@ export class XplTableRow {
             }
         };
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "onDisabledChange"
+            }];
+    }
 }