@breadstone/mosaik-elements-foundation 0.0.231 → 0.0.233

package/Controls/Components/Selectors/DataTable/DataTableElement.js

@@ -8,16 +8,28 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+import { addIntlController } from '../../../../Intl/IntlController';
+import { Appearanceable } from '../../../Behaviors/Appearanceable';
 import { Disableable } from '../../../Behaviors/Disableable';
 import { Themeable } from '../../../Behaviors/Themeable';
 import { Attribute } from '../../../Decorators/AttributeDecorator';
 import { Component } from '../../../Decorators/ComponentDecorator';
 import { Property } from '../../../Decorators/PropertyDecorator';
+import { TableSelectionMode } from '../../../Types/TableSelectionMode';
+import { TableSelectionType } from '../../../Types/TableSelectionType';
+import { ButtonElement } from '../../Buttons/Button/ButtonElement';
+import { BannerElement } from '../../Grouping/Banner/BannerElement';
+import { BackdropElement } from '../../Primitives/Backdrop/BackdropElement';
 import { ItemsElement } from '../Abstracts/Items/ItemsElement';
-import { TableCellElement } from '../Table/TableCellElement';
+import { TableColumnEditorElement } from '../Table/editor/TableColumnEditorElement';
+import { TableElementIntl } from '../Table/intl/TableElementIntl';
+import { TableBodyCellElement } from '../Table/TableBodyCellElement';
+import { TableBodyElement } from '../Table/TableBodyElement';
+import { TableBodyRowElement } from '../Table/TableBodyRowElement';
 import { TableElement } from '../Table/TableElement';
+import { TableHeaderCellElement } from '../Table/TableHeaderCellElement';
 import { TableHeaderElement } from '../Table/TableHeaderElement';
-import { TableRowElement } from '../Table/TableRowElement';
+import { TableHeaderRowElement } from '../Table/TableHeaderRowElement';
 import { dataTableElementTemplate } from './DataTableElementTemplate';
 import { dataTableElementCosmopolitanStyle } from './Themes/DataTableElement.Cosmopolitan';
 import { dataTableElementJoyStyle } from './Themes/DataTableElement.Joy';
