@zywave/zui-table 4.0.14-pre.1 → 4.0.14-pre.3

package/dist/base.js

@@ -1,9 +1,3 @@
-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 _a, _ZuiTableBaseElement_states, _ZuiTableBaseElement_tableAssociations;
 import { ZuiBaseElement } from '@zywave/zui-base';
 class TableState {
     constructor(root) {
@@ -13,23 +7,29 @@ class TableState {
     }
 }
 export class ZuiTableBaseElement extends ZuiBaseElement {
+    /**
+     * This represents a common eventing ecosystem for all ZuiTableBaseElements, regardless of association
+     */
+    static { this._globalChannel = new EventTarget(); }
     /**
      * Accessor for the associated table state
      */
     get _state() {
         if (this.tagName === 'ZUI-TABLE') {
-            return __classPrivateFieldGet(ZuiTableBaseElement, _a, "f", _ZuiTableBaseElement_states).get(this);
+            return ZuiTableBaseElement.#states.get(this);
         }
-        const table = __classPrivateFieldGet(ZuiTableBaseElement, _a, "f", _ZuiTableBaseElement_tableAssociations).get(this);
+        const table = ZuiTableBaseElement.#tableAssociations.get(this);
         if (table) {
-            return __classPrivateFieldGet(ZuiTableBaseElement, _a, "f", _ZuiTableBaseElement_states).get(table);
+            return ZuiTableBaseElement.#states.get(table);
         }
         return undefined;
     }
+    static #states = new WeakMap();
+    static #tableAssociations = new WeakMap();
     constructor() {
         super();
         if (this.tagName === 'ZUI-TABLE') {
-            __classPrivateFieldGet(ZuiTableBaseElement, _a, "f", _ZuiTableBaseElement_states).set(this, new TableState(this));
+            ZuiTableBaseElement.#states.set(this, new TableState(this));
         }
     }
     connectedCallback() {
@@ -39,29 +39,21 @@ export class ZuiTableBaseElement extends ZuiBaseElement {
         }
     }
     disconnectedCallback() {
-        var _b;
         super.disconnectedCallback();
         if (this.tagName === 'ZUI-TABLE') {
-            __classPrivateFieldGet(ZuiTableBaseElement, _a, "f", _ZuiTableBaseElement_states).delete(this);
+            ZuiTableBaseElement.#states.delete(this);
         }
         else {
-            __classPrivateFieldGet(ZuiTableBaseElement, _a, "f", _ZuiTableBaseElement_tableAssociations).delete(this);
-            (_b = this._state) === null || _b === void 0 ? void 0 : _b.elements.delete(this);
+            ZuiTableBaseElement.#tableAssociations.delete(this);
+            this._state?.elements.delete(this);
         }
     }
     _associateElement(element) {
         if (this.tagName !== 'ZUI-TABLE' || element.tagName === 'ZUI-TABLE') {
             return;
         }
-        __classPrivateFieldGet(ZuiTableBaseElement, _a, "f", _ZuiTableBaseElement_tableAssociations).set(element, this);
+        ZuiTableBaseElement.#tableAssociations.set(element, this);
         this._state.elements.add(element);
     }
 }
-_a = ZuiTableBaseElement;
-/**
- * This represents a common eventing ecosystem for all ZuiTableBaseElements, regardless of association
- */
-ZuiTableBaseElement._globalChannel = new EventTarget();
-_ZuiTableBaseElement_states = { value: new WeakMap() };
-_ZuiTableBaseElement_tableAssociations = { value: new WeakMap() };
 //# sourceMappingURL=base.js.map

package/dist/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sourceRoot":"","sources":["../src/base.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIlD,MAAM,UAAU;IAMd,YAAY,IAAqB;QALjC,aAAQ,GAA6B,IAAI,GAAG,EAAE,CAAC;QAG/C,YAAO,GAAG,IAAI,WAAW,EAAE,CAAC;QAG1B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;CACF;AAED,MAAM,OAAgB,mBAAoB,SAAQ,cAAc;IAM9D;;OAEG;IACH,IAAc,MAAM;QAClB,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE;YAChC,OAAO,uBAAA,mBAAmB,uCAAQ,CAAC,GAAG,CAAC,IAAkC,CAAC,CAAC;SAC5E;QACD,MAAM,KAAK,GAAG,uBAAA,mBAAmB,kDAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC/D,IAAI,KAAK,EAAE;YACT,OAAO,uBAAA,mBAAmB,uCAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;SAC/C;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAKD;QACE,KAAK,EAAE,CAAC;QAER,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE;YAChC,uBAAA,mBAAmB,uCAAQ,CAAC,GAAG,CAC7B,IAAkC,EAClC,IAAI,UAAU,CAAC,IAAkC,CAAC,CACnD,CAAC;SACH;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE;YAChC,mBAAmB,CAAC,cAAc,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;SAC/G;IACH,CAAC;IAED,oBAAoB;;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE;YAChC,uBAAA,mBAAmB,uCAAQ,CAAC,MAAM,CAAC,IAAkC,CAAC,CAAC;SACxE;aAAM;YACL,uBAAA,mBAAmB,kDAAmB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YACpD,MAAA,IAAI,CAAC,MAAM,0CAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;SACpC;IACH,CAAC;IAES,iBAAiB,CAAC,OAA4B;QACtD,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,IAAI,OAAO,CAAC,OAAO,KAAK,WAAW,EAAE;YACnE,OAAO;SACR;QAED,uBAAA,mBAAmB,kDAAmB,CAAC,GAAG,CAAC,OAAO,EAAE,IAAkC,CAAC,CAAC;QACxF,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;;;AA3DD;;GAEG;AACc,kCAAc,GAAG,IAAI,WAAW,EAAE,CAAC;AAgB7C,uCAAU,IAAI,OAAO,EAA+B,GAAC;AACrD,kDAAqB,IAAI,OAAO,EAAwC,GAAC","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport type { ZuiTableElement } from './zui-table';\nimport type { ZuiTableCellElement } from './zui-table-cell';\n\nclass TableState {\n  elements: Set<ZuiTableBaseElement> = new Set();\n  root: ZuiTableElement;\n  sortedCell?: ZuiTableCellElement;\n  channel = new EventTarget();\n\n  constructor(root: ZuiTableElement) {\n    this.root = root;\n  }\n}\n\nexport abstract class ZuiTableBaseElement extends ZuiBaseElement {\n  /**\n   * This represents a common eventing ecosystem for all ZuiTableBaseElements, regardless of association\n   */\n  protected static _globalChannel = new EventTarget();\n\n  /**\n   * Accessor for the associated table state\n   */\n  protected get _state() {\n    if (this.tagName === 'ZUI-TABLE') {\n      return ZuiTableBaseElement.#states.get(this as unknown as ZuiTableElement);\n    }\n    const table = ZuiTableBaseElement.#tableAssociations.get(this);\n    if (table) {\n      return ZuiTableBaseElement.#states.get(table);\n    }\n    return undefined;\n  }\n\n  static #states = new WeakMap<ZuiTableElement, TableState>();\n  static #tableAssociations = new WeakMap<ZuiTableBaseElement, ZuiTableElement>();\n\n  constructor() {\n    super();\n\n    if (this.tagName === 'ZUI-TABLE') {\n      ZuiTableBaseElement.#states.set(\n        this as unknown as ZuiTableElement,\n        new TableState(this as unknown as ZuiTableElement)\n      );\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.tagName !== 'ZUI-TABLE') {\n      ZuiTableBaseElement._globalChannel.dispatchEvent(new CustomEvent('connected', { detail: { element: this } }));\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    if (this.tagName === 'ZUI-TABLE') {\n      ZuiTableBaseElement.#states.delete(this as unknown as ZuiTableElement);\n    } else {\n      ZuiTableBaseElement.#tableAssociations.delete(this);\n      this._state?.elements.delete(this);\n    }\n  }\n\n  protected _associateElement(element: ZuiTableBaseElement) {\n    if (this.tagName !== 'ZUI-TABLE' || element.tagName === 'ZUI-TABLE') {\n      return;\n    }\n\n    ZuiTableBaseElement.#tableAssociations.set(element, this as unknown as ZuiTableElement);\n    this._state.elements.add(element);\n  }\n}\n\nexport type TableElementConnectedEvent = CustomEvent<{ element: ZuiTableBaseElement }>;\n"]}
+{"version":3,"file":"base.js","sourceRoot":"","sources":["../src/base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIlD,MAAM,UAAU;IAMd,YAAY,IAAqB;QALjC,aAAQ,GAA6B,IAAI,GAAG,EAAE,CAAC;QAG/C,YAAO,GAAG,IAAI,WAAW,EAAE,CAAC;QAG1B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;CACF;AAED,MAAM,OAAgB,mBAAoB,SAAQ,cAAc;IAC9D;;OAEG;aACc,mBAAc,GAAG,IAAI,WAAW,EAAE,CAAC;IAEpD;;OAEG;IACH,IAAc,MAAM;QAClB,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE,CAAC;YACjC,OAAO,mBAAmB,CAAC,OAAO,CAAC,GAAG,CAAC,IAAkC,CAAC,CAAC;QAC7E,CAAC;QACD,MAAM,KAAK,GAAG,mBAAmB,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC/D,IAAI,KAAK,EAAE,CAAC;YACV,OAAO,mBAAmB,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAChD,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,MAAM,CAAC,OAAO,GAAG,IAAI,OAAO,EAA+B,CAAC;IAC5D,MAAM,CAAC,kBAAkB,GAAG,IAAI,OAAO,EAAwC,CAAC;IAEhF;QACE,KAAK,EAAE,CAAC;QAER,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE,CAAC;YACjC,mBAAmB,CAAC,OAAO,CAAC,GAAG,CAC7B,IAAkC,EAClC,IAAI,UAAU,CAAC,IAAkC,CAAC,CACnD,CAAC;QACJ,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE,CAAC;YACjC,mBAAmB,CAAC,cAAc,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;QAChH,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE,CAAC;YACjC,mBAAmB,CAAC,OAAO,CAAC,MAAM,CAAC,IAAkC,CAAC,CAAC;QACzE,CAAC;aAAM,CAAC;YACN,mBAAmB,CAAC,kBAAkB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YACpD,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAES,iBAAiB,CAAC,OAA4B;QACtD,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,IAAI,OAAO,CAAC,OAAO,KAAK,WAAW,EAAE,CAAC;YACpE,OAAO;QACT,CAAC;QAED,mBAAmB,CAAC,kBAAkB,CAAC,GAAG,CAAC,OAAO,EAAE,IAAkC,CAAC,CAAC;QACxF,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport type { ZuiTableElement } from './zui-table';\nimport type { ZuiTableCellElement } from './zui-table-cell';\n\nclass TableState {\n  elements: Set<ZuiTableBaseElement> = new Set();\n  root: ZuiTableElement;\n  sortedCell?: ZuiTableCellElement;\n  channel = new EventTarget();\n\n  constructor(root: ZuiTableElement) {\n    this.root = root;\n  }\n}\n\nexport abstract class ZuiTableBaseElement extends ZuiBaseElement {\n  /**\n   * This represents a common eventing ecosystem for all ZuiTableBaseElements, regardless of association\n   */\n  protected static _globalChannel = new EventTarget();\n\n  /**\n   * Accessor for the associated table state\n   */\n  protected get _state() {\n    if (this.tagName === 'ZUI-TABLE') {\n      return ZuiTableBaseElement.#states.get(this as unknown as ZuiTableElement);\n    }\n    const table = ZuiTableBaseElement.#tableAssociations.get(this);\n    if (table) {\n      return ZuiTableBaseElement.#states.get(table);\n    }\n    return undefined;\n  }\n\n  static #states = new WeakMap<ZuiTableElement, TableState>();\n  static #tableAssociations = new WeakMap<ZuiTableBaseElement, ZuiTableElement>();\n\n  constructor() {\n    super();\n\n    if (this.tagName === 'ZUI-TABLE') {\n      ZuiTableBaseElement.#states.set(\n        this as unknown as ZuiTableElement,\n        new TableState(this as unknown as ZuiTableElement)\n      );\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.tagName !== 'ZUI-TABLE') {\n      ZuiTableBaseElement._globalChannel.dispatchEvent(new CustomEvent('connected', { detail: { element: this } }));\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    if (this.tagName === 'ZUI-TABLE') {\n      ZuiTableBaseElement.#states.delete(this as unknown as ZuiTableElement);\n    } else {\n      ZuiTableBaseElement.#tableAssociations.delete(this);\n      this._state?.elements.delete(this);\n    }\n  }\n\n  protected _associateElement(element: ZuiTableBaseElement) {\n    if (this.tagName !== 'ZUI-TABLE' || element.tagName === 'ZUI-TABLE') {\n      return;\n    }\n\n    ZuiTableBaseElement.#tableAssociations.set(element, this as unknown as ZuiTableElement);\n    this._state.elements.add(element);\n  }\n}\n\nexport type TableElementConnectedEvent = CustomEvent<{ element: ZuiTableBaseElement }>;\n"]}

package/dist/zui-table-cell.js

@@ -4,18 +4,6 @@ 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;
 };
-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';
@@ -36,7 +24,6 @@ import { style } from './zui-table-cell-css.js';
 export class ZuiTableCellElement extends ZuiTableBaseElement {
     constructor() {
         super(...arguments);
-        _ZuiTableCellElement_instances.add(this);
         /**
          * Set to decrease table cell padding to accommodate action button(s)
          */
@@ -45,37 +32,38 @@ export class ZuiTableCellElement extends ZuiTableBaseElement {
          * 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);
+        this.#sort = null;
+        this.#sortable = false;
     }
     /**
      * Current sort direction of the sortable cell
      * @type {null | "ascending" | "descending"}
      */
     get sort() {
-        return __classPrivateFieldGet(this, _ZuiTableCellElement_sort, "f");
+        return this.#sort;
     }
     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");
+            const oldVal = this.#sort;
+            this.#sort = val;
             this.requestUpdate('sort', oldVal);
-            (_a = this._state) === null || _a === void 0 ? void 0 : _a.channel.dispatchEvent(new CustomEvent('sort', { detail: { sort: val, cell: this } }));
+            this._state?.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");
+        return this._isAllowedSort && this.#sortable;
     }
     set sortable(val) {
-        const oldVal = __classPrivateFieldGet(this, _ZuiTableCellElement_sortable, "f");
-        __classPrivateFieldSet(this, _ZuiTableCellElement_sortable, val, "f");
+        const oldVal = this.#sortable;
+        this.#sortable = val;
         this.requestUpdate('sortable', oldVal);
     }
+    #sort;
+    #sortable;
     static get styles() {
         return [super.styles, style];
     }
@@ -84,32 +72,32 @@ export class ZuiTableCellElement extends ZuiTableBaseElement {
             import('@zywave/zui-icons');
         }
         const styles = { 'is-selectable': this.sortable };
-        return html `<div @click="${__classPrivateFieldGet(this, _ZuiTableCellElement_instances, "m", _ZuiTableCellElement_onSortableClick)}" class="${classMap(styles)}">
+        return html `<div @click="${this.#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);
+        this.#onSortableClick();
     }
-}
-_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;
+    #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);

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":"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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 - Default, unnamed slot; for inserting table cell content into `<zui-table-cell>`\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 */\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    if (this.sortable) {\n      import('@zywave/zui-icons');\n    }\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"]}
+{"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 - Default, unnamed slot; for inserting table cell content into `<zui-table-cell>`\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 */\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    if (this.sortable) {\n      import('@zywave/zui-icons');\n    }\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-row.js

@@ -4,18 +4,6 @@ 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;
 };
-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 _ZuiTableRowElement_instances, _ZuiTableRowElement_sortLock, _ZuiTableRowElement_onTableSort, _ZuiTableRowElement_ensureCellState;
 import { ZuiTableBaseElement } from './base.js';
 import { html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
@@ -34,7 +22,6 @@ import { style } from './zui-table-row-css.js';
 export class ZuiTableRowElement extends ZuiTableBaseElement {
     constructor() {
         super(...arguments);
-        _ZuiTableRowElement_instances.add(this);
         /**
          * Declare a table header; typically the first row in `<zui-table>`
          */
@@ -43,8 +30,8 @@ export class ZuiTableRowElement extends ZuiTableBaseElement {
          * 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);
     }
+    #sortLock;
     static get styles() {
         return [super.styles, style];
     }
@@ -53,9 +40,8 @@ export class ZuiTableRowElement extends ZuiTableBaseElement {
         this.setAttribute('role', 'row');
     }
     firstUpdated() {
-        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'));
+            const firstCellWithDirection = this._slottedCells?.find((cell) => cell?.hasAttribute('sort'));
             this._slottedCells.forEach((cell) => {
                 if (cell.sort && cell !== firstCellWithDirection) {
                     cell.sort = null;
@@ -64,52 +50,51 @@ export class ZuiTableRowElement extends ZuiTableBaseElement {
         }
     }
     updated(changedProperties) {
-        var _a;
         super.updated(changedProperties);
         if (changedProperties.has('header')) {
-            __classPrivateFieldGet(this, _ZuiTableRowElement_instances, "m", _ZuiTableRowElement_ensureCellState).call(this);
+            this.#ensureCellState();
             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));
+                this._state?.channel.addEventListener('sort', (e) => this.#onTableSort(e));
             }
         }
     }
     render() {
         return html `<div>
-      <slot @slotchange="${__classPrivateFieldGet(this, _ZuiTableRowElement_instances, "m", _ZuiTableRowElement_ensureCellState).call(this)}"></slot>
+      <slot @slotchange="${this.#ensureCellState()}"></slot>
     </div>`;
     }
-}
-_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;
+    #onTableSort(event) {
+        if (this.#sortLock) {
+            return;
         }
-    });
-    setTimeout(() => {
-        __classPrivateFieldSet(this, _ZuiTableRowElement_sortLock, false, "f");
-    }, 0);
-}, _ZuiTableRowElement_ensureCellState = function _ZuiTableRowElement_ensureCellState() {
-    if (!this._slottedCells) {
-        return;
-    }
-    if (this.header) {
-        this._slottedCells.forEach((cell) => {
-            cell.setAttribute('role', 'columnheader');
-            cell._isAllowedSort = true;
+        this.#sortLock = true;
+        this._slottedCells?.forEach((cell) => {
+            if (cell !== event.detail.cell) {
+                cell.sort = null;
+            }
         });
+        setTimeout(() => {
+            this.#sortLock = false;
+        }, 0);
     }
-    else {
-        this._slottedCells.forEach((cell) => {
-            cell.setAttribute('role', 'cell');
-            cell._isAllowedSort = false;
-        });
+    #ensureCellState() {
+        if (!this._slottedCells) {
+            return;
+        }
+        if (this.header) {
+            this._slottedCells.forEach((cell) => {
+                cell.setAttribute('role', 'columnheader');
+                cell._isAllowedSort = true;
+            });
+        }
+        else {
+            this._slottedCells.forEach((cell) => {
+                cell.setAttribute('role', 'cell');
+                cell._isAllowedSort = false;
+            });
+        }
     }
-};
+}
 __decorate([
     property({ type: Boolean, reflect: true })
 ], ZuiTableRowElement.prototype, "header", void 0);

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":"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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 * Insert into `<zui-table>`; `<zui-table-row>` holds a row of `<zui-table-cell>` elements.\n *\n * @element zui-table-row\n *\n * @slot - Default, unnamed slot; for inserting `<zui-table-cell>` elements into `<zui-table-row>`\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"]}
+{"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 * Insert into `<zui-table>`; `<zui-table-row>` holds a row of `<zui-table-cell>` elements.\n *\n * @element zui-table-row\n *\n * @slot - Default, unnamed slot; for inserting `<zui-table-cell>` elements into `<zui-table-row>`\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.js

@@ -4,12 +4,6 @@ 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;
 };
-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_handleActionSlotchange, _ZuiTableTopbarElement_addBlockStylingToButtons, _ZuiTableTopbarElement_removeBlockStylingFromButtons, _ZuiTableTopbarElement_toggleCounterDivDisplay, _ZuiTableTopbarElement_toggleActionDivDisplay;
 import { ZuiTableBaseElement } from './base.js';
 import { html } from 'lit';
 import { queryAssignedElements, queryAssignedNodes } from 'lit/decorators.js';
@@ -25,88 +19,88 @@ import { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';
  * @slot action - Action(s) that affect the whole table goes here
  */
 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);
-        });
-    }
+    #mobileBreakpoint = window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`);
+    #mobileTopbarActionButtonsEvent = (b) => {
+        b.matches ? this.#addBlockStylingToButtons() : this.#removeBlockStylingFromButtons();
+    };
     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"));
