@zywave/zui-table 4.0.0-pre.1

package/src/zui-table-cell.ts

@@ -0,0 +1,41 @@
+import { ZuiBaseElement } from '@zywave/zui-base';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { style } from './zui-table-cell-css.js';
+
+/**
+ * @element zui-table-cell
+ *
+ * @slot - Default slot; table cell content goes here
+ *
+ * @attr {number} span - Set number of columns the table cell should span
+ * @prop {number} span - Set number of columns the table cell should span
+ *
+ * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding
+ */
+export class ZuiTableCellElement extends ZuiBaseElement {
+  @property({ type: Number })
+  span = 1;
+
+  static get styles() {
+    return [super.styles, style];
+  }
+
+  // TODO: change role="cell" to role="columnheader" if parent is <zui-table-row header>
+  render() {
+    const spanStyle = html`<style>
+      :host {
+        grid-column: span ${this.span} !important;
+      }
+    </style>`;
+    return html`${this.span >= 1 ? spanStyle : ''}<div role="cell"><slot></slot></div>`;
+  }
+}
+
+window.customElements.define('zui-table-cell', ZuiTableCellElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zui-table-cell': ZuiTableCellElement;
+  }
+}

package/src/zui-table-css.js

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

package/src/zui-table-footer-css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+
+export const style = css`.footer{display:flex;justify-content:center;align-items:center;margin-top:var(--zui-table-footer-margin, 0.625rem)}::slotted(zui-pager){width:100%}`;

package/src/zui-table-footer.scss

@@ -0,0 +1,12 @@
+@use '@zywave/zui-sass-scripts' as *;
+
+.footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: var(--zui-table-footer-margin, #{rem(10)});
+}
+
+::slotted(zui-pager) {
+  width: 100%;
+}

package/src/zui-table-footer.ts

@@ -0,0 +1,30 @@
+import { ZuiBaseElement } from '@zywave/zui-base';
+import { html } from 'lit';
+import { style } from './zui-table-footer-css.js';
+
+/**
+ * @element zui-table-footer
+ *
+ * @slot - Default slot; table footer content goes here
+ *
+ * @cssprop [--zui-table-footer-margin=10px] - Margin between the table and footer of the table
+ */
+export class ZuiTableFooterElement extends ZuiBaseElement {
+  static get styles() {
+    return [super.styles, style];
+  }
+
+  render() {
+    return html`<div class="footer">
+      <slot></slot>
+    </div>`;
+  }
+}
+
+window.customElements.define('zui-table-footer', ZuiTableFooterElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zui-table-footer': ZuiTableFooterElement;
+  }
+}

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

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+
+export const style = css`:host([header]){background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}:host([header]) ::slotted(zui-table-cell){--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600}div{display:grid;grid-template-columns:repeat(var(--zui-table-columns), minmax(0, 1fr))}:host([summary]){background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}:host([summary]) ::slotted(zui-table-cell){font-weight:600;color:var(--zui-table-summary-text-color, #fff)}`;

package/src/zui-table-row.scss

@@ -0,0 +1,25 @@
+@use '@zywave/zui-sass-scripts' as *;
+
+:host([header]) {
+  background-color: #fff;
+  border-bottom: 1px solid var(--zui-gray-200);
+
+  ::slotted(zui-table-cell) {
+    --zui-table-cell-padding: #{rem(8.5)} #{rem(20)};
+    font-weight: 600;
+  }
+}
+
+div {
+  display: grid;
+  grid-template-columns: repeat(var(--zui-table-columns), minmax(0, 1fr));
+}
+
+:host([summary]) {
+  background-color: var(--zui-table-summary-background-color, var(--zui-gray-600)) !important;
+
+  ::slotted(zui-table-cell) {
+    font-weight: 600;
+    color: var(--zui-table-summary-text-color, #fff);
+  }
+}

package/src/zui-table-row.ts

@@ -0,0 +1,49 @@
+import { ZuiBaseElement } from '@zywave/zui-base';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { style } from './zui-table-row-css.js';
+
+/**
+ * @element zui-table-row
+ *
+ * @slot - Default slot; `<zui-table-cell>`s are declared here
+ *
+ * @attr {boolean} header - Set table header row
+ * @attr {boolean} summary - Set table summary row
+ * @prop {boolean} header - Set table header row
+ * @prop {boolean} summary - Set table summary row
+ *
+ * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Set the table summary background color
+ * @cssprop [--zui-table-summary-text-color=#fff] - Set the the table summary text color
+ */
+export class ZuiTableRowElement extends ZuiBaseElement {
+  /**
+   * property to declare the first row as the table header row
+   */
+  @property({ type: Boolean, reflect: true })
+  header = false;
+
+  /**
+   * property to declare a summary row; typically the last row in zui-table before zui-table-footer
+   */
+  @property({ type: Boolean, reflect: true })
+  summary = false;
+
+  static get styles() {
+    return [super.styles, style];
+  }
+
+  render() {
+    return html`<div role="row">
+      <slot></slot>
+    </div>`;
+  }
+}
+
+window.customElements.define('zui-table-row', ZuiTableRowElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zui-table-row': ZuiTableRowElement;
+  }
+}

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

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

