@leavittsoftware/web 9.9.0 → 10.0.0

package/titanium/data-table/data-table.js

@@ -1,688 +0,0 @@
-import { __decorate } from "tslib";
-import './page-control';
-import '@material/web/checkbox/checkbox';
-import '@material/web/progress/linear-progress';
-import '@material/web/icon/icon';
-import { css, html, LitElement } from 'lit';
-import { property, customElement, query, queryAsync, state } from 'lit/decorators.js';
-import { DataTableItemDropEvent } from './data-table-item';
-import { h1, ellipsis } from '../../titanium/styles/styles';
-import { niceBadgeStyles } from '../styles/nice-badge';
-/**
- * Material design inspired data table with paging, sorting, multi/single select, table actions, selected actions and more!
- *
- * @element titanium-data-table
- *
- * @fires selected-changed - Fired when a row or rows in the data table is selected. detail: array<unknown>
- * @fires titanium-data-table-items-reorder - Fired when table items are resorted by user.
- * @fires paging-changed - Fired when take or page is changed by click or keyboard action.
- *
- * @slot table-actions - item nonspecific table buttons such as add new item
- * @slot filter-button - filter button slot
- * @slot filters - filter chips slot
- * @slot search-button -  search button slot
- * @slot selected-actions -  item specific table buttons such as edit, delete shown when one or more items are selected
- * @slot table-headers - slot for table headers (ex. titanium-data-table-header)
- * @slot items - slot for table rows (ex. titanium-data-table-item)
- * @slot footer - slot for additional footer items. Slotting here overwrites footer-buttons.
- * @slot footer-buttons - slot for footer action buttons
- *
- * @cssprop {Color} [var(--md-sys-color-outline-variant)] - Table border color
- * @cssprop {Color} [--titanium-data-table-font-family=Roboto, Noto, sans-serif] - Set the font family used on the data table and paging control
- */
-let TitaniumDataTable = class TitaniumDataTable extends LitElement {
-    #header_accessor_storage;
-    /**
-     * Table heading / title
-     */
-    get header() { return this.#header_accessor_storage; }
-    set header(value) { this.#header_accessor_storage = value; }
-    #localStorageKey_accessor_storage;
-    /**
-     * Local storage key. Not required if header is static and unique
-     */
-    get localStorageKey() { return this.#localStorageKey_accessor_storage; }
-    set localStorageKey(value) { this.#localStorageKey_accessor_storage = value; }
-    #pageSizes_accessor_storage = [10, 15, 20, 50];
-    /**
-     * Available page sizes
-     */
-    get pageSizes() { return this.#pageSizes_accessor_storage; }
-    set pageSizes(value) { this.#pageSizes_accessor_storage = value; }
-    #defaultPageSize_accessor_storage = 10;
-    /**
-     * The default page size before the user changes it
-     */
-    get defaultPageSize() { return this.#defaultPageSize_accessor_storage; }
-    set defaultPageSize(value) { this.#defaultPageSize_accessor_storage = value; }
-    #count_accessor_storage;
-    /**
-     * Total number of items in all pages.
-     */
-    get count() { return this.#count_accessor_storage; }
-    set count(value) { this.#count_accessor_storage = value; }
-    #items_accessor_storage = [];
-    /**
-     * Current items displayed on the table.
-     */
-    get items() { return this.#items_accessor_storage; }
-    set items(value) { this.#items_accessor_storage = value; }
-    #searchTerm_accessor_storage;
-    /**
-     * Current search term shown in the no result state if no results are found
-     */
-    get searchTerm() { return this.#searchTerm_accessor_storage; }
-    set searchTerm(value) { this.#searchTerm_accessor_storage = value; }
-    #singleSelect_accessor_storage;
-    /**
-     * Limits table selection mode to single-select.  Default is multi-select.
-     */
-    get singleSelect() { return this.#singleSelect_accessor_storage; }
-    set singleSelect(value) { this.#singleSelect_accessor_storage = value; }
-    #disableSelect_accessor_storage = false;
-    /**
-     * Disables all item selection on the data-table.
-     */
-    get disableSelect() { return this.#disableSelect_accessor_storage; }
-    set disableSelect(value) { this.#disableSelect_accessor_storage = value; }
-    #disablePaging_accessor_storage = false;
-    /**
-     * Disables paging.
-     */
-    get disablePaging() { return this.#disablePaging_accessor_storage; }
-    set disablePaging(value) { this.#disablePaging_accessor_storage = value; }
-    #selected_accessor_storage = [];
-    /**
-     * Array of currently selected data table objects
-     */
-    get selected() { return this.#selected_accessor_storage; }
-    set selected(value) { this.#selected_accessor_storage = value; }
-    #itemsContainer_accessor_storage;
-    get itemsContainer() { return this.#itemsContainer_accessor_storage; }
-    set itemsContainer(value) { this.#itemsContainer_accessor_storage = value; }
-    #itemsSlot_accessor_storage;
-    get itemsSlot() { return this.#itemsSlot_accessor_storage; }
-    set itemsSlot(value) { this.#itemsSlot_accessor_storage = value; }
-    #narrow_accessor_storage = false;
-    get narrow() { return this.#narrow_accessor_storage; }
-    set narrow(value) { this.#narrow_accessor_storage = value; }
-    #hasDragItems_accessor_storage;
-    get hasDragItems() { return this.#hasDragItems_accessor_storage; }
-    set hasDragItems(value) { this.#hasDragItems_accessor_storage = value; }
-    #narrowMaxWidth_accessor_storage = 560;
-    get narrowMaxWidth() { return this.#narrowMaxWidth_accessor_storage; }
-    set narrowMaxWidth(value) { this.#narrowMaxWidth_accessor_storage = value; }
-    #isLoading_accessor_storage;
-    get isLoading() { return this.#isLoading_accessor_storage; }
-    set isLoading(value) { this.#isLoading_accessor_storage = value; }
-    #tableHeaders_accessor_storage;
-    get tableHeaders() { return this.#tableHeaders_accessor_storage; }
-    set tableHeaders(value) { this.#tableHeaders_accessor_storage = value; }
-    #checkbox_accessor_storage;
-    get checkbox() { return this.#checkbox_accessor_storage; }
-    set checkbox(value) { this.#checkbox_accessor_storage = value; }
-    #pageControl_accessor_storage;
-    get pageControl() { return this.#pageControl_accessor_storage; }
-    set pageControl(value) { this.#pageControl_accessor_storage = value; }
-    #openCount = 0;
-    /**
-     *  returns internal pageControl's current take
-     */
-    async getTake() {
-        return (await this.pageControl)?.take ?? 0;
-    }
-    /**
-     *  returns internal pageControl's current page
-     */
-    async getPage() {
-        return (await this.pageControl)?.page ?? 0;
-    }
-    /**
-     *  sets internal pageControl's current take
-     */
-    async setTake(take) {
-        const control = await this.pageControl;
-        if (control) {
-            control.take = take;
-        }
-    }
-    /**
-     *  sets internal pageControl's current page
-     */
-    async setPage(page) {
-        const control = await this.pageControl;
-        if (control) {
-            control.page = page;
-        }
-    }
-    /**
-     *  resets internal pageControl's current page to 0
-     */
-    async resetPage() {
-        await this.setPage(0);
-    }
-    async firstUpdated() {
-        if (typeof ResizeObserver === 'function') {
-            const ro = new ResizeObserver((entries) => {
-                for (const entry of entries) {
-                    const cr = entry.contentRect;
-                    this.narrow = cr.width < this.narrowMaxWidth;
-                    this.updateChildrenIsNarrow();
-                }
-            });
-            ro.observe(this);
-        }
-        else {
-            const mql = window.matchMedia('(max-width: 768px)');
-            mql.addEventListener('change', (e) => {
-                this.narrow = e.matches;
-                this.updateChildrenIsNarrow();
-            });
-            this.narrow = mql.matches;
-            this.updateChildrenIsNarrow();
-        }
-        this.addEventListener(DataTableItemDropEvent.eventType, (e) => {
-            e.stopPropagation();
-            //HoverIndex cannot be dropped beyond the length of the array
-            const hoverIndex = Math.min(e.hoverIndex, this.items.length - 1);
-            //Ignore if item goes back to where it started
-            if (hoverIndex !== e.originIndex) {
-                const temp = this.items[e.originIndex];
-                this.items.splice(e.originIndex, 1);
-                this.items.splice(hoverIndex, 0, temp);
-                /**
-                 * @ignore
-                 */
-                this.dispatchEvent(new DataTableItemsReorderedEvent());
-            }
-        });
-        //When slotted in items change, sync the narrow prop
-        this.tableHeaders.addEventListener('slotchange', () => this.updateChildrenIsNarrow());
-        this.itemsSlot.addEventListener('slotchange', () => this.updateChildrenIsNarrow());
-        await (await this.pageControl)?.updateComplete;
-    }
-    updateChildrenIsNarrow() {
-        this.hasDragItems = this.itemsSlot.assignedElements().some((o) => o.enableDrag);
-        this.itemsSlot.assignedElements().forEach((o) => (o.narrow = this.narrow));
-        this.tableHeaders.assignedElements().forEach((o) => (o.narrow = this.narrow));
-    }
-    /**
-     *  de-select all table items and clear this.selected
-     */
-    clearSelection() {
-        this.#deselectAll();
-        // Ensure the collection is empty, deselect can cause a race condition
-        // between deselecting and UI drawing new items.
-        if (this.selected.length > 0) {
-            this.selected = [];
-            this.#notifySelectedChanged();
-        }
-    }
-    updated(changedProps) {
-        if (changedProps.has('items') && changedProps.get('items') !== this.items) {
-            // Clear selection when items array changes.
-            this.clearSelection();
-        }
-    }
-    #notifySelectedChanged() {
-        this.dispatchEvent(new CustomEvent('selected-changed', { composed: true, detail: this.selected }));
-    }
-    /**
-     *  display linear progress bar while promise is active
-     */
-    async loadWhile(promise) {
-        this.isLoading = true;
-        this.#openCount++;
-        try {
-            await promise;
-        }
-        finally {
-            this.#openCount--;
-            if (this.#openCount === 0) {
-                this.isLoading = false;
-            }
-        }
-    }
-    #deselectAll() {
-        this.#getTableItems().forEach((o) => o.deselect());
-    }
-    /**
-     *  select all table items
-     */
-    selectAll() {
-        if (!this.singleSelect) {
-            this.#getTableItems().forEach((o) => o.select());
-        }
-    }
-    #getTableItems() {
-        return this.itemsSlot.assignedElements().filter((o) => typeof o.select === 'function' && typeof o.deselect === 'function');
-    }
-    static { this.styles = [
-        h1,
-        ellipsis,
-        niceBadgeStyles,
-        css `
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        border: 1px solid var(--md-sys-color-outline-variant);
-        background-color: var(--md-sys-color-surface);
-        color: var(--md-sys-color-on-surface);
-        border-radius: 8px;
-        font-family: var(--titanium-data-table-font-family, Roboto, Noto, sans-serif);
-        --titanium-page-control-font-family: var(--titanium-data-table-font-family, Roboto, Noto, sans-serif);
-        -webkit-font-smoothing: antialiased;
-      }
-
-      header {
-        display: flex;
-        flex-direction: column;
-        padding-bottom: 12px;
-        gap: 12px;
-        border-bottom: 1px solid var(--md-sys-color-outline-variant);
-        position: relative;
-      }
-
-      /* HEADER ROW ONE */
-
-      section[row-one] {
-        display: grid;
-        grid: 'head menu' / 1fr auto;
-        gap: 8px;
-        padding: 12px 12px 0 12px;
-      }
-
-      section[row-one] div[head] {
-        grid-area: head;
-      }
-
-      section[row-one] div[menu] {
-        grid-area: menu;
-      }
-
-      div[search] {
-        grid-area: search;
-      }
-
-      /* HEADER ROW TWO */
-
-      section[row-two] {
-        display: grid;
-        grid: 'search-filter add' / 1fr auto;
-        gap: 8px;
-        padding: 0 12px 0 20px;
-      }
-
-      :host([narrow]) section[row-two] {
-        grid:
-          'search-filter '
-          'add' / auto;
-      }
-
-      section[row-two] div[search-filter] {
-        grid-area: search-filter;
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 8px;
-      }
-
-      section[row-two] div[add-button] {
-        grid-area: add;
-        justify-self: end;
-        align-self: end;
-      }
-
-      h1 {
-        padding: 12px 12px 0 12px;
-      }
-
-      selected-actions {
-        display: grid;
-        gap: 6px 24px;
-        grid: 'selected-text buttons';
-        background-color: var(--md-sys-color-secondary-container);
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        right: 0px;
-        bottom: 0px;
-        margin: 0 !important;
-        padding: 0 12px 12px 24px;
-        align-content: end;
-        z-index: 1;
-      }
-
-      selected-actions h2 {
-        color: var(--md-sys-color-on-secondary-container);
-        font-size: 18px;
-        font-weight: 400;
-        align-self: end;
-      }
-
-      selected-actions div[buttons] {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 0 8px;
-        justify-content: flex-end;
-      }
-
-      table-header {
-        display: flex;
-        flex-direction: row;
-        gap: 16px;
-        min-height: 48px;
-        border-bottom: 1px solid var(--md-sys-color-outline-variant);
-      }
-
-      table-header ::slotted(titanium-data-table-header:last-of-type) {
-        padding-right: 24px;
-      }
-
-      :host([has-drag-items]) table-header ::slotted(titanium-data-table-header:last-of-type) {
-        padding-right: 40px;
-      }
-
-      md-linear-progress {
-        width: 100%;
-        margin-top: -4px;
-      }
-
-      main {
-        position: relative;
-        min-height: 48px;
-      }
-
-      content-veil {
-        display: none;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: var(--md-sys-color-scrim);
-        opacity: 0;
-        -webkit-transition: opacity 75ms linear;
-        -o-transition: opacity 75ms linear;
-        transition: opacity 75ms linear;
-        z-index: 6;
-      }
-
-      content-veil[opened] {
-        opacity: 0.12;
-        display: block;
-      }
-
-      table-message {
-        display: flex;
-        place-items: center;
-        justify-content: center;
-        gap: 8px;
-        padding: 64px;
-
-        font-size: 14px;
-        z-index: 10;
-        line-height: 20px;
-        border-bottom: 1px solid var(--md-sys-color-outline-variant);
-      }
-
-      table-message md-icon {
-        align-self: center;
-        flex-shrink: 0;
-      }
-
-      footer {
-        display: grid;
-        grid: 'controls footer-slot' / minmax(400px, 1fr) auto;
-        gap: 24px;
-        padding: 12px;
-        align-items: center;
-        margin-top: -1px;
-        border-top: 1px solid var(--md-sys-color-outline-variant);
-      }
-
-      titanium-page-control {
-        grid-area: controls;
-        margin-left: 12px;
-        justify-self: start;
-      }
-
-      div[footer] {
-        justify-self: end;
-      }
-
-      :host([narrow]) footer {
-        grid:
-          'controls'
-          'footer-slot' / auto;
-      }
-
-      :host([disable-paging]) footer {
-        grid: 'footer-slot' / auto;
-      }
-
-      footer-buttons {
-        display: flex;
-        gap: 12px;
-        flex-wrap: wrap;
-        align-items: flex-end;
-      }
-
-      div[add-button] {
-        display: flex;
-        align-items: center;
-      }
-
-      div[items-slot] {
-        position: relative;
-      }
-
-      md-checkbox {
-        flex-shrink: 0;
-        align-self: center;
-        margin: 0 14px 0 20px;
-      }
-
-      :host([disable-select]) table-header ::slotted(titanium-data-table-header:first-of-type) {
-        padding-left: 24px;
-      }
-
-      :host(:not([disable-select])[single-select]) table-header {
-        padding-left: 68px;
-      }
-
-      [hidden] {
-        display: none !important;
-      }
-    `,
-    ]; }
-    render() {
-        return html `
-      <header part="header">
-        <slot name="header">
-          <section row-one>
-            <div head ellipsis part="table-header-text-container">
-              <slot name="table-header-text"> <h1 ellipsis>${this.header}</h1></slot>
-            </div>
-            <div menu part="table-actions-container">
-              <slot name="table-actions"></slot>
-            </div>
-          </section>
-          <section row-two>
-            <div search-filter part="filters-container">
-              <slot name="search-button"></slot>
-              <slot name="filter-button"></slot>
-              <slot name="filters"></slot>
-            </div>
-            <div add-button part="add-button-container">
-              <slot name="add-button"></slot>
-            </div>
-          </section>
-        </slot>
-
-        <selected-actions ?hidden=${this.selected.length === 0}>
-          <h2 ellipsis>${this.selected.length} item${this.selected.length > 1 ? 's' : ''} selected</h2>
-          <div buttons part="selected-actions-container">
-            <slot name="selected-actions"></slot>
-          </div>
-        </selected-actions>
-      </header>
-
-      <table-container
-        @titanium-data-table-item-selected-changed=${(e) => {
-            e.stopPropagation();
-            const dataTableItem = e.target;
-            if (dataTableItem.selected) {
-                if (this.singleSelect) {
-                    this.#getTableItems()
-                        .filter((o) => o.item !== dataTableItem.item)
-                        .forEach((o) => o.deselect());
-                }
-                this.selected.push(dataTableItem.item);
-                this.requestUpdate();
-                this.#notifySelectedChanged();
-            }
-            else {
-                this.selected.splice(this.selected.indexOf(dataTableItem.item), 1);
-                this.requestUpdate();
-                this.#notifySelectedChanged();
-            }
-        }}
-      >
-        <table-header part="table-header-container">
-          ${this.disableSelect || this.singleSelect
-            ? ''
-            : html `
-                <md-checkbox
-                  title="${this.selected.length > 0 ? 'Deselect' : 'Select'} all checkboxes"
-                  aria-label="${this.selected.length > 0 ? 'Deselect' : 'Select'} all checkboxes"
-                  ?checked=${this.selected.length > 0}
-                  ?indeterminate=${this.selected.length !== 0 && this.selected.length !== this.items.length}
-                  ?disabled=${this.items.length === 0}
-                  @click=${() => {
-                if (this.selected.length > 0) {
-                    this.#deselectAll();
-                }
-                else {
-                    this.selectAll();
-                }
-                this.checkbox.focus();
-            }}
-                ></md-checkbox>
-              `}
-          <slot name="table-headers"></slot>
-        </table-header>
-        <md-linear-progress ?hidden=${!this.isLoading} ?closed=${!this.isLoading} indeterminate></md-linear-progress>
-
-        <main>
-          <div items-slot part="items-container">
-            <slot name="items"></slot>
-          </div>
-          <table-message ?hidden=${this.isLoading || this.items.length > 0}>
-            <md-icon>info</md-icon>
-            ${this.searchTerm === '' || typeof this.searchTerm === 'undefined' || this.searchTerm === null
-            ? 'No results'
-            : `Your search of '${this.searchTerm}' did not match any results`}</table-message
-          >
-          <table-message ?hidden=${!this.isLoading || this.items.length !== 0}> Loading data... </table-message>
-          <content-veil ?opened=${this.isLoading}></content-veil>
-        </main>
-      </table-container>
-      <footer part="footer-container">
-        <slot name="footer">
-          ${this.disablePaging
-            ? ''
-            : html `
-                <titanium-page-control
-                  label="Rows per page"
-                  ?disabled=${this.isLoading}
-                  .count=${this.count}
-                  .pageSizes=${this.pageSizes}
-                  .defaultPageSize=${this.defaultPageSize}
-                  .localStorageKey=${this.localStorageKey || `${this.header}-take`}
-                  @action=${() => {
-                this.dispatchEvent(new CustomEvent('paging-changed', { composed: true }));
-            }}
-                ></titanium-page-control>
-              `}
-          <div footer>
-            <footer-buttons><slot name="footer-buttons"></slot></footer-buttons>
-          </div>
-        </slot>
-      </footer>
-    `;
-    }
-};
-__decorate([
-    property({ type: String })
-], TitaniumDataTable.prototype, "header", null);
-__decorate([
-    property({ type: String, attribute: 'local-storage-key' })
-], TitaniumDataTable.prototype, "localStorageKey", null);
-__decorate([
-    property({ type: Array })
-], TitaniumDataTable.prototype, "pageSizes", null);
-__decorate([
-    property({ type: Number, attribute: 'default-page-size' })
-], TitaniumDataTable.prototype, "defaultPageSize", null);
-__decorate([
-    property({ type: Number })
-], TitaniumDataTable.prototype, "count", null);
-__decorate([
-    property({ type: Array })
-], TitaniumDataTable.prototype, "items", null);
-__decorate([
-    property({ type: String })
-], TitaniumDataTable.prototype, "searchTerm", null);
-__decorate([
-    property({ type: Boolean, attribute: 'single-select', reflect: true })
-], TitaniumDataTable.prototype, "singleSelect", null);
-__decorate([
-    property({ type: Boolean, attribute: 'disable-select' })
-], TitaniumDataTable.prototype, "disableSelect", null);
-__decorate([
-    property({ type: Boolean, attribute: 'disable-paging', reflect: true })
-], TitaniumDataTable.prototype, "disablePaging", null);
-__decorate([
-    property({ type: Array })
-], TitaniumDataTable.prototype, "selected", null);
-__decorate([
-    query('div[items-slot]')
-], TitaniumDataTable.prototype, "itemsContainer", null);
-__decorate([
-    query('slot[name="items"]')
-], TitaniumDataTable.prototype, "itemsSlot", null);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'narrow' })
-], TitaniumDataTable.prototype, "narrow", null);
-__decorate([
-    property({ type: Boolean, attribute: 'has-drag-items', reflect: true })
-], TitaniumDataTable.prototype, "hasDragItems", null);
-__decorate([
-    property({ type: Number, attribute: 'narrow-max-width', reflect: true })
-], TitaniumDataTable.prototype, "narrowMaxWidth", null);
-__decorate([
-    state()
-], TitaniumDataTable.prototype, "isLoading", null);
-__decorate([
-    query('slot[name="table-headers"]')
-], TitaniumDataTable.prototype, "tableHeaders", null);
-__decorate([
-    query('md-checkbox')
-], TitaniumDataTable.prototype, "checkbox", null);
-__decorate([
-    queryAsync('titanium-page-control')
-], TitaniumDataTable.prototype, "pageControl", null);
-TitaniumDataTable = __decorate([
-    customElement('titanium-data-table')
-], TitaniumDataTable);
-export { TitaniumDataTable };
-export class DataTableItemsReorderedEvent extends Event {
-    static { this.eventType = 'titanium-data-table-items-reorder'; }
-    constructor() {
-        super(DataTableItemsReorderedEvent.eventType);
-    }
-}
-//# sourceMappingURL=data-table.js.map