+        if (this.#mobileBreakpoint.addEventListener) {
+            this.#mobileBreakpoint.addEventListener('change', this.#mobileTopbarActionButtonsEvent);
         }
         else {
-            __classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileBreakpoint, "f").addListener(__classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileTopbarActionButtonsEvent, "f"));
+            this.#mobileBreakpoint.addListener(this.#mobileTopbarActionButtonsEvent);
         }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        if (__classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileBreakpoint, "f").addEventListener) {
-            __classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileBreakpoint, "f").removeEventListener('change', __classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileTopbarActionButtonsEvent, "f"));
+        if (this.#mobileBreakpoint.addEventListener) {
+            this.#mobileBreakpoint.removeEventListener('change', this.#mobileTopbarActionButtonsEvent);
         }
-        else if (__classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileBreakpoint, "f").addListener) {
-            __classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileBreakpoint, "f").removeListener(__classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileTopbarActionButtonsEvent, "f"));
+        else if (this.#mobileBreakpoint.addListener) {
+            this.#mobileBreakpoint.removeListener(this.#mobileTopbarActionButtonsEvent);
         }
     }
     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);
+        this.#mobileBreakpoint.matches ? this.#addBlockStylingToButtons() : this.#removeBlockStylingFromButtons();
+        this.#toggleActionDivDisplay();
+        this.#toggleCounterDivDisplay();
     }
     render() {
         return html `<div class="topbar">
       <div class="content"><slot></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_handleActionSlotchange)}></slot></div>
+      <div class="counter"><slot name="counter" @slotchange="${this.#toggleCounterDivDisplay}"></slot></div>
+      <div class="action"><slot name="action" @slotchange=${this.#handleActionSlotchange}></slot></div>
     </div>`;
     }
