@zywave/zui-table 4.0.2-pre.1 → 4.0.2-pre.2

package/dist/zui-table-cell.js

@@ -4,34 +4,121 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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';
+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 __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _ZuiTableCellElement_instances, _ZuiTableCellElement_sort, _ZuiTableCellElement_sortable, _ZuiTableCellElement_onSortableClick;
+import { ZuiTableBaseElement } from './base.js';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { style } from './zui-table-cell-css.js';
 /**
+ * An individual table cell to be passed into a `<zui-table-row>`.
+ *
  * @element zui-table-cell
  *
- * @slot - Default slot; table cell content goes here
+ * @slot - Unnamed slot, table cell content goes here
  *
  * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding
+ * @cssprop [--zui-table-cell-sort-color=var(--zui-gray-300)] - ([sortable]): Default color of chevron when `direction` is `null`
+ * @cssprop [--zui-table-cell-sort-active-color=var(--zui-blue)] - Highlight color used to indicate the active sort direction
+ *
+ * @event sort - Event fires when a `sortable` cell is clicked
  */
-export class ZuiTableCellElement extends ZuiBaseElement {
+export class ZuiTableCellElement extends ZuiTableBaseElement {
     constructor() {
         super(...arguments);
+        _ZuiTableCellElement_instances.add(this);
         /**
          * Set to decrease table cell padding to accommodate action button(s)
          */
         this.action = false;
+        /**
+         * This private field is needed to persist state between the cell and the header row. DO NOT USE EXTERNALLY
+         */
+        this._isAllowedSort = false;
+        _ZuiTableCellElement_sort.set(this, null);
+        _ZuiTableCellElement_sortable.set(this, false);
+    }
+    /**
+     * Current sort direction of the sortable cell
+     * @type {null | "ascending" | "descending"}
+     */
+    get sort() {
+        return __classPrivateFieldGet(this, _ZuiTableCellElement_sort, "f");
+    }
+    set sort(val) {
+        var _a;
+        const acceptableVals = ['ascending', 'descending', null];
+        if (acceptableVals.includes(val)) {
+            const oldVal = __classPrivateFieldGet(this, _ZuiTableCellElement_sort, "f");
+            __classPrivateFieldSet(this, _ZuiTableCellElement_sort, val, "f");
+            this.requestUpdate('sort', oldVal);
+            (_a = this._state) === null || _a === void 0 ? void 0 : _a.channel.dispatchEvent(new CustomEvent('sort', { detail: { sort: val, cell: this } }));
+        }
+    }
+    /**
+     * (`zui-table-row[header]`): Whether or not cell header is sortable; another requirement is the parent element, `<zui-table-cell header>` must have `header` attribute or property set
+     */
+    get sortable() {
+        return this._isAllowedSort && __classPrivateFieldGet(this, _ZuiTableCellElement_sortable, "f");
+    }
+    set sortable(val) {
+        const oldVal = __classPrivateFieldGet(this, _ZuiTableCellElement_sortable, "f");
+        __classPrivateFieldSet(this, _ZuiTableCellElement_sortable, val, "f");
+        this.requestUpdate('sortable', oldVal);
     }
     static get styles() {
         return [super.styles, style];
     }
     render() {
-        return html `<div><slot></slot></div>`;
+        const styles = { 'is-selectable': this.sortable };
+        return html `<div @click="${__classPrivateFieldGet(this, _ZuiTableCellElement_instances, "m", _ZuiTableCellElement_onSortableClick)}" class="${classMap(styles)}">
+      <slot></slot>
+      ${this.sortable ? html `<zui-icon icon="zui-sort"></zui-icon>` : nothing}
+    </div>`;
+    }
+    click() {
+        super.click();
+        __classPrivateFieldGet(this, _ZuiTableCellElement_instances, "m", _ZuiTableCellElement_onSortableClick).call(this);
     }
 }
+_ZuiTableCellElement_sort = new WeakMap(), _ZuiTableCellElement_sortable = new WeakMap(), _ZuiTableCellElement_instances = new WeakSet(), _ZuiTableCellElement_onSortableClick = function _ZuiTableCellElement_onSortableClick() {
+    if (this.sortable) {
+        switch (this.sort) {
+            case 'ascending':
+                this.sort = 'descending';
+                break;
+            case 'descending':
+                this.sort = null;
+                break;
+            case null:
+            default:
+                this.sort = 'ascending';
+                break;
+        }
+    }
+};
 __decorate([
     property({ type: Boolean, reflect: true })
 ], ZuiTableCellElement.prototype, "action", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], ZuiTableCellElement.prototype, "sort", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ZuiTableCellElement.prototype, "sortable", null);
+__decorate([
+    state()
+], ZuiTableCellElement.prototype, "_isAllowedSort", void 0);
 window.customElements.define('zui-table-cell', ZuiTableCellElement);
 //# sourceMappingURL=zui-table-cell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"zui-table-cell.js","sourceRoot":"","sources":["../src/zui-table-cell.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,yBAAyB,CAAC;AAEhD;;;;;;GAMG;AACH,MAAM,OAAO,mBAAoB,SAAQ,cAAc;IAAvD;;QACE;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;IASjB,CAAC;IAPC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,0BAA0B,CAAC;IACxC,CAAC;CACF;AATC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC5B;AAWjB,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,CAAC","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { style } from './zui-table-cell-css.js';\n\n/**\n * @element zui-table-cell\n *\n * @slot - Default slot; table cell content goes here\n *\n * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding\n */\nexport class ZuiTableCellElement extends ZuiBaseElement {\n  /**\n   * Set to decrease table cell padding to accommodate action button(s)\n   */\n  @property({ type: Boolean, reflect: true })\n  action = false;\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  render() {\n    return html`<div><slot></slot></div>`;\n  }\n}\n\nwindow.customElements.define('zui-table-cell', ZuiTableCellElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table-cell': ZuiTableCellElement;\n  }\n}\n"]}
