@db-ux/wc-core-components 4.10.2 → 4.11.0

package/dist/collection/components/table/table.js

@@ -0,0 +1,478 @@
+import { cls, delay, getBooleanAsString } from "../../utils";
+import { h, Fragment } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+ * @slot caption - TODO: Add description for slotCaption
+ */
+export class DBTable {
+    constructor() {
+        this._data = undefined;
+        this._style = undefined;
+    }
+    convertData() {
+        try {
+            if (typeof this.data === "string") {
+                return JSON.parse(this.data);
+            }
+            return this.data;
+        }
+        catch (error) {
+            console.error(error);
+        }
+        return {};
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    watch0Fn() {
+        if (this.data) {
+            this._data = this.convertData();
+        }
+        else {
+            this._data = undefined;
+        }
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    watch1Fn() {
+        if (this._ref && this.mobileVariant === "list") {
+            // Delay for angular
+            void delay(() => {
+                const table = this._ref;
+                if (!table)
+                    return;
+                const headerCells = table.querySelectorAll("thead tr th");
+                if (headerCells.length) {
+                    const otherRows = table.querySelectorAll(":is(tbody,tfoot) tr");
+                    otherRows.forEach((row) => {
+                        const cells = row.querySelectorAll(":is(td,th)");
+                        cells.forEach((cell, index) => {
+                            const headerCell = headerCells[index];
+                            if (headerCell) {
+                                // Use only direct text nodes to avoid including text from nested elements (e.g. sort buttons)
+                                const directText = Array.from(headerCell.childNodes)
+                                    .filter((node) => node.nodeType === Node.TEXT_NODE)
+                                    .map((node) => { var _a; return (_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })
+                                    .filter(Boolean)
+                                    .join(" ");
+                                if (directText) {
+                                    cell.dataset["header"] = directText;
+                                }
+                            }
+                        });
+                    });
+                }
+            }, 1);
+        }
+    }
+    watch1() {
+        this.watch1Fn();
+    }
+    watch2Fn() {
+        if (this.columnSizes) {
+            const columnStyles = {};
+            Object.entries(this.columnSizes).forEach(([key, value]) => {
+                columnStyles[`--db-table-column-size-${key}`] = value;
+            });
+            this._style = columnStyles;
+        }
+        else {
+            this._style = undefined;
+        }
+    }
+    watch2() {
+        this.watch2Fn();
+    }
+    componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
+        this.enableAttributePassing(this._ref, "db-table");
+        this.watch0Fn();
+        this.watch1Fn();
+        this.watch2Fn();
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        return (h("div", { key: 'd4edb3348e35410ac540499f815e173237e533dc', class: cls("db-table", this.className), style: this._style, "data-width": this.width, "data-size": this.size, "data-divider": this.divider, "data-variant": this.variant, "data-mobile-variant": this.mobileVariant, "data-show-caption": getBooleanAsString(this.showCaption), "data-sticky-header": this.stickyHeader }, h("table", { key: '2eda8c59f2c86a480691a1a4fae4a1fdaa63a6b1', ref: (el) => {
+                this._ref = el;
+            }, id: this.id }, this.captionPlain ? (h("caption", null, this.captionPlain)) : (h("slot", { name: "caption" })), this._data ? (h(Fragment, null, ((_a = this._data) === null || _a === void 0 ? void 0 : _a.header) ? (h("db-table-head", { rows: (_b = this._data) === null || _b === void 0 ? void 0 : _b.header })) : null, ((_c = this._data) === null || _c === void 0 ? void 0 : _c.body) ? (h("db-table-body", { rows: (_d = this._data) === null || _d === void 0 ? void 0 : _d.body })) : null, ((_e = this._data) === null || _e === void 0 ? void 0 : _e.footer) ? (h("db-table-footer", { rows: (_f = this._data) === null || _f === void 0 ? void 0 : _f.footer })) : null)) : (h("slot", null)))));
+    }
+    static get is() { return "db-table"; }
+    static get properties() {
+        return {
+            "data": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableProps[\"data\"]",
+                    "resolved": "string | { header?: DBTableRowDefaultProps[]; body?: DBTableRowDefaultProps[]; footer?: DBTableRowDefaultProps[]; }",
+                    "references": {
+                        "DBTableProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table/model.ts::DBTableProps",
+                            "referenceLocation": "DBTableProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "data"
+            },
+            "mobileVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableProps[\"mobileVariant\"]",
+                    "resolved": "\"list\" | \"table\"",
+                    "references": {
+                        "DBTableProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table/model.ts::DBTableProps",
+                            "referenceLocation": "DBTableProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mobile-variant"
+            },
+            "columnSizes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableProps[\"columnSizes\"]",
+                    "resolved": "number | string",
+                    "references": {
+                        "DBTableProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table/model.ts::DBTableProps",
+                            "referenceLocation": "DBTableProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "className": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableProps[\"className\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTableProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table/model.ts::DBTableProps",
+                            "referenceLocation": "DBTableProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "classname"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableProps[\"width\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTableProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table/model.ts::DBTableProps",
+                            "referenceLocation": "DBTableProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableProps[\"size\"]",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"x-small\"",
+                    "references": {
+                        "DBTableProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table/model.ts::DBTableProps",
+                            "referenceLocation": "DBTableProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size"
+            },
+            "divider": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableProps[\"divider\"]",
+                    "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
+                    "references": {
+                        "DBTableProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table/model.ts::DBTableProps",
+                            "referenceLocation": "DBTableProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "divider"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableProps[\"variant\"]",
+                    "resolved": "\"flat\" | \"spaced\" | \"zebra\"",
+                    "references": {
+                        "DBTableProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table/model.ts::DBTableProps",
+                            "referenceLocation": "DBTableProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant"
+            },
+            "showCaption": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableProps[\"showCaption\"]",
+                    "resolved": "boolean | string",
+                    "references": {
+                        "DBTableProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table/model.ts::DBTableProps",
+                            "referenceLocation": "DBTableProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-caption"
+            },
+            "stickyHeader": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableProps[\"stickyHeader\"]",
+                    "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
+                    "references": {
+                        "DBTableProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table/model.ts::DBTableProps",
+                            "referenceLocation": "DBTableProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sticky-header"
+            },
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableProps[\"id\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTableProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table/model.ts::DBTableProps",
+                            "referenceLocation": "DBTableProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "id"
+            },
+            "captionPlain": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableProps[\"captionPlain\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTableProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table/model.ts::DBTableProps",
+                            "referenceLocation": "DBTableProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "caption-plain"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_data": {},
+            "_style": {}
+        };
+    }
+    static get elementRef() { return "rootElement"; }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "watch0"
+            }, {
+                "propName": "mobileVariant",
+                "methodName": "watch1"
+            }, {
+                "propName": "_ref",
+                "methodName": "watch1"
+            }, {
+                "propName": "_data",
+                "methodName": "watch1"
+            }, {
+                "propName": "columnSizes",
+                "methodName": "watch2"
+            }];
+    }
+}

package/dist/collection/components/table-body/index.js

@@ -0,0 +1,2 @@
+import { DBTableBody } from "./table-body";
+export default DBTableBody;

package/dist/collection/components/table-body/model.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/table-body/table-body.js

@@ -0,0 +1,144 @@
+import { cls, uuid } from "../../utils";
+import { h } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export class DBTableBody {
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ""}${value}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
+        this.enableAttributePassing(this._ref, "db-table-body");
+    }
+    render() {
+        var _a;
+        return (h("tbody", { key: 'c497d5a4be20eda6884e6e04b37ef7c9e211f307', class: cls("db-table-body", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this.id }, this.rows ? ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.map((row, index) => {
+            var _a, _b, _c;
+            return (h("db-table-row", { class: (_a = row.className) !== null && _a !== void 0 ? _a : row.class, key: `${(_c = (_b = row.id) !== null && _b !== void 0 ? _b : this.id) !== null && _c !== void 0 ? _c : uuid()}-table-body-row-${index}`, cells: row.cells, interactive: row.interactive, id: row.id }));
+        })) : (h("slot", null))));
+    }
+    static get is() { return "db-table-body"; }
+    static get properties() {
+        return {
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableBodyProps[\"id\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTableBodyProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table-body/model.ts::DBTableBodyProps",
+                            "referenceLocation": "DBTableBodyProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "id"
+            },
+            "className": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableBodyProps[\"className\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTableBodyProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table-body/model.ts::DBTableBodyProps",
+                            "referenceLocation": "DBTableBodyProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "classname"
+            },
+            "rows": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableBodyProps[\"rows\"]",
+                    "resolved": "DBTableRowProps[]",
+                    "references": {
+                        "DBTableBodyProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table-body/model.ts::DBTableBodyProps",
+                            "referenceLocation": "DBTableBodyProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get elementRef() { return "rootElement"; }
+}

package/dist/collection/components/table-caption/index.js

@@ -0,0 +1,2 @@
+import { DBTableCaption } from "./table-caption";
+export default DBTableCaption;

package/dist/collection/components/table-caption/model.js

@@ -0,0 +1 @@
+export {};