-}
-_ZuiTableTopbarElement_mobileBreakpoint = new WeakMap(), _ZuiTableTopbarElement_mobileTopbarActionButtonsEvent = new WeakMap(), _ZuiTableTopbarElement_instances = new WeakSet(), _ZuiTableTopbarElement_handleActionSlotchange = function _ZuiTableTopbarElement_handleActionSlotchange() {
-    __classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_toggleActionDivDisplay).call(this);
-    __classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileBreakpoint, "f").matches ? __classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_addBlockStylingToButtons).call(this) : __classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_removeBlockStylingFromButtons).call(this);
-}, _ZuiTableTopbarElement_addBlockStylingToButtons = function _ZuiTableTopbarElement_addBlockStylingToButtons() {
-    if (this._actionButtons.length > 0) {
-        for (const button of this._actionButtons) {
-            if (!button.hasAttribute('block')) {
-                button.setAttribute('block', '');
+    #handleActionSlotchange() {
+        this.#toggleActionDivDisplay();
+        this.#mobileBreakpoint.matches ? this.#addBlockStylingToButtons() : this.#removeBlockStylingFromButtons();
+    }
+    #addBlockStylingToButtons() {
+        if (this._actionButtons.length > 0) {
+            for (const button of this._actionButtons) {
+                if (!button.hasAttribute('block')) {
+                    button.setAttribute('block', '');
+                }
             }
         }
+        this.requestUpdate();
     }
-    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');
+    #removeBlockStylingFromButtons() {
+        if (this._actionButtons.length > 0) {
+            for (const button of this._actionButtons) {
+                if (button.hasAttribute('block')) {
+                    button.removeAttribute('block');
+                }
             }
         }
+        this.requestUpdate();
     }
-    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';
+    #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();
     }
