@zywave/zui-table 4.0.2 → 4.0.3

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.0.3](https://gitlab.com/zywave/devkit/web-sdk/zui/compare/@zywave/zui-table@4.0.3-pre.1...@zywave/zui-table@4.0.3) (2022-03-25)
+
+**Note:** Version bump only for package @zywave/zui-table
+
+
+
+
+
 ## [4.0.2](https://gitlab.com/zywave/devkit/zui/zui/compare/@zywave/zui-table@4.0.2-pre.3...@zywave/zui-table@4.0.2) (2022-02-25)
 
 **Note:** Version bump only for package @zywave/zui-table

package/dist/custom-elements.json

@@ -99,12 +99,6 @@
               "name": "#onSortableClick"
             }
           ],
-          "events": [
-            {
-              "description": "Event fires when a `sortable` cell is clicked",
-              "name": "sort"
-            }
-          ],
           "attributes": [
             {
               "name": "action",
@@ -578,6 +572,12 @@
               "name": "#removeRowHeadersFromCells"
             }
           ],
+          "events": [
+            {
+              "description": "Event fires when the table's active sort changes. Event detail is an object with the `sort` direction and `cell` ZuiTableCellElement.",
+              "name": "sort"
+            }
+          ],
           "attributes": [
             {
               "name": "banded",

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

@@ -10,7 +10,6 @@ import { ZuiTableBaseElement } from './base.js';
  * @cssprop [--zui-table-cell-sort-color=var(--zui-gray-300)] - ([sortable]): Default color of chevron when `direction` is `null`
  * @cssprop [--zui-table-cell-sort-active-color=var(--zui-blue)] - Highlight color used to indicate the active sort direction
  *
- * @event sort - Event fires when a `sortable` cell is clicked
  */
 export declare class ZuiTableCellElement extends ZuiTableBaseElement {
     #private;

package/dist/zui-table-cell.js

@@ -32,7 +32,6 @@ import { style } from './zui-table-cell-css.js';
  * @cssprop [--zui-table-cell-sort-color=var(--zui-gray-300)] - ([sortable]): Default color of chevron when `direction` is `null`
  * @cssprop [--zui-table-cell-sort-active-color=var(--zui-blue)] - Highlight color used to indicate the active sort direction
  *
- * @event sort - Event fires when a `sortable` cell is clicked
  */
 export class ZuiTableCellElement extends ZuiTableBaseElement {
     constructor() {
@@ -81,6 +80,9 @@ export class ZuiTableCellElement extends ZuiTableBaseElement {
         return [super.styles, style];
     }
     render() {
+        if (this.sortable) {
+            import('@zywave/zui-icons');
+        }
         const styles = { 'is-selectable': this.sortable };
         return html `<div @click="${__classPrivateFieldGet(this, _ZuiTableCellElement_instances, "m", _ZuiTableCellElement_onSortableClick)}" class="${classMap(styles)}">
       <slot></slot>

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

@@ -1 +1 @@
-{"version":3,"file":"zui-table-cell.js","sourceRoot":"","sources":["../src/zui-table-cell.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,mBAAoB,SAAQ,mBAAmB;IAA5D;;;QACE;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;QAmCf;;WAEG;QAEK,mBAAc,GAAG,KAAK,CAAC;QAE/B,oCAA+B,IAAI,EAAC;QACpC,wCAAY,KAAK,EAAC;IAoCpB,CAAC;IA5EC;;;OAGG;IAEH,IAAI,IAAI;QACN,OAAO,uBAAA,IAAI,iCAAM,CAAC;IACpB,CAAC;IAED,IAAI,IAAI,CAAC,GAA0B;;QACjC,MAAM,cAAc,GAAG,CAAC,WAAW,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;QACzD,IAAI,cAAc,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;YAChC,MAAM,MAAM,GAAG,uBAAA,IAAI,iCAAM,CAAC;YAC1B,uBAAA,IAAI,6BAAS,GAAG,MAAA,CAAC;YACjB,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YACnC,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;SACpG;IACH,CAAC;IAED;;OAEG;IAEH,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,cAAc,IAAI,uBAAA,IAAI,qCAAU,CAAC;IAC/C,CAAC;IAED,IAAI,QAAQ,CAAC,GAAY;QACvB,MAAM,MAAM,GAAG,uBAAA,IAAI,qCAAU,CAAC;QAC9B,uBAAA,IAAI,iCAAa,GAAG,MAAA,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IACzC,CAAC;IAWD,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,EAAE,eAAe,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClD,OAAO,IAAI,CAAA,gBAAgB,uBAAA,IAAI,4EAAiB,YAAY,QAAQ,CAAC,MAAM,CAAC;;QAExE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,uCAAuC,CAAC,CAAC,CAAC,OAAO;WAClE,CAAC;IACV,CAAC;IAED,KAAK;QACH,KAAK,CAAC,KAAK,EAAE,CAAC;QAEd,uBAAA,IAAI,4EAAiB,MAArB,IAAI,CAAmB,CAAC;IAC1B,CAAC;CAkBF;;IAfG,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,QAAQ,IAAI,CAAC,IAAI,EAAE;YACjB,KAAK,WAAW;gBACd,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC;gBACzB,MAAM;YACR,KAAK,YAAY;gBACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,MAAM;YACR,KAAK,IAAI,CAAC;YACV;gBACE,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC;gBACxB,MAAM;SACT;KACF;AACH,CAAC;AA7ED;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC5B;AAOf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAGzC;AAgBD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAG1C;AAYD;IADC,KAAK,EAAE;2DACuB;AAyCjC,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,CAAC","sourcesContent":["import { ZuiTableBaseElement } from './base.js';\nimport { html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { style } from './zui-table-cell-css.js';\n\n/**\n * An individual table cell to be passed into a `<zui-table-row>`.\n *\n * @element zui-table-cell\n *\n * @slot - Unnamed slot, table cell content goes here\n *\n * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding\n * @cssprop [--zui-table-cell-sort-color=var(--zui-gray-300)] - ([sortable]): Default color of chevron when `direction` is `null`\n * @cssprop [--zui-table-cell-sort-active-color=var(--zui-blue)] - Highlight color used to indicate the active sort direction\n *\n * @event sort - Event fires when a `sortable` cell is clicked\n */\nexport class ZuiTableCellElement extends ZuiTableBaseElement {\n  /**\n   * Set to decrease table cell padding to accommodate action button(s)\n   */\n  @property({ type: Boolean, reflect: true })\n  action = false;\n\n  /**\n   * Current sort direction of the sortable cell\n   * @type {null | \"ascending\" | \"descending\"}\n   */\n  @property({ type: String, reflect: true })\n  get sort(): ZuiTableSortDirection {\n    return this.#sort;\n  }\n\n  set sort(val: ZuiTableSortDirection) {\n    const acceptableVals = ['ascending', 'descending', null];\n    if (acceptableVals.includes(val)) {\n      const oldVal = this.#sort;\n      this.#sort = val;\n      this.requestUpdate('sort', oldVal);\n      this._state?.channel.dispatchEvent(new CustomEvent('sort', { detail: { sort: val, cell: this } }));\n    }\n  }\n\n  /**\n   * (`zui-table-row[header]`): Whether or not cell header is sortable; another requirement is the parent element, `<zui-table-cell header>` must have `header` attribute or property set\n   */\n  @property({ type: Boolean, reflect: true })\n  get sortable() {\n    return this._isAllowedSort && this.#sortable;\n  }\n\n  set sortable(val: boolean) {\n    const oldVal = this.#sortable;\n    this.#sortable = val;\n    this.requestUpdate('sortable', oldVal);\n  }\n\n  /**\n   * This private field is needed to persist state between the cell and the header row. DO NOT USE EXTERNALLY\n   */\n  @state()\n  private _isAllowedSort = false;\n\n  #sort: ZuiTableSortDirection = null;\n  #sortable = false;\n\n  static get styles() {\n    return [super.styles, style];\n  }\n\n  render() {\n    const styles = { 'is-selectable': this.sortable };\n    return html`<div @click=\"${this.#onSortableClick}\" class=\"${classMap(styles)}\">\n      <slot></slot>\n      ${this.sortable ? html`<zui-icon icon=\"zui-sort\"></zui-icon>` : nothing}\n    </div>`;\n  }\n\n  click() {\n    super.click();\n\n    this.#onSortableClick();\n  }\n\n  #onSortableClick() {\n    if (this.sortable) {\n      switch (this.sort) {\n        case 'ascending':\n          this.sort = 'descending';\n          break;\n        case 'descending':\n          this.sort = null;\n          break;\n        case null:\n        default:\n          this.sort = 'ascending';\n          break;\n      }\n    }\n  }\n}\n\nwindow.customElements.define('zui-table-cell', ZuiTableCellElement);\n\nexport type ZuiTableSortDirection = null | 'ascending' | 'descending';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'zui-table-cell': ZuiTableCellElement;\n  }\n}\n"]}
+{"version":3,"file":"zui-table-cell.js","sourceRoot":"","sources":["../src/zui-table-cell.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiTableBaseElement } from './base.js';\nimport { html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { style } from './zui-table-cell-css.js';\n\n/**\n * An individual table cell to be passed into a `<zui-table-row>`.\n *\n * @element zui-table-cell\n *\n * @slot - Unnamed slot, table cell content goes here\n *\n * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding\n * @cssprop [--zui-table-cell-sort-color=var(--zui-gray-300)] - ([sortable]): Default color of chevron when `direction` is `null`\n * @cssprop [--zui-table-cell-sort-active-color=var(--zui-blue)] - Highlight color used to indicate the active sort direction\n *\n */\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.d.ts

@@ -1,4 +1,5 @@
 import { ZuiTableBaseElement } from './base.js';
+import type { ZuiTableCellElement, ZuiTableSortDirection } from './zui-table-cell.js';
 /**
  * A standardized responsive table component.
  *
@@ -13,6 +14,8 @@ import { ZuiTableBaseElement } from './base.js';
  * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color
  * @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color
  * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table
+ *
+ * @event sort - Event fires when the table's active sort changes. Event detail is an object with the `sort` direction and `cell` ZuiTableCellElement.
  */
 export declare class ZuiTableElement extends ZuiTableBaseElement {
     #private;
@@ -38,3 +41,7 @@ declare global {
         'zui-table': ZuiTableElement;
     }
 }
+export declare type SortEventDetail = {
+    sort: ZuiTableSortDirection;
+    cell: ZuiTableCellElement;
+};

package/dist/zui-table.js

@@ -35,6 +35,8 @@ import { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';
  * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color
  * @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color
  * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table
+ *
+ * @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 {
     constructor() {

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';\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\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) => {\n      if (this.#sortLock) {\n        return;\n      }\n      this.#sortLock = true;\n      this.dispatchEvent(new CustomEvent('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"]}
+{"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.2",
+  "version": "4.0.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.20",
-    "@zywave/zui-icons": "^4.0.26"
+    "@zywave/zui-base": "^4.1.21",
+    "@zywave/zui-icons": "^4.0.27"
   },
   "devDependencies": {
-    "@zywave/zui-button": "^4.0.26"
+    "@zywave/zui-button": "^4.0.27"
   },
-  "gitHead": "9ac53b7747d375cb1a8f6f0e7f9dfa0036bfab48"
+  "gitHead": "af6f8648fcd6276bf13726706a8143e67f27b85b"
 }

package/src/zui-table-cell.ts

@@ -15,7 +15,6 @@ import { style } from './zui-table-cell-css.js';
  * @cssprop [--zui-table-cell-sort-color=var(--zui-gray-300)] - ([sortable]): Default color of chevron when `direction` is `null`
  * @cssprop [--zui-table-cell-sort-active-color=var(--zui-blue)] - Highlight color used to indicate the active sort direction
  *
- * @event sort - Event fires when a `sortable` cell is clicked
  */
 export class ZuiTableCellElement extends ZuiTableBaseElement {
   /**
@@ -71,6 +70,9 @@ export class ZuiTableCellElement extends ZuiTableBaseElement {
   }
 
   render() {
+    if (this.sortable) {
+      import('@zywave/zui-icons');
+    }
     const styles = { 'is-selectable': this.sortable };
     return html`<div @click="${this.#onSortableClick}" class="${classMap(styles)}">
       <slot></slot>

package/src/zui-table.ts

@@ -5,6 +5,7 @@ import { style } from './zui-table-css.js';
 import { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';
 import type { ZuiTableRowElement } from './zui-table-row.js';
 import type { ZuiTableFooterElement } from './zui-table-footer.js';
+import type { ZuiTableCellElement, ZuiTableSortDirection } from './zui-table-cell.js';
 
 /**
  * A standardized responsive table component.
@@ -20,8 +21,9 @@ import type { ZuiTableFooterElement } from './zui-table-footer.js';
  * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Override the table summary background color
  * @cssprop [--zui-table-summary-text-color=#fff] - Override the the table summary text color
  * @cssprop [--zui-table-footer-margin=10px] - Override the margin between the table and footer of the table
+ *
+ * @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 {
   /**
    * Set for alternating table row background colors
@@ -66,12 +68,12 @@ export class ZuiTableElement extends ZuiTableBaseElement {
       }
     });
 
-    this._state.channel.addEventListener('sort', (event: CustomEvent) => {
+    this._state.channel.addEventListener('sort', (event: CustomEvent<SortEventDetail>) => {
       if (this.#sortLock) {
         return;
       }
       this.#sortLock = true;
-      this.dispatchEvent(new CustomEvent('sort', { detail: event.detail }));
+      this.dispatchEvent(new CustomEvent<SortEventDetail>('sort', { detail: event.detail }));
       setTimeout(() => (this.#sortLock = false), 0);
     });
   }
@@ -173,3 +175,5 @@ declare global {
     'zui-table': ZuiTableElement;
   }
 }
+
+export type SortEventDetail = { sort: ZuiTableSortDirection; cell: ZuiTableCellElement };