package/src/zui-table-topbar.scss

@@ -0,0 +1,40 @@
+@use '@zywave/zui-sass-scripts' as *;
+
+.topbar {
+  display: flex;
+  width: 100%;
+  min-height: rem(60);
+  align-items: center;
+  padding: rem(10) rem(20);
+  background-color: var(--zui-gray-25);
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  align-items: center;
+
+  ::slotted(zui-search) {
+    --zui-search-border-color: var(--zui-gray-50);
+  }
+}
+
+.counter {
+  flex-shrink: 0;
+  margin-left: auto;
+  padding-left: rem(10);
+  font-size: rem(12);
+  color: var(--zui-gray-400);
+}
+
+.action {
+  margin-left: rem(10);
+
+  ::slotted(zui-button:not(:first-of-type)) {
+    margin-left: rem(10);
+  }
+}
+
+slot[name='action'] {
+  display: flex;
+}

package/src/zui-table-topbar.ts

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

package/src/zui-table.scss

@@ -0,0 +1,39 @@
+@use '@zywave/zui-sass-scripts' as *;
+
+:host {
+  display: block;
+}
+
+:host([banded]) {
+  ::slotted(zui-table-row:not([header]):nth-child(even)) {
+    background-color: var(--zui-gray-25);
+  }
+
+  ::slotted(zui-table-row:not([header])) {
+    border: 0;
+  }
+}
+
+:host([no-results]) {
+  .no-results {
+    padding: rem(12) rem(20);
+  }
+}
+
+::slotted(zui-table-row:not([header])) {
+  border-bottom: 1px solid var(--zui-gray-100);
+}
+
+::slotted(zui-table-row:not([header]):last-of-type) {
+  border-bottom: 0;
+}
+
+.table {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.29);
+  border-collapse: collapse;
+  border-spacing: 0;
+}

package/src/zui-table.ts

