@tap-payments/os-micro-frontend-shared 0.1.411 → 0.1.412-test.1

package/build/components/TableHeader/TableView/utils/columnState.js

@@ -0,0 +1,187 @@
+import { isDateColumn } from './layoutTransform';
+export const getColumnCheckState = (column) => {
+    var _a, _b;
+    if (!((_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length)) {
+        return { checked: (_b = column.selected) !== null && _b !== void 0 ? _b : false, indeterminate: false };
+    }
+    const selectedCount = column.menuItems.filter((item) => item.selected).length;
+    return {
+        checked: selectedCount > 0,
+        indeterminate: selectedCount > 0 && selectedCount < column.menuItems.length,
+    };
+};
+export const toggleColumn = (columns, columnName) => columns.map((col) => {
+    var _a;
+    if (col.name !== columnName)
+        return col;
+    const newSelected = !col.selected;
+    const updatedMenuItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: newSelected })));
+    return Object.assign(Object.assign({}, col), { selected: newSelected, menuItems: updatedMenuItems });
+});
+export const toggleSubItem = (columns, columnName, subItemName) => columns.map((col) => {
+    var _a, _b;
+    if (col.name !== columnName)
+        return col;
+    const updatedMenuItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (item.name === subItemName ? Object.assign(Object.assign({}, item), { selected: !item.selected }) : item));
+    const hasSelected = (_b = updatedMenuItems === null || updatedMenuItems === void 0 ? void 0 : updatedMenuItems.some((item) => item.selected)) !== null && _b !== void 0 ? _b : false;
+    return Object.assign(Object.assign({}, col), { menuItems: updatedMenuItems, selected: hasSelected });
+});
+export const toggleAllColumns = (columns, selectAll) => columns.map((col) => {
+    var _a;
+    if (isDateColumn(col.name))
+        return col;
+    const updatedMenuItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: selectAll })));
+    return Object.assign(Object.assign({}, col), { selected: selectAll, menuItems: updatedMenuItems });
+});
+export const areAllColumnsSelected = (columns) => {
+    const nonDate = columns.filter((c) => !isDateColumn(c.name));
+    if (nonDate.length === 0)
+        return false;
+    return nonDate.every((col) => {
+        var _a;
+        if ((_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.length)
+            return col.menuItems.every((item) => item.selected);
+        return col.selected;
+    });
+};
+export const areSomeColumnsSelected = (columns, allSelected) => {
+    const nonDate = columns.filter((c) => !isDateColumn(c.name));
+    const hasAny = nonDate.some((col) => {
+        var _a;
+        if ((_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.length)
+            return col.menuItems.some((item) => item.selected);
+        return col.selected;
+    });
+    return hasAny && !allSelected;
+};
+export const isValidTemplateName = (name, maxLength) => name.trim().length > 0 && name.length <= maxLength;
+export const deepCloneColumns = (columns) => columns.map((col) => {
+    var _a, _b;
+    return (Object.assign(Object.assign({}, col), { selected: (_a = col.selected) !== null && _a !== void 0 ? _a : false, menuItems: (_b = col.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => { var _a; return (Object.assign(Object.assign({}, item), { selected: (_a = item.selected) !== null && _a !== void 0 ? _a : false })); }) }));
+});
+export const toggleSingleColumn = (columns, columnName) => columns.map((col) => {
+    var _a;
+    if (col.name !== columnName)
+        return col;
+    if (isDateColumn(col.name))
+        return Object.assign(Object.assign({}, col), { selected: true });
+    const newSelected = !col.selected;
+    const updatedMenuItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: newSelected })));
+    return Object.assign(Object.assign({}, col), { selected: newSelected, menuItems: updatedMenuItems });
+});
+export const toggleAllCurrentColumns = (columns, shouldSelect) => columns.map((col) => {
+    var _a;
+    if (isDateColumn(col.name))
+        return Object.assign(Object.assign({}, col), { selected: true });
+    const updatedMenuItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: shouldSelect })));
+    return Object.assign(Object.assign({}, col), { selected: shouldSelect, menuItems: updatedMenuItems });
+});
+export const areAllCurrentColumnsSelected = (columns) => {
+    if (columns.length === 0)
+        return false;
+    return columns.every((col) => {
+        var _a;
+        if ((_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.length)
+            return col.menuItems.every((item) => item.selected);
+        return col.selected;
+    });
+};
+export const areSomeCurrentColumnsSelected = (columns, allSelected) => {
+    if (columns.length === 0)
+        return false;
+    const hasAny = columns.some((col) => {
+        var _a;
+        if ((_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.length)
+            return col.menuItems.some((item) => item.selected);
+        return col.selected;
+    });
+    return hasAny && !allSelected;
+};
+export const normalizeColumnsSelected = (columns) => columns.map((col) => {
+    var _a, _b;
+    return (Object.assign(Object.assign({}, col), { selected: (_a = col.selected) !== null && _a !== void 0 ? _a : false, menuItems: (_b = col.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => { var _a; return (Object.assign(Object.assign({}, item), { selected: (_a = item.selected) !== null && _a !== void 0 ? _a : false })); }) }));
+});
+export const areColumnsEqual = (cols1, cols2) => {
+    if (cols1.length !== cols2.length)
+        return false;
+    const n1 = normalizeColumnsSelected(cols1);
+    const n2 = normalizeColumnsSelected(cols2);
+    for (let i = 0; i < n1.length; i++) {
+        const c1 = n1[i];
+        const c2 = n2[i];
+        if (c1.name !== c2.name || c1.selected !== c2.selected)
+            return false;
+        if (c1.menuItems && c2.menuItems) {
+            if (c1.menuItems.length !== c2.menuItems.length)
+                return false;
+            for (let j = 0; j < c1.menuItems.length; j++) {
+                if (c1.menuItems[j].name !== c2.menuItems[j].name || c1.menuItems[j].selected !== c2.menuItems[j].selected) {
+                    return false;
+                }
+            }
+        }
+        else if (c1.menuItems || c2.menuItems)
+            return false;
+    }
+    return true;
+};
+export const resetColumnsToDefault = (columns) => columns
+    .filter((c) => !isDateColumn(c.name))
+    .map((col) => {
+    var _a, _b;
+    return (Object.assign(Object.assign({}, col), { selected: (_a = col.selected) !== null && _a !== void 0 ? _a : false, menuItems: (_b = col.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => { var _a; return (Object.assign(Object.assign({}, item), { selected: (_a = item.selected) !== null && _a !== void 0 ? _a : false })); }) }));
+});
+export const initializeEditingColumns = (editingColumns, availableColumns) => {
+    var _a, _b;
+    const editingOrder = editingColumns.filter((c) => !isDateColumn(c.name)).map((c) => c.name);
+    const availableByName = new Map(availableColumns.filter((c) => !isDateColumn(c.name)).map((c) => [c.name, c]));
+    const result = [];
+    for (const name of editingOrder) {
+        const saved = editingColumns.find((ec) => ec.name === name);
+        const avail = availableByName.get(name);
+        if (avail) {
+            result.push(saved !== null && saved !== void 0 ? saved : Object.assign(Object.assign({}, avail), { selected: false, menuItems: (_a = avail.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: false }))) }));
+        }
+        else if (saved)
+            result.push(saved);
+    }
+    for (const [, avail] of availableByName) {
+        if (!editingOrder.includes(avail.name)) {
+            const saved = editingColumns.find((ec) => ec.name === avail.name);
+            result.push(saved !== null && saved !== void 0 ? saved : Object.assign(Object.assign({}, avail), { selected: false, menuItems: (_b = avail.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => (Object.assign(Object.assign({}, item), { selected: false }))) }));
+        }
+    }
+    return result;
+};
+export const initializeCreateColumns = (availableColumns) => availableColumns
+    .filter((c) => !isDateColumn(c.name))
+    .map((col) => {
+    var _a;
+    return (Object.assign(Object.assign({}, col), { selected: false, menuItems: (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: false }))) }));
+});
+export const initializeCreateColumnsWithCurrentState = (availableColumns, currentTableViews) => {
+    var _a, _b, _c, _d;
+    const availableByName = new Map(availableColumns.filter((c) => !isDateColumn(c.name)).map((c) => [c.name, c]));
+    const currentOrder = currentTableViews.filter((c) => !isDateColumn(c.name)).map((c) => c.name);
+    const result = [];
+    for (const name of currentOrder) {
+        const current = currentTableViews.find((tc) => tc.name === name);
+        const avail = availableByName.get(name);
+        if (avail && current) {
+            result.push(Object.assign(Object.assign({}, avail), { selected: (_a = current.selected) !== null && _a !== void 0 ? _a : false, menuItems: (_b = avail.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => {
+                    var _a, _b;
+                    const curItem = (_a = current.menuItems) === null || _a === void 0 ? void 0 : _a.find((mi) => mi.name === item.name);
+                    return Object.assign(Object.assign({}, item), { selected: (_b = curItem === null || curItem === void 0 ? void 0 : curItem.selected) !== null && _b !== void 0 ? _b : false });
+                }) }));
+        }
+        else if (avail) {
+            result.push(Object.assign(Object.assign({}, avail), { selected: false, menuItems: (_c = avail.menuItems) === null || _c === void 0 ? void 0 : _c.map((item) => (Object.assign(Object.assign({}, item), { selected: false }))) }));
+        }
+    }
+    for (const [, avail] of availableByName) {
+        if (!currentOrder.includes(avail.name)) {
+            result.push(Object.assign(Object.assign({}, avail), { selected: false, menuItems: (_d = avail.menuItems) === null || _d === void 0 ? void 0 : _d.map((item) => (Object.assign(Object.assign({}, item), { selected: false }))) }));
+        }
+    }
+    return result;
+};

