@zywave/zui-table 4.0.0-pre.1

package/dist/zui-table-row.js

@@ -0,0 +1,52 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ZuiBaseElement } from '@zywave/zui-base';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { style } from './zui-table-row-css.js';
+/**
+ * @element zui-table-row
+ *
+ * @slot - Default slot; `<zui-table-cell>`s are declared here
+ *
+ * @attr {boolean} header - Set table header row
+ * @attr {boolean} summary - Set table summary row
+ * @prop {boolean} header - Set table header row
+ * @prop {boolean} summary - Set table summary row
+ *
+ * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Set the table summary background color
+ * @cssprop [--zui-table-summary-text-color=#fff] - Set the the table summary text color
+ */
+export class ZuiTableRowElement extends ZuiBaseElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * property to declare the first row as the table header row
+         */
+        this.header = false;
+        /**
+         * property to declare a summary row; typically the last row in zui-table before zui-table-footer
+         */
+        this.summary = false;
+    }
+    static get styles() {
+        return [super.styles, style];
+    }
+    render() {
+        return html `<div role="row">
+      <slot></slot>
+    </div>`;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ZuiTableRowElement.prototype, "header", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ZuiTableRowElement.prototype, "summary", void 0);
+window.customElements.define('zui-table-row', ZuiTableRowElement);
+//# sourceMappingURL=zui-table-row.js.map

package/dist/zui-table-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zui-table-row.js","sourceRoot":"","sources":["../src/zui-table-row.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,kBAAmB,SAAQ,cAAc;IAAtD;;QACE;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;QAEf;;WAEG;QAEH,YAAO,GAAG,KAAK,CAAC;IAWlB,CAAC;IATC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;WAEJ,CAAC;IACV,CAAC;CACF;AAjBC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAC5B;AAMf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC3B;AAalB,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { style } from './zui-table-row-css.js';\n\n/**\n * @element zui-table-row\n *\n * @slot - Default slot; `<zui-table-cell>`s are declared here\n *\n * @attr {boolean} header - Set table header row\n * @attr {boolean} summary - Set table summary row\n * @prop {boolean} header - Set table header row\n * @prop {boolean} summary - Set table summary row\n *\n * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Set the table summary background color\n * @cssprop [--zui-table-summary-text-color=#fff] - Set the the table summary text color\n */\nexport class ZuiTableRowElement extends ZuiBaseElement {\n  /**\n   * property to declare the first row as the table header row\n   */\n  @property({ type: Boolean, reflect: true })\n  header = false;\n\n  /**\n   * property to declare a summary row; typically the last row in zui-table before zui-table-footer\n   */\n  @property({ type: Boolean, reflect: true })\n  summary = false;\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  render() {\n    return html`<div role=\"row\">\n      <slot></slot>\n    </div>`;\n  }\n}\n\nwindow.customElements.define('zui-table-row', ZuiTableRowElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table-row': ZuiTableRowElement;\n  }\n}\n"]}

package/dist/zui-table-topbar-css.d.ts

@@ -0,0 +1 @@
+export const style: import("lit").CSSResult;

package/dist/zui-table-topbar-css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const style = css `.topbar{display:flex;width:100%;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25)}.content{display:flex;flex:1;align-items:center}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50)}.counter{flex-shrink:0;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}.action{margin-left:.625rem}.action ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}slot[name=action]{display:flex}`;
+//# sourceMappingURL=zui-table-topbar-css.js.map

package/dist/zui-table-topbar-css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zui-table-topbar-css.js","sourceRoot":"","sources":["../src/zui-table-topbar-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,0eAA0e,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`.topbar{display:flex;width:100%;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25)}.content{display:flex;flex:1;align-items:center}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50)}.counter{flex-shrink:0;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}.action{margin-left:.625rem}.action ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}slot[name=action]{display:flex}`;\n"]}

package/dist/zui-table-topbar.d.ts

@@ -0,0 +1,17 @@
+import { ZuiBaseElement } from '@zywave/zui-base';
+/**
+ * @element zui-table-topbar
+ *
+ * @slot - Default slot; table cell content goes here
+ * @slot counter - Total number of results from table goes here
+ * @slot action - Action(s) that affect the whole table goes here
+ */
+export declare class ZuiTableTopbarElement extends ZuiBaseElement {
+    static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'zui-table-topbar': ZuiTableTopbarElement;
+    }
+}