@@ -0,0 +1,93 @@
+import { ZuiBaseElement } from '@zywave/zui-base';
+import { html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { style } from './zui-table-css.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { findAssignedElement } from '@zywave/zui-base/dist/utils/find-assigned-element.js';
+
+/**
+ * @element zui-table
+ *
+ * @slot - Default slot; all table content will appear here, such as table rows
+ * @slot no-results-message - Customize the no results message that is shown when `<zui-table>` has the attribute `no-results`: `<zui-table no-results>`
+ * @slot footer - Only for `<zui-table-footer>`. When there is a `<zui-table-footer>` present inside `<zui-table>`, it will be auto-assigned to this slot in order to place it outside of the rendered table for styling purposes.
+ *
+ * @attr {number} columns - Amount of columns to show in the table
+ * @attr {boolean} banded - Style option to alternate row background colors
+ * @attr {boolean} no-results - To show or hide no results message when there are no results
+ * @prop {number} columns - Amount of columns to show in the table
+ * @prop {boolean} banded - Style option to alternate row background colors
+ * @prop {boolean} noResults - To show or hide no results message when there are no results
+ *
+ * @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding
+ * @cssprop [--zui-table-summary-background-color=var(--zui-gray-600)] - Set the table summary background color
+ * @cssprop [--zui-table-summary-text-color=#fff] - Set the the table summary text color
+ * @cssprop [--zui-table-footer-margin=10px] - Margin between the table and footer of the table
+ */
+
+export class ZuiTableElement extends ZuiBaseElement {
+  /**
+   * property to display number of columns
+   */
+  @property({ type: String, reflect: true })
+  columns = '1';
+
+  /**
+   * property to apply alternating background colors to table rows
+   */
+  @property({ type: Boolean, reflect: true })
+  banded = false;
+
+  // TODO: add divided prop so all table cells will have 1px border
+
+  /**
+   * property to show or hide no results message when there are no results in the table
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'no-results' })
+  noResults = false;
+
+  @query('slot')
+  private _slotEl: HTMLSlotElement;
+
+  private get _footer() {
+    return findAssignedElement(this._slotEl, 'zui-table-footer');
+  }
+
+  static get styles() {
+    return [super.styles, style];
+  }
+
+  firstUpdated() {
+    this.#reassignFooter();
+  }
+
+  render() {
+    const columnsCssPropVal = {
+      '--zui-table-columns': this.columns,
+    };
+
+    return html`<div role="table" class="table" style="${styleMap(columnsCssPropVal)}">
+        <slot></slot>
+        ${this.noResults ? this.#renderNoResultsView() : ``}</div
+      >
+      <div><slot name="footer"></slot></div>`;
+  }
+
+  #renderNoResultsView() {
+    return html`<div class="no-results"><slot name="no-results-message"></slot></div>`;
+  }
+
+  #reassignFooter() {
+    if (this._footer) {
+      this._footer.setAttribute('slot', 'footer');
+    }
+  }
+}
+
+window.customElements.define('zui-table', ZuiTableElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zui-table': ZuiTableElement;
+  }
+}

package/test/zui-table.test.ts

@@ -0,0 +1,129 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../../../test/src/custom_typings/chai.d.ts" />
+/* eslint-disable no-undef */
+import {
+  ZuiTableElement,
+  ZuiTableRowElement,
+  ZuiTableCellElement,
+  ZuiTableTopbarElement,
+  ZuiTableFooterElement,
+} from '@zywave/zui-table';
+import { assert } from '@esm-bundle/chai';
+
+suite('zui-table', () => {
+  let table: ZuiTableElement;
+  let row: ZuiTableRowElement;
+  let cell: ZuiTableCellElement;
+  let topbar: ZuiTableTopbarElement;
+  let footer: ZuiTableFooterElement;
+
+  setup(() => {
+    table = document.createElement('zui-table') as ZuiTableElement;
+    row = document.createElement('zui-table-row') as ZuiTableRowElement;
+    cell = document.createElement('zui-table-cell') as ZuiTableCellElement;
+    topbar = document.createElement('zui-table-topbar') as ZuiTableTopbarElement;
+    footer = document.createElement('zui-table-footer') as ZuiTableFooterElement;
+
+    row.appendChild(cell);
+    table.appendChild(topbar);
+    table.appendChild(row);
+    table.appendChild(footer);
+
+    document.body.appendChild(table);
+  });
+
+  teardown(() => {
+    document.body.removeChild(table);
+  });
+
+  test('initializes as a ZuiTableElement', () => {
+    assert.instanceOf(table, ZuiTableElement);
+  });
+
+  test('initializes as a ZuiTableRowElement', () => {
+    assert.instanceOf(row, ZuiTableRowElement);
+  });
+
+  test('initializes as a ZuiTableCellElement', () => {
+    assert.instanceOf(cell, ZuiTableCellElement);
+  });
+
+  test('initializes as a ZuiTableTopbarElement', () => {
+    assert.instanceOf(topbar, ZuiTableTopbarElement);
+  });
+
+  test('initializes as a ZuiTableFooterElement', () => {
+    assert.instanceOf(footer, ZuiTableFooterElement);
+  });
+
+  test('setting table columns number also reflects in custom CSS variable', async () => {
+    const randomColumnNumber = Math.floor(Math.random() * 10) + 1;
+    table.setAttribute('columns', `${randomColumnNumber}`);
+
+    await table.updateComplete;
+
+    const shadowEl = table.shadowRoot;
+    const firstChildEl = shadowEl.firstElementChild as HTMLElement;
+
+    const tableColumnsVal = table.getAttribute('columns');
+    const customCssPropVal = window.getComputedStyle(firstChildEl).getPropertyValue('--zui-table-columns');
+
+    assert.strictEqual(
+      tableColumnsVal,
+      customCssPropVal,
+      'Expected column numbers to be reflected in CSS custom property'
+    );
+  });
+
+  test('banded attribute alternates background color for rows', async () => {
+    table.setAttribute('banded', '');
+    table.appendChild(row.cloneNode(true));
+
+    await table.updateComplete;
+
+    const tableRows = table.querySelectorAll('zui-table-row');
+    const tableRowBgColor = window.getComputedStyle(tableRows[1]);
+
+    assert.property(
+      tableRowBgColor,
+      'background-color',
+      'Expected alternate rows to have background color for banded tables'
+    );
+  });
+
+  test('table cells can span columns', async () => {
+    const randomColumnNumber = Math.floor(Math.random() * 10) + 1;
+    cell.setAttribute('span', `${randomColumnNumber}`);
+
+    await table.updateComplete;
+
+    const tableCell = table.querySelector('zui-table-cell');
+    const tableCellAttr = tableCell.getAttribute('span');
+    const tableCellComputedGridColumnVal = window.getComputedStyle(tableCell).getPropertyValue('grid-column-start');
+
+    assert.include(
+      tableCellComputedGridColumnVal,
+      tableCellAttr,
+      `Expected table cell to span ${randomColumnNumber} columns when "span" attribute is set`
+    );
+  });
+
+  test('table with no-results attribute results in a no results view', async () => {
+    table.setAttribute('no-results', '');
+    await table.updateComplete;
+
+    const shadowEl = table.shadowRoot;
+    const noResultsDiv = shadowEl.querySelector('.no-results');
+
+    assert.exists(noResultsDiv, 'Expected no-results view to show when zui-table as attribute no-results applied');
+  });
+
+  test('table with a footer will assign it to the slot "footer"', async () => {
+    await table.updateComplete;
+
+    const bb = table.querySelector('zui-table-footer');
+    const footerSlot = bb.hasAttribute('slot');
+
+    assert.isTrue(footerSlot, 'Expected zui-table-footer to be assigned to a slot');
+  });
+});

package/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.build.json",
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "tsBuildInfoFile": ".tsbuildinfo"
+},
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.js"]
+}