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

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

@@ -0,0 +1,154 @@
+import { cls } from "../../utils";
+import { h } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export class DBTableCaption {
+    constructor() {
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-table-caption");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
+                return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
+            })) {
+                this.enableAttributePassing(element, "db-table-caption");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
+    }
+    /**
+     * 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-"))) {
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && ["style"].includes(attr.name)) {
+                    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 ? ` ${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-caption");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        return (h("caption", { key: '5ef3476c6c9879f1fcf8548e11bea82516bd29d1', class: cls("db-table-caption", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this.id }, h("slot", { key: 'e20d1d699e7ab50422c0d40bdf058c8863ae4991' })));
+    }
+    static get is() { return "db-table-caption"; }
+    static get properties() {
+        return {
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableCaptionProps[\"id\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTableCaptionProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table-caption/model.ts::DBTableCaptionProps",
+                            "referenceLocation": "DBTableCaptionProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "id"
+            },
+            "className": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableCaptionProps[\"className\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTableCaptionProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table-caption/model.ts::DBTableCaptionProps",
+                            "referenceLocation": "DBTableCaptionProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "classname"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "observer": {}
+        };
+    }
+    static get elementRef() { return "rootElement"; }
+}

package/dist/collection/components/table-data-cell/index.js

@@ -0,0 +1,2 @@
+import { DBTableDataCell } from "./table-data-cell";
+export default DBTableDataCell;

package/dist/collection/components/table-data-cell/model.js

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

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

@@ -0,0 +1,303 @@
+import { cls, getNumber } from "../../utils";
+import { h } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export class DBTableDataCell {
+    /**
+     * 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-"))) {
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && ["style"].includes(attr.name)) {
+                    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 ? ` ${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-data-cell");
+    }
+    render() {
+        return (h("td", { key: 'e6614ac09ac484540ad119f807bea075521419cd', class: cls("db-table-data-cell", this.className), ref: (el) => {
+                this._ref = el;
+            }, id: this.id, "data-horizontal-alignment": this.horizontalAlignment, "data-vertical-alignment": this.verticalAlignment, colSpan: getNumber(this.colSpan, this.colspan), rowSpan: getNumber(this.rowSpan, this.rowspan), headers: this.headers }, h("slot", { key: 'bd353375cc862b5d5adea84545a5b5a63f1517e1' })));
+    }
+    static get is() { return "db-table-data-cell"; }
+    static get properties() {
+        return {
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableDataCellProps[\"id\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTableDataCellProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table-data-cell/model.ts::DBTableDataCellProps",
+                            "referenceLocation": "DBTableDataCellProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "id"
+            },
+            "className": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableDataCellProps[\"className\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTableDataCellProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table-data-cell/model.ts::DBTableDataCellProps",
+                            "referenceLocation": "DBTableDataCellProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "classname"
+            },
+            "horizontalAlignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableDataCellProps[\"horizontalAlignment\"]",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "DBTableDataCellProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table-data-cell/model.ts::DBTableDataCellProps",
+                            "referenceLocation": "DBTableDataCellProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "horizontal-alignment"
+            },
+            "verticalAlignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableDataCellProps[\"verticalAlignment\"]",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "DBTableDataCellProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table-data-cell/model.ts::DBTableDataCellProps",
+                            "referenceLocation": "DBTableDataCellProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "vertical-alignment"
+            },
+            "colSpan": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableDataCellProps[\"colSpan\"]",
+                    "resolved": "number | string",
+                    "references": {
+                        "DBTableDataCellProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table-data-cell/model.ts::DBTableDataCellProps",
+                            "referenceLocation": "DBTableDataCellProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "col-span"
+            },
+            "colspan": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableDataCellProps[\"colspan\"]",
+                    "resolved": "number | string",
+                    "references": {
+                        "DBTableDataCellProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table-data-cell/model.ts::DBTableDataCellProps",
+                            "referenceLocation": "DBTableDataCellProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "colspan"
+            },
+            "rowSpan": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableDataCellProps[\"rowSpan\"]",
+                    "resolved": "number | string",
+                    "references": {
+                        "DBTableDataCellProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table-data-cell/model.ts::DBTableDataCellProps",
+                            "referenceLocation": "DBTableDataCellProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row-span"
+            },
+            "rowspan": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableDataCellProps[\"rowspan\"]",
+                    "resolved": "number | string",
+                    "references": {
+                        "DBTableDataCellProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table-data-cell/model.ts::DBTableDataCellProps",
+                            "referenceLocation": "DBTableDataCellProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rowspan"
+            },
+            "headers": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableDataCellProps[\"headers\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTableDataCellProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table-data-cell/model.ts::DBTableDataCellProps",
+                            "referenceLocation": "DBTableDataCellProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "headers"
+            }
+        };
+    }
+    static get elementRef() { return "rootElement"; }
+}

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

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

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

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

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

@@ -0,0 +1,149 @@
+import { cls, uuid } from "../../utils";
+import { h } from "@stencil/core";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export class DBTableFooter {
+    /**
+     * 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-"))) {
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && ["style"].includes(attr.name)) {
+                    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 ? ` ${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-footer");
+    }
+    render() {
+        var _a;
+        return (h("tfoot", { key: '735f3ce4c1d6a3305993a8de60c797e9ce2bcd20', class: cls("db-table-footer", 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-footer-row-${index}`, cells: row.cells, interactive: row.interactive, id: row.id }));
+        })) : (h("slot", null))));
+    }
+    static get is() { return "db-table-footer"; }
+    static get properties() {
+        return {
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableFooterProps[\"id\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTableFooterProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table-footer/model.ts::DBTableFooterProps",
+                            "referenceLocation": "DBTableFooterProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "id"
+            },
+            "className": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableFooterProps[\"className\"]",
+                    "resolved": "string",
+                    "references": {
+                        "DBTableFooterProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table-footer/model.ts::DBTableFooterProps",
+                            "referenceLocation": "DBTableFooterProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "classname"
+            },
+            "rows": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBTableFooterProps[\"rows\"]",
+                    "resolved": "DBTableRowProps[]",
+                    "references": {
+                        "DBTableFooterProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/table-footer/model.ts::DBTableFooterProps",
+                            "referenceLocation": "DBTableFooterProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get elementRef() { return "rootElement"; }
+}

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

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

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

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