package/dist/zui-table-topbar.js

@@ -0,0 +1,24 @@
+import { ZuiBaseElement } from '@zywave/zui-base';
+import { html } from 'lit';
+import { style } from './zui-table-topbar-css.js';
+/**
+ * @element zui-table-topbar
+ *
+ * @slot - Default slot; table cell content goes here
+ * @slot counter - Total number of results from table goes here
+ * @slot action - Action(s) that affect the whole table goes here
+ */
+export class ZuiTableTopbarElement extends ZuiBaseElement {
+    static get styles() {
+        return [super.styles, style];
+    }
+    render() {
+        return html `<div class="topbar">
+      <div class="content"><slot></slot></div>
+      <div class="counter"><slot name="counter"></slot></div>
+      <div class="action"><slot name="action"></slot></div>
+    </div>`;
+    }
+}
+window.customElements.define('zui-table-topbar', ZuiTableTopbarElement);
+//# sourceMappingURL=zui-table-topbar.js.map

package/dist/zui-table-topbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zui-table-topbar.js","sourceRoot":"","sources":["../src/zui-table-topbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAElD;;;;;;GAMG;AACH,MAAM,OAAO,qBAAsB,SAAQ,cAAc;IACvD,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;WAIJ,CAAC;IACV,CAAC;CACF;AAED,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,CAAC","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport { html } from 'lit';\nimport { style } from './zui-table-topbar-css.js';\n\n/**\n * @element zui-table-topbar\n *\n * @slot - Default slot; table cell content goes here\n * @slot counter - Total number of results from table goes here\n * @slot action - Action(s) that affect the whole table goes here\n */\nexport class ZuiTableTopbarElement extends ZuiBaseElement {\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  render() {\n    return html`<div class=\"topbar\">\n      <div class=\"content\"><slot></slot></div>\n      <div class=\"counter\"><slot name=\"counter\"></slot></div>\n      <div class=\"action\"><slot name=\"action\"></slot></div>\n    </div>`;\n  }\n}\n\nwindow.customElements.define('zui-table-topbar', ZuiTableTopbarElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table-topbar': ZuiTableTopbarElement;\n  }\n}\n"]}

package/dist/zui-table.d.ts

@@ -0,0 +1,45 @@
+import { ZuiBaseElement } from '@zywave/zui-base';
+/**
+ * @element zui-table
+ *
+ * @slot - Default slot; all table content will appear here, such as table rows
+ * @slot no-results-message - Customize the no results message that is shown when `<zui-table>` has the attribute `no-results`: `<zui-table no-results>`
+ * @slot footer - Only for `<zui-table-footer>`. When there is a `<zui-table-footer>` present inside `<zui-table>`, it will be auto-assigned to this slot in order to place it outside of the rendered table for styling purposes.
+ *
+ * @attr {number} columns - Amount of columns to show in the table
+ * @attr {boolean} banded - Style option to alternate row background colors
+ * @attr {boolean} no-results - To show or hide no results message when there are no results
+ * @prop {number} columns - Amount of columns to show in the table
+ * @prop {boolean} banded - Style option to alternate row background colors
+ * @prop {boolean} noResults - To show or hide no results message when there are no results
+ *
+ * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding
+ * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Set the table summary background color
+ * @cssprop [--zui-table-summary-text-color=#fff] - Set the the table summary text color
+ * @cssprop [--zui-table-footer-margin=10px] - Margin between the table and footer of the table
+ */
+export declare class ZuiTableElement extends ZuiBaseElement {
+    #private;
+    /**
+     * property to display number of columns
+     */
+    columns: string;
+    /**
+     * property to apply alternating background colors to table rows
+     */
+    banded: boolean;
+    /**
+     * property to show or hide no results message when there are no results in the table
+     */
+    noResults: boolean;
+    private _slotEl;
+    private get _footer();
+    static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'zui-table': ZuiTableElement;
+    }
+}