+{"version":3,"file":"zui-table-cell.js","sourceRoot":"","sources":["../src/zui-table-cell.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiTableBaseElement } from './base.js';\nimport { html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { style } from './zui-table-cell-css.js';\n\n/**\n * An individual table cell to be passed into a `<zui-table-row>`.\n *\n * @element zui-table-cell\n *\n * @slot - Unnamed slot, table cell content goes here\n *\n * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding\n * @cssprop [--zui-table-cell-sort-color=var(--zui-gray-300)] - ([sortable]): Default color of chevron when `direction` is `null`\n * @cssprop [--zui-table-cell-sort-active-color=var(--zui-blue)] - Highlight color used to indicate the active sort direction\n *\n * @event sort - Event fires when a `sortable` cell is clicked\n */\nexport class ZuiTableCellElement extends ZuiTableBaseElement {\n  /**\n   * Set to decrease table cell padding to accommodate action button(s)\n   */\n  @property({ type: Boolean, reflect: true })\n  action = false;\n\n  /**\n   * Current sort direction of the sortable cell\n   * @type {null | \"ascending\" | \"descending\"}\n   */\n  @property({ type: String, reflect: true })\n  get sort(): ZuiTableSortDirection {\n    return this.#sort;\n  }\n\n  set sort(val: ZuiTableSortDirection) {\n    const acceptableVals = ['ascending', 'descending', null];\n    if (acceptableVals.includes(val)) {\n      const oldVal = this.#sort;\n      this.#sort = val;\n      this.requestUpdate('sort', oldVal);\n      this._state?.channel.dispatchEvent(new CustomEvent('sort', { detail: { sort: val, cell: this } }));\n    }\n  }\n\n  /**\n   * (`zui-table-row[header]`): Whether or not cell header is sortable; another requirement is the parent element, `<zui-table-cell header>` must have `header` attribute or property set\n   */\n  @property({ type: Boolean, reflect: true })\n  get sortable() {\n    return this._isAllowedSort && this.#sortable;\n  }\n\n  set sortable(val: boolean) {\n    const oldVal = this.#sortable;\n    this.#sortable = val;\n    this.requestUpdate('sortable', oldVal);\n  }\n\n  /**\n   * This private field is needed to persist state between the cell and the header row. DO NOT USE EXTERNALLY\n   */\n  @state()\n  private _isAllowedSort = false;\n\n  #sort: ZuiTableSortDirection = null;\n  #sortable = false;\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  render() {\n    const styles = { 'is-selectable': this.sortable };\n    return html`<div @click=\"${this.#onSortableClick}\" class=\"${classMap(styles)}\">\n      <slot></slot>\n      ${this.sortable ? html`<zui-icon icon=\"zui-sort\"></zui-icon>` : nothing}\n    </div>`;\n  }\n\n  click() {\n    super.click();\n\n    this.#onSortableClick();\n  }\n\n  #onSortableClick() {\n    if (this.sortable) {\n      switch (this.sort) {\n        case 'ascending':\n          this.sort = 'descending';\n          break;\n        case 'descending':\n          this.sort = null;\n          break;\n        case null:\n        default:\n          this.sort = 'ascending';\n          break;\n      }\n    }\n  }\n}\n\nwindow.customElements.define('zui-table-cell', ZuiTableCellElement);\n\nexport type ZuiTableSortDirection = null | 'ascending' | 'descending';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table-cell': ZuiTableCellElement;\n  }\n}\n"]}

package/dist/zui-table-css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const style = css `:host{contain:none;display:block}:host([banded]) ::slotted(zui-table-row:not([header]):nth-child(even)){background-color:var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header])){border:0}:host([no-results]) .no-results{padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){:host([no-results]) .no-results{background-color:transparent;box-shadow:none}}::slotted(zui-table-row:not([header])){border-bottom:3px solid var(--zui-gray-100)}@media(min-width: 45em){::slotted(zui-table-row:not([header])){border-bottom-width:1px}}::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}.table{display:flex;width:100%;flex-direction:column;box-shadow:0 1px 3px rgba(0,0,0,.29);border-collapse:collapse;border-spacing:0}@media(min-width: 45em){.table{background-color:#fff}}`;
+export const style = css `:host{contain:none;display:block}:host([banded]) ::slotted(zui-table-row:not([header]):nth-child(even)){background-color:var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header])){border:0}:host([no-results]) .no-results{padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){:host([no-results]) .no-results{background-color:transparent;box-shadow:none}}::slotted(zui-table-row:not([header])){border-bottom:2px solid var(--zui-gray-100)}@media(min-width: 45em){::slotted(zui-table-row:not([header])){border-bottom-width:1px}}::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}.table{display:flex;width:100%;flex-direction:column;border-collapse:collapse;border-spacing:0}@media(min-width: 45em){.table{background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}}`;
 //# sourceMappingURL=zui-table-css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"zui-table-css.js","sourceRoot":"","sources":["../src/zui-table-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,+0BAA+0B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none;display:block}:host([banded]) ::slotted(zui-table-row:not([header]):nth-child(even)){background-color:var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header])){border:0}:host([no-results]) .no-results{padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){:host([no-results]) .no-results{background-color:transparent;box-shadow:none}}::slotted(zui-table-row:not([header])){border-bottom:3px solid var(--zui-gray-100)}@media(min-width: 45em){::slotted(zui-table-row:not([header])){border-bottom-width:1px}}::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}.table{display:flex;width:100%;flex-direction:column;box-shadow:0 1px 3px rgba(0,0,0,.29);border-collapse:collapse;border-spacing:0}@media(min-width: 45em){.table{background-color:#fff}}`;\n"]}