@@ -26,6 +38,7 @@ import { dataTableElementMemphisStyle } from './Themes/DataTableElement.Memphis'
 /**
  * DataTable - A comprehensive data presentation component for displaying structured information in rows and columns.
  *
+ * @description
  * Provides advanced data table functionality including sorting, filtering, pagination, and selection
  * capabilities. Designed for displaying large datasets with efficient rendering and user interaction
  * features for data analysis and management tasks.
@@ -34,31 +47,47 @@ import { dataTableElementMemphisStyle } from './Themes/DataTableElement.Memphis'
  * @element mosaik-data-table
  * @category Selectors
  *
- * @slot - Default content area for custom table content and additional elements
- * @slot header - Table header area for titles, filters, and actions
- * @slot footer - Table footer area for pagination, totals, and summary information
+ * @csspart banner - The banner part.
+ * @csspart editor - The editor part.
+ * @csspart editor-panel - The editor-panel part.
+ * @csspart editor-panel-backdrop - The editor-panel-backdrop part.
+ * @csspart table - The table part.
  *
- * @csspart table - Main table container element
- * @csspart header - Table header section
- * @csspart body - Table body containing data rows
- * @csspart footer - Table footer section
- * @csspart row - Individual table row
- * @csspart cell - Individual table cell
- * @csspart sort-button - Sortable column header buttons
- * @csspart pagination - Pagination controls container
+ * @cssprop {String} --data-table-border-radius - The table border radius CSS custom property.
+ * @cssprop {String} --data-table-font-family - The table font family CSS custom property.
+ * @cssprop {String} --data-table-font-letter-spacing - The table font letter spacing CSS custom property.
+ * @cssprop {String} --data-table-font-line-height - The table font line height CSS custom property.
+ * @cssprop {String} --data-table-font-size - The table font size CSS custom property.
+ * @cssprop {String} --data-table-font-text-decoration - The table font text decoration CSS custom property.
+ * @cssprop {String} --data-table-font-text-transform - The table font text transform CSS custom property.
+ * @cssprop {String} --data-table-font-weight - The table font weight CSS custom property.
+ * @cssprop {String} --data-table-gap - The table gap CSS custom property.
+ * @cssprop {String} --data-table-padding-bottom - The table padding bottom CSS custom property.
+ * @cssprop {String} --data-table-padding-left - The table padding left CSS custom property.
+ * @cssprop {String} --data-table-padding-right - The table padding right CSS custom property.
+ * @cssprop {String} --data-table-padding-top - The table padding top CSS custom property.
+ * @cssprop {String} --data-table-shadow - The table shadow CSS custom property.
+ * @cssprop {String} --data-table-shadow-blur - The table shadow blur CSS custom property.
+ * @cssprop {String} --data-table-shadow-color - The table shadow color CSS custom property.
+ * @cssprop {String} --data-table-shadow-offset-x - The table shadow offset x CSS custom property.
+ * @cssprop {String} --data-table-shadow-offset-y - The table shadow offset y CSS custom property.
+ * @cssprop {String} --data-table-shadow-spread - The table shadow spread CSS custom property.
+ * @cssprop {String} --data-table-transition-duration - The table transition duration CSS custom property.
+ * @cssprop {String} --data-table-transition-mode - The table transition mode CSS custom property.
+ * @cssprop {String} --data-table-transition-property - The table transition property CSS custom property.
+ * @cssprop {String} --data-table-translate - The table translate CSS custom property.
  *
- * @cssprop {Color} --data-table-border-color - Color for table borders and grid lines
- * @cssprop {Color} --data-table-header-background - Background color for table headers
- * @cssprop {Color} --data-table-row-background - Background color for table rows
- * @cssprop {Color} --data-table-row-background-hover - Hover state background for rows
- * @cssprop {Color} --data-table-row-background-selected - Selected row background color
- * @cssprop {String} --data-table-cell-padding - Internal padding for table cells
- * @cssprop {String} --data-table-header-font-weight - Font weight for header text
- *
- * @dependency TableElement - Base table structure and layout
- * @dependency TableHeaderElement - For table header rows and column definitions
- * @dependency TableRowElement - For data rows and content presentation
- * @dependency TableCellElement - For individual data cells and content
+ * @dependency mosaik-backdrop - The Backdrop element.
+ * @dependency mosaik-banner - The Banner element.
+ * @dependency mosaik-button - The Button element.
+ * @dependency mosaik-table - The Table element.
+ * @dependency mosaik-table-body - The Table Body element.
+ * @dependency mosaik-table-body-cell - The Table Body Cell element.
+ * @dependency mosaik-table-body-row - The Table Body Row element.
+ * @dependency mosaik-table-column-editor - The Table Column Editor element.
+ * @dependency mosaik-table-header - The Table Header element.
+ * @dependency mosaik-table-header-cell - The Table Header Cell element.
+ * @dependency mosaik-table-header-row - The Table Header Row element.
  *
  * @example
  * ```html
@@ -86,13 +115,28 @@ import { dataTableElementMemphisStyle } from './Themes/DataTableElement.Memphis'
  *
  * @public
  */