package/dist/zui-table.js

@@ -0,0 +1,96 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _ZuiTableElement_instances, _ZuiTableElement_renderNoResultsView, _ZuiTableElement_reassignFooter;
+import { ZuiBaseElement } from '@zywave/zui-base';
+import { html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { style } from './zui-table-css.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { findAssignedElement } from '@zywave/zui-base/dist/utils/find-assigned-element.js';
+/**
+ * @element zui-table
+ *
+ * @slot - Default slot; all table content will appear here, such as table rows
+ * @slot no-results-message - Customize the no results message that is shown when `<zui-table>` has the attribute `no-results`: `<zui-table no-results>`
+ * @slot footer - Only for `<zui-table-footer>`. When there is a `<zui-table-footer>` present inside `<zui-table>`, it will be auto-assigned to this slot in order to place it outside of the rendered table for styling purposes.
+ *
+ * @attr {number} columns - Amount of columns to show in the table
+ * @attr {boolean} banded - Style option to alternate row background colors
+ * @attr {boolean} no-results - To show or hide no results message when there are no results
+ * @prop {number} columns - Amount of columns to show in the table
+ * @prop {boolean} banded - Style option to alternate row background colors
+ * @prop {boolean} noResults - To show or hide no results message when there are no results
+ *
+ * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding
+ * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Set the table summary background color
+ * @cssprop [--zui-table-summary-text-color=#fff] - Set the the table summary text color
+ * @cssprop [--zui-table-footer-margin=10px] - Margin between the table and footer of the table
+ */
+export class ZuiTableElement extends ZuiBaseElement {
+    constructor() {
+        super(...arguments);
+        _ZuiTableElement_instances.add(this);
+        /**
+         * property to display number of columns
+         */
+        this.columns = '1';
+        /**
+         * property to apply alternating background colors to table rows
+         */
+        this.banded = false;
+        // TODO: add divided prop so all table cells will have 1px border
+        /**
+         * property to show or hide no results message when there are no results in the table
+         */
+        this.noResults = false;
+    }
+    get _footer() {
+        return findAssignedElement(this._slotEl, 'zui-table-footer');
+    }
+    static get styles() {
+        return [super.styles, style];
+    }
+    firstUpdated() {
+        __classPrivateFieldGet(this, _ZuiTableElement_instances, "m", _ZuiTableElement_reassignFooter).call(this);
+    }
+    render() {
+        const columnsCssPropVal = {
+            '--zui-table-columns': this.columns,
+        };
+        return html `<div role="table" class="table" style="${styleMap(columnsCssPropVal)}">
+        <slot></slot>
+        ${this.noResults ? __classPrivateFieldGet(this, _ZuiTableElement_instances, "m", _ZuiTableElement_renderNoResultsView).call(this) : ``}</div
+      >
+      <div><slot name="footer"></slot></div>`;
+    }
+}
+_ZuiTableElement_instances = new WeakSet(), _ZuiTableElement_renderNoResultsView = function _ZuiTableElement_renderNoResultsView() {
+    return html `<div class="no-results"><slot name="no-results-message"></slot></div>`;
+}, _ZuiTableElement_reassignFooter = function _ZuiTableElement_reassignFooter() {
+    if (this._footer) {
+        this._footer.setAttribute('slot', 'footer');
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], ZuiTableElement.prototype, "columns", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ZuiTableElement.prototype, "banded", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'no-results' })
+], ZuiTableElement.prototype, "noResults", void 0);
+__decorate([
+    query('slot')
+], ZuiTableElement.prototype, "_slotEl", void 0);
+window.customElements.define('zui-table', ZuiTableElement);
+//# sourceMappingURL=zui-table.js.map