+{"version":3,"file":"zui-table-css.js","sourceRoot":"","sources":["../src/zui-table-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,+0BAA+0B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none;display:block}:host([banded]) ::slotted(zui-table-row:not([header]):nth-child(even)){background-color:var(--zui-gray-25)}:host([banded]) ::slotted(zui-table-row:not([header])){border:0}:host([no-results]) .no-results{padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){:host([no-results]) .no-results{background-color:transparent;box-shadow:none}}::slotted(zui-table-row:not([header])){border-bottom:2px solid var(--zui-gray-100)}@media(min-width: 45em){::slotted(zui-table-row:not([header])){border-bottom-width:1px}}::slotted(zui-table-row:not([header]):last-of-type){border-bottom:0}.table{display:flex;width:100%;flex-direction:column;border-collapse:collapse;border-spacing:0}@media(min-width: 45em){.table{background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}}`;\n"]}

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

@@ -1,12 +1,14 @@
-import { ZuiBaseElement } from '@zywave/zui-base';
+import { ZuiTableBaseElement } from './base.js';
 /**
+ * Footer table element, should come as the last item passed into a `<zui-table>`.
+ *
  * @element zui-table-footer
  *
- * @slot - Default slot; table footer content goes here
+ * @slot - Unnamed slot, table footer content goes here
  *
- * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table
+ * @cssprop [--zui-table-footer-margin=0.625rem (10px)] - Override the margin between the table and footer of the table
  */
