@zywave/zui-table 4.0.3 → 4.0.4-pre.0

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

@@ -32,7 +32,7 @@ export declare class ZuiTableCellElement extends ZuiTableBaseElement {
      * This private field is needed to persist state between the cell and the header row. DO NOT USE EXTERNALLY
      */
     private _isAllowedSort;
-    static get styles(): import("lit").CSSResultGroup[];
+    static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
     render(): import("lit-html").TemplateResult<1>;
     click(): void;
 }

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

@@ -9,7 +9,7 @@ import { ZuiTableBaseElement } from './base.js';
  * @cssprop [--zui-table-footer-margin=0.625rem (10px)] - Override the margin between the table and footer of the table
  */
 export declare class ZuiTableFooterElement extends ZuiTableBaseElement {
-    static get styles(): import("lit").CSSResultGroup[];
+    static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -21,7 +21,7 @@ export declare class ZuiTableRowElement extends ZuiTableBaseElement {
      */
     summary: boolean;
     private _slottedCells;
-    static get styles(): import("lit").CSSResultGroup[];
+    static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
     connectedCallback(): void;
     firstUpdated(): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;

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

@@ -13,7 +13,7 @@ export declare class ZuiTableTopbarElement extends ZuiTableBaseElement {
     private _actionSlottedElements;
     private _counterSlottedNodes;
     private _actionButtons;
-    static get styles(): import("lit").CSSResultGroup[];
+    static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;

package/dist/zui-table.d.ts

@@ -29,7 +29,7 @@ export declare class ZuiTableElement extends ZuiTableBaseElement {
     noResults: boolean;
     private _rows;
     private _footer;
-    static get styles(): import("lit").CSSResultGroup[];
+    static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;

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 - Unnamed slot, all table content will appear here, such as table rows\n * @slot no-results-message - Customize the no results message that is shown when 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 }));\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 - Unnamed slot, all table content will appear here, such as table rows\n * @slot no-results-message - Customize the no results message that is shown when 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 }));\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.3",
+  "version": "4.0.4-pre.0",
   "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.21",
-    "@zywave/zui-icons": "^4.0.27"
+    "@zywave/zui-base": "^4.1.22-pre.0",
+    "@zywave/zui-icons": "^4.0.28-pre.0"
   },
   "devDependencies": {
-    "@zywave/zui-button": "^4.0.27"
+    "@zywave/zui-button": "^4.0.28-pre.0"
   },
-  "gitHead": "af6f8648fcd6276bf13726706a8143e67f27b85b"
+  "gitHead": "71110757f68afcc983bd987c12f5c9920279cc8e"
 }