@leavittsoftware/web 5.16.0 → 5.18.0

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

@@ -0,0 +1,353 @@
+import { __decorate } from "tslib";
+import '@material/web/dialog/dialog';
+import '@material/web/button/text-button';
+import '@material/web/tabs/tabs';
+import '@material/web/tabs/primary-tab';
+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-item';
+import './data-table-core-settings-sort-item';
+import { LitElement, css, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { generateDefaultSortFromMetaData } from './data-table-core';
+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 { LoadWhile } from '../helpers/load-while';
+let TitaniumDataTableCoreSettingsDialog = class TitaniumDataTableCoreSettingsDialog extends LoadWhile(LitElement) {
+    #tableMetaData_accessor_storage = null;
+    get tableMetaData() { return this.#tableMetaData_accessor_storage; }
+    set tableMetaData(value) { this.#tableMetaData_accessor_storage = value; }
+    #userSettings_accessor_storage = [];
+    get userSettings() { return this.#userSettings_accessor_storage; }
+    set userSettings(value) { this.#userSettings_accessor_storage = value; }
+    #sort_accessor_storage = [];
+    get sort() { return this.#sort_accessor_storage; }
+    set sort(value) { this.#sort_accessor_storage = value; }
+    #viewMode_accessor_storage = 'Customize';
+    get viewMode() { return this.#viewMode_accessor_storage; }
+    set viewMode(value) { this.#viewMode_accessor_storage = value; }
+    #customSortApplied_accessor_storage = false;
+    get customSortApplied() { return this.#customSortApplied_accessor_storage; }
+    set customSortApplied(value) { this.#customSortApplied_accessor_storage = value; }
+    #customColumnsApplied_accessor_storage = false;
+    get customColumnsApplied() { return this.#customColumnsApplied_accessor_storage; }
+    set customColumnsApplied(value) { this.#customColumnsApplied_accessor_storage = value; }
+    #dialog_accessor_storage;
+    get dialog() { return this.#dialog_accessor_storage; }
+    set dialog(value) { this.#dialog_accessor_storage = value; }
+    updated(changedProperties) {
+        if (changedProperties.has('tableMetaData')) {
+            //make sure all keys in tableMetaData.itemMetaData are in userSettings
+            if (this.tableMetaData?.itemMetaData.some((item) => !this.userSettings.some((setting) => setting.key === item.key))) {
+                this.#resetUserSettings();
+            }
+            //check if columns have been removed
+            if (this.tableMetaData?.itemMetaData.length !== this.userSettings.length) {
+                this.#resetUserSettings();
+            }
+        }
+        if (changedProperties.has('sort') || changedProperties.has('tableMetaData')) {
+            const defaultSort = generateDefaultSortFromMetaData(this.tableMetaData);
+            const _customSortApplied = JSON.stringify(defaultSort) !== JSON.stringify(this.sort);
+            if (this.customSortApplied !== _customSortApplied) {
+                this.customSortApplied = _customSortApplied;
+                this.dispatchEvent(new Event('custom-sort-applied-change'));
+            }
+        }
+        if (changedProperties.has('userSettings') || changedProperties.has('tableMetaData')) {
+            const _customColumnsApplied = this.#getNumberOfCustomSettingsApplied(this.userSettings, this.tableMetaData) > 0;
+            if (this.customColumnsApplied !== _customColumnsApplied) {
+                this.customColumnsApplied = _customColumnsApplied;
+                this.dispatchEvent(new Event('custom-columns-applied-change'));
+            }
+        }
+    }
+    #getNumberOfCustomSettingsApplied(userSettings, tableMetaData) {
+        let settingsCount = 0;
+        for (const metaData of tableMetaData?.itemMetaData ?? []) {
+            const setting = userSettings.find((setting) => setting.key === metaData.key);
+            if (setting?.show && metaData.hideByDefault) {
+                settingsCount++;
+            }
+            if (!setting?.show && !metaData.hideByDefault) {
+                settingsCount++;
+            }
+        }
+        //check if items are re-ordered by index, if so count as one change
+        if (userSettings.some((setting, index) => setting.key !== tableMetaData?.itemMetaData[index].key) ||
+            tableMetaData?.itemMetaData.some((metaData, index) => metaData.key !== userSettings[index].key)) {
+            settingsCount++;
+        }
+        return settingsCount;
+    }
+    #resetUserSettings() {
+        const _userSettings = this.tableMetaData?.itemMetaData.map((item) => ({ key: item.key, show: !item.hideByDefault })) ?? [];
+        if (JSON.stringify(_userSettings) !== JSON.stringify(this.userSettings)) {
+            this.userSettings = _userSettings;
+            this.dispatchEvent(new Event('setting-change'));
+        }
+    }
+    #resetSort() {
+        const _sort = generateDefaultSortFromMetaData(this.tableMetaData);
+        if (JSON.stringify(_sort) !== JSON.stringify(this.sort)) {
+            this.sort = _sort;
+            this.dispatchEvent(new Event('sort-changed'));
+        }
+    }
+    async show() {
+        this.dialog.returnValue = '';
+        this.dialog?.show();
+        return await new Promise((resolve) => {
+            this.#resolve = resolve;
+        });
+    }
+    #resolve;
+    static { this.styles = [
+        niceBadgeStyles,
+        css `
+      :host {
+        display: grid;
+      }
+
+      md-dialog {
+        max-width: 450px;
+        width: calc(100vw - 24px);
+
+        min-height: 400px;
+      }
+
+      md-tabs {
+        --md-primary-tab-container-color: var(--md-sys-color-surface-container-high);
+        --md-primary-tab-with-icon-and-label-text-container-height: 80px;
+        --md-primary-tab-icon-size: 32px;
+        padding: 0;
+        gap: 0;
+
+        md-primary-tab:first-of-type {
+          --md-primary-tab-container-shape-start-start: 32px;
+          --md-focus-ring-shape-start-start: 32px;
+        }
+
+        md-primary-tab:last-of-type {
+          --md-primary-tab-container-shape-start-end: 32px;
+          --md-focus-ring-shape-start-end: 32px;
+        }
+      }
+
+      md-primary-tab div[slot='icon'] {
+        position: relative;
+        nice-badge {
+          position: absolute;
+          top: 1px;
+          right: -10px;
+        }
+      }
+
+      main {
+        padding: 4px 16px 8px 16px;
+
+        p[no-sort] {
+          opacity: 0.8;
+          text-align: center;
+        }
+
+        add-container {
+          margin-top: 16px;
+          display: grid;
+          justify-self: center;
+        }
+      }
+
+      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 === 'done' || e.target.returnValue === 'navigation-close') {
+                dialogCloseNavigationHack(e.target);
+                return this.#resolve(e.target.returnValue);
+            }
+            e.preventDefault();
+        }}
+    >
+      <md-tabs slot="headline" @change=${(e) => e.target.activeTab?.onActivate?.()}>
+        <md-primary-tab ?disabled=${this.isLoading} .onActivate=${() => (this.viewMode = 'Customize')}>
+          <div slot="icon">
+            ${this.customColumnsApplied ? html `<nice-badge compact primary>1</nice-badge>` : nothing}
+            <md-icon>tune</md-icon>
+          </div>
+          Customize columns
+        </md-primary-tab>
+        <md-primary-tab ?disabled=${this.isLoading} .onActivate=${() => (this.viewMode = 'Sort')}>
+          <div slot="icon">
+            ${this.customSortApplied ? html `<nice-badge compact primary>1</nice-badge>` : nothing}
+            <md-icon>edit_arrow_down</md-icon>
+          </div>
+          <div>Advanced Sort</div>
+        </md-primary-tab>
+      </md-tabs>
+      <main slot="content">
+        ${this.viewMode === 'Customize'
+            ? html ` <form
+              @item-drop=${(e) => {
+                e.stopPropagation();
+                const items = this.userSettings ?? [];
+                //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('userSettings');
+                this.dispatchEvent(new Event('setting-change'));
+            }}
+            >
+              ${repeat(this.userSettings, (setting) => setting.key, (setting, index) => html `
+                  <data-table-core-settings-item
+                    .index=${index}
+                    .name=${this.tableMetaData?.itemMetaData.find((item) => item.key === setting.key)?.friendlyName ?? setting.key}
+                    .selected=${setting.show}
+                    ?disabled=${setting.show && this.userSettings.filter((s) => s.show).length === 1}
+                    ?disable-drag=${this.userSettings.length === 1}
+                    @changed=${(e) => {
+                setting.show = e.target.selected;
+                this.requestUpdate('userSettings');
+                this.dispatchEvent(new Event('setting-change'));
+            }}
+                  ></data-table-core-settings-item>
+                `)}
+            </form>`
+            : html `<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.dispatchEvent(new Event('sort-changed'));
+            }}
+              >
+                ${!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=${sort.key}
+                          sort-direction=${sort.direction}
+                          ?disabled=${this.isLoading}
+                          ?disable-drag=${this.isLoading || this.sort.length === 1}
+                          @sort-direction-changed=${(e) => {
+                    this.sort[index].direction = e.target.sortDirection;
+                    this.requestUpdate('sort');
+                    this.dispatchEvent(new Event('sort-changed'));
+                }}
+                          @delete=${() => {
+                    this.sort.splice(index, 1);
+                    this.requestUpdate('sort');
+                    this.dispatchEvent(new Event('sort-changed'));
+                }}
+                        ></data-table-core-settings-sort-item>`)}
+              </form>
+              ${columnsNotInSort.length !== 0
+                ? html ` <add-container>
+                    <md-text-button
+                      id="menu-anchor"
+                      aria-haspopup="true"
+                      aria-controls="menu"
+                      aria-expanded="false"
+                      trailing-icon
+                      ?disabled=${this.isLoading}
+                      @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"
+                      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');
+                    this.dispatchEvent(new Event('sort-changed'));
+                }}
+                          >
+                            <md-icon slot="start">sort_by_alpha</md-icon>
+                            ${column.friendlyName}
+                          </md-menu-item>`)}
+                    </md-menu>
+                  </add-container>`
+                : nothing} `}
+      </main>
+      <div slot="actions">
+        <md-text-button
+          ?disabled=${this.isLoading || this.viewMode === 'Customize' ? !this.customColumnsApplied : !this.customSortApplied}
+          @click=${() => (this.viewMode === 'Customize' ? this.#resetUserSettings() : this.#resetSort())}
+          >Restore to defaults</md-text-button
+        >
+
+        <md-filled-tonal-button ?disabled=${this.isLoading} @click=${() => this.dialog?.close('done')}>Done</md-filled-tonal-button>
+      </div>
+    </md-dialog>`;
+    }
+};
+__decorate([
+    property({ type: Object })
+], TitaniumDataTableCoreSettingsDialog.prototype, "tableMetaData", null);
+__decorate([
+    property({ type: Array })
+], TitaniumDataTableCoreSettingsDialog.prototype, "userSettings", null);
+__decorate([
+    property({ type: Array })
+], TitaniumDataTableCoreSettingsDialog.prototype, "sort", null);
+__decorate([
+    state()
+], TitaniumDataTableCoreSettingsDialog.prototype, "viewMode", null);
+__decorate([
+    state()
+], TitaniumDataTableCoreSettingsDialog.prototype, "customSortApplied", null);
+__decorate([
+    state()
+], TitaniumDataTableCoreSettingsDialog.prototype, "customColumnsApplied", null);
+__decorate([
+    query('md-dialog')
+], TitaniumDataTableCoreSettingsDialog.prototype, "dialog", null);
+TitaniumDataTableCoreSettingsDialog = __decorate([
+    customElement('titanium-data-table-core-settings-dialog')
+], TitaniumDataTableCoreSettingsDialog);
+export { TitaniumDataTableCoreSettingsDialog };
+//# sourceMappingURL=data-table-core-settings-dialog.js.map

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

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

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

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

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

@@ -0,0 +1,102 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon';
+import '@material/web/switch/switch';
+import '@material/web/elevation/elevation';
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { DraggableItemBase } from './draggable-item-base';
+let TitaniumDataTableCoreSettingsItem = class TitaniumDataTableCoreSettingsItem extends DraggableItemBase {
+    #name_accessor_storage;
+    get name() { return this.#name_accessor_storage; }
+    set name(value) { this.#name_accessor_storage = value; }
+    #selected_accessor_storage;
+    get selected() { return this.#selected_accessor_storage; }
+    set selected(value) { this.#selected_accessor_storage = value; }
+    #disabled_accessor_storage;
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #index_accessor_storage;
+    get index() { return this.#index_accessor_storage; }
+    set index(value) { this.#index_accessor_storage = value; }
+    get items() {
+        return Array.from(this.parentElement?.querySelectorAll('data-table-core-settings-item') ?? []);
+    }
+    get itemsContainer() {
+        return this.parentElement;
+    }
+    static { this.styles = [
+        DraggableItemBase.styles,
+        css `
+      :host {
+        display: grid;
+        grid: 'icon label switch' / auto 1fr 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;
+      }
+
+      :host(:last-of-type) {
+        border-bottom: none;
+      }
+
+      md-switch {
+        --md-switch-track-height: 24px;
+        --md-switch-with-icon-handle-height: 20px;
+        --md-switch-with-icon-handle-width: 20px;
+        --md-switch-track-width: 40px;
+      }
+    `,
+    ]; }
+    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_indicator</md-icon>
+      <span>${this.name}</span>
+      <md-switch
+        ?selected=${this.selected}
+        @change=${() => {
+            this.selected = !this.selected;
+            this.dispatchEvent(new Event('changed'));
+        }}
+        icons
+        show-only-selected-icon
+        ?disabled=${this.disabled}
+      ></md-switch>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TitaniumDataTableCoreSettingsItem.prototype, "name", null);
+__decorate([
+    property({ type: Boolean })
+], TitaniumDataTableCoreSettingsItem.prototype, "selected", null);
+__decorate([
+    property({ type: Boolean })
+], TitaniumDataTableCoreSettingsItem.prototype, "disabled", null);
+__decorate([
+    property({ type: Number })
+], TitaniumDataTableCoreSettingsItem.prototype, "index", null);
+TitaniumDataTableCoreSettingsItem = __decorate([
+    customElement('data-table-core-settings-item')
+], TitaniumDataTableCoreSettingsItem);
+export { TitaniumDataTableCoreSettingsItem };
+//# sourceMappingURL=data-table-core-settings-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-core-settings-item.js","sourceRoot":"","sources":["data-table-core-settings-item.ts"],"names":[],"mappings":";AAAA,OAAO,yBAAyB,CAAC;AACjC,OAAO,6BAA6B,CAAC;AACrC,OAAO,mCAAmC,CAAC;AAE3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAGnD,IAAM,iCAAiC,GAAvC,MAAM,iCAAkC,SAAQ,iBAAiB;IACjC,uBAAa;IAAb,IAAA,IAAI,0CAAS;IAAb,IAAA,IAAI,gDAAS;IACZ,2BAAkB;IAAlB,IAAA,QAAQ,8CAAU;IAAlB,IAAA,QAAQ,oDAAU;IAClB,2BAAkB;IAAlB,IAAA,QAAQ,8CAAU;IAAlB,IAAA,QAAQ,oDAAU;IACnB,wBAAc;IAAd,IAAA,KAAK,2CAAS;IAAd,IAAA,KAAK,iDAAS;IAEnD,IAAa,KAAK;QAChB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAoC,+BAA+B,CAAC,IAAI,EAAE,CAAC,CAAC;IACpI,CAAC;IAED,IAAa,cAAc;QACzB,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;aAEM,WAAM,GAAG;QACd,iBAAiB,CAAC,MAAM;QACxB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4BF;KACF,AA/BY,CA+BX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;;sCAGuB,IAAI,CAAC,WAAW;;;;uCAIf,IAAI,CAAC,WAAW;;;;4BAI3B,IAAI,CAAC,UAAU,gBAAgB,IAAI,CAAC,UAAU;cAC5D,IAAI,CAAC,IAAI;;oBAEH,IAAI,CAAC,QAAQ;kBACf,GAAG,EAAE;YACb,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;QAC3C,CAAC;;;oBAGW,IAAI,CAAC,QAAQ;;KAE5B,CAAC;IACJ,CAAC;;AAvEoC;IAApC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAAuB;AACZ;IAArC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iEAA4B;AAClB;IAArC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iEAA4B;AACnB;IAApC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAAwB;AAJxC,iCAAiC;IAD7C,aAAa,CAAC,+BAA+B,CAAC;GAClC,iCAAiC,CAyE7C"}

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,164 @@
+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: 105px;
+      }
+
+      :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_indicator</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>A to Z</span></md-select-option>
+        <md-select-option value="desc"><span>Z to A</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