package/dist/zui-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zui-table.js","sourceRoot":"","sources":["../src/zui-table.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAE3F;;;;;;;;;;;;;;;;;;GAkBG;AAEH,MAAM,OAAO,eAAgB,SAAQ,cAAc;IAAnD;;;QACE;;WAEG;QAEH,YAAO,GAAG,GAAG,CAAC;QAEd;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;QAEf,iEAAiE;QAEjE;;WAEG;QAEH,cAAS,GAAG,KAAK,CAAC;IAsCpB,CAAC;IAjCC,IAAY,OAAO;QACjB,OAAO,mBAAmB,CAAC,IAAI,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;IAC/D,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,YAAY;QACV,uBAAA,IAAI,mEAAgB,MAApB,IAAI,CAAkB,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,MAAM,iBAAiB,GAAG;YACxB,qBAAqB,EAAE,IAAI,CAAC,OAAO;SACpC,CAAC;QAEF,OAAO,IAAI,CAAA,0CAA0C,QAAQ,CAAC,iBAAiB,CAAC;;UAE1E,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,uBAAA,IAAI,wEAAqB,MAAzB,IAAI,CAAuB,CAAC,CAAC,CAAC,EAAE;;6CAEd,CAAC;IAC5C,CAAC;CAWF;;IARG,OAAO,IAAI,CAAA,uEAAuE,CAAC;AACrF,CAAC;IAGC,IAAI,IAAI,CAAC,OAAO,EAAE;QAChB,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;KAC7C;AACH,CAAC;AAnDD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC5B;AAMd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAC5B;AAQf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;kDAClD;AAGlB;IADC,KAAK,CAAC,MAAM,CAAC;gDACmB;AAqCnC,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport { html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { style } from './zui-table-css.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { findAssignedElement } from '@zywave/zui-base/dist/utils/find-assigned-element.js';\n\n/**\n * @element zui-table\n *\n * @slot - Default slot; all table content will appear here, such as table rows\n * @slot no-results-message - Customize the no results message that is shown when `<zui-table>` has the attribute `no-results`: `<zui-table no-results>`\n * @slot footer - Only for `<zui-table-footer>`. When there is a `<zui-table-footer>` present inside `<zui-table>`, it will be auto-assigned to this slot in order to place it outside of the rendered table for styling purposes.\n *\n * @attr {number} columns - Amount of columns to show in the table\n * @attr {boolean} banded - Style option to alternate row background colors\n * @attr {boolean} no-results - To show or hide no results message when there are no results\n * @prop {number} columns - Amount of columns to show in the table\n * @prop {boolean} banded - Style option to alternate row background colors\n * @prop {boolean} noResults - To show or hide no results message when there are no results\n *\n * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding\n * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Set the table summary background color\n * @cssprop [--zui-table-summary-text-color=#fff] - Set the the table summary text color\n * @cssprop [--zui-table-footer-margin=10px] - Margin between the table and footer of the table\n */\n\nexport class ZuiTableElement extends ZuiBaseElement {\n  /**\n   * property to display number of columns\n   */\n  @property({ type: String, reflect: true })\n  columns = '1';\n\n  /**\n   * property to apply alternating background colors to table rows\n   */\n  @property({ type: Boolean, reflect: true })\n  banded = false;\n\n  // TODO: add divided prop so all table cells will have 1px border\n\n  /**\n   * property to show or hide no results message when there are no results in the table\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-results' })\n  noResults = false;\n\n  @query('slot')\n  private _slotEl: HTMLSlotElement;\n\n  private get _footer() {\n    return findAssignedElement(this._slotEl, 'zui-table-footer');\n  }\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  firstUpdated() {\n    this.#reassignFooter();\n  }\n\n  render() {\n    const columnsCssPropVal = {\n      '--zui-table-columns': this.columns,\n    };\n\n    return html`<div role=\"table\" class=\"table\" style=\"${styleMap(columnsCssPropVal)}\">\n        <slot></slot>\n        ${this.noResults ? this.#renderNoResultsView() : ``}</div\n      >\n      <div><slot name=\"footer\"></slot></div>`;\n  }\n\n  #renderNoResultsView() {\n    return html`<div class=\"no-results\"><slot name=\"no-results-message\"></slot></div>`;\n  }\n\n  #reassignFooter() {\n    if (this._footer) {\n      this._footer.setAttribute('slot', 'footer');\n    }\n  }\n}\n\nwindow.customElements.define('zui-table', ZuiTableElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table': ZuiTableElement;\n  }\n}\n"]}