@3mo/data-grid 0.20.2 → 0.21.0-preview.0

package/dist/DataGrid.d.ts

@@ -8,7 +8,7 @@ import { DataGridColumnsController } from './DataGridColumnsController.js';
 import { DataGridSelectionBehaviorOnDataChange, DataGridSelectionController, type DataGridSelectability } from './DataGridSelectionController.js';
 import { DataGridSortingController, type DataGridRankedSortDefinition, type DataGridSorting } from './DataGridSortingController.js';
 import { DataGridDetailsController } from './DataGridDetailsController.js';
-import { DataGridCsvController, DataGridSidePanelTab, type DataGridColumn, type DataGridCell, type DataGridRow, DataGridContextMenuController } from './index.js';
+import { DataGridCsvController, DataGridSidePanelTab, type DataGridColumn, type DataGridCell, type DataGridRow, DataGridContextMenuController, DataGridReorderabilityController, type DataGridReorderChange } from './index.js';
 import { DataRecord } from './DataRecord.js';
 export type DataGridPagination = 'auto' | number;
 export declare enum DataGridEditability {
@@ -31,6 +31,7 @@ export declare enum DataGridEditability {
  * @attr selectedData - The selected data.
  * @attr selectOnClick - Whether the row should be selected on click.
  * @attr selectionBehaviorOnDataChange - The behavior of the selection when the data changes.
+ * @attr reorderability - Whether the rows can be reordered. Can only be enabled if sorting is not active, selectability is not 'multiple', and no details are present.
  * @attr multipleDetails - Whether multiple details can be opened at the same time.
  * @attr subDataGridDataSelector - The key path of the sub data grid data.
  * @attr hasDataDetail - Whether the data has a detail.
@@ -69,6 +70,7 @@ export declare enum DataGridEditability {
  * @fires sidePanelOpen
  * @fires sidePanelClose
  * @fires sortingChange
+ * @fires reorder
  * @fires rowDetailsOpen
  * @fires rowDetailsClose
  * @fires rowClick
@@ -90,6 +92,7 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
     readonly sidePanelOpen: EventDispatcher<DataGridSidePanelTab>;
     readonly sidePanelClose: EventDispatcher;
     readonly sortingChange: EventDispatcher<Array<DataGridRankedSortDefinition<TData>>>;
+    readonly reorder: EventDispatcher<Array<DataGridReorderChange<TData>>>;
     readonly rowDetailsOpen: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
     readonly rowDetailsClose: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
     readonly rowClick: EventDispatcher<DataGridRow<TData, TDetailsElement>>;
@@ -108,6 +111,7 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
     selectedData: TData[];
     selectOnClick: boolean;
     selectionBehaviorOnDataChange: DataGridSelectionBehaviorOnDataChange;
+    reorderability?: boolean;
     getRowDetailsTemplate?: (data: TData) => HTMLTemplateResult;
     multipleDetails: boolean;
     subDataGridDataSelector?: KeyPath.Of<TData>;
@@ -180,6 +184,7 @@ export declare class DataGrid<TData, TDetailsElement extends Element | undefined
     readonly contextMenuController: DataGridContextMenuController<TData>;
     readonly detailsController: DataGridDetailsController<TData>;
     readonly csvController: DataGridCsvController<TData>;
+    readonly reorderabilityController: DataGridReorderabilityController<TData>;
     readonly rowIntersectionObserver?: IntersectionObserver;
     protected updated(...parameters: Parameters<Component['updated']>): void;
     private navigateToLastValidPageIfNeeded;

package/dist/DataGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../DataGrid.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../DataGrid.ts"],"names":[],"mappings":"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"}

package/dist/DataGrid.js

@@ -12,7 +12,7 @@ import { DataGridColumnsController } from './DataGridColumnsController.js';
 import { DataGridSelectionBehaviorOnDataChange, DataGridSelectionController } from './DataGridSelectionController.js';
 import { DataGridSortingController } from './DataGridSortingController.js';
 import { DataGridDetailsController } from './DataGridDetailsController.js';
-import { DataGridCsvController, DataGridSidePanelTab, DataGridContextMenuController, DataGridColumnComponent } from './index.js';
+import { DataGridCsvController, DataGridSidePanelTab, DataGridContextMenuController, DataGridColumnComponent, DataGridReorderabilityController } from './index.js';
 import { DataRecord } from './DataRecord.js';
 Localizer.dictionaries.add('de', {
     'No results': 'Kein Ergebnis',
@@ -39,6 +39,7 @@ export var DataGridEditability;
  * @attr selectedData - The selected data.
  * @attr selectOnClick - Whether the row should be selected on click.
  * @attr selectionBehaviorOnDataChange - The behavior of the selection when the data changes.
+ * @attr reorderability - Whether the rows can be reordered. Can only be enabled if sorting is not active, selectability is not 'multiple', and no details are present.
  * @attr multipleDetails - Whether multiple details can be opened at the same time.
  * @attr subDataGridDataSelector - The key path of the sub data grid data.
  * @attr hasDataDetail - Whether the data has a detail.
@@ -77,6 +78,7 @@ export var DataGridEditability;
  * @fires sidePanelOpen
  * @fires sidePanelClose
  * @fires sortingChange
+ * @fires reorder
  * @fires rowDetailsOpen
  * @fires rowDetailsClose
  * @fires rowClick
@@ -121,6 +123,7 @@ let DataGrid = class DataGrid extends Component {
         this.contextMenuController = new DataGridContextMenuController(this);
         this.detailsController = new DataGridDetailsController(this);
         this.csvController = new DataGridCsvController(this);
+        this.reorderabilityController = new DataGridReorderabilityController(this);
         this.splitterResizerTemplate = html `
 		<mo-splitter-resizer-line style='--mo-splitter-resizer-line-thickness: 1px; --mo-splitter-resizer-line-idle-background: var(--mo-color-transparent-gray-3); --mo-splitter-resizer-line-horizontal-transform: scaleX(5);'></mo-splitter-resizer-line>
 	`;
@@ -313,6 +316,7 @@ let DataGrid = class DataGrid extends Component {
     static get styles() {
         return css `
 			:host {
+				--mo-data-grid-column-reorder-width: 20px;
 				--mo-data-grid-column-details-width: 20px;
 				--mo-data-grid-column-selection-width: 40px;
 				--mo-data-grid-column-actions-width: 28px;
@@ -591,6 +595,7 @@ let DataGrid = class DataGrid extends Component {
     getRowTemplate(dataRecord, index = 0) {
         return staticHtml `
 			<${this.rowElementTag} part='row'
+				${this.reorderabilityController.item({ index: dataRecord.index, disabled: !this.reorderabilityController.enabled })}
 				.dataRecord=${dataRecord}
 				?data-has-alternating-background=${this.hasAlternatingBackground && index % 2 === 1}
 			></${this.rowElementTag}>
@@ -744,6 +749,9 @@ __decorate([
 __decorate([
     event()
 ], DataGrid.prototype, "sortingChange", void 0);
+__decorate([
+    event()
+], DataGrid.prototype, "reorder", void 0);
 __decorate([
     event()
 ], DataGrid.prototype, "rowDetailsOpen", void 0);
@@ -798,6 +806,9 @@ __decorate([
 __decorate([
     property()
 ], DataGrid.prototype, "selectionBehaviorOnDataChange", void 0);
+__decorate([
+    property({ type: Boolean })
+], DataGrid.prototype, "reorderability", void 0);
 __decorate([
     property({ type: Object })
 ], DataGrid.prototype, "getRowDetailsTemplate", void 0);

package/dist/DataGridColumn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridColumn.d.ts","sourceRoot":"","sources":["../DataGridColumn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAA;AACnE,OAAO,KAAK,KAAK,GAAG,MAAM,SAAS,CAAA;AAEnC,MAAM,MAAM,uBAAuB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAEhE,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAA;AAE3D,MAAM,MAAM,uBAAuB,GAAG,kBAAkB,GAAG,GAAG,CAAC,SAAS,GAAG,YAAY,GAAG,MAAM,EAAE,kBAAkB,CAAC,CAAA;AAErH,qBAAa,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAClD,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IAC/B,YAAY,EAAG,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAA;IAEhC,OAAO,EAAG,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,KAAK,EAAE,GAAG,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAgB;IAEnE,SAAS,EAAE,uBAAuB,CAAU;IAE5C,MAAM,UAAQ;IACd,IAAI;IAKJ,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAC7B,YAAY,CAAC,MAAM,EAAE,oBAAoB;IAKzC,QAAQ,UAAO;IAEf,OAAO,CAAC,iBAAiB,CAAC,CAAmB;IAC7C,IAAI,gBAAgB,snDAAyD;IAC7E,IAAI,gBAAgB,CAAC,KAAK,mnDAAA,EAAoC;IAE9D,UAAU,CAAC,QAAQ,CAAC,EAAE,uBAAuB,GAAG,IAAI;IAkBpD,oBAAoB,CAAC,IAAI,uBAAuB;IAEhD,kBAAkB,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAEnE,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAQ;IAC5C,sBAAsB,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAEvE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,CAAC,GAAG,EAAE,MAAM,GAAG,kBAAkB;gBAEpC,MAAM,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAI1D,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,OAAO;IAMpD,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC;IAIzD,OAAO,CAAC,cAAc,CAAC,CAAQ;IAC/B,IAAI,aAAa,WAAsC;IACvD,IAAI,aAAa,CAAC,KAAK,QAAA,EAGtB;IAED,OAAO,CAAC,aAAa,CAAQ;IAC7B,IAAI,YAAY,YAAgC;IAChD,IAAI,YAAY,CAAC,KAAK,SAAA,EAGrB;IAED,IAAI,iBAAiB,6FAIpB;IAED,IAAI,WAAW,mCAkBd;IAED,IAAI,uBAAuB,WA2B1B;IAED,kBAAkB,CAAC,IAAI,SAAS,CAAC,MAAM,CAAC;IACxC,gBAAgB,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,SAAS,CAAC,MAAM,CAAC;CAChE"}
+{"version":3,"file":"DataGridColumn.d.ts","sourceRoot":"","sources":["../DataGridColumn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAA;AACnE,OAAO,KAAK,KAAK,GAAG,MAAM,SAAS,CAAA;AAEnC,MAAM,MAAM,uBAAuB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAEhE,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAA;AAE3D,MAAM,MAAM,uBAAuB,GAAG,kBAAkB,GAAG,GAAG,CAAC,SAAS,GAAG,YAAY,GAAG,MAAM,EAAE,kBAAkB,CAAC,CAAA;AAErH,qBAAa,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAClD,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IAC/B,YAAY,EAAG,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAA;IAEhC,OAAO,EAAG,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,KAAK,EAAE,GAAG,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAgB;IAEnE,SAAS,EAAE,uBAAuB,CAAU;IAE5C,MAAM,UAAQ;IACd,IAAI;IAKJ,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAC7B,YAAY,CAAC,MAAM,EAAE,oBAAoB;IAKzC,QAAQ,UAAO;IAEf,OAAO,CAAC,iBAAiB,CAAC,CAAmB;IAC7C,IAAI,gBAAgB,snDAAyD;IAC7E,IAAI,gBAAgB,CAAC,KAAK,mnDAAA,EAAoC;IAE9D,UAAU,CAAC,QAAQ,CAAC,EAAE,uBAAuB,GAAG,IAAI;IAkBpD,oBAAoB,CAAC,IAAI,uBAAuB;IAEhD,kBAAkB,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAEnE,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAQ;IAC5C,sBAAsB,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,kBAAkB;IAEvE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,CAAC,GAAG,EAAE,MAAM,GAAG,kBAAkB;gBAEpC,MAAM,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAI1D,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,OAAO;IAMpD,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC;IAIzD,OAAO,CAAC,cAAc,CAAC,CAAQ;IAC/B,IAAI,aAAa,WAAsC;IACvD,IAAI,aAAa,CAAC,KAAK,QAAA,EAGtB;IAED,OAAO,CAAC,aAAa,CAAQ;IAC7B,IAAI,YAAY,YAAgC;IAChD,IAAI,YAAY,CAAC,KAAK,SAAA,EAGrB;IAED,IAAI,iBAAiB,6FAIpB;IAED,IAAI,WAAW,mCAkBd;IAED,IAAI,uBAAuB,WAE1B;IAED,kBAAkB,CAAC,IAAI,SAAS,CAAC,MAAM,CAAC;IACxC,gBAAgB,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,SAAS,CAAC,MAAM,CAAC;CAChE"}

package/dist/DataGridColumn.js

@@ -68,34 +68,13 @@ export class DataGridColumn {
             .filter(n => isNaN(n) === false)
             .reduce(((a, b) => a + b), 0)
             || 0;
-        return html `
-			<mo-data-grid-footer-sum heading=${this.sumHeading || ''} ${style({ color: this.dataGrid.selectedData.length > 0 ? 'var(--mo-color-accent)' : 'currentColor' })}>
-				${this.getSumTemplate(sum)}
-			</mo-data-grid-footer-sum>
+        return html `
+			<mo-data-grid-footer-sum heading=${this.sumHeading || ''} ${style({ color: this.dataGrid.selectedData.length > 0 ? 'var(--mo-color-accent)' : 'currentColor' })}>
+				${this.getSumTemplate(sum)}
+			</mo-data-grid-footer-sum>
 		`;
     }
     get stickyColumnInsetInline() {
-        const dataGrid = this.dataGrid;
-        if (!dataGrid || !this.sticky) {
-            return '';
-        }
-        const columnIndex = dataGrid.visibleColumns.indexOf(this);
-        const calculate = (type) => dataGrid.visibleColumns
-            .filter((c, i) => c.sticky === type && (type === 'start' ? i < columnIndex : i > columnIndex))
-            .map(c => c.widthInPixels)
-            .filter(x => x !== undefined)
-            .reduce((a, b) => a + b, 0);
-        const start = `${dataGrid.columnsController.selectionColumnWidthInPixels + dataGrid.columnsController.detailsColumnWidthInPixels + calculate('start')}px`;
-        const end = `${calculate('end') + dataGrid.columnsController.actionsColumnWidthInPixels}px`;
-        switch (this.sticky) {
-            case 'start':
-                return `${start} auto`;
-            case 'end':
-                return `auto ${end}`;
-            case 'both':
-                return `${start} ${end}`;
-            default:
-                return '';
-        }
+        return this.dataGrid?.columnsController.getStickyColumnInsetInline(this) ?? '';
     }
 }

package/dist/DataGridColumnHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridColumnHeader.d.ts","sourceRoot":"","sources":["../DataGridColumnHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAA+C,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAGjH,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAczD,qBACa,oBAAqB,SAAQ,SAAS;IACtB,MAAM,EAAG,cAAc,CAAC,OAAO,CAAC,CAAA;IAChB,QAAQ,UAAQ;IAE5D,WAAoB,MAAM,kCAoHzB;IAED,QAAQ,CAAC,gBAAgB,2BAEvB;IAEF,IAAa,QAAQ,uBA4BpB;IAED,OAAO,KAAK,eAAe,GAO1B;IAED,OAAO,KAAK,eAAe,GAU1B;IAED,OAAO,KAAK,YAAY,GAiBvB;IAED,OAAO,CAAC,uBAAuB;IAiB/B,OAAO,CAAC,0BAA0B;IAmBlC,OAAO,CAAC,oBAAoB;IAS5B,OAAO,KAAK,iBAAiB,GAa5B;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,4BAA4B,EAAE,oBAAoB,CAAA;KAClD;CACD"}
+{"version":3,"file":"DataGridColumnHeader.d.ts","sourceRoot":"","sources":["../DataGridColumnHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAA0D,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAG5H,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAezD,qBACa,oBAAqB,SAAQ,SAAS;IACtB,MAAM,EAAG,cAAc,CAAC,OAAO,CAAC,CAAA;IAChB,QAAQ,UAAQ;IAE5D,WAAoB,MAAM,kCAgIzB;IAED,QAAQ,CAAC,gBAAgB,2BAEvB;IAEF,IAAa,QAAQ,uBA4BpB;IAED,OAAO,KAAK,eAAe,GAO1B;IAED,OAAO,KAAK,eAAe,GAU1B;IAED,OAAO,KAAK,YAAY,GAiBvB;IAED,OAAO,CAAC,uBAAuB;IAiB/B,OAAO,CAAC,0BAA0B;IAmBlC,OAAO,CAAC,oBAAoB;IAS5B,OAAO,KAAK,iBAAiB,GAa5B;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,4BAA4B,EAAE,oBAAoB,CAAA;KAClD;CACD"}

package/dist/DataGridColumnHeader.js

@@ -1,9 +1,10 @@
 import { __decorate } from "tslib";
-import { bind, Component, component, css, html, join, property, style } from '@a11d/lit';
+import { bind, Component, component, css, html, join, property, style, unsafeCSS } from '@a11d/lit';
 import { tooltip } from '@3mo/tooltip';
 import { Localizer } from '@3mo/localization';
 import { ResizeController } from '@3mo/resize-observer';
 import { DataGridSortingStrategy } from './DataGridSortingController.js';
+import { ReorderabilityState } from './DataGridReorderabilityController.js';
 Localizer.dictionaries.add('de', {
     'Sorting': 'Sortierung',
     'Sort descending': 'Absteigend sortieren',
@@ -32,6 +33,18 @@ let DataGridColumnHeader = class DataGridColumnHeader extends Component {
 				anchor-name: --mo-data-grid-column-header;
 			}
 
+			:host([data-reorderability=${unsafeCSS(ReorderabilityState.Dragging)}]) {
+				opacity: 0.5;
+			}
+
+			:host([data-reorderability=${unsafeCSS(ReorderabilityState.DropBefore)}]) {
+				border-inline-start: 3px solid var(--mo-color-accent);
+			}
+
+			:host([data-reorderability=${unsafeCSS(ReorderabilityState.DropAfter)}]) {
+				border-inline-end: 3px solid var(--mo-color-accent);
+			}
+
 			:host(:hover) {
 				background: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-gray) 8%);
 			}

package/dist/DataGridColumnsController.d.ts

@@ -2,9 +2,7 @@ import { Controller } from '@a11d/lit';
 import { type DataGrid, type DataGridColumn } from './index.js';
 export declare class DataGridColumnsController<TData> extends Controller {
     readonly host: DataGrid<TData, any>;
-    readonly detailsColumnWidthInPixels = 0;
-    readonly selectionColumnWidthInPixels = 0;
-    readonly actionsColumnWidthInPixels = 0;
+    private readonly columnWidths;
     private _extractedColumns;
     private initialized;
     constructor(host: DataGrid<TData, any>);
@@ -16,6 +14,7 @@ export declare class DataGridColumnsController<TData> extends Controller {
     get extractedColumns(): DataGridColumn<TData, unknown>[];
     private provideCssColumnsProperties;
     private get columns();
+    private get orderColumnWidth();
     private get detailsColumnWidth();
     private get selectionColumnWidth();
     private get dataColumnsWidths();
@@ -23,5 +22,7 @@ export declare class DataGridColumnsController<TData> extends Controller {
     private get columnsElements();
     private get elementExtractedColumns();
     private get autoGeneratedColumns();
+    setColumnWidth(column: keyof typeof this.columnWidths, widthInPixels: number): void;
+    getStickyColumnInsetInline(column: DataGridColumn<TData> | keyof typeof this.columnWidths): string;
 }
 //# sourceMappingURL=DataGridColumnsController.d.ts.map

package/dist/DataGridColumnsController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridColumnsController.d.ts","sourceRoot":"","sources":["../DataGridColumnsController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AACtC,OAAO,EAA2B,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,YAAY,CAAA;AAExF,qBAAa,yBAAyB,CAAC,KAAK,CAAE,SAAQ,UAAU;aAQjC,IAAI,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC;IAPxD,QAAQ,CAAC,0BAA0B,KAAI;IACvC,QAAQ,CAAC,4BAA4B,KAAI;IACzC,QAAQ,CAAC,0BAA0B,KAAI;IAEvC,OAAO,CAAC,iBAAiB,CAAqC;IAC9D,OAAO,CAAC,WAAW,CAAQ;gBAEG,IAAI,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC;IAI/C,UAAU;IAIV,WAAW;IAQpB,IAAI,cAAc,qCAEjB;IAED,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAMhD,cAAc;IAOd,IAAI,gBAAgB,qCAEnB;IAID,OAAO,CAAC,2BAA2B;IAOnC,OAAO,KAAK,OAAO,GAQlB;IAED,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,KAAK,oBAAoB,GAE/B;IAED,OAAO,KAAK,iBAAiB,GAI5B;IAED,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,KAAK,eAAe,GAa1B;IAED,OAAO,KAAK,uBAAuB,GAElC;IAED,OAAO,KAAK,oBAAoB,GA4B/B;CACD"}
+{"version":3,"file":"DataGridColumnsController.d.ts","sourceRoot":"","sources":["../DataGridColumnsController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AACtC,OAAO,EAA2B,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,YAAY,CAAA;AAExF,qBAAa,yBAAyB,CAAC,KAAK,CAAE,SAAQ,UAAU;aAKjC,IAAI,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC;IAJxD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA0D;IACvF,OAAO,CAAC,iBAAiB,CAAqC;IAC9D,OAAO,CAAC,WAAW,CAAQ;gBAEG,IAAI,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC;IAI/C,UAAU;IAIV,WAAW;IAQpB,IAAI,cAAc,qCAEjB;IAED,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAMhD,cAAc;IAOd,IAAI,gBAAgB,qCAEnB;IAID,OAAO,CAAC,2BAA2B;IAOnC,OAAO,KAAK,OAAO,GASlB;IAED,OAAO,KAAK,gBAAgB,GAE3B;IAED,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,KAAK,oBAAoB,GAE/B;IAED,OAAO,KAAK,iBAAiB,GAI5B;IAED,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,KAAK,eAAe,GAa1B;IAED,OAAO,KAAK,uBAAuB,GAElC;IAED,OAAO,KAAK,oBAAoB,GA4B/B;IAED,cAAc,CAAC,MAAM,EAAE,MAAM,OAAO,IAAI,CAAC,YAAY,EAAE,aAAa,EAAE,MAAM;IAI5E,0BAA0B,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,MAAM,OAAO,IAAI,CAAC,YAAY;CAwCzF"}

package/dist/DataGridColumnsController.js

@@ -4,9 +4,7 @@ export class DataGridColumnsController extends Controller {
     constructor(host) {
         super(host);
         this.host = host;
-        this.detailsColumnWidthInPixels = 0;
-        this.selectionColumnWidthInPixels = 0;
-        this.actionsColumnWidthInPixels = 0;
+        this.columnWidths = { reordering: 0, details: 0, selection: 0, actions: 0 };
         this._extractedColumns = new Array();
         this.initialized = false;
     }
@@ -47,6 +45,7 @@ export class DataGridColumnsController extends Controller {
     }
     get columns() {
         return [
+            { name: 'order', width: this.orderColumnWidth },
             { name: 'details', width: this.detailsColumnWidth },
             { name: 'selection', width: this.selectionColumnWidth },
             ...this.dataColumnsWidths.map(width => ({ name: 'data', width })),
@@ -54,6 +53,9 @@ export class DataGridColumnsController extends Controller {
             { name: 'actions', width: this.actionsColumnWidth }
         ].filter(c => c.width !== undefined);
     }
+    get orderColumnWidth() {
+        return !this.host.reorderabilityController.enabled ? undefined : window.getComputedStyle(this.host).getPropertyValue('--mo-data-grid-column-reorder-width');
+    }
     get detailsColumnWidth() {
         return !this.host.hasDetails ? undefined : window.getComputedStyle(this.host).getPropertyValue('--mo-data-grid-column-details-width');
     }
@@ -113,4 +115,43 @@ export class DataGridColumnsController extends Controller {
             return column;
         });
     }
+    setColumnWidth(column, widthInPixels) {
+        this.columnWidths[column] = widthInPixels;
+    }
+    getStickyColumnInsetInline(column) {
+        if (typeof column !== 'object') {
+            switch (column) {
+                case 'reordering':
+                    return '0px';
+                case 'details':
+                    return `${this.columnWidths.reordering}px`;
+                case 'selection':
+                    return `${this.columnWidths.reordering + this.columnWidths.details}px`;
+                case 'actions':
+                    return 'auto';
+            }
+        }
+        if (!column.sticky) {
+            return '';
+        }
+        const columnIndex = this.visibleColumns.indexOf(column);
+        const calculate = (type) => this.visibleColumns
+            .filter((c, i) => c.sticky === type && (type === 'start' ? i < columnIndex : i > columnIndex))
+            .map(c => c.widthInPixels)
+            .filter(x => x !== undefined)
+            .reduce((a, b) => a + b, 0);
+        const { reordering, selection, details, actions } = this.columnWidths;
+        const start = `${reordering + selection + details + calculate('start')}px`;
+        const end = `${calculate('end') + actions}px`;
+        switch (column.sticky) {
+            case 'start':
+                return `${start} auto`;
+            case 'end':
+                return `auto ${end}`;
+            case 'both':
+                return `${start} ${end}`;
+            default:
+                return '';
+        }
+    }
 }

package/dist/DataGridHeader.d.ts

@@ -1,17 +1,19 @@
 import { Component } from '@a11d/lit';
-import { type DataGrid } from './index.js';
+import { type DataGrid, ReorderabilityController } from './index.js';
 export declare class DataGridHeader<TData> extends Component {
     readonly pageChange: EventDispatcher<number>;
     readonly modeSelectionChange: EventDispatcher<string>;
     dataGrid: DataGrid<TData, any>;
     overlayOpen: boolean;
     private readonly columnHeaders;
+    readonly reorderabilityController: ReorderabilityController;
     protected connected(): void;
     protected disconnected(): void;
     private readonly handleDataGridDataChange;
     protected updated(...parameters: Parameters<Component['updated']>): void;
     static get styles(): import("@a11d/lit").CSSResult;
     protected get template(): import("lit-html").HTMLTemplateResult;
+    private get reorderabilityTemplate();
     private get detailsExpanderTemplate();
     private get selectionTemplate();
     private get selection();

package/dist/DataGridHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridHeader.d.ts","sourceRoot":"","sources":["../DataGridHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAqD,MAAM,WAAW,CAAA;AAGnG,OAAO,EAAyB,KAAK,QAAQ,EAAmD,MAAM,YAAY,CAAA;AAiBlH,qBACa,cAAc,CAAC,KAAK,CAAE,SAAQ,SAAS;IAC1C,QAAQ,CAAC,UAAU,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAC7C,QAAQ,CAAC,mBAAmB,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAEnC,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IACf,WAAW,UAAQ;IAEvB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;cAEjF,SAAS;cAIT,YAAY;IAI/B,OAAO,CAAC,QAAQ,CAAC,wBAAwB,CAExC;cAEkB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAK1E,WAAoB,MAAM,kCAyDzB;IAED,cAAuB,QAAQ,0CAQ9B;IAED,OAAO,KAAK,uBAAuB,GAclC;IAED,OAAO,KAAK,iBAAiB,GAW5B;IAED,OAAO,KAAK,SAAS,GASpB;IAED,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAQrC;IAED,OAAO,KAAK,eAAe,GAM1B;IAED,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,eAAe,GA2B1B;IAED,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;CAIxB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;KAC9C;CACD"}
+{"version":3,"file":"DataGridHeader.d.ts","sourceRoot":"","sources":["../DataGridHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAA6D,MAAM,WAAW,CAAA;AAG3G,OAAO,EAAyB,KAAK,QAAQ,EAAmD,wBAAwB,EAAE,MAAM,YAAY,CAAA;AAiB5I,qBACa,cAAc,CAAC,KAAK,CAAE,SAAQ,SAAS;IAC1C,QAAQ,CAAC,UAAU,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAC7C,QAAQ,CAAC,mBAAmB,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAEnC,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IACf,WAAW,UAAQ;IAEvB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAEpG,QAAQ,CAAC,wBAAwB,2BAU/B;cAEiB,SAAS;cAIT,YAAY;IAI/B,OAAO,CAAC,QAAQ,CAAC,wBAAwB,CAExC;cAEkB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAK1E,WAAoB,MAAM,kCAiDzB;IAED,cAAuB,QAAQ,0CAS9B;IAED,OAAO,KAAK,sBAAsB,GAOjC;IAED,OAAO,KAAK,uBAAuB,GAclC;IAED,OAAO,KAAK,iBAAiB,GAW5B;IAED,OAAO,KAAK,SAAS,GASpB;IAED,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAQrC;IAED,OAAO,KAAK,eAAe,GAM1B;IAED,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,eAAe,GA2B1B;IAED,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,gBAAgB;CAIxB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;KAC9C;CACD"}

package/dist/DataGridHeader.js

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
-import { component, Component, css, html, property, event, style, live, queryAll } from '@a11d/lit';
+import { component, Component, css, html, property, event, style, live, queryAll, repeat } from '@a11d/lit';
 import { observeResize } from '@3mo/resize-observer';
 import { Localizer } from '@3mo/localization';
-import { DataGridSelectability, DataGridSidePanelTab } from './index.js';
+import { DataGridSelectability, DataGridSidePanelTab, ReorderabilityController } from './index.js';
 Localizer.dictionaries.add('en', {
     'Actions for ${count:pluralityNumber} selected entries': [
         'Actions for the selected entry',
@@ -19,6 +19,17 @@ let DataGridHeader = class DataGridHeader extends Component {
     constructor() {
         super(...arguments);
         this.overlayOpen = false;
+        this.reorderabilityController = new ReorderabilityController(this, {
+            handleReorder: (source, destination) => {
+                const sourceColumn = this.dataGrid.visibleColumns[source];
+                const destinationColumn = this.dataGrid.visibleColumns[destination];
+                const sourceIndex = this.dataGrid.columns.indexOf(sourceColumn);
+                const destinationIndex = this.dataGrid.columns.indexOf(destinationColumn);
+                this.dataGrid.columns.splice(sourceIndex, 1);
+                this.dataGrid.columns.splice(destinationIndex, 0, sourceColumn);
+                this.dataGrid.setColumns(this.dataGrid.columns);
+            }
+        });
         this.handleDataGridDataChange = () => {
             this.requestUpdate();
         };
@@ -60,20 +71,12 @@ let DataGridHeader = class DataGridHeader extends Component {
 				height: var(--mo-data-grid-header-height);
 			}
 
-			.details, .selection, .actions, .context-menu {
+			.reorder, .details, .selection, .actions, .context-menu {
 				position: sticky;
 				background: var(--mo-data-grid-sticky-part-color);
 				z-index: 5;
 			}
 
-			.details {
-				inset-inline-start: 0px;
-			}
-
-			.selection {
-				inset-inline-start: 0px;
-			}
-
 			.actions, .context-menu {
 				inset-inline-end: 0px;
 			}
@@ -103,6 +106,7 @@ let DataGridHeader = class DataGridHeader extends Component {
     }
     get template() {
         return html `
+			${this.reorderabilityTemplate}
 			${this.detailsExpanderTemplate}
 			${this.selectionTemplate}
 			${this.contentTemplate}
@@ -110,11 +114,19 @@ let DataGridHeader = class DataGridHeader extends Component {
 			${this.actionsTemplate}
 		`;
     }
+    get reorderabilityTemplate() {
+        return !this.dataGrid.reorderabilityController.enabled ? html.nothing : html `
+			<mo-flex class='reorder'
+				${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('reordering') })}
+				${this.getResizeObserver('reordering')}
+			></mo-flex>
+		`;
+    }
     get detailsExpanderTemplate() {
         return this.dataGrid.hasDetails === false ? html.nothing : html `
 			<mo-flex class='details' justifyContent='center' alignItems='center'
-				${style({ insetInlineStart: '0px' })}
-				${this.getResizeObserver('detailsColumnWidthInPixels')}
+				${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('details') })}
+				${this.getResizeObserver('details')}
 			>
 				${!this.dataGrid.hasDetails || !this.dataGrid.multipleDetails ? html.nothing : html `
 					<mo-icon-button dense
@@ -128,8 +140,8 @@ let DataGridHeader = class DataGridHeader extends Component {
     get selectionTemplate() {
         return !this.dataGrid.hasSelection ? html.nothing : html `
 			<mo-flex class='selection' justifyContent='center' alignItems='center'
-				${style({ insetInlineStart: this.dataGrid.hasDetails ? '20px' : '0px' })}
-				${this.getResizeObserver('selectionColumnWidthInPixels')}
+				${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('selection') })}
+				${this.getResizeObserver('selection')}
 			>
 				${this.dataGrid.selectability !== DataGridSelectability.Multiple ? html.nothing : html `
 					<mo-checkbox .selected=${live(this.selection)} @change=${this.handleSelectionChange}></mo-checkbox>
@@ -149,8 +161,8 @@ let DataGridHeader = class DataGridHeader extends Component {
     }
     get contentTemplate() {
         return html `
-			${this.dataGrid.visibleColumns.map(column => html `
-				<mo-data-grid-column-header .column=${column}></mo-data-grid-column-header>
+			${repeat(this.dataGrid.visibleColumns, c => c.dataSelector, (column, index) => html `
+				<mo-data-grid-column-header ${this.reorderabilityController.item({ index, disabled: !!column.sticky })} .column=${column}></mo-data-grid-column-header>
 			`)}
 		`;
     }
@@ -161,7 +173,7 @@ let DataGridHeader = class DataGridHeader extends Component {
         if (this.dataGrid.hasContextMenu) {
             const multipleSelected = this.dataGrid.selectedData.length > 1;
             return html `
-				<mo-flex ?data-multiple-selected=${multipleSelected} class='context-menu' alignItems='end' justifyContent='center' ${this.getResizeObserver('actionsColumnWidthInPixels')}>
+				<mo-flex ?data-multiple-selected=${multipleSelected} class='context-menu' alignItems='end' justifyContent='center' ${this.getResizeObserver('actions')}>
 					<mo-popover-container>
 						<mo-icon-button ?data-multiple-selected=${multipleSelected} dense icon='more_vert' title=${t('Actions for ${count:pluralityNumber} selected entries', { count: this.dataGrid.selectedData.length })}></mo-icon-button>
 
@@ -174,7 +186,7 @@ let DataGridHeader = class DataGridHeader extends Component {
         }
         if (!this.dataGrid.hasToolbar && !this.dataGrid.sidePanelHidden) {
             return html `
-				<mo-flex class='actions' alignItems='end' justifyContent='center' ${this.getResizeObserver('actionsColumnWidthInPixels')}>
+				<mo-flex class='actions' alignItems='end' justifyContent='center' ${this.getResizeObserver('actions')}>
 					<mo-icon-button dense icon='settings'
 						@click=${() => this.dataGrid.navigateToSidePanelTab(this.dataGrid.sidePanelTab ? undefined : DataGridSidePanelTab.Settings)}
 					></mo-icon-button>
@@ -183,9 +195,8 @@ let DataGridHeader = class DataGridHeader extends Component {
         }
         return html.nothing;
     }
-    getResizeObserver(property) {
-        // @ts-expect-error Readonly property set here
-        return observeResize(([entry]) => this.dataGrid.columnsController[property] = entry?.contentRect.width ?? 0);
+    getResizeObserver(column) {
+        return observeResize(([entry]) => this.dataGrid.columnsController.setColumnWidth(column, entry?.contentRect.width ?? 0));
     }
     toggleAllDetails() {
         this.dataGrid.toggleRowDetails();

package/dist/DataGridReorderabilityController.d.ts

@@ -0,0 +1,63 @@
+import { Controller, type ElementPart, type PartInfo, type ReactiveElement } from '@a11d/lit';
+import type { DataGrid } from './DataGrid.js';
+import type { DataRecord } from './DataRecord.js';
+export declare enum ReorderabilityState {
+    Idle = "idle",
+    Dragging = "dragging",
+    DropBefore = "drop-before",
+    DropAfter = "drop-after"
+}
+type ReorderabilityControllerItemDirectiveOptions = {
+    readonly index: number;
+    readonly disabled?: boolean;
+};
+export declare class ReorderabilityController extends Controller {
+    readonly host: ReactiveElement;
+    readonly options: {
+        handleReorder?: (source: number, destination: number) => void;
+    };
+    constructor(host: ReactiveElement, options: {
+        handleReorder?: (source: number, destination: number) => void;
+    });
+    private readonly items;
+    private draggingItem?;
+    get item(): (options: ReorderabilityControllerItemDirectiveOptions) => import("lit-html/directive.js").DirectiveResult<{
+        new (partInfo: PartInfo): {
+            host?: HTMLElement;
+            container?: HTMLElement;
+            part?: ElementPart;
+            options?: ReorderabilityControllerItemDirectiveOptions;
+            render(options: ReorderabilityControllerItemDirectiveOptions): symbol;
+            update(part: ElementPart, [options]: [ReorderabilityControllerItemDirectiveOptions]): symbol;
+            get state(): ReorderabilityState;
+            disconnected(): void;
+            reconnected(): void;
+            addEventListeners(): void;
+            removeEventListeners(): void;
+            isConnected: boolean;
+            _$initialize(part: import("lit-html").Part, parent: import("lit-html").Disconnectable, attributeIndex: number | undefined): void;
+            setValue(value: unknown): void;
+            get _$isConnected(): boolean;
+        };
+    }>;
+    handleEvent(e: DragEvent): void;
+    private handleDragStart;
+    private handleDropOver;
+    private handleDrop;
+    private handleDragEnd;
+    protected handleReorder(source: number, destination: number): void;
+}
+export type DataGridReorderChange<T> = {
+    readonly type: 'move' | 'shift';
+    readonly record: DataRecord<T>;
+    readonly oldIndex: number;
+};
+export declare class DataGridReorderabilityController<T> extends ReorderabilityController {
+    readonly host: DataGrid<T>;
+    constructor(host: DataGrid<T>);
+    get enabled(): boolean | undefined;
+    reorder(source: number, destination: number): void;
+    protected handleReorder(source: number, destination: number): void;
+}
+export {};
+//# sourceMappingURL=DataGridReorderabilityController.d.ts.map

package/dist/DataGridReorderabilityController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridReorderabilityController.d.ts","sourceRoot":"","sources":["../DataGridReorderabilityController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,UAAU,EAAiC,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,KAAK,eAAe,EAAE,MAAM,WAAW,CAAA;AAC5I,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAQjD,oBAAY,mBAAmB;IAC9B,IAAI,SAAS;IACb,QAAQ,aAAa;IACrB,UAAU,gBAAgB;IAC1B,SAAS,eAAe;CACxB;AAED,KAAK,4CAA4C,GAAG;IACnD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AAED,qBAAa,wBAAyB,SAAQ,UAAU;aACzB,IAAI,EAAE,eAAe;IAAE,QAAQ,CAAC,OAAO,EAAE;QACtE,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;KAC7D;gBAF6B,IAAI,EAAE,eAAe,EAAW,OAAO,EAAE;QACtE,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;KAC7D;IAED,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAuE;IAC7F,OAAO,CAAC,YAAY,CAAC,CAAyC;IAE9D,IAAI,IAAI;uBAQgB,QAAQ;mBALvB,WAAW;wBACN,WAAW;mBAChB,WAAW;sBACR,4CAA4C;4BAU7B,4CAA4C;yBAK/C,WAAW,aAAa,CAAC,4CAA4C,CAAC;;;;;;;;;;;OAsD7F;IAED,WAAW,CAAC,CAAC,EAAE,SAAS;IAgBxB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,aAAa;IAMrB,SAAS,CAAC,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM;CAG3D;AAED,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI;IACtC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,CAAA;IAC9B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,qBAAa,gCAAgC,CAAC,CAAC,CAAE,SAAQ,wBAAwB;aAClD,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;gBAAjB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAI/C,IAAI,OAAO,wBAKV;IAED,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM;cAIxB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM;CA4BpE"}