-export declare class ZuiTableFooterElement extends ZuiBaseElement {
+export declare class ZuiTableFooterElement extends ZuiTableBaseElement {
     static get styles(): import("lit").CSSResultGroup[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/zui-table-footer.js

@@ -1,14 +1,16 @@
-import { ZuiBaseElement } from '@zywave/zui-base';
+import { ZuiTableBaseElement } from './base.js';
 import { html } from 'lit';
 import { style } from './zui-table-footer-css.js';
 /**
+ * Footer table element, should come as the last item passed into a `<zui-table>`.
+ *
  * @element zui-table-footer
  *
- * @slot - Default slot; table footer content goes here
+ * @slot - Unnamed slot, table footer content goes here
  *
- * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table
+ * @cssprop [--zui-table-footer-margin=0.625rem (10px)] - Override the margin between the table and footer of the table
  */
-export class ZuiTableFooterElement extends ZuiBaseElement {
+export class ZuiTableFooterElement extends ZuiTableBaseElement {
     static get styles() {
         return [super.styles, style];
     }

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

@@ -1 +1 @@
-{"version":3,"file":"zui-table-footer.js","sourceRoot":"","sources":["../src/zui-table-footer.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;;WAEJ,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-footer-css.js';\n\n/**\n * @element zui-table-footer\n *\n * @slot - Default slot; table footer content goes here\n *\n * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table\n */\nexport class ZuiTableFooterElement extends ZuiBaseElement {\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  render() {\n    return html`<div class=\"footer\">\n      <slot></slot>\n    </div>`;\n  }\n}\n\nwindow.customElements.define('zui-table-footer', ZuiTableFooterElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table-footer': ZuiTableFooterElement;\n  }\n}\n"]}
+{"version":3,"file":"zui-table-footer.js","sourceRoot":"","sources":["../src/zui-table-footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAElD;;;;;;;;GAQG;AACH,MAAM,OAAO,qBAAsB,SAAQ,mBAAmB;IAC5D,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;AAED,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,CAAC","sourcesContent":["import { ZuiTableBaseElement } from './base.js';\nimport { html } from 'lit';\nimport { style } from './zui-table-footer-css.js';\n\n/**\n * Footer table element, should come as the last item passed into a `<zui-table>`.\n *\n * @element zui-table-footer\n *\n * @slot - Unnamed slot, table footer content goes here\n *\n * @cssprop [--zui-table-footer-margin=0.625rem (10px)] - Override the margin between the table and footer of the table\n */\nexport class ZuiTableFooterElement extends ZuiTableBaseElement {\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  render() {\n    return html`<div class=\"footer\">\n      <slot></slot>\n    </div>`;\n  }\n}\n\nwindow.customElements.define('zui-table-footer', ZuiTableFooterElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table-footer': ZuiTableFooterElement;\n  }\n}\n"]}

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

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const style = css `:host{contain:none}:host(:last-of-type:not([summary])) div,:host([summary]) div{margin-bottom:0}:host([header]){display:none;background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600}@media(min-width: 45em){:host([header]){display:block}}div{display:grid;grid-template-columns:auto;margin-bottom:0;padding:.625rem 0;background-color:#fff}@media(min-width: 45em){div{grid-template-columns:var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)));padding:0;background-color:transparent}}:host([summary]){background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}:host([summary]) div{margin-bottom:0;background-color:transparent}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color, #fff)}`;
+export const style = css `:host{contain:none}:host(:last-of-type:not([summary])) div,:host([summary]) div{margin-bottom:0}:host([header]){display:none;background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}@media(min-width: 45em){:host([header]){display:block}}:host([header]) div{box-shadow:none}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600;user-select:none}div{display:grid;grid-template-columns:auto;margin-bottom:0;padding:.625rem 0;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){div{grid-template-columns:var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)));padding:0;background-color:transparent;box-shadow:none}}:host([summary]){background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}:host([summary]) div{margin-bottom:0;background-color:transparent}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color, #fff)}`;
 //# sourceMappingURL=zui-table-row-css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"zui-table-row-css.js","sourceRoot":"","sources":["../src/zui-table-row-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,03BAA03B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none}:host(:last-of-type:not([summary])) div,:host([summary]) div{margin-bottom:0}:host([header]){display:none;background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600}@media(min-width: 45em){:host([header]){display:block}}div{display:grid;grid-template-columns:auto;margin-bottom:0;padding:.625rem 0;background-color:#fff}@media(min-width: 45em){div{grid-template-columns:var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)));padding:0;background-color:transparent}}:host([summary]){background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}:host([summary]) div{margin-bottom:0;background-color:transparent}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color, #fff)}`;\n"]}
+{"version":3,"file":"zui-table-row-css.js","sourceRoot":"","sources":["../src/zui-table-row-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,o+BAAo+B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none}:host(:last-of-type:not([summary])) div,:host([summary]) div{margin-bottom:0}:host([header]){display:none;background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}@media(min-width: 45em){:host([header]){display:block}}:host([header]) div{box-shadow:none}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600;user-select:none}div{display:grid;grid-template-columns:auto;margin-bottom:0;padding:.625rem 0;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){div{grid-template-columns:var(--zui-table-columns-template, repeat(auto-fit, minmax(0, 1fr)));padding:0;background-color:transparent;box-shadow:none}}:host([summary]){background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}:host([summary]) div{margin-bottom:0;background-color:transparent}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color, #fff)}`;\n"]}

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

@@ -1,14 +1,16 @@
-import { ZuiBaseElement } from '@zywave/zui-base';
+import { ZuiTableBaseElement } from './base.js';
 /**
+ * Pass into `<zui-table>`, `<zui-table-row>` holds a row of `<zui-table-cell>`'s.
+ *
  * @element zui-table-row
  *
- * @slot - Default slot; `<zui-table-cell>`s are declared here
+ * @slot - Unnamed slot, `<zui-table-cell>`s are declared here
  *
- * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns} for more information on valid values.
+ * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns for more information on valid values.
  * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color
  * @cssprop [--zui-table-summary-text-color=#fff] - Override the table summary text color
  */
-export declare class ZuiTableRowElement extends ZuiBaseElement {
+export declare class ZuiTableRowElement extends ZuiTableBaseElement {
     #private;
     /**
      * Declare a table header; typically the first row in `<zui-table>`
@@ -22,6 +24,7 @@ export declare class ZuiTableRowElement extends ZuiBaseElement {
     static get styles(): import("lit").CSSResultGroup[];
     connectedCallback(): void;
     firstUpdated(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/zui-table-row.js

@@ -9,21 +9,29 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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 _ZuiTableRowElement_instances, _ZuiTableRowElement_setCellsRole;
-import { ZuiBaseElement } from '@zywave/zui-base';
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _ZuiTableRowElement_instances, _ZuiTableRowElement_sortLock, _ZuiTableRowElement_onTableSort, _ZuiTableRowElement_ensureCellState;
+import { ZuiTableBaseElement } from './base.js';
 import { html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { style } from './zui-table-row-css.js';
 /**
+ * Pass into `<zui-table>`, `<zui-table-row>` holds a row of `<zui-table-cell>`'s.
+ *
  * @element zui-table-row
  *
- * @slot - Default slot; `<zui-table-cell>`s are declared here
+ * @slot - Unnamed slot, `<zui-table-cell>`s are declared here
  *
- * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns} for more information on valid values.
+ * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns for more information on valid values.
  * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color
  * @cssprop [--zui-table-summary-text-color=#fff] - Override the table summary text color
  */
-export class ZuiTableRowElement extends ZuiBaseElement {
+export class ZuiTableRowElement extends ZuiTableBaseElement {
     constructor() {
         super(...arguments);
         _ZuiTableRowElement_instances.add(this);
@@ -35,6 +43,7 @@ export class ZuiTableRowElement extends ZuiBaseElement {
          * Declare a table summary row; typically the last row in `<zui-table>` before `<zui-table-footer>`
          */
         this.summary = false;
+        _ZuiTableRowElement_sortLock.set(this, void 0);
     }
     static get styles() {
         return [super.styles, style];
@@ -44,25 +53,62 @@ export class ZuiTableRowElement extends ZuiBaseElement {
         this.setAttribute('role', 'row');
     }
     firstUpdated() {
-        __classPrivateFieldGet(this, _ZuiTableRowElement_instances, "m", _ZuiTableRowElement_setCellsRole).call(this);
+        var _a;
+        if (this.header) {
+            const firstCellWithDirection = (_a = this._slottedCells) === null || _a === void 0 ? void 0 : _a.find((cell) => cell === null || cell === void 0 ? void 0 : cell.hasAttribute('sort'));
+            this._slottedCells.forEach((cell) => {
+                if (cell.sort && cell !== firstCellWithDirection) {
+                    cell.sort = null;
+                }
+            });
+        }
+    }
+    updated(changedProperties) {
+        var _a;
+        super.updated(changedProperties);
+        if (changedProperties.has('header')) {
+            __classPrivateFieldGet(this, _ZuiTableRowElement_instances, "m", _ZuiTableRowElement_ensureCellState).call(this);
+            if (this.header) {
+                (_a = this._state) === null || _a === void 0 ? void 0 : _a.channel.addEventListener('sort', (e) => __classPrivateFieldGet(this, _ZuiTableRowElement_instances, "m", _ZuiTableRowElement_onTableSort).call(this, e));
+            }
+        }
     }
     render() {
         return html `<div>
-      <slot @slotchange="${__classPrivateFieldGet(this, _ZuiTableRowElement_instances, "m", _ZuiTableRowElement_setCellsRole).call(this)}"></slot>
+      <slot @slotchange="${__classPrivateFieldGet(this, _ZuiTableRowElement_instances, "m", _ZuiTableRowElement_ensureCellState).call(this)}"></slot>
     </div>`;
     }
 }
-_ZuiTableRowElement_instances = new WeakSet(), _ZuiTableRowElement_setCellsRole = function _ZuiTableRowElement_setCellsRole() {
+_ZuiTableRowElement_sortLock = new WeakMap(), _ZuiTableRowElement_instances = new WeakSet(), _ZuiTableRowElement_onTableSort = function _ZuiTableRowElement_onTableSort(event) {
+    var _a;
+    if (__classPrivateFieldGet(this, _ZuiTableRowElement_sortLock, "f")) {
+        return;
+    }
+    __classPrivateFieldSet(this, _ZuiTableRowElement_sortLock, true, "f");
+    (_a = this._slottedCells) === null || _a === void 0 ? void 0 : _a.forEach((cell) => {
+        if (cell !== event.detail.cell) {
+            cell.sort = null;
+        }
+    });
+    setTimeout(() => {
+        __classPrivateFieldSet(this, _ZuiTableRowElement_sortLock, false, "f");
+    }, 0);
+}, _ZuiTableRowElement_ensureCellState = function _ZuiTableRowElement_ensureCellState() {
     if (!this._slottedCells) {
         return;
     }
     if (this.header) {
-        this._slottedCells.map((cell) => cell.setAttribute('role', 'columnheader'));
+        this._slottedCells.forEach((cell) => {
+            cell.setAttribute('role', 'columnheader');
+            cell._isAllowedSort = true;
+        });
     }
     else {
-        this._slottedCells.map((cell) => cell.setAttribute('role', 'cell'));
+        this._slottedCells.forEach((cell) => {
+            cell.setAttribute('role', 'cell');
+            cell._isAllowedSort = false;
+        });
     }
-    this.requestUpdate();
 };
 __decorate([
     property({ type: Boolean, reflect: true })

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

@@ -1 +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,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAG/C;;;;;;;;GAQG;AACH,MAAM,OAAO,kBAAmB,SAAQ,cAAc;IAAtD;;;QACE;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;QAEf;;WAEG;QAEH,YAAO,GAAG,KAAK,CAAC;IAqClB,CAAC;IAhCC,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACnC,CAAC;IAED,YAAY;QACV,uBAAA,IAAI,uEAAc,MAAlB,IAAI,CAAgB,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;2BACY,uBAAA,IAAI,uEAAc,MAAlB,IAAI,CAAgB;WACpC,CAAC;IACV,CAAC;CAeF;;IAZG,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;QACvB,OAAO;KACR;IAED,IAAI,IAAI,CAAC,MAAM,EAAE;QACf,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;KAC7E;SAAM;QACL,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;KACrE;IAED,IAAI,CAAC,aAAa,EAAE,CAAC;AACvB,CAAC;AA1CD;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;AAGhB;IADC,qBAAqB,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC;yDACJ;AAoCpD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport { html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { style } from './zui-table-row-css.js';\nimport type { ZuiTableCellElement } from './zui-table-cell.js';\n\n/**\n * @element zui-table-row\n *\n * @slot - Default slot; `<zui-table-cell>`s are declared here\n *\n * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns} for more information on valid values.\n * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color\n * @cssprop [--zui-table-summary-text-color=#fff] - Override the table summary text color\n */\nexport class ZuiTableRowElement extends ZuiBaseElement {\n  /**\n   * Declare a table header; typically the first row in `<zui-table>`\n   */\n  @property({ type: Boolean, reflect: true })\n  header = false;\n\n  /**\n   * Declare a table 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  @queryAssignedElements({ selector: 'zui-table-cell' })\n  private _slottedCells: Array<ZuiTableCellElement>;\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'row');\n  }\n\n  firstUpdated() {\n    this.#setCellsRole();\n  }\n\n  render() {\n    return html`<div>\n      <slot @slotchange=\"${this.#setCellsRole()}\"></slot>\n    </div>`;\n  }\n\n  #setCellsRole() {\n    if (!this._slottedCells) {\n      return;\n    }\n\n    if (this.header) {\n      this._slottedCells.map((cell) => cell.setAttribute('role', 'columnheader'));\n    } else {\n      this._slottedCells.map((cell) => cell.setAttribute('role', 'cell'));\n    }\n\n    this.requestUpdate();\n  }\n}\n\nwindow.customElements.define('zui-table-row', ZuiTableRowElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table-row': ZuiTableRowElement;\n  }\n}\n"]}
+{"version":3,"file":"zui-table-row.js","sourceRoot":"","sources":["../src/zui-table-row.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiTableBaseElement } from './base.js';\nimport { html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { style } from './zui-table-row-css.js';\nimport type { ZuiTableCellElement } from './zui-table-cell.js';\n\n/**\n * Pass into `<zui-table>`, `<zui-table-row>` holds a row of `<zui-table-cell>`'s.\n *\n * @element zui-table-row\n *\n * @slot - Unnamed slot, `<zui-table-cell>`s are declared here\n *\n * @cssprop [--zui-table-columns-template=repeat(auto-fit, minmax(0, 1fr))] - Override the table columns template. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns for more information on valid values.\n * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color\n * @cssprop [--zui-table-summary-text-color=#fff] - Override the table summary text color\n */\nexport class ZuiTableRowElement extends ZuiTableBaseElement {\n  /**\n   * Declare a table header; typically the first row in `<zui-table>`\n   */\n  @property({ type: Boolean, reflect: true })\n  header = false;\n\n  /**\n   * Declare a table 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  @queryAssignedElements({ selector: 'zui-table-cell' })\n  private _slottedCells: Array<ZuiTableCellElement>;\n\n  #sortLock?: boolean;\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'row');\n  }\n\n  firstUpdated() {\n    if (this.header) {\n      const firstCellWithDirection = this._slottedCells?.find((cell) => cell?.hasAttribute('sort'));\n      this._slottedCells.forEach((cell) => {\n        if (cell.sort && cell !== firstCellWithDirection) {\n          cell.sort = null;\n        }\n      });\n    }\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('header')) {\n      this.#ensureCellState();\n      if (this.header) {\n        this._state?.channel.addEventListener('sort', (e: CustomEvent<{ cell: HTMLElement }>) => this.#onTableSort(e));\n      }\n    }\n  }\n\n  render() {\n    return html`<div>\n      <slot @slotchange=\"${this.#ensureCellState()}\"></slot>\n    </div>`;\n  }\n\n  #onTableSort(event: CustomEvent<{ cell: HTMLElement }>) {\n    if (this.#sortLock) {\n      return;\n    }\n    this.#sortLock = true;\n    this._slottedCells?.forEach((cell) => {\n      if (cell !== event.detail.cell) {\n        cell.sort = null;\n      }\n    });\n    setTimeout(() => {\n      this.#sortLock = false;\n    }, 0);\n  }\n\n  #ensureCellState() {\n    if (!this._slottedCells) {\n      return;\n    }\n\n    if (this.header) {\n      this._slottedCells.forEach((cell) => {\n        cell.setAttribute('role', 'columnheader');\n        (cell as any)._isAllowedSort = true;\n      });\n    } else {\n      this._slottedCells.forEach((cell) => {\n        cell.setAttribute('role', 'cell');\n        (cell as any)._isAllowedSort = false;\n      });\n    }\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.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const style = css `:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){.topbar{box-shadow:none}}.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}`;
+export const style = css `:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;flex-wrap:wrap;justify-content:space-between;align-items:center}@media(min-width: 45em){.topbar{flex-wrap:nowrap;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:none}}.content{display:flex;flex:1;align-items:center;order:1;margin-bottom:1.25rem}@media(min-width: 30em){.content{flex:auto;order:0}}@media(min-width: 45em){.content{margin-bottom:0}}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50);width:100%}@media(min-width: 45em){.content ::slotted(zui-search){width:auto}}.counter{display:flex;width:100%;flex-shrink:0;justify-content:flex-end;order:2;margin-bottom:.625rem;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}@media(min-width: 45em){.counter{width:auto;margin-bottom:0}}.action{display:flex;width:100%;justify-content:flex-end;margin-bottom:1.25rem}@media(min-width: 30em){.action{width:auto}}@media(min-width: 45em){.action{margin-bottom:0}}.action slot[name=action]{display:flex;width:100%;flex-direction:column}@media(min-width: 30em){.action slot[name=action]{flex-direction:row}}.action ::slotted(zui-button){width:100%}@media(min-width: 30em){.action ::slotted(zui-button){width:auto}}@media(min-width: 30em){.action ::slotted(zui-button:first-of-type){margin-left:1.25rem}}@media(min-width: 45em){.action ::slotted(zui-button:first-of-type){margin-left:.625rem}}.action ::slotted(zui-button:not(:first-of-type)){margin-top:.625rem}@media(min-width: 30em){.action ::slotted(zui-button:not(:first-of-type)){margin-top:0;margin-left:.625rem}}`;
 //# sourceMappingURL=zui-table-topbar-css.js.map

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

@@ -1 +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,mlBAAmlB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){.topbar{box-shadow:none}}.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"]}
+{"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,ilDAAilD,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{contain:none}.topbar{display:flex;width:100%;min-height:3.75rem;flex-wrap:wrap;justify-content:space-between;align-items:center}@media(min-width: 45em){.topbar{flex-wrap:nowrap;padding:.625rem 1.25rem;background-color:var(--zui-gray-25);box-shadow:none}}.content{display:flex;flex:1;align-items:center;order:1;margin-bottom:1.25rem}@media(min-width: 30em){.content{flex:auto;order:0}}@media(min-width: 45em){.content{margin-bottom:0}}.content ::slotted(zui-search){--zui-search-border-color: var(--zui-gray-50);width:100%}@media(min-width: 45em){.content ::slotted(zui-search){width:auto}}.counter{display:flex;width:100%;flex-shrink:0;justify-content:flex-end;order:2;margin-bottom:.625rem;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}@media(min-width: 45em){.counter{width:auto;margin-bottom:0}}.action{display:flex;width:100%;justify-content:flex-end;margin-bottom:1.25rem}@media(min-width: 30em){.action{width:auto}}@media(min-width: 45em){.action{margin-bottom:0}}.action slot[name=action]{display:flex;width:100%;flex-direction:column}@media(min-width: 30em){.action slot[name=action]{flex-direction:row}}.action ::slotted(zui-button){width:100%}@media(min-width: 30em){.action ::slotted(zui-button){width:auto}}@media(min-width: 30em){.action ::slotted(zui-button:first-of-type){margin-left:1.25rem}}@media(min-width: 45em){.action ::slotted(zui-button:first-of-type){margin-left:.625rem}}.action ::slotted(zui-button:not(:first-of-type)){margin-top:.625rem}@media(min-width: 30em){.action ::slotted(zui-button:not(:first-of-type)){margin-top:0;margin-left:.625rem}}`;\n"]}

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

@@ -1,13 +1,22 @@
-import { ZuiBaseElement } from '@zywave/zui-base';
+import { ZuiTableBaseElement } from './base.js';
 /**
+ * Used to house table related pieces such as a search input or `zui-search`, and other up front information.
+ *
  * @element zui-table-topbar
  *
- * @slot - Default slot; table cell content goes here
+ * @slot - Unnamed 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 {
+export declare class ZuiTableTopbarElement extends ZuiTableBaseElement {
+    #private;
+    private _actionSlottedElements;
+    private _counterSlottedNodes;
+    private _actionButtons;
     static get styles(): import("lit").CSSResultGroup[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/zui-table-topbar.js

@@ -1,24 +1,124 @@
-import { ZuiBaseElement } from '@zywave/zui-base';
+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 _ZuiTableTopbarElement_instances, _ZuiTableTopbarElement_mobileBreakpoint, _ZuiTableTopbarElement_mobileTopbarActionButtonsEvent, _ZuiTableTopbarElement_addBlockStylingToButtons, _ZuiTableTopbarElement_removeBlockStylingFromButtons, _ZuiTableTopbarElement_toggleCounterDivDisplay, _ZuiTableTopbarElement_toggleActionDivDisplay;
+import { ZuiTableBaseElement } from './base.js';
 import { html } from 'lit';
+import { queryAssignedElements, queryAssignedNodes } from 'lit/decorators.js';
 import { style } from './zui-table-topbar-css.js';
+import { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';
 /**
+ * Used to house table related pieces such as a search input or `zui-search`, and other up front information.
+ *
  * @element zui-table-topbar
  *
- * @slot - Default slot; table cell content goes here
+ * @slot - Unnamed 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 {
+export class ZuiTableTopbarElement extends ZuiTableBaseElement {
+    constructor() {
+        super(...arguments);
+        _ZuiTableTopbarElement_instances.add(this);
+        _ZuiTableTopbarElement_mobileBreakpoint.set(this, window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`));
+        _ZuiTableTopbarElement_mobileTopbarActionButtonsEvent.set(this, (b) => {
+            b.matches ? __classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_addBlockStylingToButtons).call(this) : __classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_removeBlockStylingFromButtons).call(this);
+        });
+    }
     static get styles() {
         return [super.styles, style];
     }
+    connectedCallback() {
+        super.connectedCallback();
+        if (__classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileBreakpoint, "f").addEventListener) {
+            __classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileBreakpoint, "f").addEventListener('change', __classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileTopbarActionButtonsEvent, "f"));
+        }
+        else {
+            __classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileBreakpoint, "f").addListener(__classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileTopbarActionButtonsEvent, "f"));
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (__classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileBreakpoint, "f").addEventListener) {
+            __classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileBreakpoint, "f").removeEventListener('change', __classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileTopbarActionButtonsEvent, "f"));
+        }
+        else if (__classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileBreakpoint, "f").addListener) {
+            __classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileBreakpoint, "f").removeListener(__classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileTopbarActionButtonsEvent, "f"));
+        }
+    }
+    firstUpdated() {
+        __classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileBreakpoint, "f").matches ? __classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_addBlockStylingToButtons).call(this) : __classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_removeBlockStylingFromButtons).call(this);
+        __classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_toggleActionDivDisplay).call(this);
+        __classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_toggleCounterDivDisplay).call(this);
+    }
     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 class="counter"><slot name="counter" @slotchange="${__classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_toggleCounterDivDisplay)}"></slot></div>
+      <div class="action"
+        ><slot
+          name="action"
+          @slotchange="${__classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_toggleActionDivDisplay)} ${__classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileBreakpoint, "f").matches
+            ? __classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_addBlockStylingToButtons)
+            : __classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_removeBlockStylingFromButtons)}"
+        ></slot
+      ></div>
     </div>`;
     }
 }
+_ZuiTableTopbarElement_mobileBreakpoint = new WeakMap(), _ZuiTableTopbarElement_mobileTopbarActionButtonsEvent = new WeakMap(), _ZuiTableTopbarElement_instances = new WeakSet(), _ZuiTableTopbarElement_addBlockStylingToButtons = function _ZuiTableTopbarElement_addBlockStylingToButtons() {
+    if (this._actionButtons.length > 0) {
+        for (const button of this._actionButtons) {
+            if (!button.hasAttribute('block')) {
+                button.setAttribute('block', '');
+            }
+        }
+    }
+    this.requestUpdate();
+}, _ZuiTableTopbarElement_removeBlockStylingFromButtons = function _ZuiTableTopbarElement_removeBlockStylingFromButtons() {
+    if (this._actionButtons.length > 0) {
+        for (const button of this._actionButtons) {
+            if (button.hasAttribute('block')) {
+                button.removeAttribute('block');
+            }
+        }
+    }
+    this.requestUpdate();
+}, _ZuiTableTopbarElement_toggleCounterDivDisplay = function _ZuiTableTopbarElement_toggleCounterDivDisplay() {
+    const counter = this.shadowRoot.querySelector('.counter');
+    if (this._counterSlottedNodes.length === 0) {
+        counter.style.display = 'none';
+    }
+    else if (this._counterSlottedNodes.length > 0 && counter.style.display === 'none') {
+        counter.style.removeProperty('display');
+    }
+    this.requestUpdate();
+}, _ZuiTableTopbarElement_toggleActionDivDisplay = function _ZuiTableTopbarElement_toggleActionDivDisplay() {
+    const action = this.shadowRoot.querySelector('.action');
+    if (this._actionSlottedElements.length === 0) {
+        action.style.display = 'none';
+    }
+    else if (this._actionSlottedElements.length > 0 && action.style.display === 'none') {
+        action.style.removeProperty('display');
+    }
+    this.requestUpdate();
+};
+__decorate([
+    queryAssignedElements({ slot: 'action' })
+], ZuiTableTopbarElement.prototype, "_actionSlottedElements", void 0);
+__decorate([
+    queryAssignedNodes({ slot: 'counter' })
+], ZuiTableTopbarElement.prototype, "_counterSlottedNodes", void 0);
+__decorate([
+    queryAssignedElements({ selector: 'zui-button', slot: 'action' })
+], ZuiTableTopbarElement.prototype, "_actionButtons", void 0);
 window.customElements.define('zui-table-topbar', ZuiTableTopbarElement);
 //# sourceMappingURL=zui-table-topbar.js.map

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

@@ -1 +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"]}
+{"version":3,"file":"zui-table-topbar.js","sourceRoot":"","sources":["../src/zui-table-topbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiTableBaseElement } from './base.js';\nimport { html } from 'lit';\nimport { queryAssignedElements, queryAssignedNodes } from 'lit/decorators.js';\nimport { style } from './zui-table-topbar-css.js';\nimport { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';\nimport type { ZuiButton } from '@zywave/zui-button/dist/zui-button.js';\n\n/**\n * Used to house table related pieces such as a search input or `zui-search`, and other up front information.\n *\n * @element zui-table-topbar\n *\n * @slot - Unnamed 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 ZuiTableBaseElement {\n  @queryAssignedElements({ slot: 'action' })\n  private _actionSlottedElements: Array<HTMLCollection>;\n\n  @queryAssignedNodes({ slot: 'counter' })\n  private _counterSlottedNodes: Array<HTMLCollection>;\n\n  @queryAssignedElements({ selector: 'zui-button', slot: 'action' })\n  private _actionButtons: Array<ZuiButton>;\n\n  #mobileBreakpoint: MediaQueryList = window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`);\n\n  #mobileTopbarActionButtonsEvent = (b: MediaQueryListEvent) => {\n    b.matches ? this.#addBlockStylingToButtons() : this.#removeBlockStylingFromButtons();\n  };\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.#mobileBreakpoint.addEventListener) {\n      this.#mobileBreakpoint.addEventListener('change', this.#mobileTopbarActionButtonsEvent);\n    } else {\n      this.#mobileBreakpoint.addListener(this.#mobileTopbarActionButtonsEvent);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    if (this.#mobileBreakpoint.addEventListener) {\n      this.#mobileBreakpoint.removeEventListener('change', this.#mobileTopbarActionButtonsEvent);\n    } else if (this.#mobileBreakpoint.addListener) {\n      this.#mobileBreakpoint.removeListener(this.#mobileTopbarActionButtonsEvent);\n    }\n  }\n\n  firstUpdated() {\n    this.#mobileBreakpoint.matches ? this.#addBlockStylingToButtons() : this.#removeBlockStylingFromButtons();\n    this.#toggleActionDivDisplay();\n    this.#toggleCounterDivDisplay();\n  }\n\n  render() {\n    return html`<div class=\"topbar\">\n      <div class=\"content\"><slot></slot></div>\n      <div class=\"counter\"><slot name=\"counter\" @slotchange=\"${this.#toggleCounterDivDisplay}\"></slot></div>\n      <div class=\"action\"\n        ><slot\n          name=\"action\"\n          @slotchange=\"${this.#toggleActionDivDisplay} ${this.#mobileBreakpoint.matches\n            ? this.#addBlockStylingToButtons\n            : this.#removeBlockStylingFromButtons}\"\n        ></slot\n      ></div>\n    </div>`;\n  }\n\n  #addBlockStylingToButtons() {\n    if (this._actionButtons.length > 0) {\n      for (const button of this._actionButtons) {\n        if (!button.hasAttribute('block')) {\n          button.setAttribute('block', '');\n        }\n      }\n    }\n\n    this.requestUpdate();\n  }\n\n  #removeBlockStylingFromButtons() {\n    if (this._actionButtons.length > 0) {\n      for (const button of this._actionButtons) {\n        if (button.hasAttribute('block')) {\n          button.removeAttribute('block');\n        }\n      }\n    }\n\n    this.requestUpdate();\n  }\n\n  #toggleCounterDivDisplay() {\n    const counter: HTMLElement = this.shadowRoot.querySelector('.counter');\n\n    if (this._counterSlottedNodes.length === 0) {\n      counter.style.display = 'none';\n    } else if (this._counterSlottedNodes.length > 0 && counter.style.display === 'none') {\n      counter.style.removeProperty('display');\n    }\n\n    this.requestUpdate();\n  }\n\n  #toggleActionDivDisplay() {\n    const action: HTMLElement = this.shadowRoot.querySelector('.action');\n\n    if (this._actionSlottedElements.length === 0) {\n      action.style.display = 'none';\n    } else if (this._actionSlottedElements.length > 0 && action.style.display === 'none') {\n      action.style.removeProperty('display');\n    }\n\n    this.requestUpdate();\n  }\n}\n\nwindow.customElements.define('zui-table-topbar', ZuiTableTopbarElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table-topbar': ZuiTableTopbarElement;\n  }\n}\n"]}