-    else if (this._actionSlottedElements.length > 0 && action.style.display === 'none') {
-        action.style.removeProperty('display');
+    #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();
     }
-    this.requestUpdate();
-};
+}
 __decorate([
     queryAssignedElements({ slot: 'action' })
 ], ZuiTableTopbarElement.prototype, "_actionSlottedElements", void 0);

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":"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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 - Default, unnamed slot; for inserting content into `<zui-table-topbar>`\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\"><slot name=\"action\" @slotchange=${this.#handleActionSlotchange}></slot></div>\n    </div>`;\n  }\n\n  #handleActionSlotchange() {\n    this.#toggleActionDivDisplay();\n    this.#mobileBreakpoint.matches ? this.#addBlockStylingToButtons() : this.#removeBlockStylingFromButtons();\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"]}
+{"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 - Default, unnamed slot; for inserting content into `<zui-table-topbar>`\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\"><slot name=\"action\" @slotchange=${this.#handleActionSlotchange}></slot></div>\n    </div>`;\n  }\n\n  #handleActionSlotchange() {\n    this.#toggleActionDivDisplay();\n    this.#mobileBreakpoint.matches ? this.#addBlockStylingToButtons() : this.#removeBlockStylingFromButtons();\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"]}

package/dist/zui-table.js