package/build/components/TableHeader/TableView/utils/index.d.ts

@@ -0,0 +1,4 @@
+export { isDateColumn, transformLayoutToColumns, getColumnsByMode, convertColumnsToLayoutSection, mapColumnsToLayoutSection, getLayoutDataFromTemplates, } from './layoutTransform';
+export { createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, mapTemplatesToMenuItems, getSubmenuItems, getSubmenuItemsForDisplay, hasSubmenu, } from './viewMenu';
+export { getColumnCheckState, toggleColumn, toggleSubItem, toggleAllColumns, areAllColumnsSelected, areSomeColumnsSelected, isValidTemplateName, deepCloneColumns, toggleSingleColumn, toggleAllCurrentColumns, areAllCurrentColumnsSelected, areSomeCurrentColumnsSelected, normalizeColumnsSelected, areColumnsEqual, resetColumnsToDefault, initializeEditingColumns, initializeCreateColumns, initializeCreateColumnsWithCurrentState, } from './columnState';
+export { getSubmenuFromTemplateLayout, getColumnOrder, updateTemplate, templateToViewMenuItem, convertTemplateToColumnsView, convertTemplatesToColumnsView, } from './templateToColumnsView';

package/build/components/TableHeader/TableView/utils/index.js

@@ -0,0 +1,4 @@
+export { isDateColumn, transformLayoutToColumns, getColumnsByMode, convertColumnsToLayoutSection, mapColumnsToLayoutSection, getLayoutDataFromTemplates, } from './layoutTransform';
+export { createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, mapTemplatesToMenuItems, getSubmenuItems, getSubmenuItemsForDisplay, hasSubmenu, } from './viewMenu';
+export { getColumnCheckState, toggleColumn, toggleSubItem, toggleAllColumns, areAllColumnsSelected, areSomeColumnsSelected, isValidTemplateName, deepCloneColumns, toggleSingleColumn, toggleAllCurrentColumns, areAllCurrentColumnsSelected, areSomeCurrentColumnsSelected, normalizeColumnsSelected, areColumnsEqual, resetColumnsToDefault, initializeEditingColumns, initializeCreateColumns, initializeCreateColumnsWithCurrentState, } from './columnState';
+export { getSubmenuFromTemplateLayout, getColumnOrder, updateTemplate, templateToViewMenuItem, convertTemplateToColumnsView, convertTemplatesToColumnsView, } from './templateToColumnsView';

