@leavittsoftware/web 8.7.2 → 8.7.3

package/titanium/data-table/data-table-core-settings-sort-dialog.d.ts

@@ -0,0 +1,22 @@
+import '@material/web/dialog/dialog';
+import '@material/web/button/text-button';
+import '@material/web/button/filled-tonal-button';
+import '@material/web/icon/icon';
+import '@material/web/menu/menu';
+import '@material/web/menu/menu-item';
+import './data-table-core-settings-sort-item';
+import { LitElement } from 'lit';
+import { TitaniumDataTableCoreMetaData, TitaniumDataTableCoreSortItem } from './data-table-core';
+export type CloseReason = 'apply' | 'cancel' | 'navigation-close';
+export declare class TitaniumDataTableCoreSettingsSortDialog<T extends object> extends LitElement {
+    #private;
+    accessor tableMetaData: TitaniumDataTableCoreMetaData<T> | null;
+    private accessor dialog;
+    private accessor addMenu;
+    accessor sort: TitaniumDataTableCoreSortItem[];
+    show(sort: TitaniumDataTableCoreSortItem[]): Promise<CloseReason>;
+    hasChanges(sortA: TitaniumDataTableCoreSortItem[], sortB: TitaniumDataTableCoreSortItem[]): boolean;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=data-table-core-settings-sort-dialog.d.ts.map

package/titanium/data-table/data-table-core-settings-sort-dialog.js

@@ -0,0 +1,231 @@
+import { __decorate } from "tslib";
+import '@material/web/dialog/dialog';
+import '@material/web/button/text-button';
+import '@material/web/button/filled-tonal-button';
+import '@material/web/icon/icon';
+import '@material/web/menu/menu';
+import '@material/web/menu/menu-item';
+import './data-table-core-settings-sort-item';
+import { LitElement, css, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { dialogCloseNavigationHack, dialogOpenNavigationHack } from '../hacks/dialog-navigation-hack';
+import { dialogZIndexHack } from '../hacks/dialog-zindex-hack';
+import { repeat } from 'lit/directives/repeat.js';
+import { niceBadgeStyles } from '../styles/nice-badge';
+import { p } from '../styles/p';
+let TitaniumDataTableCoreSettingsSortDialog = class TitaniumDataTableCoreSettingsSortDialog extends LitElement {
+    #tableMetaData_accessor_storage = null;
+    get tableMetaData() { return this.#tableMetaData_accessor_storage; }
+    set tableMetaData(value) { this.#tableMetaData_accessor_storage = value; }
+    #dialog_accessor_storage;
+    get dialog() { return this.#dialog_accessor_storage; }
+    set dialog(value) { this.#dialog_accessor_storage = value; }
+    #addMenu_accessor_storage;
+    get addMenu() { return this.#addMenu_accessor_storage; }
+    set addMenu(value) { this.#addMenu_accessor_storage = value; }
+    #sort_accessor_storage = [];
+    get sort() { return this.#sort_accessor_storage; }
+    set sort(value) { this.#sort_accessor_storage = value; }
+    #originalSort = [];
+    async show(sort) {
+        this.#originalSort = structuredClone(sort);
+        this.sort = structuredClone(sort);
+        this.dialog.returnValue = '';
+        this.dialog?.show();
+        return await new Promise((resolve) => {
+            this.#resolve = resolve;
+        });
+    }
+    hasChanges(sortA, sortB) {
+        return JSON.stringify(sortA) !== JSON.stringify(sortB);
+    }
+    #repositionMenu;
+    #resolve;
+    static { this.styles = [
+        p,
+        niceBadgeStyles,
+        css `
+      :host {
+        display: grid;
+      }
+
+      md-dialog {
+        max-width: 450px;
+        width: calc(100dvw - 24px);
+
+        scrollbar-color: var(--md-sys-color-surface-container-highest) transparent;
+        scrollbar-width: thin;
+      }
+
+      main {
+        display: grid;
+
+        data-table-core-settings-sort-item {
+          z-index: 0;
+        }
+
+        p[no-sort] {
+          opacity: 0.8;
+          text-align: center;
+        }
+      }
+
+      div[slot='headline'] {
+        display: grid;
+        gap: 0px;
+
+        p {
+          font-size: 13px;
+          line-height: 14px;
+          opacity: 0.8;
+        }
+      }
+
+      add-container {
+        display: grid;
+        position: relative;
+      }
+
+      md-menu-item {
+        --md-menu-item-top-space: 6px;
+        --md-menu-item-bottom-space: 6px;
+        --md-menu-item-one-line-container-height: 36px;
+        --md-menu-item-label-text-size: 14px;
+      }
+
+      div[slot='actions'] {
+        display: flex;
+        justify-content: space-between;
+        gap: 8px;
+      }
+    `,
+    ]; }
+    render() {
+        const columnsNotInSort = this.tableMetaData?.itemMetaData.filter((item) => !item.disableSort && !this.sort.some((sort) => sort.key === item.key)) ?? [];
+        return html ` <md-dialog
+      @open=${(e) => {
+            dialogOpenNavigationHack(e.target);
+            dialogZIndexHack(e.target);
+        }}
+      @close=${(e) => {
+            if (e.target.returnValue === 'apply' || e.target.returnValue === 'cancel' || e.target.returnValue === 'navigation-close') {
+                dialogCloseNavigationHack(e.target);
+                return this.#resolve(e.target.returnValue);
+            }
+            e.preventDefault();
+        }}
+    >
+      <div slot="headline">
+        <div>Advanced sort</div>
+        <p>Max ${this.tableMetaData?.maxCustomSortColumns ?? 4} sort columns</p>
+      </div>
+      <main slot="content">
+        <form
+          @item-drop=${(e) => {
+            e.stopPropagation();
+            const items = this.sort ?? [];
+            //HoverIndex cannot be dropped beyond the length of the array
+            const hoverIndex = Math.min(e.hoverIndex, items.length - 1);
+            //Ignore if item goes back to where it started
+            if (hoverIndex !== e.originIndex) {
+                const temp = items[e.originIndex];
+                items.splice(e.originIndex, 1);
+                items.splice(hoverIndex, 0, temp);
+            }
+            this.requestUpdate('sort');
+        }}
+        >
+          ${!this.sort.length
+            ? html `<p no-sort>No sort columns</p>`
+            : repeat(
+            //sort by sort order in this.sort
+            this.sort, (sort) => sort.key, (sort, index) => html `<data-table-core-settings-sort-item
+                    .index=${index}
+                    .name=${this.tableMetaData?.itemMetaData.find((item) => item.key === sort.key)?.friendlyName ?? sort.key}
+                    sort-direction=${sort.direction}
+                    .scrollableContainer=${this.dialog?.shadowRoot?.querySelector('.scroller')}
+                    ?disable-drag=${this.sort.length === 1}
+                    @sort-direction-changed=${(e) => {
+                this.sort[index].direction = e.target.sortDirection;
+                this.requestUpdate('sort');
+            }}
+                    @delete=${() => {
+                this.sort.splice(index, 1);
+                this.requestUpdate('sort');
+            }}
+                  ></data-table-core-settings-sort-item>`)}
+        </form>
+      </main>
+      <div slot="actions">
+        <add-container>
+          <md-text-button
+            ?disabled=${this.sort.length >= (this.tableMetaData?.maxCustomSortColumns ?? 4)}
+            id="menu-anchor"
+            leading-icon
+            @click=${(e) => {
+            e.preventDefault();
+            const root = e.target.getRootNode();
+            const menu = root.querySelector('#menu');
+            menu.open = !menu.open;
+        }}
+          >
+            <span>Add sort column</span>
+            <md-icon slot="icon">add</md-icon>
+          </md-text-button>
+
+          <md-menu
+            id="menu"
+            anchor="menu-anchor"
+            @opened=${() => {
+            this.#repositionMenu = () => this.addMenu.reposition();
+            document.addEventListener('scroll', this.#repositionMenu, { passive: true });
+        }}
+            @closed=${() => document.removeEventListener('scroll', this.#repositionMenu)}
+            positioning="popover"
+            @close-menu=${(e) => {
+            e.detail.itemPath?.[0]?.action?.();
+        }}
+          >
+            ${repeat(columnsNotInSort, (column) => column.key, (column) => html `<md-menu-item
+                  .action=${() => {
+            this.sort.push({ key: column.key, direction: 'asc' });
+            this.requestUpdate('sort');
+        }}
+                >
+                  <md-icon slot="start">sort_by_alpha</md-icon>
+                  ${column.friendlyName ?? column.key}
+                </md-menu-item>`)}
+          </md-menu>
+        </add-container>
+        <div>
+          <md-text-button @click=${() => this.dialog?.close('cancel')}>Cancel</md-text-button>
+          <md-filled-tonal-button
+            ?disabled=${!this.hasChanges(this.sort, this.#originalSort)}
+            @click=${() => {
+            this.dialog?.close('apply');
+            this.dispatchEvent(new Event('sort-changed'));
+        }}
+            >Apply</md-filled-tonal-button
+          >
+        </div>
+      </div>
+    </md-dialog>`;
+    }
+};
+__decorate([
+    property({ type: Object })
+], TitaniumDataTableCoreSettingsSortDialog.prototype, "tableMetaData", null);
+__decorate([
+    query('md-dialog')
+], TitaniumDataTableCoreSettingsSortDialog.prototype, "dialog", null);
+__decorate([
+    query('md-menu')
+], TitaniumDataTableCoreSettingsSortDialog.prototype, "addMenu", null);
+__decorate([
+    state()
+], TitaniumDataTableCoreSettingsSortDialog.prototype, "sort", null);
+TitaniumDataTableCoreSettingsSortDialog = __decorate([
+    customElement('titanium-data-table-core-settings-sort-dialog')
+], TitaniumDataTableCoreSettingsSortDialog);
+export { TitaniumDataTableCoreSettingsSortDialog };
+//# sourceMappingURL=data-table-core-settings-sort-dialog.js.map

package/titanium/data-table/data-table-core-settings-sort-dialog.js.map

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

package/titanium/data-table/data-table-core-settings-sort-item.d.ts

@@ -0,0 +1,17 @@
+import '@material/web/icon/icon';
+import '@material/web/switch/switch';
+import '@material/web/elevation/elevation';
+import '@material/web/select/filled-select';
+import '@material/web/select/select-option';
+import { DraggableItemBase } from './draggable-item-base';
+export declare class TitaniumDataTableCoreSettingsSortItem extends DraggableItemBase {
+    accessor name: string;
+    accessor sortDirection: 'asc' | 'desc';
+    accessor index: number;
+    accessor disabled: boolean;
+    get items(): TitaniumDataTableCoreSettingsSortItem[];
+    get itemsContainer(): HTMLElement | null;
+    static styles: import("lit").CSSResultGroup[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=data-table-core-settings-sort-item.d.ts.map

package/titanium/data-table/data-table-core-settings-sort-item.js

@@ -0,0 +1,171 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon';
+import '@material/web/switch/switch';
+import '@material/web/elevation/elevation';
+import '@material/web/select/filled-select';
+import '@material/web/select/select-option';
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { h5 } from '../styles/h5';
+import { p } from '../styles/p';
+import { ellipsis } from '../styles/ellipsis';
+import { DraggableItemBase } from './draggable-item-base';
+let TitaniumDataTableCoreSettingsSortItem = class TitaniumDataTableCoreSettingsSortItem extends DraggableItemBase {
+    #name_accessor_storage;
+    get name() { return this.#name_accessor_storage; }
+    set name(value) { this.#name_accessor_storage = value; }
+    #sortDirection_accessor_storage;
+    get sortDirection() { return this.#sortDirection_accessor_storage; }
+    set sortDirection(value) { this.#sortDirection_accessor_storage = value; }
+    #index_accessor_storage;
+    get index() { return this.#index_accessor_storage; }
+    set index(value) { this.#index_accessor_storage = value; }
+    #disabled_accessor_storage;
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    get items() {
+        return Array.from(this.parentElement?.querySelectorAll('data-table-core-settings-sort-item') ?? []);
+    }
+    get itemsContainer() {
+        return this.parentElement;
+    }
+    static { this.styles = [
+        DraggableItemBase.styles,
+        h5,
+        p,
+        ellipsis,
+        css `
+      :host {
+        display: grid;
+        grid: 'icon header gap select delete' / auto auto 1fr auto auto;
+        user-select: none;
+
+        font-size: 15px;
+        line-height: 17px;
+
+        align-items: center;
+        gap: 8px;
+        min-height: 48px;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+
+        position: relative;
+        box-sizing: border-box;
+
+        padding: 12px 0;
+
+        label[disabled] span {
+          opacity: 0.3;
+        }
+      }
+
+      :host(:last-of-type) {
+        border-bottom: none;
+      }
+
+      md-icon[drag] {
+        grid-area: icon;
+      }
+
+      header {
+        grid-area: header;
+
+        h5[annotation] {
+          opacity: 0.6;
+
+          height: 16px;
+          transition:
+            opacity 0.2s ease-out,
+            height 0.2s ease-out;
+          transition-behavior: allow-discrete;
+        }
+      }
+
+      md-icon-button[remove] {
+        grid-area: delete;
+
+        --md-icon-button-icon-color: var(--md-sys-color-error);
+        --md-icon-button-pressed-icon-color: var(--md-sys-color-error);
+        --md-icon-button-focus-icon-color: var(--md-sys-color-error);
+        --md-icon-button-hover-icon-color: var(--md-sys-color-error);
+      }
+
+      md-filled-select {
+        grid-area: select;
+        --md-filled-field-top-space: 4px;
+        --md-filled-field-bottom-space: 4px;
+        --md-filled-field-content-size: 14px;
+        --md-filled-field-label-text-populated-size: 11px;
+
+        --md-filled-select-text-field-container-shape: 8px;
+        --md-filled-select-text-field-active-indicator-height: 0;
+        --md-filled-select-text-field-error-active-indicator-height: 0;
+        --md-filled-select-text-field-hover-active-indicator-height: 0;
+        --md-filled-select-text-field-focus-active-indicator-height: 0;
+        --md-filled-select-text-field-disabled-active-indicator-height: 0;
+
+        min-width: 142px;
+
+        md-select-option {
+          --md-menu-item-top-space: 6px;
+          --md-menu-item-bottom-space: 6px;
+          --md-menu-item-one-line-container-height: 36px;
+          --md-menu-item-label-text-size: 14px;
+        }
+      }
+
+      :host([dragging]) h5[annotation],
+      :host([dragged]) h5[annotation] {
+        opacity: 0;
+        height: 0;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <style>
+        :host([nudge-down]:not([dragged])) {
+          transform: translate3d(0, ${this.nudgeHeight}px, 0);
+        }
+
+        :host([nudge-up]:not([dragged])) {
+          transform: translate3d(0, -${this.nudgeHeight}px, 0);
+        }
+      </style>
+      <md-elevation></md-elevation>
+      <md-icon @mousedown=${this.mouseEvent} @touchstart=${this.touchEvent} drag>drag_handle</md-icon>
+      <header ellipsis>
+        <h5 ellipsis annotation>${this.index === 0 ? html `sort by` : html `then by`}</h5>
+        <p ellipsis>${this.name}</p>
+      </header>
+      <md-filled-select
+        ?disabled=${this.disabled}
+        .value=${this.sortDirection}
+        @change=${(e) => {
+            this.sortDirection = e.target.value;
+            this.dispatchEvent(new Event('sort-direction-changed'));
+        }}
+      >
+        <md-select-option value="asc"><span>Ascending</span></md-select-option>
+        <md-select-option value="desc"><span>Descending</span> </md-select-option>
+      </md-filled-select>
+      <md-icon-button ?disabled=${this.disabled} remove @click=${() => this.dispatchEvent(new Event('delete'))}><md-icon>close_small</md-icon></md-icon-button>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TitaniumDataTableCoreSettingsSortItem.prototype, "name", null);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'sort-direction' })
+], TitaniumDataTableCoreSettingsSortItem.prototype, "sortDirection", null);
+__decorate([
+    property({ type: Number })
+], TitaniumDataTableCoreSettingsSortItem.prototype, "index", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TitaniumDataTableCoreSettingsSortItem.prototype, "disabled", null);
+TitaniumDataTableCoreSettingsSortItem = __decorate([
+    customElement('data-table-core-settings-sort-item')
+], TitaniumDataTableCoreSettingsSortItem);
+export { TitaniumDataTableCoreSettingsSortItem };
+//# sourceMappingURL=data-table-core-settings-sort-item.js.map

package/titanium/data-table/data-table-core-settings-sort-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-core-settings-sort-item.js","sourceRoot":"","sources":["data-table-core-settings-sort-item.ts"],"names":[],"mappings":";AAAA,OAAO,yBAAyB,CAAC;AACjC,OAAO,6BAA6B,CAAC;AACrC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,oCAAoC,CAAC;AAE5C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,CAAC,EAAE,MAAM,aAAa,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAGnD,IAAM,qCAAqC,GAA3C,MAAM,qCAAsC,SAAQ,iBAAiB;IACrC,uBAAa;IAAb,IAAA,IAAI,0CAAS;IAAb,IAAA,IAAI,gDAAS;IAC+B,gCAA8B;IAA9B,IAAA,aAAa,mDAAiB;IAA9B,IAAA,aAAa,yDAAiB;IAC1E,wBAAc;IAAd,IAAA,KAAK,2CAAS;IAAd,IAAA,KAAK,iDAAS;IACE,2BAAkB;IAAlB,IAAA,QAAQ,8CAAU;IAAlB,IAAA,QAAQ,oDAAU;IAEvE,IAAa,KAAK;QAChB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAwC,oCAAoC,CAAC,IAAI,EAAE,CAAC,CAAC;IAC7I,CAAC;IAED,IAAa,cAAc;QACzB,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;aAEM,WAAM,GAAG;QACd,iBAAiB,CAAC,MAAM;QACxB,EAAE;QACF,CAAC;QACD,QAAQ;QACR,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoFF;KACF,AA1FY,CA0FX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;;sCAGuB,IAAI,CAAC,WAAW;;;;uCAIf,IAAI,CAAC,WAAW;;;;4BAI3B,IAAI,CAAC,UAAU,gBAAgB,IAAI,CAAC,UAAU;;kCAExC,IAAI,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,SAAS;sBAC5D,IAAI,CAAC,IAAI;;;oBAGX,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,aAAa;kBACjB,CAAC,CAAC,EAAE,EAAE;YACd,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,MAAM,CAAC,KAAuB,CAAC;YACtD,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC;QAC1D,CAAC;;;;;kCAKyB,IAAI,CAAC,QAAQ,kBAAkB,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC;KACzG,CAAC;IACJ,CAAC;;AAvIoC;IAApC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAAuB;AAC+B;IAAhF,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;0EAAwC;AAC1E;IAApC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEAAwB;AACE;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qEAA4B;AAJ5D,qCAAqC;IADjD,aAAa,CAAC,oCAAoC,CAAC;GACvC,qCAAqC,CAyIjD"}