// #region Imports
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { HTMLElementEventEmitter } from '@breadstone/mosaik-elements';
import { Emit } from '../../../../events/Decorators/EmitDecorator';
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 { 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 { TableHeaderRowElement } from '../Table/TableHeaderRowElement';
import { dataTableElementTemplate } from './DataTableElementTemplate';
import { dataTableElementCosmopolitanStyle } from './Themes/DataTableElement.Cosmopolitan';
import { dataTableElementJoyStyle } from './Themes/DataTableElement.Joy';
import { dataTableElementMemphisStyle } from './Themes/DataTableElement.Memphis';
// #endregion
/**
 * 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.
 *
 * @name DataTableElement
 * @element mosaik-data-table
 * @category Selectors
 *
 * @slot caption - The caption slot.
 * @slot summary - The summary slot.
 *
 * @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.
 *
 * @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.
 *
 * @fires tableSelectionChanged {TableSelectionChangedEvent} - Fired when the selection of the table has changed.
 * @fires dataTableEditorOpened {DataTableEditorOpenedEvent} - Fired when the column editor is opened.
 * @fires dataTableEditorClosed {DataTableEditorClosedEvent} - Fired when the column editor is closed.
 *
 * @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
 * <!-- Data table with auto-generated columns -->
 * <mosaik-data-table id="userTable" auto-generate-columns></mosaik-data-table>
 * <script>
 *   document.getElementById('userTable').source = [
 *     { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
 *     { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' }
 *   ];
 * </script>
 *
 * <!-- Data table with alternating rows and custom columns -->
 * <mosaik-data-table id="productTable" alternating></mosaik-data-table>
 * <script>
 *   const table = document.getElementById('productTable');
 *   table.columnDefinitions = [
 *     { key: 'sku', header: 'SKU' },
 *     { key: 'name', header: 'Product' },
 *     { key: 'price', header: 'Price' }
 *   ];
 *   table.source = productData;
 * </script>
 * ```
 *
 * @public
 */
let DataTableElement = class DataTableElement extends Themeable(Appearanceable(Disableable(ItemsElement))) {
    // #region Fields
    _intl;
    _tableSelectionChanged;
    _dataTableEditorOpened;
    _dataTableEditorClosed;
    _alternating;
    _autoGenerateColumns;
    _caption;
    _columnDefinitions;
    _selectionType;
    _selectionMode;
    _resizable;
    _sortable;
    _pinable;
    _hideable;
    _autoSizeable;
    _columnChoosable;
    _reorderable;
    _sortMode;
    _editorOpened;
    _sorted;
    _sortedSource;
    _columnWidths;
    _suppressColumnsChanged;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    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();
        this._tableSelectionChanged = new HTMLElementEventEmitter(this, 'tableSelectionChanged');
        this._dataTableEditorOpened = new HTMLElementEventEmitter(this, 'dataTableEditorOpened');
        this._dataTableEditorClosed = new HTMLElementEventEmitter(this, 'dataTableEditorClosed');
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     *
     * @public
     * @static
     * @readonly
    */
    static get is() {
        return 'mosaik-data-table';
    }
    /**
     * Gets or sets the `intl` property.
     *
     * @public
     */
    get intl() {
        return this._intl.intl;
    }
    set intl(value) {
        this._intl.provide(value);
    }
    /**
     * Gets or sets the `alternating` property.
     *
     * @public
     * @attr
     */
    get alternating() {
        return this._alternating;
    }
    set alternating(value) {
        if (this._alternating !== value) {
            this._alternating = value;
            this.requestUpdate('alternating');
        }
    }
    /**
     * Gets or sets the `autoGenerateColumns` property.
     *
     * @public
     * @attr
     */
    get autoGenerateColumns() {
        return this._autoGenerateColumns;
    }
    set autoGenerateColumns(value) {
        if (this._autoGenerateColumns !== value) {
            this._autoGenerateColumns = value;
            this.requestUpdate('autoGenerateColumns');
        }
    }
    /**
     * Gets or sets the `columnDefinitions` property.
     *
     * @public
     */
    get columnDefinitions() {
        return this._columnDefinitions;
    }
    set columnDefinitions(value) {
        if (this._columnDefinitions !== value) {
            this._columnDefinitions = value;
            this.requestUpdate('columnDefinitions');
        }
    }
    /**
     * 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
     * @readonly
     * @attr
     */
    get sorted() {
        return this._sorted;
    }
    /**
     * @public
     * @readonly
     */
    get sortedSource() {
        return this._sorted ? this._sortedSource : this.source;
    }
    /**
     * Called when the selection of the table has changed.
     * Provides reference to `ITableSelectionChangedEventDetail` as event argument.
     *
     * @public
     * @readonly
     * @eventProperty
     * @type IEventEmitter<ITableSelectionChangedEventDetail>
     */
    get tableSelectionChanged() {
        return this._tableSelectionChanged;
    }
    /**
     * Called when the column editor is opened.
     * Provides reference to `IEventDetail` as event argument.
     *
     * @public
     * @readonly
     * @eventProperty
     * @type IEventEmitter<IEventDetail>
     */
    get dataTableEditorOpened() {
        return this._dataTableEditorOpened;
    }
    /**
     * Called when the column editor is closed.
     * Provides reference to `IEventDetail` as event argument.
     *
     * @public
     * @readonly
     * @eventProperty
     * @type IEventEmitter<IEventDetail>
     */
    get dataTableEditorClosed() {
        return this._dataTableEditorClosed;
    }
    /**
     * 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
     */
    onSourceChanged(prev, next) {
        super.onSourceChanged(prev, next);
        this._sortedSource = [...this.source];
    }
    /**
     * @template
     * @private
     */
    getColumns() {
        if (this._autoGenerateColumns) {
            const row = this.source[0];
            return Object.getOwnPropertyNames(row).map((x) => ({
                key: x,
                pathFn: x
            }));
        }
        return this._columnDefinitions.map((x) => ({
            ...x,
            ...{ pathFn: x.pathFn ?? x.key }
        }));
    }
    /**
     * 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 (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');
        this._dataTableEditorOpened.emit({});
    }
    /**
     * Closes the column editor.
     *
     * @public
     */
    closeEditor() {
        this._editorOpened = false;
        this.requestUpdate('editorOpened');
        this._dataTableEditorClosed.emit({});
    }
    /**
     * Handles the `tableSelectionChanged` event from the inner table and re-emits it.
     *
     * @template
     * @private
     */
    onTableSelectionChanged(e) {
        this._tableSelectionChanged.emit(e.detail);
    }
    /**
     * 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);
        }
    }
    /**
     * @private
     */
    sortByColumn(source, column, direction) {
        const colDef = this._columnDefinitions.find((c) => c.key === column);
        const sortedSource = source.sort((a, b) => {
            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 (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([
    Property({ type: Object }),
    __metadata("design:type", TableElementIntl),
    __metadata("design:paramtypes", [TableElementIntl])
], DataTableElement.prototype, "intl", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], DataTableElement.prototype, "alternating", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], DataTableElement.prototype, "autoGenerateColumns", null);
__decorate([
    Property({ type: Array }),
    __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,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [])
], DataTableElement.prototype, "sorted", null);
__decorate([
    Property({ type: Array }),
    __metadata("design:type", Array),
    __metadata("design:paramtypes", [])
], DataTableElement.prototype, "sortedSource", null);
__decorate([
    Emit({ eventName: 'tableSelectionChanged' }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], DataTableElement.prototype, "tableSelectionChanged", null);
__decorate([
    Emit({ eventName: 'dataTableEditorOpened' }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], DataTableElement.prototype, "dataTableEditorOpened", null);
__decorate([
    Emit({ eventName: 'dataTableEditorClosed' }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], DataTableElement.prototype, "dataTableEditorClosed", null);
DataTableElement = __decorate([
    Component({
        selector: 'mosaik-data-table',
        template: dataTableElementTemplate,
        themes: {
            joy: dataTableElementJoyStyle,
            memphis: dataTableElementMemphisStyle,
            cosmopolitan: dataTableElementCosmopolitanStyle
        },
        imports: [
            TableElement,
            TableHeaderElement,
            TableHeaderRowElement,
            TableHeaderCellElement,
            TableBodyElement,
            TableBodyRowElement,
            TableBodyCellElement,
            TableColumnEditorElement,
            BannerElement,
            ButtonElement,
            BackdropElement
        ]
    }),
    __metadata("design:paramtypes", [])
], DataTableElement);
export { DataTableElement };
//# sourceMappingURL=DataTableElement.js.map