@leavittsoftware/web 5.14.3 → 5.15.0

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

@@ -0,0 +1,503 @@
+import { __decorate } from "tslib";
+import '@material/web/checkbox/checkbox';
+import '@material/web/icon/icon';
+import '@material/web/focus/md-focus-ring';
+import '@material/web/ripple/ripple';
+import { css, html, LitElement, nothing } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { a } from '@leavittsoftware/web/titanium/styles/a';
+import { styleMap } from 'lit/directives/style-map.js';
+import { LoadWhile } from '@leavittsoftware/web/titanium/helpers/load-while';
+let TitaniumDataTableCore = class TitaniumDataTableCore extends LoadWhile(LitElement) {
+    #items_accessor_storage = [];
+    /**
+     * Current items displayed on the table.
+     */
+    get items() { return this.#items_accessor_storage; }
+    set items(value) { this.#items_accessor_storage = value; }
+    #tableMetaData_accessor_storage = null;
+    get tableMetaData() { return this.#tableMetaData_accessor_storage; }
+    set tableMetaData(value) { this.#tableMetaData_accessor_storage = value; }
+    #tableStyles_accessor_storage = null;
+    get tableStyles() { return this.#tableStyles_accessor_storage; }
+    set tableStyles(value) { this.#tableStyles_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #stickyHeader_accessor_storage = false;
+    get stickyHeader() { return this.#stickyHeader_accessor_storage; }
+    set stickyHeader(value) { this.#stickyHeader_accessor_storage = value; }
+    #sort_accessor_storage = [];
+    get sort() { return this.#sort_accessor_storage; }
+    set sort(value) { this.#sort_accessor_storage = value; }
+    #selectionMode_accessor_storage = 'none';
+    /**
+     * Limits table selection mode to single-select.  Default is multi-select.
+     */
+    get selectionMode() { return this.#selectionMode_accessor_storage; }
+    set selectionMode(value) { this.#selectionMode_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; }
+    updated(changedProps) {
+        if (changedProps.has('items') && changedProps.get('items') !== this.items) {
+            // Clear selection when items array changes.
+            this.deselectAll();
+        }
+    }
+    selectAll() {
+        if (this.selectionMode === 'multi') {
+            this.selected = this.items;
+            this.#notifySelectedChanged();
+        }
+    }
+    deselectAll() {
+        if (this.selected.length > 0) {
+            this.selected = [];
+            this.#notifySelectedChanged();
+        }
+    }
+    #notifySelectedChanged() {
+        this.dispatchEvent(new Event('selected-changed', { composed: true }));
+    }
+    static { this.styles = [
+        a,
+        css `
+      :host {
+        display: grid;
+
+        --titanium-data-table-core-background-color: var(--md-sys-color-surface-container-lowest, #1d1b20);
+        background-color: var(--titanium-data-table-core-background-color);
+        overflow: auto;
+        z-index: 0;
+      }
+
+      table {
+        border-spacing: 0;
+        border-collapse: separate;
+
+        background-color: inherit;
+        align-self: start;
+      }
+
+      :host([selection-mode='none']) table {
+        thead {
+          button {
+            padding-left: 16px;
+          }
+        }
+
+        tbody {
+          tr {
+            td:first-of-type {
+              content-container {
+                padding-left: 16px;
+              }
+            }
+          }
+        }
+      }
+
+      content-container {
+        display: grid;
+        height: 100%;
+        box-sizing: border-box;
+        background-color: var(--titanium-data-table-core-background-color);
+      }
+
+      :host([sticky-header]) {
+        thead th:not([checkbox]) {
+          position: sticky;
+          top: 0;
+          z-index: 3;
+        }
+      }
+
+      table[has-selected-items] {
+        tr {
+          cursor: pointer;
+        }
+      }
+
+      thead {
+        tr {
+          th[checkbox] {
+            width: 48px;
+            height: 48px;
+            padding: 0;
+            position: sticky;
+            left: 0;
+            top: 0;
+            z-index: 4;
+
+            content-container {
+              md-checkbox {
+                padding: 15px;
+                --md-checkbox-container-shape: 6px;
+                --md-focus-ring-shape: 12px;
+                --md-checkbox-state-layer-shape: 12px;
+                --md-checkbox-state-layer-size: 32px;
+              }
+
+              md-checkbox::part(focus-ring) {
+                height: 32px;
+                width: 32px;
+              }
+            }
+          }
+
+          th {
+            border-bottom: 1px var(--md-sys-color-outline-variant) solid;
+            padding: 0;
+
+            button {
+              display: grid;
+              grid: 'text icon blank' / auto auto 1fr;
+              width: 100%;
+              align-items: center;
+
+              position: relative;
+              --md-focus-ring-shape: 0;
+              border-radius: 0;
+
+              font-family: var(--titanium-data-table-font-family, Roboto, Noto, sans-serif);
+              font-size: 14px;
+
+              line-height: 28px;
+              font-weight: 500;
+              height: 100%;
+              padding: 12px 6px 12px 6px;
+              margin: 0;
+
+              /* override default button styles */
+              text-align: inherit;
+
+              background-color: var(--titanium-data-table-core-background-color);
+              color: inherit;
+
+              border: none;
+              outline: none;
+              height: 48px;
+
+              white-space: nowrap;
+
+              icon-container {
+                display: grid;
+                position: relative;
+                margin-left: 4px;
+                visibility: hidden;
+
+                height: 18px;
+                width: 18px;
+
+                div[sort-number] {
+                  font-size: 8px;
+                  line-height: 8px;
+                  position: absolute;
+                  bottom: -2px;
+                  right: 0;
+                }
+
+                md-icon {
+                  display: block;
+                  height: 18px;
+                  width: 18px;
+                  font-size: 18px;
+
+                  transform-origin: center;
+                  transition: transform 150ms ease;
+                }
+              }
+            }
+
+            button[active-sort][sort-direction='asc'] md-icon {
+              transform: rotate(-180deg);
+            }
+
+            button[active-sort] icon-container,
+            button[active-sort] icon-container {
+              visibility: visible;
+            }
+
+            button:not([disabled]) {
+              cursor: pointer;
+            }
+
+            button:focus,
+            button:active {
+              outline: none;
+              box-shadow: none;
+            }
+          }
+        }
+      }
+
+      tbody {
+        @-moz-document url-prefix() {
+          /* hack: FF to fill 100% in a TD */
+          tr {
+            height: 1px !important;
+          }
+        }
+
+        tr {
+          @-moz-document url-prefix() {
+            /* hack: FF to fill 100% in a TD */
+            td {
+              height: 100% !important;
+            }
+          }
+
+          td {
+            background-color: var(--titanium-data-table-core-background-color);
+
+            border-bottom: 1px var(--md-sys-color-outline-variant) solid;
+            padding: 0;
+            box-sizing: border-box;
+            /* hack: Chrome/Safari to fill 100% in a TD */
+            height: 1px;
+
+            content-container {
+              font-size: 14px;
+              line-height: 18px;
+              font-weight: 400;
+              padding: 6px 6px 6px 6px;
+              align-items: center;
+              margin: 0;
+            }
+          }
+
+          td[checkbox] {
+            width: 48px;
+            position: sticky;
+            left: 0;
+            content-container {
+              padding: 0;
+
+              display: grid;
+              md-checkbox {
+                padding: 15px;
+                --md-checkbox-container-shape: 6px;
+                --md-focus-ring-shape: 12px;
+                --md-checkbox-state-layer-shape: 12px;
+                --md-checkbox-state-layer-size: 32px;
+              }
+              md-checkbox::part(focus-ring) {
+                height: 32px;
+                width: 32px;
+              }
+            }
+          }
+        }
+
+        tr[selected] content-container,
+        tr[selected] td {
+          background-color: var(--md-sys-color-secondary-container);
+        }
+
+        tr[link-url] {
+          cursor: pointer;
+        }
+      }
+
+      :host(:not([disabled])) tbody tr:hover td content-container {
+        background-color: rgb(from var(--md-sys-color-on-surface, #1d1b20) r g b / 0.08);
+      }
+
+      td[table-message]:hover,
+      td[table-message] {
+        vertical-align: middle;
+        border: none !important;
+        opacity: 0.8;
+        font-size: 14px;
+        line-height: 14px;
+        padding: 12px 6px;
+      }
+
+      image-row {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+
+        img {
+          height: 32px;
+          width: 32px;
+          image-rendering: -webkit-optimize-contrast;
+        }
+
+        [supporting-text] {
+          font-size: 12px;
+          line-height: 14px;
+          opacity: 0.8;
+        }
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <style>
+        ${this.tableStyles ? this.tableStyles : nothing}
+      </style>
+      <table part="table" ?has-selected-items=${this.selected.length > 0}>
+        <thead>
+          <tr>
+            ${this.selectionMode !== 'none'
+            ? html `
+                  <th checkbox>
+                    <content-container>
+                      ${this.selectionMode === 'multi'
+                ? html ` <md-checkbox
+                            title="${this.selected.length > 0 ? 'Deselect' : 'Select'} all"
+                            ?checked=${this.selected.length > 0}
+                            ?indeterminate=${this.selected.length !== 0 && this.selected.length !== this.items.length}
+                            ?disabled=${this.items.length === 0}
+                            @click=${(e) => {
+                    if (this.selected.length > 0) {
+                        this.deselectAll();
+                    }
+                    else {
+                        this.selectAll();
+                    }
+                    e.target?.focus();
+                }}
+                          ></md-checkbox>`
+                : nothing}
+                    </content-container>
+                  </th>
+                `
+            : nothing}
+            ${repeat(this.tableMetaData?.itemMetaData ?? [], (metaData) => metaData.key, (metaData) => {
+            const sortSpecification = this.sort.find((s) => s.key === metaData.key);
+            const sortIndex = this.sort.findIndex((s) => s.key === metaData.key);
+            const width = this.tableMetaData?.itemMetaData?.find((o) => o.key === metaData.key)?.width;
+            return html `<th style=${width ? styleMap({ minWidth: width }) : nothing}>
+                  <button
+                    ?active-sort=${sortIndex !== -1}
+                    sort-direction=${sortSpecification?.direction || nothing}
+                    ?disabled=${this.disabled || metaData.disableSort}
+                    @click=${() => {
+                this.sort = [{ key: metaData.key, direction: this.sort?.[0]?.direction === 'asc' ? 'desc' : 'asc' }];
+                this.dispatchEvent(new Event('sort-changed'));
+            }}
+                  >
+                    <span>${metaData.friendlyName ?? '-'}</span>
+                    <icon-container
+                      ><md-icon>arrow_downward</md-icon>
+                      ${sortIndex !== -1 && this.sort.length > 1 ? html `<div sort-number>${sortIndex + 1}</div>` : nothing}
+                    </icon-container>
+                    <md-ripple ?disabled=${this.disabled || metaData.disableSort}></md-ripple>
+                    <md-focus-ring inward></md-focus-ring>
+                  </button>
+                </th>`;
+        })}
+          </tr>
+        </thead>
+        <tbody>
+          ${!this.isLoading && this.items.length === 0
+            ? html `
+                <tr>
+                  ${this.selectionMode !== 'none' ? html `<td table-message></td>` : nothing}
+                  <td table-message colspan=${this.tableMetaData?.itemMetaData?.length ?? 0}>No results</td>
+                </tr>
+              `
+            : nothing}
+          ${repeat(this.items ?? [], (item) => this.tableMetaData?.uniqueKey(item) ?? '', (item) => {
+            return html `
+                <tr
+                  ?link-url=${!!this.tableMetaData?.itemLinkUrl?.(item)}
+                  ?selected=${this.selected.includes(item)}
+                  @click=${() => {
+                if (this.selected.length === 0) {
+                    if (this.tableMetaData?.itemLinkUrl) {
+                        this.dispatchEvent(new CustomEvent('change-route', { bubbles: true, composed: true, detail: this.tableMetaData?.itemLinkUrl?.(item) ?? '' }));
+                    }
+                }
+                else if (this.selectionMode === 'multi') {
+                    if (this.selected.includes(item)) {
+                        this.selected.splice(this.selected.indexOf(item), 1);
+                    }
+                    else {
+                        this.selected.push(item);
+                    }
+                    this.requestUpdate('selected');
+                    this.#notifySelectedChanged();
+                }
+            }}
+                >
+                  ${this.selectionMode !== 'none'
+                ? html `<td checkbox>
+                        <content-container>
+                          <md-checkbox
+                            @click=${(e) => e.stopPropagation()}
+                            ?checked=${this.selected.includes(item)}
+                            @change=${() => {
+                    if (this.selected.includes(item)) {
+                        this.selected.splice(this.selected.indexOf(item), 1);
+                    }
+                    else {
+                        this.selected.push(item);
+                    }
+                    this.requestUpdate('selected');
+                    this.#notifySelectedChanged();
+                }}
+                            ?disabled=${this.disabled}
+                          ></md-checkbox>
+                        </content-container>
+                      </td>`
+                : nothing}
+                  ${repeat(this.tableMetaData?.itemMetaData?.map((o) => o.key) ?? [], (key) => key, (key) => {
+                return html `<td>
+                        <content-container>${this.tableMetaData?.itemMetaData?.find((o) => o.key === key)?.render(item) ?? '-'}</content-container>
+                      </td>`;
+            })}
+                </tr>
+              `;
+        })}
+        </tbody>
+      </table>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], TitaniumDataTableCore.prototype, "items", null);
+__decorate([
+    property({ type: Object })
+], TitaniumDataTableCore.prototype, "tableMetaData", null);
+__decorate([
+    property({ type: Object })
+], TitaniumDataTableCore.prototype, "tableStyles", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TitaniumDataTableCore.prototype, "disabled", null);
+__decorate([
+    property({ type: Boolean, attribute: 'sticky-header', reflect: true })
+], TitaniumDataTableCore.prototype, "stickyHeader", null);
+__decorate([
+    property({ type: Array })
+], TitaniumDataTableCore.prototype, "sort", null);
+__decorate([
+    property({ type: String, attribute: 'selection-mode', reflect: true })
+], TitaniumDataTableCore.prototype, "selectionMode", null);
+__decorate([
+    property({ type: Array })
+], TitaniumDataTableCore.prototype, "selected", null);
+TitaniumDataTableCore = __decorate([
+    customElement('titanium-data-table-core')
+], TitaniumDataTableCore);
+export { TitaniumDataTableCore };
+export class DataTableItemsReorderedEvent extends Event {
+    static { this.eventType = 'titanium-data-table-items-reorder'; }
+    constructor() {
+        super(DataTableItemsReorderedEvent.eventType);
+    }
+}
+//# sourceMappingURL=data-table-core.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-core.js","sourceRoot":"","sources":["data-table-core.ts"],"names":[],"mappings":"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"}

package/titanium/drawer/drawer.js

@@ -166,6 +166,8 @@ let TitaniumDrawer = class TitaniumDrawer extends LitElement {
 
     main {
       grid-area: content;
+      display: grid;
+      align-content: start;
       scrollbar-color: var(--md-sys-color-surface-container-highest) transparent;
       scrollbar-width: thin;
       overflow-y: auto;
@@ -294,8 +296,6 @@ let TitaniumDrawer = class TitaniumDrawer extends LitElement {
 
     @supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
       dialog::backdrop {
-        background-color: rgba(255, 255, 255, 0.7);
-        -webkit-backdrop-filter: blur(3px);
         backdrop-filter: blur(3px);
         /* Not supported yet */
         transition: backdrop-filter 0.5s ease;

package/titanium/helpers/find-scrollable-parent.d.ts

@@ -0,0 +1,2 @@
+export declare function findScrollableParent(element: Element): Element | null;
+//# sourceMappingURL=find-scrollable-parent.d.ts.map

package/titanium/helpers/find-scrollable-parent.js

@@ -0,0 +1,28 @@
+export function findScrollableParent(element) {
+    let current = element;
+    while (current) {
+        // Check if current element has overflow-y: auto
+        const computedStyle = window.getComputedStyle(current);
+        if (computedStyle.overflowY === 'auto' || computedStyle.overflowY === 'scroll') {
+            return current;
+        }
+        // Check if current element is in a shadow DOM
+        if (current.getRootNode() instanceof ShadowRoot) {
+            const shadowRoot = current.getRootNode();
+            const host = shadowRoot.host;
+            // Check the shadow host
+            const hostStyle = window.getComputedStyle(host);
+            if (hostStyle.overflowY === 'auto' || hostStyle.overflowY === 'scroll') {
+                return host;
+            }
+            // Continue walking up from the shadow host
+            current = host.parentElement;
+        }
+        else {
+            // Regular light DOM, walk up normally
+            current = current.parentElement;
+        }
+    }
+    return null;
+}
+//# sourceMappingURL=find-scrollable-parent.js.map

package/titanium/helpers/find-scrollable-parent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"find-scrollable-parent.js","sourceRoot":"","sources":["find-scrollable-parent.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,oBAAoB,CAAC,OAAgB;IACnD,IAAI,OAAO,GAAmB,OAAO,CAAC;IAEtC,OAAO,OAAO,EAAE,CAAC;QACf,gDAAgD;QAChD,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;QACvD,IAAI,aAAa,CAAC,SAAS,KAAK,MAAM,IAAI,aAAa,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC;YAC/E,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,8CAA8C;QAC9C,IAAI,OAAO,CAAC,WAAW,EAAE,YAAY,UAAU,EAAE,CAAC;YAChD,MAAM,UAAU,GAAG,OAAO,CAAC,WAAW,EAAgB,CAAC;YACvD,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC;YAE7B,wBAAwB;YACxB,MAAM,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;YAChD,IAAI,SAAS,CAAC,SAAS,KAAK,MAAM,IAAI,SAAS,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC;gBACvE,OAAO,IAAI,CAAC;YACd,CAAC;YAED,2CAA2C;YAC3C,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC;QAC/B,CAAC;aAAM,CAAC;YACN,sCAAsC;YACtC,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC;QAClC,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}

package/titanium/search-input/filled-search-input.d.ts

@@ -0,0 +1,15 @@
+import '@material/web/textfield/filled-text-field';
+import '@material/web/icon/icon';
+import '@material/web/iconbutton/icon-button';
+import { LitElement } from 'lit';
+export default class TitaniumFilledSearchInput extends LitElement {
+    accessor value: string;
+    accessor placeholder: string;
+    accessor autocomplete: string;
+    accessor spellcheck: boolean;
+    accessor disabled: boolean;
+    private accessor textField;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=filled-search-input.d.ts.map