@xplortech/apollo-core 2.5.0 → 2.7.0

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

@@ -0,0 +1,155 @@
+import { Host, h } from "@stencil/core";
+function isDisablableControl(el) {
+    switch (el.tagName) {
+        case 'BUTTON':
+        case 'INPUT':
+        case 'SELECT':
+        case 'TEXTAREA':
+        case 'FIELDSET':
+        case 'OPTGROUP':
+        case 'OPTION':
+            return true;
+        default:
+            return false;
+    }
+}
+export class XplTableCell {
+    constructor() {
+        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;
+            control.disabled = this.disabled;
+            if (this.disabled) {
+                control.setAttribute('disabled', '');
+            }
+            else {
+                control.removeAttribute('disabled');
+            }
+        };
+        const walk = (parent) => {
+            Array.from(parent.children).forEach((child) => {
+                if (child.tagName === 'XPL-TABLE') {
+                    return;
+                }
+                setControlDisabled(child);
+                walk(child);
+            });
+        };
+        walk(this.el);
+    }
+    render() {
+        return (h(Host, { key: '91700fc89eff07fc5c54474c12e3a02eb602c6c3', 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,
+            } }, h("slot", { key: '5e956de9f694db16d9f5ea89bda1ff05a15e9efa' })));
+    }
+    static get is() { return "xpl-table-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 cell."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'left'"
+            },
+            "bold": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders cell text in bold (--xpl-font-weight-semibold)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bold",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the cell and its interactive children are disabled. Set automatically by xpl-table-row."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "underline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds an underline to cell text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "underline",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "onDisabledChange"
+            }];
+    }
+}

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

@@ -0,0 +1,7 @@
+import { Host, h } from "@stencil/core";
+export class XplTableFooter {
+    render() {
+        return (h(Host, { key: '891052963f727f283783138363c9a925cb59140b', role: "rowgroup", class: "xpl-table-footer" }, h("slot", { key: 'df01f64a46ecd29380df26e053c2a6c246a22556' })));
+    }
+    static get is() { return "xpl-table-footer"; }
+}

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

