@exmg/exm-grid 1.0.0

package/src/table/featrues/exm-row-sortable.js

@@ -0,0 +1,50 @@
+export class ExmgRowSortable {
+    constructor(qs) {
+        this.querySelectors = qs;
+    }
+    initFeature() {
+        this.querySelectors
+            .getTableBody()
+            .querySelectorAll('tr:not([data-initialized]) .grid-row-drag-handler, tr:not([data-initialized]).grid-row-drag-handler')
+            .forEach((element) => {
+            this.registerMouseListenersHideDetailOnStartDragging(element);
+        });
+    }
+    updateFeature() {
+        this.initFeature();
+    }
+    getRowDetailQuerySelectorFactory(element) {
+        const row = element.closest('tr');
+        const rowId = row && row.getAttribute('data-row-key');
+        if (rowId) {
+            return () => this.querySelectors.getTableBody().querySelector(`tr[data-row-detail-key="${rowId}"]`) ||
+                undefined;
+        }
+        return () => undefined;
+    }
+    registerMouseListenersHideDetailOnStartDragging(element) {
+        const getRowDetail = this.getRowDetailQuerySelectorFactory(element);
+        if (element.closest('td')) {
+            // ignore click (won't eventually select row) when trigger is element embedded in table cell
+            element.addEventListener('click', (event) => event.stopPropagation());
+        }
+        element.addEventListener('mousedown', (event) => {
+            event.preventDefault();
+            const rowDetail = getRowDetail();
+            if (rowDetail && rowDetail.hasAttribute('data-is-row-expanded')) {
+                rowDetail.style.display = 'none';
+                const handlerMouseUp = () => {
+                    const rowDetailToRevert = getRowDetail();
+                    if (rowDetailToRevert && rowDetailToRevert.hasAttribute('data-is-row-expanded')) {
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-ignore
+                        rowDetailToRevert.style.display = null;
+                    }
+                    this.querySelectors.getTableBody().removeEventListener('mouseup', handlerMouseUp);
+                };
+                this.querySelectors.getTableBody().addEventListener('mouseup', handlerMouseUp);
+            }
+        });
+    }
+}
+//# sourceMappingURL=exm-row-sortable.js.map

package/src/table/types/exm-grid-smart-toolbar-types.d.ts

@@ -0,0 +1,17 @@
+export interface ActionWithCondition<TCondition extends BaseActionCondition = BaseActionCondition> {
+    id: string;
+    icon?: string;
+    text?: string;
+    tooltip?: string;
+    condition?: TCondition;
+}
+export declare enum ActionConditionType {
+    AmountOfSelectedItemsRange = "amount_of_items_range"
+}
+export interface BaseActionCondition {
+    type?: ActionConditionType;
+}
+export interface ActionAmountSelectedItemsCondition extends BaseActionCondition {
+    min?: number;
+    max?: number;
+}

package/src/table/types/exm-grid-smart-toolbar-types.js

@@ -0,0 +1,6 @@
+// eslint-disable-next-line no-shadow
+export var ActionConditionType;
+(function (ActionConditionType) {
+    ActionConditionType["AmountOfSelectedItemsRange"] = "amount_of_items_range";
+})(ActionConditionType = ActionConditionType || (ActionConditionType = {}));
+//# sourceMappingURL=exm-grid-smart-toolbar-types.js.map

package/src/table/types/exm-grid-toolbar-types.d.ts

@@ -0,0 +1,55 @@
+export interface Action {
+    id: string;
+    icon?: string;
+    text?: string;
+    tooltip?: string;
+}
+/**
+ * ID MUST BE UNIQUE HERE
+ */
+export interface Filter<TConfig extends BaseFilterConfig = BaseFilterConfig> {
+    id: string;
+    name: string;
+    disabled?: boolean;
+    config: TConfig;
+}
+export declare enum FilterConfigType {
+    SingleSelect = "single_select"
+}
+export interface BaseFilterConfig {
+    type?: FilterConfigType;
+}
+export interface FilterSingleSelectConfig extends BaseFilterConfig {
+    data: {
+        id: string;
+        title: string;
+    }[];
+}
+export interface Setting<TConfig extends BaseSettingConfig = BaseSettingConfig> {
+    id: string;
+    icon?: string;
+    dialogTitle?: string;
+    tooltip?: string;
+    config: TConfig;
+}
+export declare enum SettingConfigType {
+    SelectionList = "selection_list"
+}
+export declare enum SettingConfigId {
+    ColumnSelector = "column-selector"
+}
+export interface BaseSettingConfig {
+    type?: SettingConfigType;
+}
+export interface SettingSelectionListItem {
+    id: string;
+    title: string;
+    selected?: boolean;
+}
+export interface SettingSelectionListConfig extends BaseSettingConfig {
+    data: SettingSelectionListItem[];
+}
+export interface EventDetailGridToolbarSettingChanged {
+    id: string;
+    value: SettingSelectionListItem[];
+}

