@leavittsoftware/web 1.0.0 → 1.2.0

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

@@ -101,7 +101,7 @@ let TitaniumDataTable = class TitaniumDataTable extends LitElement {
     }
     async firstUpdated() {
         if (typeof ResizeObserver === 'function') {
-            const ro = new ResizeObserver(entries => {
+            const ro = new ResizeObserver((entries) => {
                 for (const entry of entries) {
                     const cr = entry.contentRect;
                     this.narrow = cr.width < 560;
@@ -112,7 +112,7 @@ let TitaniumDataTable = class TitaniumDataTable extends LitElement {
         }
         else {
             const mql = window.matchMedia('(max-width: 768px)');
-            mql.addEventListener('change', e => {
+            mql.addEventListener('change', (e) => {
                 this.narrow = e.matches;
                 this.updateChildrenIsNarrow();
             });
@@ -143,8 +143,8 @@ let TitaniumDataTable = class TitaniumDataTable extends LitElement {
      * @ignore
      */
     updateChildrenIsNarrow() {
-        this.itemsSlot.assignedElements().forEach(o => (o.narrow = this.narrow));
-        this.tableHeaders.assignedElements().forEach(o => (o.narrow = this.narrow));
+        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
@@ -184,290 +184,290 @@ let TitaniumDataTable = class TitaniumDataTable extends LitElement {
         }
     }
     #deselectAll() {
-        this.#getTableItems().forEach(o => o.deselect());
+        this.#getTableItems().forEach((o) => o.deselect());
     }
     /**
      *  select all table items
      */
     selectAll() {
         if (!this.singleSelect) {
-            this.#getTableItems().forEach(o => o.select());
+            this.#getTableItems().forEach((o) => o.select());
         }
     }
     #getTableItems() {
-        return this.itemsSlot.assignedElements().filter(o => typeof o.select === 'function' && typeof o.deselect === 'function');
+        return this.itemsSlot.assignedElements().filter((o) => typeof o.select === 'function' && typeof o.deselect === 'function');
     }
     static { this.styles = [
         h1,
         ellipsis,
-        css `
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        border: 1px solid var(--md-sys-color-outline-variant);
-        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;
-      }
-
-      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;
-        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;
-      }
-
-      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: 57px;
-      }
-
-      [hidden] {
-        display: none !important;
-      }
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        border: 1px solid var(--md-sys-color-outline-variant);
+        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;
+      }
+
+      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;
+        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;
+      }
+
+      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: 57px;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
     `,
     ]; }
     render() {
-        return html `
-      <header part="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>
-
-        <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 => {
+        return html `
+      <header part="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>
+
+        <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());
+                        .filter((o) => o.item !== dataTableItem.item)
+                        .forEach((o) => o.deselect());
                 }
                 this.selected.push(dataTableItem.item);
                 this.requestUpdate();
@@ -478,63 +478,63 @@ let TitaniumDataTable = class TitaniumDataTable extends LitElement {
                 this.requestUpdate();
                 this.#notifySelectedChanged();
             }
-        }}
-      >
-        <table-header part="table-header-container">
+        }}
+      >
+        <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}
+            : 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}
                   @click=${() => {
                 this.selected.length > 0 ? this.#deselectAll() : 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>
+            }}
+                ></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">
+            : `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.header}-take"
+            : html `
+                <titanium-page-control
+                  label="Rows per page"
+                  ?disabled=${this.isLoading}
+                  .count=${this.count}
+                  .pageSizes=${this.pageSizes}
+                  .defaultPageSize=${this.defaultPageSize}
+                  .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>
+            }}
+                ></titanium-page-control>
+              `}
+          <div footer>
+            <footer-buttons><slot name="footer-buttons"></slot></footer-buttons>
+          </div>
+        </slot>
+      </footer>
     `;
     }
 };