package/build/components/TableHeader/TableView/utils/layoutTransform.d.ts

@@ -0,0 +1,10 @@
+import type { ColumnViewProps, TableMode } from '../../../../types/index.js';
+import type { LayoutSection } from '../types';
+export declare const isDateColumn: (name: string) => boolean;
+export declare const transformLayoutToColumns: (layout: LayoutSection[], lang?: string) => ColumnViewProps[];
+export declare const getColumnsByMode: (mode: TableMode, layoutData?: LayoutSection[]) => ColumnViewProps[];
+export declare const convertColumnsToLayoutSection: (columns: ColumnViewProps[], mode: TableMode, lang?: string) => LayoutSection;
+export declare const mapColumnsToLayoutSection: (columns: ColumnViewProps[], mode: TableMode, lang?: string) => LayoutSection;
+export declare const getLayoutDataFromTemplates: (templates: Array<{
+    layout: LayoutSection[];
+}>) => LayoutSection[];

package/build/components/TableHeader/TableView/utils/layoutTransform.js

@@ -0,0 +1,71 @@
+export const isDateColumn = (name) => name.toLowerCase() === 'date';
+export const transformLayoutToColumns = (layout, lang = 'en') => {
+    const columns = [];
+    layout.forEach((section) => {
+        section.columns.forEach((col) => {
+            var _a, _b, _c, _d;
+            const label = ((_a = col.name.find((n) => n.lang === lang)) === null || _a === void 0 ? void 0 : _a.text) || ((_b = col.name[0]) === null || _b === void 0 ? void 0 : _b.text) || col.code;
+            const menuItems = ((_c = col.fields) === null || _c === void 0 ? void 0 : _c.length)
+                ? col.fields.map((field) => {
+                    var _a, _b;
+                    return ({
+                        name: field.code,
+                        label: ((_a = field.name.find((n) => n.lang === lang || n.lang === '')) === null || _a === void 0 ? void 0 : _a.text) || field.code,
+                        selected: (_b = field.default) !== null && _b !== void 0 ? _b : false,
+                    });
+                })
+                : undefined;
+            columns.push({
+                name: col.code,
+                label,
+                selected: isDateColumn(col.code) ? true : (_d = col.default) !== null && _d !== void 0 ? _d : false,
+                menuItems: (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? menuItems : undefined,
+            });
+        });
+    });
+    return columns;
+};
+export const getColumnsByMode = (mode, layoutData) => {
+    if (!(layoutData === null || layoutData === void 0 ? void 0 : layoutData.length))
+        return [];
+    const sectionCode = mode === 'sheet' ? 'sheet' : 'advanced';
+    const section = layoutData.find((s) => s.code.toLowerCase() === sectionCode);
+    return section ? transformLayoutToColumns([section]) : [];
+};
+export const convertColumnsToLayoutSection = (columns, mode, lang = 'en') => {
+    const columnItems = columns.map((col, index) => {
+        var _a, _b;
+        const fieldItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((field) => {
+            var _a;
+            return ({
+                code: field.name,
+                name: [{ text: typeof field.label === 'string' ? field.label : field.name, lang: lang || '' }],
+                default: (_a = field.selected) !== null && _a !== void 0 ? _a : false,
+            });
+        });
+        const columnLabel = typeof col.label === 'string' ? col.label : col.name;
+        return Object.assign({ code: col.name, name: [{ text: columnLabel, lang }], order: index + 1, default: (_b = col.selected) !== null && _b !== void 0 ? _b : false }, ((fieldItems === null || fieldItems === void 0 ? void 0 : fieldItems.length) ? { fields: fieldItems } : {}));
+    });
+    const sectionCode = mode === 'sheet' ? 'Sheet' : 'Advanced';
+    return { code: sectionCode, columns: columnItems };
+};
+export const mapColumnsToLayoutSection = (columns, mode, lang = 'en') => convertColumnsToLayoutSection(columns, mode, lang);
+export const getLayoutDataFromTemplates = (templates) => {
+    const sectionsMap = new Map();
+    templates.forEach((template) => {
+        template.layout.forEach((section) => {
+            const existing = sectionsMap.get(section.code);
+            if (existing) {
+                const codes = new Set(existing.columns.map((c) => c.code));
+                section.columns.forEach((col) => {
+                    if (!codes.has(col.code))
+                        existing.columns.push(col);
+                });
+            }
+            else {
+                sectionsMap.set(section.code, Object.assign(Object.assign({}, section), { columns: [...section.columns] }));
+            }
+        });
+    });
+    return Array.from(sectionsMap.values());
+};

package/build/components/TableHeader/TableView/utils/templateToColumnsView.d.ts

@@ -0,0 +1,30 @@
+import type { ColumnsView, TableMode, ColumnViewProps } from '../../../../types/index.js';
+import type { ViewMenuItem, Template } from '../types';
+export declare function getSubmenuFromTemplateLayout(template: Template, tableMode: TableMode, lang?: string): ColumnViewProps[];
+export declare const getColumnOrder: (col: {
+    order?: number | string | null;
+}) => number;
+export declare function updateTemplate<T extends {
+    layout?: Array<{
+        columns?: unknown[];
+    }>;
+}>(template: T): T;
+export declare function templateToViewMenuItem(template: Template, tableMode: TableMode): ViewMenuItem & {
+    layout?: Template['layout'];
+};
+type TemplateWithSubmenu = Template & {
+    columns?: string[];
+    submenu?: Array<{
+        name: string;
+        label: string;
+        selected: boolean;
+        menuItems?: Array<{
+            name: string;
+            label: string;
+            selected: boolean;
+        }>;
+    }>;
+};
+export declare const convertTemplateToColumnsView: (template: Template | TemplateWithSubmenu, tableMode: TableMode) => ColumnsView[];
+export declare const convertTemplatesToColumnsView: (templates: Template[], tableMode: TableMode) => ColumnsView[];
+export {};

package/build/components/TableHeader/TableView/utils/templateToColumnsView.js

@@ -0,0 +1,144 @@
+export function getSubmenuFromTemplateLayout(template, tableMode, lang = 'en') {
+    var _a, _b;
+    if (!((_a = template === null || template === void 0 ? void 0 : template.layout) === null || _a === void 0 ? void 0 : _a.length))
+        return [];
+    const sectionCode = tableMode === 'sheet' ? 'sheet' : 'advanced';
+    const section = template.layout.find((s) => { var _a; return ((_a = s.code) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === sectionCode; });
+    if (!((_b = section === null || section === void 0 ? void 0 : section.columns) === null || _b === void 0 ? void 0 : _b.length))
+        return [];
+    const columns = section.columns.map((col) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const label = ((_b = (_a = col.name) === null || _a === void 0 ? void 0 : _a.find((n) => n.lang === lang)) === null || _b === void 0 ? void 0 : _b.text) || ((_d = (_c = col.name) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.text) || col.code;
+        const menuItems = ((_e = col.fields) === null || _e === void 0 ? void 0 : _e.length)
+            ? col.fields.map((field) => {
+                var _a, _b, _c;
+                return ({
+                    name: field.code,
+                    label: ((_b = (_a = field.name) === null || _a === void 0 ? void 0 : _a.find((n) => n.lang === lang || n.lang === '')) === null || _b === void 0 ? void 0 : _b.text) || field.code,
+                    selected: (_c = field.default) !== null && _c !== void 0 ? _c : false,
+                });
+            })
+            : undefined;
+        return Object.assign({ name: col.code, label, selected: ((_f = col.code) === null || _f === void 0 ? void 0 : _f.toLowerCase()) === 'date' ? true : (_g = col.default) !== null && _g !== void 0 ? _g : false }, (menuItems && menuItems.length > 0 && { menuItems }));
+    });
+    const hasDate = columns.some((c) => { var _a; return ((_a = c.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'date'; });
+    return hasDate ? columns : [{ name: 'date', label: 'Date', selected: true }, ...columns];
+}
+export const getColumnOrder = (col) => {
+    const o = col === null || col === void 0 ? void 0 : col.order;
+    if (o == null)
+        return 999;
+    const n = Number(o);
+    return Number.isFinite(n) ? n : 999;
+};
+export function updateTemplate(template) {
+    var _a, _b;
+    return Object.assign(Object.assign({}, template), { layout: (_b = (_a = template.layout) === null || _a === void 0 ? void 0 : _a.map((section) => {
+            var _a;
+            return (Object.assign(Object.assign({}, section), { columns: [...((_a = section.columns) !== null && _a !== void 0 ? _a : [])] }));
+        })) !== null && _b !== void 0 ? _b : [] });
+}
+export function templateToViewMenuItem(template, tableMode) {
+    var _a;
+    const layout = (_a = template.layout) === null || _a === void 0 ? void 0 : _a.map((section) => {
+        var _a;
+        return (Object.assign(Object.assign({}, section), { columns: [...((_a = section.columns) !== null && _a !== void 0 ? _a : [])].sort((a, b) => getColumnOrder(a) - getColumnOrder(b)) }));
+    });
+    const submenu = getSubmenuFromTemplateLayout(template, tableMode);
+    return {
+        id: template.templateId,
+        label: template.name,
+        templateId: template.templateId,
+        layout,
+        submenu,
+        columns: submenu.map((c) => c.name),
+        isCustom: true,
+        default: template.default,
+    };
+}
+export const convertTemplateToColumnsView = (template, tableMode) => {
+    if (!template) {
+        return [];
+    }
+    const templateWithSubmenu = template;
+    if (template.layout && Array.isArray(template.layout) && template.layout.length > 0) {
+        const modeCode = tableMode === 'default' ? 'Advanced' : 'Sheet';
+        const layoutForMode = template.layout.find((layout) => {
+            var _a;
+            const layoutCode = (_a = layout.code) === null || _a === void 0 ? void 0 : _a.trim();
+            return layoutCode === modeCode || (layoutCode === null || layoutCode === void 0 ? void 0 : layoutCode.toLowerCase()) === modeCode.toLowerCase();
+        }) ||
+            template.layout.find((layout) => {
+                var _a, _b;
+                const layoutCode = (_b = (_a = layout.code) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+                if (tableMode === 'default') {
+                    return layoutCode === 'default' || layoutCode === 'advanced';
+                }
+                else {
+                    return layoutCode === 'sheet' || layoutCode === 'sheets';
+                }
+            });
+        if (layoutForMode && layoutForMode.columns && layoutForMode.columns.length > 0) {
+            const templateColumnsView = layoutForMode.columns
+                .map((templateCol) => {
+                var _a, _b;
+                return ({
+                    name: templateCol.name && templateCol.name.length > 0 ? templateCol.name : [{ text: templateCol.code, lang: 'en' }],
+                    selected: (_a = templateCol.default) !== null && _a !== void 0 ? _a : false,
+                    sort_order: getColumnOrder(templateCol),
+                    fields: ((_b = templateCol.fields) === null || _b === void 0 ? void 0 : _b.map((field) => ({
+                        code: field.code,
+                        type: 'single',
+                        parameters: [{ parameter: field.code, code: field.code }],
+                    }))) || [
+                        {
+                            code: templateCol.code,
+                            type: 'single',
+                            parameters: [{ parameter: templateCol.code, code: templateCol.code }],
+                        },
+                    ],
+                });
+            })
+                .sort((a, b) => { var _a, _b; return ((_a = a.sort_order) !== null && _a !== void 0 ? _a : 999) - ((_b = b.sort_order) !== null && _b !== void 0 ? _b : 999); });
+            return templateColumnsView;
+        }
+    }
+    if (templateWithSubmenu.submenu && Array.isArray(templateWithSubmenu.submenu) && templateWithSubmenu.submenu.length > 0) {
+        const templateColumnsView = templateWithSubmenu.submenu.map((submenuItem, index) => {
+            const columnCode = submenuItem.name.toLowerCase();
+            let selectedMenuItems;
+            if (submenuItem.menuItems && submenuItem.menuItems.length > 0) {
+                selectedMenuItems = submenuItem.menuItems.filter((item) => item.selected);
+            }
+            else {
+                selectedMenuItems = [{ name: columnCode, label: submenuItem.label || submenuItem.name, selected: true }];
+            }
+            const parameters = selectedMenuItems.length > 0
+                ? selectedMenuItems.map((menuItem) => ({
+                    parameter: menuItem.name.toLowerCase(),
+                    code: menuItem.name.toLowerCase(),
+                }))
+                : [{ parameter: columnCode, code: columnCode }];
+            const fieldType = selectedMenuItems.length > 1 ? 'combined' : 'single';
+            const result = {
+                name: [{ text: submenuItem.label || submenuItem.name, lang: 'en' }],
+                selected: submenuItem.selected,
+                sort_order: index + 1,
+                fields: [{ code: columnCode, type: fieldType, parameters }],
+            };
+            return result;
+        });
+        return templateColumnsView;
+    }
+    return [];
+};
+export const convertTemplatesToColumnsView = (templates, tableMode) => {
+    if (!templates || !Array.isArray(templates) || templates.length === 0) {
+        return [];
+    }
+    const defaultTemplate = (templates === null || templates === void 0 ? void 0 : templates.find((t) => t.default)) || templates[0];
+    if (!defaultTemplate) {
+        return [];
+    }
+    return convertTemplateToColumnsView(defaultTemplate, tableMode);
+};

package/build/components/TableHeader/TableView/utils/viewMenu.d.ts

@@ -0,0 +1,36 @@
+import type { ColumnViewProps, TableMode } from '../../../../types/index.js';
+import type { LayoutSection, ViewMenuItem } from '../types';
+export declare const createCustomViewMenuItem: (name: string, selectedColumns: ColumnViewProps[], isDefault?: boolean) => ViewMenuItem;
+export declare const setViewAsDefault: (views: ViewMenuItem[], viewId: string) => ViewMenuItem[];
+export declare const transformTemplatesToViewMenuItems: (templates: Array<{
+    id: string | {
+        timestamp: number;
+        date: string;
+    };
+    name: string;
+    default: boolean;
+    layout: LayoutSection[];
+    templateId: string;
+}>, mode?: TableMode, lang?: string) => {
+    customViews: ViewMenuItem[];
+    defaultTemplateColumns?: ColumnViewProps[] | undefined;
+    defaultTemplate?: ViewMenuItem | undefined;
+};
+export declare const mapTemplatesToMenuItems: (templates: Array<{
+    id: string | {
+        timestamp: number;
+        date: string;
+    };
+    name: string;
+    default: boolean;
+    layout: LayoutSection[];
+    templateId: string;
+}>, mode?: TableMode, lang?: string) => {
+    menuItems: ViewMenuItem[];
+    defaultItem?: ViewMenuItem | undefined;
+    allItems: ViewMenuItem[];
+};
+export declare const getSubmenuItems: (item: ViewMenuItem, defaultColumns: ColumnViewProps[]) => ColumnViewProps[];
+export declare const hasSubmenu: (item: ViewMenuItem, defaultColumns: ColumnViewProps[]) => boolean;
+/** Columns for menu display only: exclude index so it is hidden in the UI but still present in table */
+export declare const getSubmenuItemsForDisplay: (columns: ColumnViewProps[]) => ColumnViewProps[];

package/build/components/TableHeader/TableView/utils/viewMenu.js

@@ -0,0 +1,90 @@
+import { INDEX_COLUMN_CONFIG, DATE_COLUMN_CONFIG } from '../constants';
+import { transformLayoutToColumns } from './layoutTransform';
+export const createCustomViewMenuItem = (name, selectedColumns, isDefault = false) => ({
+    label: name,
+    id: `custom_${Date.now()}`,
+    columns: selectedColumns.map((c) => c.name),
+    submenu: selectedColumns,
+    isCustom: true,
+    default: isDefault,
+});
+export const setViewAsDefault = (views, viewId) => views.map((v) => (Object.assign(Object.assign({}, v), { default: v.id === viewId })));
+export const transformTemplatesToViewMenuItems = (templates, mode = 'sheet', lang = 'en') => {
+    const customViews = [];
+    let defaultTemplateColumns;
+    let defaultTemplate;
+    templates.forEach((template) => {
+        const sectionCode = mode === 'sheet' ? 'sheet' : 'advanced';
+        const section = template.layout.find((s) => s.code.toLowerCase() === sectionCode);
+        const columns = section ? transformLayoutToColumns([section], lang) : [];
+        const viewId = typeof template.id === 'string' ? template.id : template.templateId;
+        const indexColumn = INDEX_COLUMN_CONFIG;
+        const dateColumn = DATE_COLUMN_CONFIG;
+        const withDate = columns.some((c) => { var _a; return ((_a = c.name) !== null && _a !== void 0 ? _a : '').toLowerCase() === 'date'; }) ? columns : [dateColumn, ...columns];
+        const dateIndex = withDate.findIndex((c) => { var _a; return ((_a = c.name) !== null && _a !== void 0 ? _a : '').toLowerCase() === 'date'; });
+        const withDateFirst = dateIndex > 0 ? [withDate[dateIndex], ...withDate.filter((c) => { var _a; return ((_a = c.name) !== null && _a !== void 0 ? _a : '').toLowerCase() !== 'date'; })] : withDate;
+        const finalColumns = [indexColumn, ...withDateFirst];
+        const item = {
+            id: template.default ? 'default' : viewId,
+            templateId: template.templateId,
+            label: template.name,
+            isCustom: !template.default,
+            default: !!template.default,
+            columns: finalColumns.map((c) => c.name),
+            submenu: finalColumns,
+        };
+        if (template.default) {
+            defaultTemplateColumns = finalColumns;
+            defaultTemplate = item;
+        }
+        else {
+            customViews.push(item);
+        }
+    });
+    return { customViews, defaultTemplateColumns, defaultTemplate };
+};
+export const mapTemplatesToMenuItems = (templates, mode = 'sheet', lang = 'en') => {
+    const { customViews, defaultTemplate } = transformTemplatesToViewMenuItems(templates, mode, lang);
+    const allItems = defaultTemplate ? [defaultTemplate, ...customViews] : customViews;
+    return { menuItems: customViews, defaultItem: defaultTemplate, allItems };
+};
+export const getSubmenuItems = (item, defaultColumns) => {
+    var _a, _b;
+    let columns = [];
+    if (item.isCustom && ((_a = item.submenu) === null || _a === void 0 ? void 0 : _a.length)) {
+        columns = item.submenu;
+    }
+    else if (item.id === 'default') {
+        columns = defaultColumns;
+    }
+    else {
+        columns = (_b = item.submenu) !== null && _b !== void 0 ? _b : [];
+    }
+    const indexColumn = INDEX_COLUMN_CONFIG;
+    const hasDate = columns.some((c) => { var _a; return ((_a = c.name) !== null && _a !== void 0 ? _a : '').toLowerCase() === 'date'; });
+    if (!hasDate) {
+        const dateColumn = {
+            name: 'date',
+            label: 'Date',
+            selected: true,
+        };
+        return [indexColumn, dateColumn, ...columns];
+    }
+    const dateIndex = columns.findIndex((c) => { var _a; return ((_a = c.name) !== null && _a !== void 0 ? _a : '').toLowerCase() === 'date'; });
+    const dateCol = dateIndex >= 0 ? columns[dateIndex] : { name: 'date', label: 'Date', selected: true };
+    const rest = columns.filter((c) => { var _a, _b; return ((_a = c.name) !== null && _a !== void 0 ? _a : '').toLowerCase() !== 'date' && ((_b = c.name) !== null && _b !== void 0 ? _b : '').toLowerCase() !== 'index'; });
+    const withDateFirst = [dateCol, ...rest];
+    const hasIndex = withDateFirst.some((c) => { var _a; return ((_a = c.name) !== null && _a !== void 0 ? _a : '').toLowerCase() === 'index'; });
+    const indexInList = withDateFirst.findIndex((c) => { var _a; return ((_a = c.name) !== null && _a !== void 0 ? _a : '').toLowerCase() === 'index'; });
+    if (hasIndex && indexInList > 0) {
+        const indexCol = withDateFirst[indexInList];
+        const restWithoutIndex = withDateFirst.filter((c) => { var _a; return ((_a = c.name) !== null && _a !== void 0 ? _a : '').toLowerCase() !== 'index'; });
+        return [indexCol, ...restWithoutIndex];
+    }
+    if (hasIndex && indexInList === 0)
+        return withDateFirst;
+    return [indexColumn, ...withDateFirst];
+};
+export const hasSubmenu = (item, defaultColumns) => getSubmenuItems(item, defaultColumns).length > 0;
+/** Columns for menu display only: exclude index so it is hidden in the UI but still present in table */
+export const getSubmenuItemsForDisplay = (columns) => columns.filter((c) => { var _a; return ((_a = c.name) !== null && _a !== void 0 ? _a : '').toLowerCase() !== 'index'; });

package/build/components/TableHeader/index.d.ts

@@ -6,3 +6,5 @@ export { default as FiltersRowWrapper } from './FiltersRowWrapper';
 export { default as FiltersRow } from './FiltersRow';
 export * from './style';
 export * from './type';
+export type { Template, LayoutSection, ViewMenuItem, ColumnChange, CreateOrEditViewPayload } from './TableView/types';
+export { getSubmenuFromTemplateLayout, getColumnOrder, updateTemplate, templateToViewMenuItem, convertTemplateToColumnsView, convertTemplatesToColumnsView, } from './TableView';

package/build/components/TableHeader/index.js

@@ -6,3 +6,4 @@ export { default as FiltersRowWrapper } from './FiltersRowWrapper';
 export { default as FiltersRow } from './FiltersRow';
 export * from './style';
 export * from './type';
+export { getSubmenuFromTemplateLayout, getColumnOrder, updateTemplate, templateToViewMenuItem, convertTemplateToColumnsView, convertTemplatesToColumnsView, } from './TableView';

package/build/components/TableHeader/type.d.ts

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import type { CalenderMode, TableHeaderStatus, ColumnViewProps, TableMode, Timezone, SegmentCountry } from '../../types/index.js';
 import { AvailableStatus } from '../StatusBar/type';
 import { PartialExcept } from '../../types/index.js';
+import type { ViewMenuItem, LayoutSection, Template } from './TableView/types';
 type ViewsOptions = {
     default: {};
     developer: {};
@@ -22,7 +23,7 @@ export interface TableHeaderProps<IStatus extends TableHeaderStatus | TableHeade
     calendarMode?: CalenderMode;
     onStatusChange?: <T extends IStatus>(status?: T) => void;
     onSearch?: (search: string) => void;
-    onViewChange?: () => void;
+    onViewChange?: (selectedView?: ViewMenuItem) => void;
     onDateChange?: (date: Date | [Date, Date]) => void;
     tableReportsComponent?: React.ReactNode;
     tableFilterComponent?: React.ReactNode;
@@ -44,6 +45,22 @@ export interface TableHeaderProps<IStatus extends TableHeaderStatus | TableHeade
         id: string;
         label: string;
     }) => void;
+    onCreateCustomView?: (data: {
+        name: string;
+        selectedColumns: ColumnViewProps[];
+        layout: LayoutSection;
+    }) => Promise<{
+        templateId: string;
+        name: string;
+    } | void>;
+    onEditCustomView?: (viewId: string, data: {
+        name: string;
+        selectedColumns: ColumnViewProps[];
+        layout: LayoutSection;
+    }) => Promise<void>;
+    onDeleteCustomView?: (viewId: string) => Promise<void>;
+    templates?: Template[];
+    lang?: string;
     onToggleTextButtonClick?: () => void;
     children?: ReactNode;
     calendarGroupBy?: string;

package/build/components/TableReports/components/DownloadButton/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const Button: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableReports/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 type ExportButtonProps = {
     notificationState?: {
         success: boolean;