@@ -4,18 +4,6 @@ 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;
 };
-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 __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_internals, _ZuiTableElement_mobileBreakpoint, _ZuiTableElement_sortLock, _ZuiTableElement_mobileHeadersEvent, _ZuiTableElement_renderNoResultsView, _ZuiTableElement_reassignFooter, _ZuiTableElement_addRowHeadersToCells, _ZuiTableElement_removeRowHeadersFromCells;
 import { ZuiTableBaseElement } from './base.js';
 import { html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
@@ -39,13 +27,15 @@ import { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';
  * @event sort - Event fires when the table's active sort changes. Event detail is an object with the `sort` direction and `cell` ZuiTableCellElement.
  */
 export class ZuiTableElement extends ZuiTableBaseElement {
+    #internals;
+    #mobileBreakpoint;
+    #sortLock;
+    #mobileHeadersEvent;
     static get styles() {
         return [super.styles, style];
     }
     constructor() {
-        var _a;
         super();
-        _ZuiTableElement_instances.add(this);
         /**
          * Set for alternating table row background colors
          */
@@ -55,102 +45,101 @@ export class ZuiTableElement extends ZuiTableBaseElement {
          * Set to show or hide no results message when there are no results; use in conjunction with the assigned slot `no-results-message` to include a no results message
          */
         this.noResults = false;
-        _ZuiTableElement_internals.set(this, void 0);
-        _ZuiTableElement_mobileBreakpoint.set(this, window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`));
-        _ZuiTableElement_sortLock.set(this, false);
-        _ZuiTableElement_mobileHeadersEvent.set(this, (b) => {
-            b.matches ? __classPrivateFieldGet(this, _ZuiTableElement_instances, "m", _ZuiTableElement_addRowHeadersToCells).call(this) : __classPrivateFieldGet(this, _ZuiTableElement_instances, "m", _ZuiTableElement_removeRowHeadersFromCells).call(this);
-        });
-        __classPrivateFieldSet(this, _ZuiTableElement_internals, (_a = this.attachInternals) === null || _a === void 0 ? void 0 : _a.call(this), "f");
+        this.#mobileBreakpoint = window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`);
+        this.#sortLock = false;
+        this.#mobileHeadersEvent = (b) => {
+            b.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();
+        };
+        this.#internals = this.attachInternals?.();
         ZuiTableBaseElement._globalChannel.addEventListener('connected', (event) => {
             if (this.contains(event.detail.element)) {
                 this._associateElement(event.detail.element);
             }
         });
         this._state.channel.addEventListener('sort', (event) => {
-            if (__classPrivateFieldGet(this, _ZuiTableElement_sortLock, "f")) {
+            if (this.#sortLock) {
                 return;
             }
-            __classPrivateFieldSet(this, _ZuiTableElement_sortLock, true, "f");
+            this.#sortLock = true;
             this.dispatchEvent(new CustomEvent('sort', { detail: event.detail, bubbles: true }));
-            setTimeout(() => (__classPrivateFieldSet(this, _ZuiTableElement_sortLock, false, "f")), 0);
+            setTimeout(() => (this.#sortLock = false), 0);
         });
     }
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('role', 'table');
-        if (__classPrivateFieldGet(this, _ZuiTableElement_mobileBreakpoint, "f").addEventListener) {
-            __classPrivateFieldGet(this, _ZuiTableElement_mobileBreakpoint, "f").addEventListener('change', __classPrivateFieldGet(this, _ZuiTableElement_mobileHeadersEvent, "f"));
+        if (this.#mobileBreakpoint.addEventListener) {
+            this.#mobileBreakpoint.addEventListener('change', this.#mobileHeadersEvent);
         }
         else {
-            __classPrivateFieldGet(this, _ZuiTableElement_mobileBreakpoint, "f").addListener(__classPrivateFieldGet(this, _ZuiTableElement_mobileHeadersEvent, "f"));
+            this.#mobileBreakpoint.addListener(this.#mobileHeadersEvent);
         }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        if (__classPrivateFieldGet(this, _ZuiTableElement_mobileBreakpoint, "f").addEventListener) {
-            __classPrivateFieldGet(this, _ZuiTableElement_mobileBreakpoint, "f").removeEventListener('change', __classPrivateFieldGet(this, _ZuiTableElement_mobileHeadersEvent, "f"));
+        if (this.#mobileBreakpoint.addEventListener) {
+            this.#mobileBreakpoint.removeEventListener('change', this.#mobileHeadersEvent);
         }
-        else if (__classPrivateFieldGet(this, _ZuiTableElement_mobileBreakpoint, "f").addListener) {
-            __classPrivateFieldGet(this, _ZuiTableElement_mobileBreakpoint, "f").removeListener(__classPrivateFieldGet(this, _ZuiTableElement_mobileHeadersEvent, "f"));
+        else if (this.#mobileBreakpoint.addListener) {
+            this.#mobileBreakpoint.removeListener(this.#mobileHeadersEvent);
         }
     }
     firstUpdated() {
-        __classPrivateFieldGet(this, _ZuiTableElement_instances, "m", _ZuiTableElement_reassignFooter).call(this);
-        __classPrivateFieldGet(this, _ZuiTableElement_mobileBreakpoint, "f").matches ? __classPrivateFieldGet(this, _ZuiTableElement_instances, "m", _ZuiTableElement_addRowHeadersToCells).call(this) : __classPrivateFieldGet(this, _ZuiTableElement_instances, "m", _ZuiTableElement_removeRowHeadersFromCells).call(this);
+        this.#reassignFooter();
+        this.#mobileBreakpoint.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();
     }
     render() {
         return html `<div class="table">
         <slot
-          @slotchange="${__classPrivateFieldGet(this, _ZuiTableElement_mobileBreakpoint, "f").matches ? __classPrivateFieldGet(this, _ZuiTableElement_instances, "m", _ZuiTableElement_addRowHeadersToCells) : __classPrivateFieldGet(this, _ZuiTableElement_instances, "m", _ZuiTableElement_removeRowHeadersFromCells)}"
+          @slotchange="${this.#mobileBreakpoint.matches ? this.#addRowHeadersToCells : this.#removeRowHeadersFromCells}"
         ></slot>
-        ${this.noResults ? __classPrivateFieldGet(this, _ZuiTableElement_instances, "m", _ZuiTableElement_renderNoResultsView).call(this) : ``}</div
+        ${this.noResults ? this.#renderNoResultsView() : ``}</div
       >
       <div><slot name="footer"></slot></div>`;
     }
-}
-_ZuiTableElement_internals = new WeakMap(), _ZuiTableElement_mobileBreakpoint = new WeakMap(), _ZuiTableElement_sortLock = new WeakMap(), _ZuiTableElement_mobileHeadersEvent = new WeakMap(), _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() {
-    var _a;
-    (_a = this._footer) === null || _a === void 0 ? void 0 : _a.map((f) => f.setAttribute('slot', 'footer'));
-}, _ZuiTableElement_addRowHeadersToCells = function _ZuiTableElement_addRowHeadersToCells() {
-    var _a, _b;
-    const rowHeadersList = this._rows.filter((h) => h.hasAttribute('header'));
-    const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));
-    if (rowHeadersList.length > 0) {
-        for (const row of rowBodyList) {
-            for (let i = 0; i < row.children.length; i++) {
-                const cell = row.children[i];
-                if (!cell.shadowRoot.querySelector('.header')) {
-                    const rowHeaderContainer = document.createElement('div');
-                    rowHeaderContainer.classList.add('header');
-                    const rowHeaderText = rowHeadersList[0].children[i].textContent;
-                    rowHeaderContainer.innerText = rowHeaderText;
-                    cell.shadowRoot.prepend(rowHeaderContainer);
+    #renderNoResultsView() {
+        return html `<div class="no-results"><slot name="no-results-message"></slot></div>`;
+    }
+    #reassignFooter() {
+        this._footer?.map((f) => f.setAttribute('slot', 'footer'));
+    }
+    #addRowHeadersToCells() {
+        const rowHeadersList = this._rows.filter((h) => h.hasAttribute('header'));
+        const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));
+        if (rowHeadersList.length > 0) {
+            for (const row of rowBodyList) {
+                for (let i = 0; i < row.children.length; i++) {
+                    const cell = row.children[i];
+                    if (!cell.shadowRoot.querySelector('.header')) {
+                        const rowHeaderContainer = document.createElement('div');
+                        rowHeaderContainer.classList.add('header');
+                        const rowHeaderText = rowHeadersList[0].children[i].textContent;
+                        rowHeaderContainer.innerText = rowHeaderText;
+                        cell.shadowRoot.prepend(rowHeaderContainer);
+                    }
                 }
             }
         }
+        // add custom state --mobile to zui-table
+        this.#internals?.states?.add('--mobile');
+        this.requestUpdate();
     }
-    // add custom state --mobile to zui-table
-    (_b = (_a = __classPrivateFieldGet(this, _ZuiTableElement_internals, "f")) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.add('--mobile');
-    this.requestUpdate();
-}, _ZuiTableElement_removeRowHeadersFromCells = function _ZuiTableElement_removeRowHeadersFromCells() {
-    var _a, _b;
-    const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));
-    for (const row of rowBodyList) {
-        for (let i = 0; i < row.children.length; i++) {
-            const rowChildren = row.children[i].shadowRoot;
-            const header = rowChildren.querySelector('.header');
-            if (header) {
-                rowChildren.removeChild(header);
+    #removeRowHeadersFromCells() {
+        const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));
+        for (const row of rowBodyList) {
+            for (let i = 0; i < row.children.length; i++) {
+                const rowChildren = row.children[i].shadowRoot;
+                const header = rowChildren.querySelector('.header');
+                if (header) {
+                    rowChildren.removeChild(header);
+                }
             }
         }
+        // remove custom state --mobile from zui-table
+        this.#internals?.states?.has('--mobile') && this.#internals.states.delete('--mobile');
+        this.requestUpdate();
     }
-    // remove custom state --mobile from zui-table
-    ((_b = (_a = __classPrivateFieldGet(this, _ZuiTableElement_internals, "f")) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.has('--mobile')) && __classPrivateFieldGet(this, _ZuiTableElement_internals, "f").states.delete('--mobile');
-    this.requestUpdate();
-};
+}
 __decorate([
     property({ type: Boolean, reflect: true })
 ], ZuiTableElement.prototype, "banded", void 0);

package/dist/zui-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"zui-table.js","sourceRoot":"","sources":["../src/zui-table.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiTableBaseElement, TableElementConnectedEvent } from './base.js';\nimport { html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { style } from './zui-table-css.js';\nimport { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';\nimport type { ZuiTableRowElement } from './zui-table-row.js';\nimport type { ZuiTableFooterElement } from './zui-table-footer.js';\nimport type { ZuiTableCellElement, ZuiTableSortDirection } from './zui-table-cell.js';\n\n/**\n * A standardized responsive table component.\n *\n * @element zui-table\n *\n * @slot - Default, unnamed slot; for inserting `<zui-table-topbar>`, `<zui-table-row>`, and `<zui-table-footer>` elements, including a custom no results view, into `<zui-table>`\n * @slot no-results-message - Customize the no results message that is shown when the `no-results` attribute is set on `<zui-table>`: `<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 * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding\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 the table summary text color\n * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table\n *\n * @event sort - Event fires when the table's active sort changes. Event detail is an object with the `sort` direction and `cell` ZuiTableCellElement.\n */\nexport class ZuiTableElement extends ZuiTableBaseElement {\n  /**\n   * Set for alternating table row background colors\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   * Set to show or hide no results message when there are no results; use in conjunction with the assigned slot `no-results-message` to include a no results message\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-results' })\n  noResults = false;\n\n  @queryAssignedElements({ selector: 'zui-table-row' })\n  private _rows: Array<ZuiTableRowElement>;\n\n  @queryAssignedElements({ selector: 'zui-table-footer' })\n  private _footer: Array<ZuiTableFooterElement>;\n\n  #internals?: ElementInternals;\n  #mobileBreakpoint: MediaQueryList = window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`);\n  #sortLock = false;\n\n  #mobileHeadersEvent = (b: MediaQueryListEvent) => {\n    b.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();\n  };\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  constructor() {\n    super();\n\n    this.#internals = this.attachInternals?.();\n\n    ZuiTableBaseElement._globalChannel.addEventListener('connected', (event: TableElementConnectedEvent) => {\n      if (this.contains(event.detail.element)) {\n        this._associateElement(event.detail.element);\n      }\n    });\n\n    this._state.channel.addEventListener('sort', (event: CustomEvent<SortEventDetail>) => {\n      if (this.#sortLock) {\n        return;\n      }\n      this.#sortLock = true;\n      this.dispatchEvent(new CustomEvent<SortEventDetail>('sort', { detail: event.detail, bubbles: true }));\n      setTimeout(() => (this.#sortLock = false), 0);\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'table');\n\n    if (this.#mobileBreakpoint.addEventListener) {\n      this.#mobileBreakpoint.addEventListener('change', this.#mobileHeadersEvent);\n    } else {\n      this.#mobileBreakpoint.addListener(this.#mobileHeadersEvent);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    if (this.#mobileBreakpoint.addEventListener) {\n      this.#mobileBreakpoint.removeEventListener('change', this.#mobileHeadersEvent);\n    } else if (this.#mobileBreakpoint.addListener) {\n      this.#mobileBreakpoint.removeListener(this.#mobileHeadersEvent);\n    }\n  }\n\n  firstUpdated() {\n    this.#reassignFooter();\n\n    this.#mobileBreakpoint.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();\n  }\n\n  render() {\n    return html`<div class=\"table\">\n        <slot\n          @slotchange=\"${this.#mobileBreakpoint.matches ? this.#addRowHeadersToCells : this.#removeRowHeadersFromCells}\"\n        ></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    this._footer?.map((f) => f.setAttribute('slot', 'footer'));\n  }\n\n  #addRowHeadersToCells() {\n    const rowHeadersList = this._rows.filter((h) => h.hasAttribute('header'));\n    const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));\n\n    if (rowHeadersList.length > 0) {\n      for (const row of rowBodyList) {\n        for (let i = 0; i < row.children.length; i++) {\n          const cell = row.children[i];\n          if (!cell.shadowRoot.querySelector('.header')) {\n            const rowHeaderContainer = document.createElement('div');\n            rowHeaderContainer.classList.add('header');\n            const rowHeaderText = rowHeadersList[0].children[i].textContent;\n            rowHeaderContainer.innerText = rowHeaderText;\n            cell.shadowRoot.prepend(rowHeaderContainer);\n          }\n        }\n      }\n    }\n\n    // add custom state --mobile to zui-table\n    this.#internals?.states?.add('--mobile');\n\n    this.requestUpdate();\n  }\n\n  #removeRowHeadersFromCells() {\n    const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));\n\n    for (const row of rowBodyList) {\n      for (let i = 0; i < row.children.length; i++) {\n        const rowChildren = row.children[i].shadowRoot;\n        const header = rowChildren.querySelector('.header');\n        if (header) {\n          rowChildren.removeChild(header);\n        }\n      }\n    }\n\n    // remove custom state --mobile from zui-table\n    this.#internals?.states?.has('--mobile') && this.#internals.states.delete('--mobile');\n\n    this.requestUpdate();\n  }\n}\n\nwindow.customElements.define('zui-table', ZuiTableElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table': ZuiTableElement;\n  }\n}\n\nexport type SortEventDetail = { sort: ZuiTableSortDirection; cell: ZuiTableCellElement };\n"]}
+{"version":3,"file":"zui-table.js","sourceRoot":"","sources":["../src/zui-table.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiTableBaseElement, TableElementConnectedEvent } from './base.js';\nimport { html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { style } from './zui-table-css.js';\nimport { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';\nimport type { ZuiTableRowElement } from './zui-table-row.js';\nimport type { ZuiTableFooterElement } from './zui-table-footer.js';\nimport type { ZuiTableCellElement, ZuiTableSortDirection } from './zui-table-cell.js';\n\n/**\n * A standardized responsive table component.\n *\n * @element zui-table\n *\n * @slot - Default, unnamed slot; for inserting `<zui-table-topbar>`, `<zui-table-row>`, and `<zui-table-footer>` elements, including a custom no results view, into `<zui-table>`\n * @slot no-results-message - Customize the no results message that is shown when the `no-results` attribute is set on `<zui-table>`: `<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 * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding\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 the table summary text color\n * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table\n *\n * @event sort - Event fires when the table's active sort changes. Event detail is an object with the `sort` direction and `cell` ZuiTableCellElement.\n */\nexport class ZuiTableElement extends ZuiTableBaseElement {\n  /**\n   * Set for alternating table row background colors\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   * Set to show or hide no results message when there are no results; use in conjunction with the assigned slot `no-results-message` to include a no results message\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-results' })\n  noResults = false;\n\n  @queryAssignedElements({ selector: 'zui-table-row' })\n  private _rows: Array<ZuiTableRowElement>;\n\n  @queryAssignedElements({ selector: 'zui-table-footer' })\n  private _footer: Array<ZuiTableFooterElement>;\n\n  #internals?: ElementInternals;\n  #mobileBreakpoint: MediaQueryList = window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`);\n  #sortLock = false;\n\n  #mobileHeadersEvent = (b: MediaQueryListEvent) => {\n    b.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();\n  };\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  constructor() {\n    super();\n\n    this.#internals = this.attachInternals?.();\n\n    ZuiTableBaseElement._globalChannel.addEventListener('connected', (event: TableElementConnectedEvent) => {\n      if (this.contains(event.detail.element)) {\n        this._associateElement(event.detail.element);\n      }\n    });\n\n    this._state.channel.addEventListener('sort', (event: CustomEvent<SortEventDetail>) => {\n      if (this.#sortLock) {\n        return;\n      }\n      this.#sortLock = true;\n      this.dispatchEvent(new CustomEvent<SortEventDetail>('sort', { detail: event.detail, bubbles: true }));\n      setTimeout(() => (this.#sortLock = false), 0);\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'table');\n\n    if (this.#mobileBreakpoint.addEventListener) {\n      this.#mobileBreakpoint.addEventListener('change', this.#mobileHeadersEvent);\n    } else {\n      this.#mobileBreakpoint.addListener(this.#mobileHeadersEvent);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    if (this.#mobileBreakpoint.addEventListener) {\n      this.#mobileBreakpoint.removeEventListener('change', this.#mobileHeadersEvent);\n    } else if (this.#mobileBreakpoint.addListener) {\n      this.#mobileBreakpoint.removeListener(this.#mobileHeadersEvent);\n    }\n  }\n\n  firstUpdated() {\n    this.#reassignFooter();\n\n    this.#mobileBreakpoint.matches ? this.#addRowHeadersToCells() : this.#removeRowHeadersFromCells();\n  }\n\n  render() {\n    return html`<div class=\"table\">\n        <slot\n          @slotchange=\"${this.#mobileBreakpoint.matches ? this.#addRowHeadersToCells : this.#removeRowHeadersFromCells}\"\n        ></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    this._footer?.map((f) => f.setAttribute('slot', 'footer'));\n  }\n\n  #addRowHeadersToCells() {\n    const rowHeadersList = this._rows.filter((h) => h.hasAttribute('header'));\n    const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));\n\n    if (rowHeadersList.length > 0) {\n      for (const row of rowBodyList) {\n        for (let i = 0; i < row.children.length; i++) {\n          const cell = row.children[i];\n          if (!cell.shadowRoot.querySelector('.header')) {\n            const rowHeaderContainer = document.createElement('div');\n            rowHeaderContainer.classList.add('header');\n            const rowHeaderText = rowHeadersList[0].children[i].textContent;\n            rowHeaderContainer.innerText = rowHeaderText;\n            cell.shadowRoot.prepend(rowHeaderContainer);\n          }\n        }\n      }\n    }\n\n    // add custom state --mobile to zui-table\n    this.#internals?.states?.add('--mobile');\n\n    this.requestUpdate();\n  }\n\n  #removeRowHeadersFromCells() {\n    const rowBodyList = this._rows.filter((r) => !r.hasAttribute('header') && !r.hasAttribute('summary'));\n\n    for (const row of rowBodyList) {\n      for (let i = 0; i < row.children.length; i++) {\n        const rowChildren = row.children[i].shadowRoot;\n        const header = rowChildren.querySelector('.header');\n        if (header) {\n          rowChildren.removeChild(header);\n        }\n      }\n    }\n\n    // remove custom state --mobile from zui-table\n    this.#internals?.states?.has('--mobile') && this.#internals.states.delete('--mobile');\n\n    this.requestUpdate();\n  }\n}\n\nwindow.customElements.define('zui-table', ZuiTableElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table': ZuiTableElement;\n  }\n}\n\nexport type SortEventDetail = { sort: ZuiTableSortDirection; cell: ZuiTableCellElement };\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zywave/zui-table",
-  "version": "4.0.14-pre.1",
+  "version": "4.0.14-pre.3",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "UNLICENSED",
@@ -22,11 +22,11 @@
   },
   "customElements": "dist/custom-elements.json",
   "dependencies": {
-    "@zywave/zui-base": "^4.1.26",
-    "@zywave/zui-icons": "^4.3.0"
+    "@zywave/zui-base": "^4.2.0-pre.0",
+    "@zywave/zui-icons": "^4.3.1-pre.0"
   },
   "devDependencies": {
-    "@zywave/zui-button": "^4.1.0-pre.0"
+    "@zywave/zui-button": "^4.1.0-pre.1"
   },
-  "gitHead": "162c0ea7238601bd7dd0b487032feb690b864e9c"
+  "gitHead": "1d65fd119122e053cfb26ec6779084a5a61657c5"
 }

package/test/zui-table.test.ts

@@ -7,13 +7,13 @@ import {
   ZuiTableCellElement,
   ZuiTableTopbarElement,
   ZuiTableFooterElement,
-  ZuiTableSortDirection,
 } from '@zywave/zui-table';
 import { assert } from '@esm-bundle/chai';
 import { setViewport } from '@web/test-runner-commands';
 import { isMobile } from '../../../../test/src/util/isMobile.js';
 import { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints.js';
 import { sleep } from '@zywave/../../test/src/util/helpers.js';
+import type { ZuiTableSortDirection } from '@zywave/zui-table';
 
 suite('zui-table', () => {
   let table: ZuiTableElement;