package/src/table/types/exm-grid-toolbar-types.js

@@ -0,0 +1,16 @@
+// eslint-disable-next-line no-shadow
+export var FilterConfigType;
+(function (FilterConfigType) {
+    FilterConfigType["SingleSelect"] = "single_select";
+})(FilterConfigType = FilterConfigType || (FilterConfigType = {}));
+// eslint-disable-next-line no-shadow
+export var SettingConfigType;
+(function (SettingConfigType) {
+    SettingConfigType["SelectionList"] = "selection_list";
+})(SettingConfigType = SettingConfigType || (SettingConfigType = {}));
+// eslint-disable-next-line no-shadow
+export var SettingConfigId;
+(function (SettingConfigId) {
+    SettingConfigId["ColumnSelector"] = "column-selector";
+})(SettingConfigId = SettingConfigId || (SettingConfigId = {}));
+//# sourceMappingURL=exm-grid-toolbar-types.js.map

package/src/table/types/exm-grid-types.d.ts

@@ -0,0 +1,15 @@
+export type SORT_DIRECTION = 'ASC' | 'DESC';
+export interface EventDetailSortChange {
+    column: string;
+    sortDirection?: SORT_DIRECTION;
+}
+export interface EventDetailSelectedRowsChange {
+    rows: HTMLTableRowElement[];
+}
+export interface EventDetailRowsOrderChanged<T extends any = any> {
+    items: T[];
+}
+export interface EventDetailRowsOrderUpdated {
+    sourceIndex: number;
+    targetIndex: number;
+}

package/src/table/types/exm-grid-types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=exm-grid-types.js.map

package/src/table/utils/exm-query-selectors.d.ts

@@ -0,0 +1,12 @@
+export declare class ExmgQuerySelectors {
+    private table;
+    private tableBody;
+    constructor(t: HTMLTableElement, tb: HTMLTableSectionElement);
+    getTable(): HTMLTableElement;
+    getTableBody(): HTMLElement;
+    getColumns(selector?: string): NodeListOf<HTMLElement>;
+    getColumn<T extends HTMLElement>(selector?: string): T | undefined;
+    getBodyRowSelector(selector?: string): string;
+    getBodyRows(): NodeListOf<HTMLTableRowElement>;
+    getBodyRowsNotInitialized(): NodeListOf<HTMLTableRowElement>;
+}

package/src/table/utils/exm-query-selectors.js

@@ -0,0 +1,37 @@
+export class ExmgQuerySelectors {
+    constructor(t, tb) {
+        this.table = t;
+        this.tableBody = tb;
+    }
+    getTable() {
+        if (!this.table) {
+            throw new Error('Element table not found. Slot hast to define <table>');
+        }
+        return this.table;
+    }
+    getTableBody() {
+        if (!this.tableBody) {
+            throw new Error('Element tbody not found. Slot hast to define <tbody class="grid-data">');
+        }
+        return this.tableBody;
+    }
+    // eslint-disable-next-line
+    getColumns(selector = 'th') {
+        return this.getTable().querySelectorAll(`.grid-columns ${selector}`);
+    }
+    getColumn(selector = 'th') {
+        return this.getTable().querySelector(`.grid-columns ${selector}`) || undefined;
+    }
+    getBodyRowSelector(selector = '') {
+        return `tr:not(.grid-row-detail)${selector}`;
+    }
+    // eslint-disable-next-line
+    getBodyRows() {
+        return this.getTableBody().querySelectorAll(this.getBodyRowSelector());
+    }
+    // eslint-disable-next-line
+    getBodyRowsNotInitialized() {
+        return this.getTableBody().querySelectorAll(this.getBodyRowSelector(':not([data-initialized])'));
+    }
+}
+//# sourceMappingURL=exm-query-selectors.js.map