@@ -0,0 +1,37 @@
+import { Host, h } from "@stencil/core";
+export class XplTableFooterCell {
+    constructor() {
+        this.align = 'left';
+    }
+    render() {
+        return (h(Host, { key: '452cb6ac0333ca57329341404343c290c63fc508', role: "gridcell", class: {
+                'xpl-table-footer-cell': true,
+                [`xpl-table-footer-cell--align-${this.align}`]: true,
+            } }, h("slot", { key: 'db6d5848f2aa009437317b9e71a47f0ca9245161' })));
+    }
+    static get is() { return "xpl-table-footer-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 cell."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'left'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,131 @@
+export default {
+    title: 'Components/Dynamic Table/Table Header',
+    component: 'xpl-table-header',
+    parameters: {
+        docs: {
+            description: {
+                component: 'Compositional table header row. Put `xpl-table-header-cell` inside `xpl-table-header` → `xpl-table-row`. For sortable columns, set `sortable` (and optional `sort-key`) on label cells; parent `xpl-table` coordinates headers and emits `sortChanged`. Legacy `columns`/`data` + `isSortable`/`sortableColumns` is only for the deprecated built-in `<table>` API.',
+            },
+        },
+    },
+    argTypes: {
+        firstCellType: {
+            control: 'select',
+            options: ['label', 'checkbox', 'icon'],
+        },
+        firstCellLabel: {
+            control: 'text',
+        },
+        firstCellIcon: {
+            control: 'select',
+            options: ['chevron-down', 'chevron-up', 'heart', 'dollar-sign'],
+        },
+        firstCellWidth: {
+            control: 'number',
+        },
+        secondCellType: {
+            control: 'select',
+            options: ['label', 'checkbox', 'icon'],
+        },
+        secondCellLabel: {
+            control: 'text',
+        },
+        secondCellIcon: {
+            control: 'select',
+            options: ['chevron-down', 'chevron-up', 'heart', 'dollar-sign'],
+        },
+        secondCellWidth: {
+            control: 'number',
+        },
+        thirdCellType: {
+            control: 'select',
+            options: ['label', 'checkbox', 'icon'],
+        },
+        thirdCellLabel: {
+            control: 'text',
+        },
+        thirdCellIcon: {
+            control: 'select',
+            options: ['chevron-down', 'chevron-up', 'heart', 'dollar-sign'],
+        },
+        thirdCellWidth: {
+            control: 'number',
+        },
+    },
+    tags: ['beta'],
+};
+export const TableHeader = ({ firstCellType, firstCellLabel, firstCellIcon, firstCellWidth, secondCellType, secondCellLabel, secondCellIcon, secondCellWidth, thirdCellType, thirdCellLabel, thirdCellIcon, thirdCellWidth, }) => `
+    <xpl-table label="Table header demo">
+        <xpl-table-header>
+            <xpl-table-row>
+                <xpl-table-header-cell
+                    type="${firstCellType}"
+                    label="${firstCellLabel}"
+                    icon="${firstCellIcon}"
+                    width="${firstCellWidth}"
+                ></xpl-table-header-cell>
+                <xpl-table-header-cell
+                    type="${secondCellType}"
+                    label="${secondCellLabel}"
+                    icon="${secondCellIcon}"
+                    width="${secondCellWidth}"
+                ></xpl-table-header-cell>
+                <xpl-table-header-cell
+                    type="${thirdCellType}"
+                    label="${thirdCellLabel}"
+                    icon="${thirdCellIcon}"
+                    width="${thirdCellWidth}"
+                >
+                </xpl-table-header-cell>
+            </xpl-table-row>
+        </xpl-table-header>
+        <xpl-table-body></xpl-table-body>
+    </xpl-table>
+  `;
+TableHeader.args = {
+    firstCellType: 'label',
+    firstCellLabel: '',
+    firstCellIcon: 'heart',
+    firstCellWidth: 48,
+    secondCellType: 'icon',
+    secondCellLabel: 'Column Item 2',
+    secondCellIcon: 'heart',
+    secondCellWidth: 48,
+    thirdCellType: 'label',
+    thirdCellLabel: 'Column Item 3',
+    thirdCellIcon: 'heart',
+    thirdCellWidth: 208,
+};
+TableHeader.parameters = {
+    docs: {
+        description: {
+            story: 'This story only swaps cell types/labels. For sort affordances, use `xpl-table-header-cell` with `sortable` inside a full compositional table — see **Components → Table**.',
+        },
+    },
+    'web-component': {
+        render: TableHeader(TableHeader.args),
+    },
+    html: {
+        render: `
+            <div role="grid" class="xpl-table" aria-label="Table header demo" aria-colcount="3">
+                <div role="rowgroup">
+                    <div role="row">
+                        <div role="columnheader" aria-colindex="1" class="xpl-table-header-cell" width="48">
+                            <span></span>
+                        </div>
+                        <div role="columnheader" aria-colindex="2" class="xpl-table-header-cell" width="48">
+                            <i class="icon-heart" aria-hidden="true"></i>
+                        </div>
+                        <div role="columnheader" aria-colindex="3" class="xpl-table-header-cell" width="208">
+                            <span>Column Item 3</span>
+                        </div>
+                    </div>
+                </div>
+                <div role="rowgroup" class="xpl-table-body"></div>
+            </div>`,
+    },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=14764-42036&p=f&t=xrSF2t7u1Brg2fnZ-11',
+    },
+};

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

@@ -0,0 +1,7 @@
+import { Host, h } from "@stencil/core";
+export class TableHeader {
+    render() {
+        return (h(Host, { key: '70eac99819cc3acbbfb54607fc657fb27bd26b4b', role: "rowgroup", class: "xpl-table-header" }, h("slot", { key: '9c46b25d247603f8c87a3994615bd45c617d9bb9' })));
+    }
+    static get is() { return "xpl-table-header"; }
+}

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

@@ -0,0 +1,105 @@
+function renderHeaderCell(args) {
+    var _a, _b, _c, _d, _e;
+    const type = String((_a = args.type) !== null && _a !== void 0 ? _a : 'label');
+    const label = String((_b = args.label) !== null && _b !== void 0 ? _b : '');
+    const icon = String((_c = args.icon) !== null && _c !== void 0 ? _c : '');
+    const align = String((_d = args.align) !== null && _d !== void 0 ? _d : 'left');
+    const checked = Boolean(args.checked);
+    const indeterminate = Boolean(args.indeterminate);
+    const checkboxAriaLabel = String((_e = args.checkboxAriaLabel) !== null && _e !== void 0 ? _e : '');
+    let attrs = `type="${type}" align="${align}"`;
+    if (label)
+        attrs += ` label="${label}"`;
+    if (type === 'icon')
+        attrs += ` icon="${icon}"`;
+    if (type === 'checkbox') {
+        if (checked)
+            attrs += ' checked';
+        if (indeterminate)
+            attrs += ' indeterminate';
+        if (checkboxAriaLabel)
+            attrs += ` checkbox-aria-label="${checkboxAriaLabel}"`;
+    }
+    return `<xpl-table-header-cell ${attrs}></xpl-table-header-cell>`;
+}
+export default {
+    title: 'Components/Dynamic Table/Table Header Cell',
+    component: 'xpl-table-header-cell',
+    parameters: {
+        docs: {
+            description: {
+                component: 'Column header cell for compositional tables. Set `width` (px, min 48) or `column-width` (any CSS grid track, e.g. `1fr`); parent `xpl-table` builds `grid-template-columns` (`--column-widths`). For sorting, set `sortable` (+ optional `sort-key`) on `type="label"` cells; the parent table listens for `headerSortChange` and emits `sortChanged` (it does not reorder body rows — your app or a demo script does).',
+            },
+        },
+    },
+    argTypes: {
+        type: {
+            control: 'select',
+            options: ['label', 'checkbox', 'icon', 'empty'],
+        },
+        label: {
+            control: 'text',
+        },
+        icon: {
+            control: 'select',
+            options: ['chevron-down', 'chevron-up', 'heart', 'dollar-sign'],
+        },
+        align: {
+            control: 'select',
+            options: ['left', 'center', 'right'],
+        },
+        checked: { control: 'boolean' },
+        indeterminate: { control: 'boolean' },
+        checkboxAriaLabel: { control: 'text' },
+    },
+    tags: ['beta'],
+};
+export const TableHeaderCell = (args) => renderHeaderCell(args);
+TableHeaderCell.args = {
+    type: 'label',
+    label: 'Column Item',
+    icon: 'chevron-down',
+    align: 'left',
+    checked: false,
+    indeterminate: false,
+    checkboxAriaLabel: '',
+};
+TableHeaderCell.parameters = {
+    'web-component': {
+        render: (args) => renderHeaderCell(args),
+    },
+    html: {
+        render: (args) => {
+            var _a, _b, _c, _d;
+            const type = String((_a = args.type) !== null && _a !== void 0 ? _a : 'label');
+            const label = String((_b = args.label) !== null && _b !== void 0 ? _b : '');
+            const icon = String((_c = args.icon) !== null && _c !== void 0 ? _c : '');
+            const align = String((_d = args.align) !== null && _d !== void 0 ? _d : 'left');
+            const checked = Boolean(args.checked);
+            const indeterminate = Boolean(args.indeterminate);
+            const inner = () => {
+                switch (type) {
+                    case 'label':
+                        return `<span>${label}</span>`;
+                    case 'checkbox':
+                        return `<input type="checkbox" class="xpl-checkbox"${checked ? ' checked' : ''}${indeterminate ? ' data-indeterminate="true"' : ''} />`;
+                    case 'icon':
+                        return `<xpl-icon icon="${icon}"></xpl-icon>`;
+                    case 'empty':
+                        return '';
+                    default:
+                        return '';
+                }
+            };
+            return `
+                <div role="columnheader" class="xpl-table-header-cell" style="text-align: ${align};">
+                    ${inner()}
+                </div>
+            `;
+        },
+    },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=14764-42036&p=f&t=xrSF2t7u1Brg2fnZ-11',
+    },
+};