-let DataTableElement = class DataTableElement extends Themeable(Disableable(ItemsElement)) {
+let DataTableElement = class DataTableElement extends Themeable(Appearanceable(Disableable(ItemsElement))) {
     // #region Fields
+    _intl;
     _alternating;
     _autoGenerateColumns;
+    _caption;
     _columnDefinitions;
+    _selectionType;
+    _selectionMode;
+    _resizable;
+    _sortable;
+    _pinable;
+    _hideable;
+    _autoSizeable;
+    _columnChoosable;
+    _reorderable;
+    _sortMode;
+    _editorOpened;
     _sorted;
     _sortedSource;
+    _columnWidths;
+    _suppressColumnsChanged;
     // #endregion
     // #region Ctor
     /**
@@ -100,11 +144,28 @@ let DataTableElement = class DataTableElement extends Themeable(Disableable(Item
      */
     constructor() {
         super();
+        this._intl = addIntlController(this, {
+            factory: () => new TableElementIntl()
+        });
         this._alternating = false;
         this._autoGenerateColumns = false;
+        this._caption = '';
         this._columnDefinitions = new Array();
+        this._selectionType = TableSelectionType.Row;
+        this._selectionMode = TableSelectionMode.None;
+        this._resizable = false;
+        this._sortable = false;
+        this._pinable = false;
+        this._hideable = false;
+        this._autoSizeable = false;
+        this._columnChoosable = false;
+        this._reorderable = false;
+        this._sortMode = 'single';
+        this._editorOpened = false;
         this._sorted = false;
+        this._suppressColumnsChanged = false;
         this._sortedSource = new Array();
+        this._columnWidths = new Map();
     }
     // #endregion
     // #region Properties
@@ -118,6 +179,15 @@ let DataTableElement = class DataTableElement extends Themeable(Disableable(Item
     static get is() {
         return 'mosaik-data-table';
     }
+    /**
+     * Returns the `intl` property.
+     *
+     * @public
+     * @readonly
+     */
+    get intl() {
+        return this._intl.intl;
+    }
     /**
      * Gets or sets the `alternating` property.
      *
@@ -163,7 +233,189 @@ let DataTableElement = class DataTableElement extends Themeable(Disableable(Item
         }
     }
     /**
-     * Gets a `boolean` that indecates the table header is sorted or not.
+     * Gets or sets the `caption` property.
+     *
+     * @public
+     * @attr
+     */
+    get caption() {
+        return this._caption;
+    }
+    set caption(value) {
+        if (this._caption !== value) {
+            this._caption = value;
+            this.requestUpdate('caption');
+        }
+    }
+    /**
+     * Gets or sets the `selectionType` property.
+     *
+     * @public
+     * @attr
+     */
+    get selectionType() {
+        return this._selectionType;
+    }
+    set selectionType(value) {
+        if (this._selectionType !== value) {
+            this._selectionType = value;
+            this.requestUpdate('selectionType');
+        }
+    }
+    /**
+     * Gets or sets the `selectionMode` property.
+     *
+     * @public
+     * @attr
+     */
+    get selectionMode() {
+        return this._selectionMode;
+    }
+    set selectionMode(value) {
+        if (this._selectionMode !== value) {
+            this._selectionMode = value;
+            this.requestUpdate('selectionMode');
+        }
+    }
+    /**
+     * Gets or sets the `resizable` property.
+     * When `true`, all columns are resizable by default unless overridden per column.
+     *
+     * @public
+     * @attr
+     */
+    get resizable() {
+        return this._resizable;
+    }
+    set resizable(value) {
+        if (this._resizable !== value) {
+            this._resizable = value;
+            this.requestUpdate('resizable');
+        }
+    }
+    /**
+     * Gets or sets the `sortable` property.
+     * When `true`, all columns are sortable by default unless overridden per column.
+     *
+     * @public
+     * @attr
+     */
+    get sortable() {
+        return this._sortable;
+    }
+    set sortable(value) {
+        if (this._sortable !== value) {
+            this._sortable = value;
+            this.requestUpdate('sortable');
+        }
+    }
+    /**
+     * Gets or sets the `pinable` property.
+     * When `true`, all columns are pinable by default unless overridden per column.
+     *
+     * @public
+     * @attr
+     */
+    get pinable() {
+        return this._pinable;
+    }
+    set pinable(value) {
+        if (this._pinable !== value) {
+            this._pinable = value;
+            this.requestUpdate('pinable');
+        }
+    }
+    /**
+     * Gets or sets the `hideable` property.
+     * When `true`, all columns are hideable by default unless overridden per column.
+     *
+     * @public
+     * @attr
+     */
+    get hideable() {
+        return this._hideable;
+    }
+    set hideable(value) {
+        if (this._hideable !== value) {
+            this._hideable = value;
+            this.requestUpdate('hideable');
+        }
+    }
+    /**
+     * Gets or sets the `autoSizeable` property.
+     * When `true`, all columns support auto-sizing by default unless overridden per column.
+     *
+     * @public
+     * @attr
+     */
+    get autoSizeable() {
+        return this._autoSizeable;
+    }
+    set autoSizeable(value) {
+        if (this._autoSizeable !== value) {
+            this._autoSizeable = value;
+            this.requestUpdate('autoSizeable');
+        }
+    }
+    /**
+     * Gets or sets the `columnChoosable` property.
+     * When `true`, the column chooser is available for all columns by default unless overridden per column.
+     *
+     * @public
+     * @attr
+     */
+    get columnChoosable() {
+        return this._columnChoosable;
+    }
+    set columnChoosable(value) {
+        if (this._columnChoosable !== value) {
+            this._columnChoosable = value;
+            this.requestUpdate('columnChoosable');
+        }
+    }
+    /**
+     * Gets or sets the `reorderable` property.
+     * When `true`, all columns can be reordered via drag and drop by default unless overridden per column.
+     *
+     * @public
+     * @attr
+     */
+    get reorderable() {
+        return this._reorderable;
+    }
+    set reorderable(value) {
+        if (this._reorderable !== value) {
+            this._reorderable = value;
+            this.requestUpdate('reorderable');
+        }
+    }
+    /**
+     * Gets or sets the `sortMode` property.
+     * Defines whether sort is single-column (default) or multi-column.
+     *
+     * @public
+     * @attr
+     */
+    get sortMode() {
+        return this._sortMode;
+    }
+    set sortMode(value) {
+        if (this._sortMode !== value) {
+            this._sortMode = value;
+            this.requestUpdate('sortMode');
+        }
+    }
+    /**
+     * Gets whether the column editor is open.
+     *
+     * @public
+     * @readonly
+     */
+    get editorOpened() {
+        return this._editorOpened;
+    }
+    /**
+     * Gets a `boolean` that indicates the table header is sorted or not.
      * Returns `true` if the table header is sorted, otherwise `false`.
      *
      * @public
@@ -180,8 +432,26 @@ let DataTableElement = class DataTableElement extends Themeable(Disableable(Item
     get sortedSource() {
         return this._sorted ? this._sortedSource : this.source;
     }
+    /**
+     * Gets whether all columns are currently hidden.
+     *
+     * @public
+     * @readonly
+     */
+    get allColumnsHidden() {
+        const columns = this.getColumns();
+        return columns.length > 0 && columns.every((col) => col.hidden === true);
+    }
     // #endregion
     // #region Methods
+    /**
+     * @protected
+     * @override
+     */
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this._suppressColumnsChanged = false;
+    }
     /**
      * @protected
      * @override
@@ -195,51 +465,271 @@ let DataTableElement = class DataTableElement extends Themeable(Disableable(Item
      * @private
      */
     getColumns() {
-        let columns;
         if (this._autoGenerateColumns) {
-            // TODO: find a way to get all object keys of array.
-            // const first = this.source[0];
-            // const firstKeys = Object.keys(first);
-            // return firstKeys;
             const row = this.source[0];
-            columns = Object.getOwnPropertyNames(row).map((x) => ({
+            return Object.getOwnPropertyNames(row).map((x) => ({
                 key: x,
-                path: x
+                pathFn: x
             }));
         }
-        columns = this._columnDefinitions.map((x) => ({
+        return this._columnDefinitions.map((x) => ({
             ...x,
-            ...{ path: x.path ?? x.key }
+            ...{ pathFn: x.pathFn ?? x.key }
         }));
-        return columns;
+    }
+    /**
+     * Returns the CSS grid columns layout string based on tracked per-column widths.
+     * Falls back to `1fr` for columns without a stored width.
+     *
+     * @template
+     * @private
+     */
+    getColumnsLayout() {
+        return this.getColumns()
+            .filter((col) => !col.hidden)
+            .map((col) => this._columnWidths.get(col.key) ?? '1fr')
+            .join(' ');
     }
     /**
      * @template
      * @private
      */
     onSortChanged(e) {
-        if (e.detail.sortKey && e.detail.sortDirection) {
-            this.sortByColumn(this._sortedSource, e.detail.sortKey, e.detail.sortDirection);
+        if (this._sortMode === 'multiple') {
+            this.onMultiSortChanged(e);
+        }
+        else {
+            this.onSingleSortChanged(e);
+        }
+    }
+    /**
+     * Syncs column metadata (hidden, pinned) from the inner table back to column definitions.
+     *
+     * @template
+     * @private
+     */
+    onColumnsChanged() {
+        if (this._suppressColumnsChanged) {
+            return;
+        }
+        const table = this.renderRoot.querySelector('mosaik-table');
+        if (!table) {
+            return;
+        }
+        this.snapshotColumnWidths(table);
+        const metadata = table.getColumnMetadata();
+        for (const meta of metadata) {
+            const def = this._columnDefinitions.find((d) => d.key === meta.key);
+            if (def) {
+                def.hidden = meta.hidden;
+            }
+        }
+        this._suppressColumnsChanged = true;
+        this.requestUpdate('columnDefinitions');
+    }
+    /**
+     * Opens the column editor.
+     *
+     * @public
+     */
+    openEditor() {
+        const editor = this.renderRoot.querySelector('mosaik-table-column-editor');
+        if (editor) {
+            editor.columns = this.getColumns().map((col) => ({
+                key: col.key,
+                title: col.title ?? col.key,
+                visible: !(col.hidden === true)
+            }));
+        }
+        this._editorOpened = true;
+        this.requestUpdate('editorOpened');
+    }
+    /**
+     * Closes the column editor.
+     *
+     * @public
+     */
+    closeEditor() {
+        this._editorOpened = false;
+        this.requestUpdate('editorOpened');
+    }
+    /**
+     * Applies column editor changes back to the column definitions.
+     *
+     * @private
+     * @hidden
+     */
+    applyColumnEditorChanges(detail) {
+        if (this._autoGenerateColumns) {
+            this._columnDefinitions = this.getColumns();
+            this._autoGenerateColumns = false;
+        }
+        this.snapshotColumnWidthsFromDom();
+        // Build a reordered copy of column definitions matching the editor's order,
+        // while also applying visibility changes.
+        const reordered = [];
+        for (const item of detail.columns) {
+            const def = this._columnDefinitions.find((d) => d.key === item.key);
+            if (def) {
+                def.hidden = !item.visible;
+                reordered.push(def);
+            }
+        }
+        // Append any definitions not present in the editor (e.g. columns added after editor opened)
+        for (const def of this._columnDefinitions) {
+            if (!reordered.includes(def)) {
+                reordered.push(def);
+            }
+        }
+        this._columnDefinitions = reordered;
+        this._suppressColumnsChanged = true;
+        this.requestUpdate('columnDefinitions');
+    }
+    /**
+     * Handles a drop event from header cell drag-and-drop reordering.
+     * Reorders column definitions to match the new drop position.
+     *
+     * @template
+     * @private
+     */
+    handleHeaderCellDrop(event) {
+        const { previousIndex, currentIndex } = event.detail;
+        if (previousIndex === currentIndex) {
+            return;
+        }
+        if (this._autoGenerateColumns) {
+            this._columnDefinitions = this.getColumns();
+            this._autoGenerateColumns = false;
+        }
+        this.snapshotColumnWidthsFromDom();
+        // Map visible-only DOM indices to the full _columnDefinitions array.
+        // Hidden columns are not rendered, so DOM indices only count visible columns.
+        const visibleDefs = this._columnDefinitions.filter((d) => !d.hidden);
+        const movedDef = visibleDefs[previousIndex];
+        if (!movedDef) {
+            return;
+        }
+        const removeIndex = this._columnDefinitions.indexOf(movedDef);
+        this._columnDefinitions.splice(removeIndex, 1);
+        // Find the insertion point among remaining visible columns
+        const remainingVisible = this._columnDefinitions.filter((d) => !d.hidden);
+        if (currentIndex >= remainingVisible.length) {
+            this._columnDefinitions.push(movedDef);
+        }
+        else {
+            const targetDef = remainingVisible[currentIndex];
+            const insertIndex = this._columnDefinitions.indexOf(targetDef);
+            this._columnDefinitions.splice(insertIndex, 0, movedDef);
+        }
+        this._suppressColumnsChanged = true;
+        this.requestUpdate('columnDefinitions');
+    }
+    /**
+     * Snapshots the current column widths from the inner table element and stores them by column key.
+     *
+     * @private
+     */
+    snapshotColumnWidths(table) {
+        const visibleColumns = this.getColumns().filter((col) => !col.hidden);
+        const parts = table.columns ? table.columns.trim().split(/\s+/) : [];
+        for (let i = 0; i < visibleColumns.length && i < parts.length; i++) {
+            this._columnWidths.set(visibleColumns[i].key, parts[i]);
+        }
+    }
+    /**
+     * Snapshots column widths from the DOM by querying the inner table.
+     *
+     * @private
+     */
+    snapshotColumnWidthsFromDom() {
+        const table = this.renderRoot.querySelector('mosaik-table');
+        if (table) {
+            this.snapshotColumnWidths(table);
         }
-        this._sorted = e.detail.sortDirection !== 'none';
-        this.requestUpdate('sortedSource');
-        this.requestUpdate('sorted');
     }
     /**
      * @private
      */
     sortByColumn(source, column, direction) {
+        const colDef = this._columnDefinitions.find((c) => c.key === column);
         const sortedSource = source.sort((a, b) => {
-            if (a[column] > b[column]) {
+            if (colDef?.sortFn) {
+                return colDef.sortFn(a, b, direction === 'none' ? 'asc' : direction);
+            }
+            const aVal = String(a[column] ?? '');
+            const bVal = String(b[column] ?? '');
+            if (aVal > bVal) {
                 return direction === 'desc' ? 1 : -1;
             }
-            if (a[column] < b[column]) {
+            if (aVal < bVal) {
                 return direction === 'desc' ? -1 : 1;
             }
             return 0;
         });
         return sortedSource;
     }
+    /**
+     * Single-sort change handler: applies a single column sort (existing behavior).
+     *
+     * @private
+     */
+    onSingleSortChanged(e) {
+        if (e.detail.sortKey && e.detail.sortDirection) {
+            this.sortByColumn(this._sortedSource, e.detail.sortKey, e.detail.sortDirection);
+        }
+        this._sorted = e.detail.sortDirection !== 'none';
+        this.requestUpdate('sortedSource');
+        this.requestUpdate('sorted');
+    }
+    /**
+     * Multi-sort change handler: applies a compound sort across all active sort columns.
+     *
+     * @private
+     */
+    onMultiSortChanged(e) {
+        const activeSorts = e.detail.activeSorts;
+        if (!activeSorts || activeSorts.length === 0) {
+            this._sorted = false;
+            this.requestUpdate('sortedSource');
+            this.requestUpdate('sorted');
+            return;
+        }
+        this.sortByMultipleColumns(this._sortedSource, activeSorts);
+        this._sorted = true;
+        this.requestUpdate('sortedSource');
+        this.requestUpdate('sorted');
+    }
+    /**
+     * Sorts data by multiple columns using a comparator chain.
+     * Columns are compared in sort-index order (1 = highest priority).
+     *
+     * @private
+     */
+    sortByMultipleColumns(source, sorts) {
+        const orderedSorts = [...sorts].sort((a, b) => a.sortIndex - b.sortIndex);
+        source.sort((a, b) => {
+            for (const sort of orderedSorts) {
+                const colDef = this._columnDefinitions.find((c) => c.key === sort.sortKey);
+                if (colDef?.sortFn) {
+                    const result = colDef.sortFn(a, b, sort.sortDirection);
+                    if (result !== 0) {
+                        return result;
+                    }
+                    continue;
+                }
+                const aVal = String(a[sort.sortKey] ?? '');
+                const bVal = String(b[sort.sortKey] ?? '');
+                if (aVal > bVal) {
+                    return sort.sortDirection === 'desc' ? 1 : -1;
+                }
+                if (aVal < bVal) {
+                    return sort.sortDirection === 'desc' ? -1 : 1;
+                }
+            }
+            return 0;
+        });
+        return source;
+    }
 };
 __decorate([
     Attribute({
@@ -262,6 +752,94 @@ __decorate([
     __metadata("design:type", Array),
     __metadata("design:paramtypes", [Array])
 ], DataTableElement.prototype, "columnDefinitions", null);
+__decorate([
+    Attribute({
+        type: String,
+        useDefault: true
+    }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], DataTableElement.prototype, "caption", null);
+__decorate([
+    Attribute({
+        type: String,
+        useDefault: true
+    }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], DataTableElement.prototype, "selectionType", null);
+__decorate([
+    Attribute({
+        type: String,
+        useDefault: true
+    }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], DataTableElement.prototype, "selectionMode", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], DataTableElement.prototype, "resizable", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], DataTableElement.prototype, "sortable", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], DataTableElement.prototype, "pinable", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], DataTableElement.prototype, "hideable", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], DataTableElement.prototype, "autoSizeable", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], DataTableElement.prototype, "columnChoosable", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], DataTableElement.prototype, "reorderable", null);
+__decorate([
+    Attribute({
+        type: String,
+        useDefault: true
+    }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], DataTableElement.prototype, "sortMode", null);
 __decorate([
     Attribute({
         type: Boolean,
@@ -287,8 +865,15 @@ DataTableElement = __decorate([
         imports: [
             TableElement,
             TableHeaderElement,
-            TableRowElement,
-            TableCellElement
+            TableHeaderRowElement,
+            TableHeaderCellElement,
+            TableBodyElement,
+            TableBodyRowElement,
+            TableBodyCellElement,
+            TableColumnEditorElement,
+            BannerElement,
+            ButtonElement,
+            BackdropElement
         ]
     }),
     __metadata("design:paramtypes", [])