npm - @digital-realty/ix-grid - Versions diffs - 1.0.6 → 1.0.10 - Mend

@digital-realty/ix-grid 1.0.6 → 1.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/IxGrid.d.ts +5 -0
package/dist/IxGrid.js +67 -24
package/dist/IxGrid.js.map +1 -1
package/dist/components/IxGridColumnFilter.d.ts +9 -1
package/dist/components/IxGridColumnFilter.js +60 -6
package/dist/components/IxGridColumnFilter.js.map +1 -1
package/dist/components/grid-column-filter-styles.js +20 -0
package/dist/components/grid-column-filter-styles.js.map +1 -1
package/package.json +11 -11
package/src/IxGrid.ts +75 -29
package/src/components/IxGridColumnFilter.ts +70 -5
package/src/components/grid-column-filter-styles.ts +20 -0
package/tsconfig.json +1 -0
package/web-test-runner.config.mjs +1 -1

package/dist/IxGrid.d.ts CHANGED Viewed

@@ -20,6 +20,7 @@ export interface Column {
 }
 export declare class IxGrid extends LitElement {
     static readonly styles: import("lit").CSSResult[];
+    grid: HTMLElement;
     columns: Column[];
     rows: Row[];
     defaultEmptyText: string;
@@ -33,12 +34,16 @@ export declare class IxGrid extends LitElement {
     recordCount: number;
     localStorageID: string | undefined;
     private filters;
+    _columns: Column[];
     isLoading: boolean;
     isExpanded: boolean;
     get columnNames(): string[];
     private updatePage;
     handleSort(column?: string): void;
     private renderColumnHeader;
+    connectedCallback(): void;
+    reorderColumnsFromTable(): Promise<void>;
+    reorderColumnsFromFilter(e: CustomEvent): Promise<void>;
     private renderHeader;
     private renderRowLimitControls;
     private renderPaginationControls;

package/dist/IxGrid.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html, LitElement, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property, state, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import '@vaadin/grid';
 import { columnBodyRenderer, columnHeaderRenderer } from '@vaadin/grid/lit.js';
@@ -27,6 +27,7 @@ export class IxGrid extends LitElement {
         this.recordCount = 0;
         this.localStorageID = undefined;
         this.filters = [];
+        this._columns = [];
         this.isLoading = false;
         this.isExpanded = false;
         this.renderColumnHeader = (column) => html `
@@ -54,18 +55,19 @@ export class IxGrid extends LitElement {
       </h2>
       <div class="grid-menu">
         <ix-grid-column-filter
-          .columns=${this.columns}
+          .columns=${this._columns}
           localStorageID=${ifDefined(this.localStorageID)}
           @columnFilter=${(e) => {
             e.detail.columns.forEach((column, id) => {
-                this.columns[id].hidden = column.hidden;
+                this._columns[id].hidden = column.hidden;
             });
             this.updatePage();
         }}
+          @reorderColumns=${this.reorderColumnsFromFilter}
         ></ix-grid-column-filter>
         <ix-icon-button icon="download"></ix-icon-button>
         <ix-grid-row-filter
-          .columns=${this.columns}
+          .columns=${this._columns}
           @rowFilter=${(e) => {
             this.filters = e.detail.filters;
             this.updatePage();
@@ -107,7 +109,7 @@ export class IxGrid extends LitElement {
   `;
     }
     get columnNames() {
-        return this.columns.map((column) => column.name);
+        return this._columns.map((column) => column.name);
     }
     async updatePage() {
         const filters = this.filters.reduce((columnFilters, { columnField, value }) => ({
@@ -147,30 +149,65 @@ export class IxGrid extends LitElement {
         this.sortedColumn = column;
         this.updatePage();
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this._columns = this.columns;
+    }
+    async reorderColumnsFromTable() {
+        var _a, _b;
+        // calulate column order from table header flex order
+        const headerNodes = Array.from(((_b = (_a = this.grid) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('th')) || []);
+        if (headerNodes.length) {
+            const columnOrder = headerNodes
+                .map((el, id) => ({ id, flexPosition: Number(el.style.order) }))
+                .sort((a, b) => a.flexPosition - b.flexPosition)
+                .map(el => el.id);
+            headerNodes.forEach((el, id) => {
+                this._columns[id].width = el.style.width;
+            });
+            const columnsCorrectlyOrdered = columnOrder.every((x, i) => i === 0 || x > columnOrder[i - 1]);
+            if (!columnsCorrectlyOrdered) {
+                const reorderedColumns = columnOrder.map(id => this._columns[id]);
+                this._columns = [...reorderedColumns];
+                this.isLoading = true;
+                await this.updateComplete;
+                this.isLoading = false;
+            }
+        }
+    }
+    async reorderColumnsFromFilter(e) {
+        this._columns = [...e.detail.reorderedColumns];
+        this.isLoading = true;
+        await this.updateComplete;
+        this.isLoading = false;
+    }
     render() {
         var _a;
         return html `
       <div class=${`grid-container ${this.isLoading ? 'loading' : ''}`}>
         ${this.hideHeader ? nothing : this.renderHeader()}
-        <vaadin-grid
-          .items=${this.rowLimit > 0 && !this.isExpanded
-            ? this.rows.slice(0, this.rowLimit)
-            : this.rows}
-          all-rows-visible
-          column-reordering-allowed
-          theme="no-border"
-        >
-          ${(_a = this.columns) === null || _a === void 0 ? void 0 : _a.map((column) => column.name
-            ? html `<vaadin-grid-column
-                  ${columnHeaderRenderer(() => this.renderColumnHeader(column), this.sortDirection)}
-                  ${columnBodyRenderer(column.bodyRenderer, [])}
-                  resizable
-                  width=${ifDefined(column.width)}
-                  ?hidden=${column.hidden}
-                  ?frozen-to-end=${column.frozenToEnd}
-                ></vaadin-grid-column>`
-            : nothing)}
-        </vaadin-grid>
+        ${!this.isLoading
+            ? html `<vaadin-grid
+              .items=${this.rowLimit > 0 && !this.isExpanded
+                ? this.rows.slice(0, this.rowLimit)
+                : this.rows}
+              all-rows-visible
+              column-reordering-allowed
+              theme="no-border"
+              @mouseup=${this.reorderColumnsFromTable}
+            >
+              ${(_a = this._columns) === null || _a === void 0 ? void 0 : _a.map((column) => column.name
+                ? html `<vaadin-grid-column
+                      ${columnHeaderRenderer(() => this.renderColumnHeader(column), this.sortDirection)}
+                      ${columnBodyRenderer(column.bodyRenderer, [])}
+                      resizable
+                      width=${ifDefined(column.width)}
+                      ?hidden=${column.hidden}
+                      ?frozen-to-end=${column.frozenToEnd}
+                    ></vaadin-grid-column>`
+                : nothing)}
+            </vaadin-grid>`
+            : nothing}
         ${this.rowLimit > 0
             ? this.renderRowLimitControls()
             : this.renderPaginationControls()}
@@ -179,6 +216,9 @@ export class IxGrid extends LitElement {
     }
 }
 IxGrid.styles = [IxGridViewStyles];
+__decorate([
+    query('vaadin-grid')
+], IxGrid.prototype, "grid", void 0);
 __decorate([
     property({ type: Array })
 ], IxGrid.prototype, "columns", void 0);
@@ -218,6 +258,9 @@ __decorate([
 __decorate([
     state()
 ], IxGrid.prototype, "filters", void 0);
+__decorate([
+    state()
+], IxGrid.prototype, "_columns", void 0);
 __decorate([
     state()
 ], IxGrid.prototype, "isLoading", void 0);

package/dist/IxGrid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IxGrid.js","sourceRoot":"","sources":["../src/IxGrid.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '@vaadin/grid';\nimport { columnBodyRenderer, columnHeaderRenderer } from '@vaadin/grid/lit.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './components/IxPagination.js';\nimport './components/IxGridColumnFilter.js';\nimport './components/IxGridRowFilter.js';\nimport type { Filter } from './components/IxGridRowFilter.js';\nimport { IxGridViewStyles } from './grid-view-styles.js';\nimport { copy } from './ix-grid-copy.js';\n\nexport interface Row {\n [key: string]: string;\n}\n\nexport interface Column {\n name: string;\n header: string;\n bodyRenderer: (row: Row) => any;\n width?: string;\n sortable?: boolean;\n filterable?: boolean;\n hidden?: boolean;\n frozenToEnd?: boolean;\n}\n\nexport class IxGrid extends LitElement {\n static readonly styles = [IxGridViewStyles];\n\n @property({ type: Array }) columns: Column[] = [];\n\n @property({ type: Array }) rows: Row[] = [];\n\n @property({ type: String }) defaultEmptyText = 'No data to display';\n\n @property({ type: String }) sortedColumn = '';\n\n @property({ type: String }) sortDirection = '';\n\n @property({ type: Boolean }) hideHeader = false;\n\n @property({ type: Number }) rowLimit: number = 0;\n\n @property({ type: Number }) page = 1;\n\n @property({ type: Number }) pageSize = 10;\n\n @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];\n\n @property({ type: Number }) recordCount = 0;\n\n @property({ type: String }) localStorageID: string \| undefined = undefined;\n\n @state() private filters: Filter[] = [];\n\n @state() isLoading = false;\n\n @state() isExpanded = false;\n\n get columnNames() {\n return this.columns.map((column: Column) => column.name);\n }\n\n private async updatePage() {\n const filters = this.filters.reduce(\n (columnFilters: { [key: string]: string }, { columnField, value }) => ({\n ...columnFilters,\n [columnField]: value,\n }),\n {}\n );\n\n const urlParams: { [key: string]: string } = {\n sort: this.sortedColumn,\n order: this.sortDirection,\n page: this.page.toString(),\n size: this.pageSize.toString(),\n ...filters,\n };\n\n const url = new URL(window.location.href);\n const searchParams = new URLSearchParams(urlParams);\n url.search = searchParams.toString();\n window.history.replaceState(null, '', url.toString());\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {\n columnName: this.sortedColumn,\n sortOrder: this.sortDirection,\n page: this.page,\n pageSize: this.pageSize,\n filters,\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n handleSort(column: string = '') {\n if (this.sortedColumn !== column) {\n this.sortDirection = 'asc';\n } else {\n this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';\n }\n this.sortedColumn = column;\n\n this.updatePage();\n }\n\n private renderColumnHeader = (column: Column) => html`\n <div\n @click=${() => column.sortable && this.handleSort(column.name)}\n @keyDown=${() => column.sortable && this.handleSort(column.name)}\n class=\"header\"\n >\n ${column.header}\n ${column.sortable\n ? html`<ix-icon title=\"Sort\" class=\"header-sort-icon\"\n >${this.sortDirection === 'desc' &&\n this.sortedColumn === column.name\n ? `arrow_upward`\n : `arrow_downward`}</ix-icon\n >`\n : nothing}\n </div>\n `;\n\n private renderHeader = () => html`\n <div class=\"grid-header\">\n <h2>\n ${html`${this.recordCount}\n ${copy.user}${this.recordCount === 1 ? '' : 's'}`}\n </h2>\n <div class=\"grid-menu\">\n <ix-grid-column-filter\n .columns=${this.columns}\n localStorageID=${ifDefined(this.localStorageID)}\n @columnFilter=${(e: CustomEvent) => {\n e.detail.columns.forEach((column: Column, id: number) => {\n this.columns[id].hidden = column.hidden;\n });\n this.updatePage();\n }}\n ></ix-grid-column-filter>\n <ix-icon-button icon=\"download\"></ix-icon-button>\n <ix-grid-row-filter\n .columns=${this.columns}\n @rowFilter=${(e: CustomEvent) => {\n this.filters = e.detail.filters;\n this.updatePage();\n }}\n ></ix-grid-row-filter>\n </div>\n </div>\n `;\n\n private renderRowLimitControls = () => {\n if (this.rows.length <= this.rowLimit) return nothing;\n\n return html`\n <div class=\"row-limit\">\n <ix-button\n appearance=\"text\"\n @click=${() => {\n this.isExpanded = !this.isExpanded;\n }}\n has-icon\n >\n ${this.isExpanded ? copy.viewLess : copy.viewMore}\n <ix-icon slot=\"icon\">${this.isExpanded ? 'remove' : 'add'}</ix-icon>\n </ix-button>\n </div>\n `;\n };\n\n private renderPaginationControls = () => html`\n <ix-pagination\n .page=${this.page}\n .pageSize=${this.pageSize}\n .pageSizes=${this.pageSizes}\n .recordCount=${this.recordCount}\n @updatePagination=${(e: CustomEvent) => {\n this.page = e.detail.page;\n this.pageSize = e.detail.pageSize;\n this.updatePage();\n }}\n ></ix-pagination>\n `;\n\n render() {\n return html`\n <div class=${`grid-container ${this.isLoading ? 'loading' : ''}`}>\n ${this.hideHeader ? nothing : this.renderHeader()}\n <vaadin-grid\n .items=${this.rowLimit > 0 && !this.isExpanded\n ? this.rows.slice(0, this.rowLimit)\n : this.rows}\n all-rows-visible\n column-reordering-allowed\n theme=\"no-border\"\n >\n ${this.columns?.map((column: Column) =>\n column.name\n ? html`<vaadin-grid-column\n ${columnHeaderRenderer(\n () => this.renderColumnHeader(column),\n this.sortDirection\n )}\n ${columnBodyRenderer(column.bodyRenderer, [])}\n resizable\n width=${ifDefined(column.width)}\n ?hidden=${column.hidden}\n ?frozen-to-end=${column.frozenToEnd}\n ></vaadin-grid-column>`\n : nothing\n )}\n </vaadin-grid>\n ${this.rowLimit > 0\n ? this.renderRowLimitControls()\n : this.renderPaginationControls()}\n </div>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"IxGrid.js","sourceRoot":"","sources":["../src/IxGrid.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '@vaadin/grid';\nimport { columnBodyRenderer, columnHeaderRenderer } from '@vaadin/grid/lit.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './components/IxPagination.js';\nimport './components/IxGridColumnFilter.js';\nimport './components/IxGridRowFilter.js';\nimport type { Filter } from './components/IxGridRowFilter.js';\nimport { IxGridViewStyles } from './grid-view-styles.js';\nimport { copy } from './ix-grid-copy.js';\n\nexport interface Row {\n [key: string]: string;\n}\n\nexport interface Column {\n name: string;\n header: string;\n bodyRenderer: (row: Row) => any;\n width?: string;\n sortable?: boolean;\n filterable?: boolean;\n hidden?: boolean;\n frozenToEnd?: boolean;\n}\n\nexport class IxGrid extends LitElement {\n static readonly styles = [IxGridViewStyles];\n\n @query('vaadin-grid') grid!: HTMLElement;\n\n @property({ type: Array }) columns: Column[] = [];\n\n @property({ type: Array }) rows: Row[] = [];\n\n @property({ type: String }) defaultEmptyText = 'No data to display';\n\n @property({ type: String }) sortedColumn = '';\n\n @property({ type: String }) sortDirection = '';\n\n @property({ type: Boolean }) hideHeader = false;\n\n @property({ type: Number }) rowLimit: number = 0;\n\n @property({ type: Number }) page = 1;\n\n @property({ type: Number }) pageSize = 10;\n\n @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];\n\n @property({ type: Number }) recordCount = 0;\n\n @property({ type: String }) localStorageID: string \| undefined = undefined;\n\n @state() private filters: Filter[] = [];\n\n @state() _columns: Column[] = [];\n\n @state() isLoading = false;\n\n @state() isExpanded = false;\n\n get columnNames() {\n return this._columns.map((column: Column) => column.name);\n }\n\n private async updatePage() {\n const filters = this.filters.reduce(\n (columnFilters: { [key: string]: string }, { columnField, value }) => ({\n ...columnFilters,\n [columnField]: value,\n }),\n {}\n );\n\n const urlParams: { [key: string]: string } = {\n sort: this.sortedColumn,\n order: this.sortDirection,\n page: this.page.toString(),\n size: this.pageSize.toString(),\n ...filters,\n };\n\n const url = new URL(window.location.href);\n const searchParams = new URLSearchParams(urlParams);\n url.search = searchParams.toString();\n window.history.replaceState(null, '', url.toString());\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {\n columnName: this.sortedColumn,\n sortOrder: this.sortDirection,\n page: this.page,\n pageSize: this.pageSize,\n filters,\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n handleSort(column: string = '') {\n if (this.sortedColumn !== column) {\n this.sortDirection = 'asc';\n } else {\n this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';\n }\n this.sortedColumn = column;\n\n this.updatePage();\n }\n\n private renderColumnHeader = (column: Column) => html`\n <div\n @click=${() => column.sortable && this.handleSort(column.name)}\n @keyDown=${() => column.sortable && this.handleSort(column.name)}\n class=\"header\"\n >\n ${column.header}\n ${column.sortable\n ? html`<ix-icon title=\"Sort\" class=\"header-sort-icon\"\n >${this.sortDirection === 'desc' &&\n this.sortedColumn === column.name\n ? `arrow_upward`\n : `arrow_downward`}</ix-icon\n >`\n : nothing}\n </div>\n `;\n\n connectedCallback() {\n super.connectedCallback();\n this._columns = this.columns;\n }\n\n async reorderColumnsFromTable() {\n // calulate column order from table header flex order\n const headerNodes = Array.from(\n this.grid?.shadowRoot?.querySelectorAll('th') \|\| []\n );\n if (headerNodes.length) {\n const columnOrder = headerNodes\n .map((el, id) => ({ id, flexPosition: Number(el.style.order) }))\n .sort((a, b) => a.flexPosition - b.flexPosition)\n .map(el => el.id);\n headerNodes.forEach((el, id) => {\n this._columns[id].width = el.style.width;\n });\n const columnsCorrectlyOrdered = columnOrder.every(\n (x, i) => i === 0 \|\| x > columnOrder[i - 1]\n );\n if (!columnsCorrectlyOrdered) {\n const reorderedColumns = columnOrder.map(id => this._columns[id]);\n this._columns = [...reorderedColumns];\n this.isLoading = true;\n await this.updateComplete;\n this.isLoading = false;\n }\n }\n }\n\n async reorderColumnsFromFilter(e: CustomEvent) {\n this._columns = [...e.detail.reorderedColumns];\n this.isLoading = true;\n await this.updateComplete;\n this.isLoading = false;\n }\n\n private renderHeader = () => html`\n <div class=\"grid-header\">\n <h2>\n ${html`${this.recordCount}\n ${copy.user}${this.recordCount === 1 ? '' : 's'}`}\n </h2>\n <div class=\"grid-menu\">\n <ix-grid-column-filter\n .columns=${this._columns}\n localStorageID=${ifDefined(this.localStorageID)}\n @columnFilter=${(e: CustomEvent) => {\n e.detail.columns.forEach((column: Column, id: number) => {\n this._columns[id].hidden = column.hidden;\n });\n this.updatePage();\n }}\n @reorderColumns=${this.reorderColumnsFromFilter}\n ></ix-grid-column-filter>\n <ix-icon-button icon=\"download\"></ix-icon-button>\n <ix-grid-row-filter\n .columns=${this._columns}\n @rowFilter=${(e: CustomEvent) => {\n this.filters = e.detail.filters;\n this.updatePage();\n }}\n ></ix-grid-row-filter>\n </div>\n </div>\n `;\n\n private renderRowLimitControls = () => {\n if (this.rows.length <= this.rowLimit) return nothing;\n\n return html`\n <div class=\"row-limit\">\n <ix-button\n appearance=\"text\"\n @click=${() => {\n this.isExpanded = !this.isExpanded;\n }}\n has-icon\n >\n ${this.isExpanded ? copy.viewLess : copy.viewMore}\n <ix-icon slot=\"icon\">${this.isExpanded ? 'remove' : 'add'}</ix-icon>\n </ix-button>\n </div>\n `;\n };\n\n private renderPaginationControls = () => html`\n <ix-pagination\n .page=${this.page}\n .pageSize=${this.pageSize}\n .pageSizes=${this.pageSizes}\n .recordCount=${this.recordCount}\n @updatePagination=${(e: CustomEvent) => {\n this.page = e.detail.page;\n this.pageSize = e.detail.pageSize;\n this.updatePage();\n }}\n ></ix-pagination>\n `;\n\n render() {\n return html`\n <div class=${`grid-container ${this.isLoading ? 'loading' : ''}`}>\n ${this.hideHeader ? nothing : this.renderHeader()}\n ${!this.isLoading\n ? html`<vaadin-grid\n .items=${this.rowLimit > 0 && !this.isExpanded\n ? this.rows.slice(0, this.rowLimit)\n : this.rows}\n all-rows-visible\n column-reordering-allowed\n theme=\"no-border\"\n @mouseup=${this.reorderColumnsFromTable}\n >\n ${this._columns?.map((column: Column) =>\n column.name\n ? html`<vaadin-grid-column\n ${columnHeaderRenderer(\n () => this.renderColumnHeader(column),\n this.sortDirection\n )}\n ${columnBodyRenderer(column.bodyRenderer, [])}\n resizable\n width=${ifDefined(column.width)}\n ?hidden=${column.hidden}\n ?frozen-to-end=${column.frozenToEnd}\n ></vaadin-grid-column>`\n : nothing\n )}\n </vaadin-grid>`\n : nothing}\n ${this.rowLimit > 0\n ? this.renderRowLimitControls()\n : this.renderPaginationControls()}\n </div>\n `;\n }\n}\n"]}

package/dist/components/IxGridColumnFilter.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import '@digital-realty/ix-icon-button/ix-icon-button.js';
-import '@digital-realty/ix-select/ix-select.js';
+import '@digital-realty/ix-icon/ix-icon.js';
 import '@digital-realty/ix-switch/ix-switch.js';
 import type { Column } from '../IxGrid.js';
 export declare class IxGridColumnFilter extends LitElement {
@@ -9,6 +9,11 @@ export declare class IxGridColumnFilter extends LitElement {
     localStorageID: string | undefined;
     private isDropdownVisible;
     disabledColumns: string[];
+    dragEvent: {
+        sourceEl: HTMLElement | null;
+        startId: number;
+        targetId: number;
+    };
     connectedCallback(): void;
     disconnectedCallback(): void;
     outerInteraction: (e: Event) => void;
@@ -16,5 +21,8 @@ export declare class IxGridColumnFilter extends LitElement {
     toggleColumn(id: number): void;
     updateColumn(e: Event, id: number): void;
     dispatchUpdate(columns?: Column[]): void;
+    dragstart(e: DragEvent): void;
+    dragend(): void;
+    dragenter(e: DragEvent): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/IxGridColumnFilter.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import { __decorate } from "tslib";
 import { LitElement, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
 import '@digital-realty/ix-icon-button/ix-icon-button.js';
-import '@digital-realty/ix-select/ix-select.js';
+import '@digital-realty/ix-icon/ix-icon.js';
 import '@digital-realty/ix-switch/ix-switch.js';
 import { IxGridViewStyles } from '../grid-view-styles.js';
 import { IxGridColumnFilterStyles } from './grid-column-filter-styles.js';
@@ -14,6 +15,11 @@ let IxGridColumnFilter = class IxGridColumnFilter extends LitElement {
         this.localStorageID = undefined;
         this.isDropdownVisible = false;
         this.disabledColumns = [];
+        this.dragEvent = {
+            sourceEl: null,
+            startId: -1,
+            targetId: -1,
+        };
         this.outerInteraction = (e) => {
             if (!e.composedPath().includes(this)) {
                 this.isDropdownVisible = false;
@@ -75,9 +81,43 @@ let IxGridColumnFilter = class IxGridColumnFilter extends LitElement {
             composed: true,
         }));
     }
-    render() {
+    dragstart(e) {
+        const el = e.target;
+        this.dragEvent.sourceEl = el;
+        el.style.opacity = '0.3';
+        const id = Number(el.getAttribute('data-id'));
+        this.dragEvent.startId = id;
+    }
+    dragend() {
         var _a;
-        return html ` <div class="grid-menu">
+        if (this.dragEvent.startId !== this.dragEvent.targetId) {
+            const reorderedColumns = [...this.columns];
+            const el = reorderedColumns.splice(this.dragEvent.startId, 1)[0];
+            reorderedColumns.splice(this.dragEvent.targetId, 0, el);
+            this.dispatchEvent(new CustomEvent('reorderColumns', {
+                detail: {
+                    reorderedColumns,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        (_a = this.dragEvent.sourceEl) === null || _a === void 0 ? void 0 : _a.style.removeProperty('opacity');
+        this.dragEvent = {
+            sourceEl: null,
+            startId: -1,
+            targetId: -1,
+        };
+    }
+    dragenter(e) {
+        const el = e.target;
+        if (el.classList.contains('drag-target')) {
+            const target = Number(el.getAttribute('data-id'));
+            this.dragEvent.targetId = target;
+        }
+    }
+    render() {
+        return html `<div class="grid-menu">
       <span
         @click=${() => {
             this.isDropdownVisible = true;
@@ -94,17 +134,28 @@ let IxGridColumnFilter = class IxGridColumnFilter extends LitElement {
             ? html `<div class="active"></div>`
             : nothing}
         ${this.isDropdownVisible
-            ? html ` <div class="dropdown-content">
-              ${(_a = this.columns) === null || _a === void 0 ? void 0 : _a.map((col, id) => html `<div
+            ? html ` <div
+              class="dropdown-content"
+              @dragover=${(e) => e.preventDefault()}
+              @dragstart=${this.dragstart}
+              @dragend=${this.dragend}
+              @dragenter=${this.dragenter}
+            >
+              ${repeat(this.columns, (col) => col.name, (col, id) => html `<div
                   class=${col.hidden ? 'disabled' : ''}
                 >
-                  <label class="ix-switch-label">
+                  <label
+                    class=${`ix-switch-label drag-target ${this.dragEvent.startId === id ? 'dragOrigin' : ''}`}
+                    draggable="true"
+                    data-id=${id}
+                  >
                     <ix-switch
                       .selected=${!col.hidden}
                       @change=${(e) => this.updateColumn(e, id)}
                     >
                     </ix-switch>
                     <p>${col.header}</p>
+                    <ix-icon class="draggable">drag_handle</ix-icon>
                   </label>
                 </div>`)}
             </div>`
@@ -126,6 +177,9 @@ __decorate([
 __decorate([
     state()
 ], IxGridColumnFilter.prototype, "disabledColumns", void 0);
+__decorate([
+    state()
+], IxGridColumnFilter.prototype, "dragEvent", void 0);
 IxGridColumnFilter = __decorate([
     customElement('ix-grid-column-filter')
 ], IxGridColumnFilter);

package/dist/components/IxGridColumnFilter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IxGridColumnFilter.js","sourceRoot":"","sources":["../../src/components/IxGridColumnFilter.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-select/ix-select.js';\nimport '@digital-realty/ix-switch/ix-switch.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { IxGridColumnFilterStyles } from './grid-column-filter-styles.js';\nimport type { Column } from '../IxGrid.js';\n\nconst triggerKeys = [' ', 'Enter'];\n\n@customElement('ix-grid-column-filter')\nexport class IxGridColumnFilter extends LitElement {\n static readonly styles = [IxGridViewStyles, IxGridColumnFilterStyles];\n\n @property({ type: Array }) columns: Column[] = [];\n\n @property({ type: String }) localStorageID: string \| undefined = undefined;\n\n @state() private isDropdownVisible: boolean = false;\n\n @state() disabledColumns: string[] = [];\n\n connectedCallback() {\n super.connectedCallback();\n document.addEventListener('click', this.outerInteraction);\n this.initializeLocalStorage();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.removeEventListener('click', this.outerInteraction);\n }\n\n outerInteraction = (e: Event) => {\n if (!e.composedPath().includes(this)) {\n this.isDropdownVisible = false;\n }\n };\n\n initializeLocalStorage() {\n if (this.localStorageID) {\n const storedDisabledColumns = localStorage.getItem(this.localStorageID);\n\n if (storedDisabledColumns) {\n const disabledColumns = JSON.parse(storedDisabledColumns);\n this.columns.forEach((column, id) => {\n if (disabledColumns.includes(column.name)) {\n this.columns[id].hidden = true;\n }\n });\n }\n this.dispatchUpdate();\n }\n }\n\n toggleColumn(id: number) {\n this.columns[id].hidden = !this.columns[id].hidden;\n\n this.disabledColumns = this.columns\n .filter((column: Column) => column.hidden)\n .map((column: Column) => column.name);\n\n if (this.localStorageID !== undefined) {\n localStorage.setItem(\n this.localStorageID,\n JSON.stringify(this.disabledColumns)\n );\n }\n\n this.dispatchUpdate();\n }\n\n updateColumn(e: Event, id: number) {\n const input = e.target as HTMLElement;\n const el = input.shadowRoot?.querySelector('input');\n\n this.columns[id].hidden = !el?.checked;\n\n this.disabledColumns = this.columns\n .filter((column: Column) => column.hidden)\n .map((column: Column) => column.name);\n\n if (this.localStorageID !== undefined) {\n localStorage.setItem(\n this.localStorageID,\n JSON.stringify(this.disabledColumns)\n );\n }\n\n this.dispatchUpdate();\n }\n\n dispatchUpdate(columns = this.columns) {\n this.dispatchEvent(\n new CustomEvent('columnFilter', {\n detail: {\n columns,\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n render() {\n return html` <div class=\"grid-menu\">\n <span\n @click=${() => {\n this.isDropdownVisible = true;\n }}\n @keyDown=${(e: KeyboardEvent) => {\n if (triggerKeys.includes(e.key)) {\n this.isDropdownVisible = true;\n }\n }}\n class=\"list list-dropdown\"\n >\n <ix-icon-button icon=\"list\"></ix-icon-button>\n ${this.disabledColumns.length > 0\n ? html`<div class=\"active\"></div>`\n : nothing}\n ${this.isDropdownVisible\n ? html` <div class=\"dropdown-content\">\n ${this.columns?.map(\n (col: Column, id: number) => html`<div\n class=${col.hidden ? 'disabled' : ''}\n >\n <label class=\"ix-switch-label\">\n <ix-switch\n .selected=${!col.hidden}\n @change=${(e: Event) => this.updateColumn(e, id)}\n >\n </ix-switch>\n <p>${col.header}</p>\n </label>\n </div>`\n )}\n </div>`\n : nothing}\n </span>\n </div>`;\n }\n}\n"]}
1	+ {"version":3,"file":"IxGridColumnFilter.js","sourceRoot":"","sources":["../../src/components/IxGridColumnFilter.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-switch/ix-switch.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { IxGridColumnFilterStyles } from './grid-column-filter-styles.js';\nimport type { Column } from '../IxGrid.js';\n\nconst triggerKeys = [' ', 'Enter'];\n\n@customElement('ix-grid-column-filter')\nexport class IxGridColumnFilter extends LitElement {\n static readonly styles = [IxGridViewStyles, IxGridColumnFilterStyles];\n\n @property({ type: Array }) columns: Column[] = [];\n\n @property({ type: String }) localStorageID: string \| undefined = undefined;\n\n @state() private isDropdownVisible: boolean = false;\n\n @state() disabledColumns: string[] = [];\n\n @state() dragEvent: {\n sourceEl: HTMLElement \| null;\n startId: number;\n targetId: number;\n } = {\n sourceEl: null,\n startId: -1,\n targetId: -1,\n };\n\n connectedCallback() {\n super.connectedCallback();\n document.addEventListener('click', this.outerInteraction);\n this.initializeLocalStorage();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.removeEventListener('click', this.outerInteraction);\n }\n\n outerInteraction = (e: Event) => {\n if (!e.composedPath().includes(this)) {\n this.isDropdownVisible = false;\n }\n };\n\n initializeLocalStorage() {\n if (this.localStorageID) {\n const storedDisabledColumns = localStorage.getItem(this.localStorageID);\n\n if (storedDisabledColumns) {\n const disabledColumns = JSON.parse(storedDisabledColumns);\n this.columns.forEach((column, id) => {\n if (disabledColumns.includes(column.name)) {\n this.columns[id].hidden = true;\n }\n });\n }\n this.dispatchUpdate();\n }\n }\n\n toggleColumn(id: number) {\n this.columns[id].hidden = !this.columns[id].hidden;\n\n this.disabledColumns = this.columns\n .filter((column: Column) => column.hidden)\n .map((column: Column) => column.name);\n\n if (this.localStorageID !== undefined) {\n localStorage.setItem(\n this.localStorageID,\n JSON.stringify(this.disabledColumns)\n );\n }\n\n this.dispatchUpdate();\n }\n\n updateColumn(e: Event, id: number) {\n const input = e.target as HTMLElement;\n const el = input.shadowRoot?.querySelector('input');\n\n this.columns[id].hidden = !el?.checked;\n\n this.disabledColumns = this.columns\n .filter((column: Column) => column.hidden)\n .map((column: Column) => column.name);\n\n if (this.localStorageID !== undefined) {\n localStorage.setItem(\n this.localStorageID,\n JSON.stringify(this.disabledColumns)\n );\n }\n\n this.dispatchUpdate();\n }\n\n dispatchUpdate(columns = this.columns) {\n this.dispatchEvent(\n new CustomEvent('columnFilter', {\n detail: {\n columns,\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n dragstart(e: DragEvent) {\n const el = e.target as HTMLElement;\n this.dragEvent.sourceEl = el;\n el.style.opacity = '0.3';\n const id = Number(el.getAttribute('data-id') as string);\n this.dragEvent.startId = id;\n }\n\n dragend() {\n if (this.dragEvent.startId !== this.dragEvent.targetId) {\n const reorderedColumns = [...this.columns];\n const el = reorderedColumns.splice(this.dragEvent.startId, 1)[0];\n reorderedColumns.splice(this.dragEvent.targetId, 0, el);\n this.dispatchEvent(\n new CustomEvent('reorderColumns', {\n detail: {\n reorderedColumns,\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n this.dragEvent.sourceEl?.style.removeProperty('opacity');\n this.dragEvent = {\n sourceEl: null,\n startId: -1,\n targetId: -1,\n };\n }\n\n dragenter(e: DragEvent) {\n const el = e.target as HTMLElement;\n if (el.classList.contains('drag-target')) {\n const target = Number(el.getAttribute('data-id') as string);\n this.dragEvent.targetId = target;\n }\n }\n\n render() {\n return html`<div class=\"grid-menu\">\n <span\n @click=${() => {\n this.isDropdownVisible = true;\n }}\n @keyDown=${(e: KeyboardEvent) => {\n if (triggerKeys.includes(e.key)) {\n this.isDropdownVisible = true;\n }\n }}\n class=\"list list-dropdown\"\n >\n <ix-icon-button icon=\"list\"></ix-icon-button>\n ${this.disabledColumns.length > 0\n ? html`<div class=\"active\"></div>`\n : nothing}\n ${this.isDropdownVisible\n ? html` <div\n class=\"dropdown-content\"\n @dragover=${(e: DragEvent) => e.preventDefault()}\n @dragstart=${this.dragstart}\n @dragend=${this.dragend}\n @dragenter=${this.dragenter}\n >\n ${repeat(\n this.columns,\n (col: Column) => col.name,\n (col: Column, id: number) => html`<div\n class=${col.hidden ? 'disabled' : ''}\n >\n <label\n class=${`ix-switch-label drag-target ${\n this.dragEvent.startId === id ? 'dragOrigin' : ''\n }`}\n draggable=\"true\"\n data-id=${id}\n >\n <ix-switch\n .selected=${!col.hidden}\n @change=${(e: Event) => this.updateColumn(e, id)}\n >\n </ix-switch>\n <p>${col.header}</p>\n <ix-icon class=\"draggable\">drag_handle</ix-icon>\n </label>\n </div>`\n )}\n </div>`\n : nothing}\n </span>\n </div>`;\n }\n}\n"]}

package/dist/components/grid-column-filter-styles.js CHANGED Viewed

@@ -31,6 +31,26 @@ export const IxGridColumnFilterStyles = css `
   .dropdown-content label {
     display: flex;
     align-items: center;
+    background-color: rgb(249, 249, 249);
+  }
+  .dropdown-content label.dragOrigin {
+    background: #ff000017;
+    outline: 1px #ff9d9d dashed;
+  }
+  .dropdown-content label p {
+    flex: 2;
+  }
+  .dropdown-content label ix-icon.draggable {
+    font-size: 24px;
+    color: var(--md-sys-color-primary, #1456e0);
+    cursor: move; /* fallback if grab cursor is unsupported */
+    cursor: grab;
+    cursor: -moz-grab;
+    cursor: -webkit-grab;
+    opacity: 0;
+  }
+  .dropdown-content label:hover ix-icon.draggable {
+    opacity: 1;
   }
   .active {
     position: absolute;

package/dist/components/grid-column-filter-styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"grid-column-filter-styles.js","sourceRoot":"","sources":["../../src/components/grid-column-filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoE1C~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxGridColumnFilterStyles = css`\n .dropdown-content {\n position: absolute;\n background-color: #f9f9f9;\n min-width: 160px;\n box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n z-index: 1;\n -webkit-box-align: center;\n align-items: center;\n cursor: pointer;\n vertical-align: middle;\n -webkit-tap-highlight-color: transparent;\n padding: 10px;\n }\n .dropdown-content > div {\n margin: 0px;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 24px;\n letter-spacing: 0.25px;\n color: #092241;\n display: block;\n cursor: pointer;\n }\n .dropdown-content span:hover {\n background-color: #f1f1f1;\n }\n .dropdown-content label {\n display: flex;\n align-items: center;\n }\n .active {\n position: absolute;\n right: 0;\n top: 0;\n height: 8px;\n width: 8px;\n background-color: #db0028;\n border-radius: 50%;\n }\n ix-switch {\n padding: 2px 4px;\n --md-switch-track-height: 12px;\n --md-switch-track-width: 35px;\n --md-sys-color-primary: rgba(20, 86, 224, 0.68);\n --md-sys-color-on-primary: #1456e0;\n --md-sys-color-primary-container: #1456e0;\n --md-switch-handle-height: 19px;\n --md-switch-handle-width: 18px;\n --md-sys-color-surface-container-highest: #9e9e9e;\n --md-sys-color-outline: #9e9e9e;\n --md-switch-pressed-handle-height: 19px;\n --md-switch-pressed-handle-width: 18px;\n --md-switch-handle-color: #fff;\n --md-sys-color-on-surface-variant: white;\n --selected-handle-height: 19px;\n --selected-handle-width: 18px;\n --_pressed-handle-height: 19px;\n --_pressed-handle-width: 18px;\n --md-switch-selected-handle-height: 19px;\n --md-switch-selected-handle-width: 18px;\n margin: 11px 8px 1px 0px;\n }\n .list {\n position: relative;\n }\n`;\n"]}
1	+ {"version":3,"file":"grid-column-filter-styles.js","sourceRoot":"","sources":["../../src/components/grid-column-filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwF1C,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxGridColumnFilterStyles = css`\n .dropdown-content {\n position: absolute;\n background-color: #f9f9f9;\n min-width: 160px;\n box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n z-index: 1;\n -webkit-box-align: center;\n align-items: center;\n cursor: pointer;\n vertical-align: middle;\n -webkit-tap-highlight-color: transparent;\n padding: 10px;\n }\n .dropdown-content > div {\n margin: 0px;\n font-family: 'Open Sans', sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 24px;\n letter-spacing: 0.25px;\n color: #092241;\n display: block;\n cursor: pointer;\n }\n .dropdown-content span:hover {\n background-color: #f1f1f1;\n }\n .dropdown-content label {\n display: flex;\n align-items: center;\n background-color: rgb(249, 249, 249);\n }\n .dropdown-content label.dragOrigin {\n background: #ff000017;\n outline: 1px #ff9d9d dashed;\n }\n .dropdown-content label p {\n flex: 2;\n }\n .dropdown-content label ix-icon.draggable {\n font-size: 24px;\n color: var(--md-sys-color-primary, #1456e0);\n cursor: move; /* fallback if grab cursor is unsupported */\n cursor: grab;\n cursor: -moz-grab;\n cursor: -webkit-grab;\n opacity: 0;\n }\n .dropdown-content label:hover ix-icon.draggable {\n opacity: 1;\n }\n .active {\n position: absolute;\n right: 0;\n top: 0;\n height: 8px;\n width: 8px;\n background-color: #db0028;\n border-radius: 50%;\n }\n ix-switch {\n padding: 2px 4px;\n --md-switch-track-height: 12px;\n --md-switch-track-width: 35px;\n --md-sys-color-primary: rgba(20, 86, 224, 0.68);\n --md-sys-color-on-primary: #1456e0;\n --md-sys-color-primary-container: #1456e0;\n --md-switch-handle-height: 19px;\n --md-switch-handle-width: 18px;\n --md-sys-color-surface-container-highest: #9e9e9e;\n --md-sys-color-outline: #9e9e9e;\n --md-switch-pressed-handle-height: 19px;\n --md-switch-pressed-handle-width: 18px;\n --md-switch-handle-color: #fff;\n --md-sys-color-on-surface-variant: white;\n --selected-handle-height: 19px;\n --selected-handle-width: 18px;\n --_pressed-handle-height: 19px;\n --_pressed-handle-width: 18px;\n --md-switch-selected-handle-height: 19px;\n --md-switch-selected-handle-width: 18px;\n margin: 11px 8px 1px 0px;\n }\n .list {\n position: relative;\n }\n`;\n"]}

package/package.json CHANGED Viewed

@@ -3,13 +3,13 @@
   "description": "Webcomponent ix-grid following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.0.6",
+  "version": "1.0.10",
   "type": "module",
-  "main": "dist/src/index.js",
-  "module": "dist/src/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "exports": {
-    ".": "./dist/src/index.js",
-    "./ix-grid.js": "./dist/src/ix-grid.js"
+    ".": "./dist/index.js",
+    "./ix-grid.js": "./dist/ix-grid.js"
   },
   "publishConfig": {
     "access": "public"
@@ -25,16 +25,16 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@digital-realty/ix-icon": "*",
-    "@digital-realty/ix-icon-button": "^1.0.19",
-    "@digital-realty/ix-select": "*",
-    "@digital-realty/ix-switch": "*",
+    "@digital-realty/ix-icon": "^1.0.2",
+    "@digital-realty/ix-icon-button": "^1.0.20",
+    "@digital-realty/ix-select": "^1.0.20",
+    "@digital-realty/ix-switch": "^2.1.8",
     "@vaadin/grid": "^24.3.2",
     "lit": "^2.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
-    "@digital-realty/theme": "*",
+    "@digital-realty/theme": "^1.0.11",
     "@open-wc/eslint-config": "^9.2.1",
     "@open-wc/testing": "^3.1.6",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
@@ -91,5 +91,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "b9d0668d204a87407a723acbae1f4fd46c7e90b1"
+  "gitHead": "7dd8615d5f732cb14d465b2d46b2ee743546a4b2"
 }

package/src/IxGrid.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { html, LitElement, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property, state, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import '@vaadin/grid';
 import { columnBodyRenderer, columnHeaderRenderer } from '@vaadin/grid/lit.js';
@@ -30,6 +30,8 @@ export interface Column {
 export class IxGrid extends LitElement {
   static readonly styles = [IxGridViewStyles];
+  @query('vaadin-grid') grid!: HTMLElement;
   @property({ type: Array }) columns: Column[] = [];
   @property({ type: Array }) rows: Row[] = [];
@@ -56,12 +58,14 @@ export class IxGrid extends LitElement {
   @state() private filters: Filter[] = [];
+  @state() _columns: Column[] = [];
   @state() isLoading = false;
   @state() isExpanded = false;
   get columnNames() {
-    return this.columns.map((column: Column) => column.name);
+    return this._columns.map((column: Column) => column.name);
   }
   private async updatePage() {
@@ -130,6 +134,44 @@ export class IxGrid extends LitElement {
     </div>
   `;
+  connectedCallback() {
+    super.connectedCallback();
+    this._columns = this.columns;
+  }
+  async reorderColumnsFromTable() {
+    // calulate column order from table header flex order
+    const headerNodes = Array.from(
+      this.grid?.shadowRoot?.querySelectorAll('th') || []
+    );
+    if (headerNodes.length) {
+      const columnOrder = headerNodes
+        .map((el, id) => ({ id, flexPosition: Number(el.style.order) }))
+        .sort((a, b) => a.flexPosition - b.flexPosition)
+        .map(el => el.id);
+      headerNodes.forEach((el, id) => {
+        this._columns[id].width = el.style.width;
+      });
+      const columnsCorrectlyOrdered = columnOrder.every(
+        (x, i) => i === 0 || x > columnOrder[i - 1]
+      );
+      if (!columnsCorrectlyOrdered) {
+        const reorderedColumns = columnOrder.map(id => this._columns[id]);
+        this._columns = [...reorderedColumns];
+        this.isLoading = true;
+        await this.updateComplete;
+        this.isLoading = false;
+      }
+    }
+  }
+  async reorderColumnsFromFilter(e: CustomEvent) {
+    this._columns = [...e.detail.reorderedColumns];
+    this.isLoading = true;
+    await this.updateComplete;
+    this.isLoading = false;
+  }
   private renderHeader = () => html`
     <div class="grid-header">
       <h2>
@@ -138,18 +180,19 @@ export class IxGrid extends LitElement {
       </h2>
       <div class="grid-menu">
         <ix-grid-column-filter
-          .columns=${this.columns}
+          .columns=${this._columns}
           localStorageID=${ifDefined(this.localStorageID)}
           @columnFilter=${(e: CustomEvent) => {
             e.detail.columns.forEach((column: Column, id: number) => {
-              this.columns[id].hidden = column.hidden;
+              this._columns[id].hidden = column.hidden;
             });
             this.updatePage();
           }}
+          @reorderColumns=${this.reorderColumnsFromFilter}
         ></ix-grid-column-filter>
         <ix-icon-button icon="download"></ix-icon-button>
         <ix-grid-row-filter
-          .columns=${this.columns}
+          .columns=${this._columns}
           @rowFilter=${(e: CustomEvent) => {
             this.filters = e.detail.filters;
             this.updatePage();
@@ -196,30 +239,33 @@ export class IxGrid extends LitElement {
     return html`
       <div class=${`grid-container ${this.isLoading ? 'loading' : ''}`}>
         ${this.hideHeader ? nothing : this.renderHeader()}
-        <vaadin-grid
-          .items=${this.rowLimit > 0 && !this.isExpanded
-            ? this.rows.slice(0, this.rowLimit)
-            : this.rows}
-          all-rows-visible
-          column-reordering-allowed
-          theme="no-border"
-        >
-          ${this.columns?.map((column: Column) =>
-            column.name
-              ? html`<vaadin-grid-column
-                  ${columnHeaderRenderer(
-                    () => this.renderColumnHeader(column),
-                    this.sortDirection
-                  )}
-                  ${columnBodyRenderer(column.bodyRenderer, [])}
-                  resizable
-                  width=${ifDefined(column.width)}
-                  ?hidden=${column.hidden}
-                  ?frozen-to-end=${column.frozenToEnd}
-                ></vaadin-grid-column>`
-              : nothing
-          )}
-        </vaadin-grid>
+        ${!this.isLoading
+          ? html`<vaadin-grid
+              .items=${this.rowLimit > 0 && !this.isExpanded
+                ? this.rows.slice(0, this.rowLimit)
+                : this.rows}
+              all-rows-visible
+              column-reordering-allowed
+              theme="no-border"
+              @mouseup=${this.reorderColumnsFromTable}
+            >
+              ${this._columns?.map((column: Column) =>
+                column.name
+                  ? html`<vaadin-grid-column
+                      ${columnHeaderRenderer(
+                        () => this.renderColumnHeader(column),
+                        this.sortDirection
+                      )}
+                      ${columnBodyRenderer(column.bodyRenderer, [])}
+                      resizable
+                      width=${ifDefined(column.width)}
+                      ?hidden=${column.hidden}
+                      ?frozen-to-end=${column.frozenToEnd}
+                    ></vaadin-grid-column>`
+                  : nothing
+              )}
+            </vaadin-grid>`
+          : nothing}
         ${this.rowLimit > 0
           ? this.renderRowLimitControls()
           : this.renderPaginationControls()}

package/src/components/IxGridColumnFilter.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 import { LitElement, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
 import '@digital-realty/ix-icon-button/ix-icon-button.js';
-import '@digital-realty/ix-select/ix-select.js';
+import '@digital-realty/ix-icon/ix-icon.js';
 import '@digital-realty/ix-switch/ix-switch.js';
 import { IxGridViewStyles } from '../grid-view-styles.js';
 import { IxGridColumnFilterStyles } from './grid-column-filter-styles.js';
@@ -21,6 +22,16 @@ export class IxGridColumnFilter extends LitElement {
   @state() disabledColumns: string[] = [];
+  @state() dragEvent: {
+    sourceEl: HTMLElement | null;
+    startId: number;
+    targetId: number;
+  } = {
+    sourceEl: null,
+    startId: -1,
+    targetId: -1,
+  };
   connectedCallback() {
     super.connectedCallback();
     document.addEventListener('click', this.outerInteraction);
@@ -103,8 +114,47 @@ export class IxGridColumnFilter extends LitElement {
     );
   }
+  dragstart(e: DragEvent) {
+    const el = e.target as HTMLElement;
+    this.dragEvent.sourceEl = el;
+    el.style.opacity = '0.3';
+    const id = Number(el.getAttribute('data-id') as string);
+    this.dragEvent.startId = id;
+  }
+  dragend() {
+    if (this.dragEvent.startId !== this.dragEvent.targetId) {
+      const reorderedColumns = [...this.columns];
+      const el = reorderedColumns.splice(this.dragEvent.startId, 1)[0];
+      reorderedColumns.splice(this.dragEvent.targetId, 0, el);
+      this.dispatchEvent(
+        new CustomEvent('reorderColumns', {
+          detail: {
+            reorderedColumns,
+          },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }
+    this.dragEvent.sourceEl?.style.removeProperty('opacity');
+    this.dragEvent = {
+      sourceEl: null,
+      startId: -1,
+      targetId: -1,
+    };
+  }
+  dragenter(e: DragEvent) {
+    const el = e.target as HTMLElement;
+    if (el.classList.contains('drag-target')) {
+      const target = Number(el.getAttribute('data-id') as string);
+      this.dragEvent.targetId = target;
+    }
+  }
   render() {
-    return html` <div class="grid-menu">
+    return html`<div class="grid-menu">
       <span
         @click=${() => {
           this.isDropdownVisible = true;
@@ -121,18 +171,33 @@ export class IxGridColumnFilter extends LitElement {
           ? html`<div class="active"></div>`
           : nothing}
         ${this.isDropdownVisible
-          ? html` <div class="dropdown-content">
-              ${this.columns?.map(
+          ? html` <div
+              class="dropdown-content"
+              @dragover=${(e: DragEvent) => e.preventDefault()}
+              @dragstart=${this.dragstart}
+              @dragend=${this.dragend}
+              @dragenter=${this.dragenter}
+            >
+              ${repeat(
+                this.columns,
+                (col: Column) => col.name,
                 (col: Column, id: number) => html`<div
                   class=${col.hidden ? 'disabled' : ''}
                 >
-                  <label class="ix-switch-label">
+                  <label
+                    class=${`ix-switch-label drag-target ${
+                      this.dragEvent.startId === id ? 'dragOrigin' : ''
+                    }`}
+                    draggable="true"
+                    data-id=${id}
+                  >
                     <ix-switch
                       .selected=${!col.hidden}
                       @change=${(e: Event) => this.updateColumn(e, id)}
                     >
                     </ix-switch>
                     <p>${col.header}</p>
+                    <ix-icon class="draggable">drag_handle</ix-icon>
                   </label>
                 </div>`
               )}

package/src/components/grid-column-filter-styles.ts CHANGED Viewed

@@ -32,6 +32,26 @@ export const IxGridColumnFilterStyles = css`
   .dropdown-content label {
     display: flex;
     align-items: center;
+    background-color: rgb(249, 249, 249);
+  }
+  .dropdown-content label.dragOrigin {
+    background: #ff000017;
+    outline: 1px #ff9d9d dashed;
+  }
+  .dropdown-content label p {
+    flex: 2;
+  }
+  .dropdown-content label ix-icon.draggable {
+    font-size: 24px;
+    color: var(--md-sys-color-primary, #1456e0);
+    cursor: move; /* fallback if grab cursor is unsupported */
+    cursor: grab;
+    cursor: -moz-grab;
+    cursor: -webkit-grab;
+    opacity: 0;
+  }
+  .dropdown-content label:hover ix-icon.draggable {
+    opacity: 1;
   }
   .active {
     position: absolute;

package/tsconfig.json CHANGED Viewed

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "skipLibCheck": true,
     "target": "es2018",
     "module": "esnext",
     "moduleResolution": "node",

package/web-test-runner.config.mjs CHANGED Viewed

@@ -11,7 +11,7 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
     exportConditions: ['browser', 'development'],
   },
-  port: 8028,
+  port: 8030,
   /** Filter out lit dev mode logs */
   filterBrowserLogs(log) {