@zeedhi/teknisa-components-vuetify 1.117.1 → 3.0.1

package/dist/teknisa-vuetify.js

@@ -0,0 +1,3882 @@
+import { ModalService, Icons } from '@zeedhi/common';
+import ZdUserInfoComponent, { ZdUserInfoProps } from '@zeedhi/zd-user-info-vue';
+import { BreadcrumbHeader, TekRestDatasource, TekGridColumn, TekFilterHelper, TekGrid, TekMemoryDatasource, TekGridColumnsButton, TekGridFilterButton, TekGridLayoutOptions, TekUserInfo, TekUserInfoList } from '@zeedhi/teknisa-components-common';
+import { defineComponent, resolveComponent, openBlock, createElementBlock, createVNode, mergeProps, withCtx, normalizeProps, guardReactiveProps, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, createCommentVNode, renderSlot, inject, computed, provide, nextTick, withDirectives, normalizeClass, normalizeStyle, createSlots, vShow, reactive, toDisplayString, ref, watch, createTextVNode, onMounted, isMemoSame, withModifiers } from 'vue';
+import { ZdComponentRenderProps, useCreateInstance, NotProvidedError, buildProps, ZdGridEditableProps, useGridEditableInstance, getRootElement, useGridColumns, ZdIterableColumnsButtonProps, useButtonInstance, ZdButtonProps, useGetMethods, ZdListProps } from '@zeedhi/vuetify';
+import { Utils, Config, Metadata, dayjs, Singleton, I18n, Loader } from '@zeedhi/core';
+import cloneDeep from 'lodash.clonedeep';
+import debounce from 'lodash.debounce';
+import sortable from 'sortablejs';
+
+const TekBreadcrumbHeaderProps$1 = Object.assign(Object.assign({}, ZdComponentRenderProps), { title: {
+        type: String,
+        default: '',
+    }, breadcrumb: {
+        type: Object,
+        default: {},
+    }, rightSlot: {
+        type: Array,
+        default: () => [],
+    } });
+const breadcrumbHeaderComponent$1 = defineComponent({
+    props: TekBreadcrumbHeaderProps$1,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, BreadcrumbHeader);
+        return {
+            instance,
+            root,
+        };
+    },
+});
+
+const _hoisted_1$6 = ["id"];
+const _hoisted_2$3 = { class: "tek-breadcrumb-header-slot-right" };
+const _hoisted_3$1 = { key: 0 };
+
+function render$b(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_zd_breadcrumbs = resolveComponent("zd-breadcrumbs");
+  const _component_zd_text = resolveComponent("zd-text");
+  const _component_v_col = resolveComponent("v-col");
+
+  return (openBlock(), createElementBlock("div", {
+    id: _ctx.instance.name,
+    class: "tek-breadcrumb-header"
+  }, [
+    createVNode(_component_zd_breadcrumbs, mergeProps(_ctx.instance.breadcrumb, {
+      theme: _ctx.instance.theme
+    }), null, 16 /* FULL_PROPS */, ["theme"]),
+    createVNode(_component_v_col, {
+      class: "tek-breadcrumb-header-title-col",
+      cols: "12"
+    }, {
+      default: withCtx(() => [
+        createVNode(_component_zd_text, normalizeProps(guardReactiveProps({
+          name: `${_ctx.instance.name}-title`,
+          cssClass: 'tek-breadcrumb-header-title',
+          text: _ctx.$t(_ctx.instance.title),
+        })), null, 16 /* FULL_PROPS */),
+        createElementVNode("span", _hoisted_2$3, [
+          (_ctx.instance.rightSlot.length)
+            ? (openBlock(), createElementBlock("span", _hoisted_3$1, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.instance.rightSlot, (child, index) => {
+                  return (openBlock(), createBlock(resolveDynamicComponent(child.component), mergeProps({ ref_for: true }, child, { key: index }), null, 16 /* FULL_PROPS */))
+                }), 128 /* KEYED_FRAGMENT */))
+              ]))
+            : createCommentVNode("v-if", true),
+          renderSlot(_ctx.$slots, "rightSlot")
+        ])
+      ]),
+      _: 3 /* FORWARDED */
+    })
+  ], 8 /* PROPS */, _hoisted_1$6))
+}
+
+breadcrumbHeaderComponent$1.render = render$b;
+breadcrumbHeaderComponent$1.__file = "src/components/tek-breadcrumb-header/TekBreadcrumbHeader.vue";
+
+function useTableLayout() {
+    const applyLayout = inject('applyLayout');
+    const getColumnElements = inject('getColumnElements');
+    const getTableWidth = inject('getTableWidth');
+    if (!applyLayout) {
+        throw new NotProvidedError('applyLayout');
+    }
+    if (!getColumnElements) {
+        throw new NotProvidedError('getColumnElements');
+    }
+    if (!getTableWidth) {
+        throw new NotProvidedError('getTableWidth');
+    }
+    return { applyLayout, getColumnElements, getTableWidth };
+}
+function provideTableLayout({ instance, rootEl, }) {
+    var _a;
+    const tableElement = (_a = rootEl.value) === null || _a === void 0 ? void 0 : _a.querySelector('table');
+    const columnDictionary = computed(() => getColumnDictionary(instance.columns));
+    const datasourceDynamicFilter = () => {
+        const datasource = instance.datasource;
+        if (datasource instanceof TekRestDatasource)
+            return datasource.dynamicFilter;
+        return {};
+    };
+    const getColumnDictionary = (columns) => {
+        const columnDictionary = {};
+        columns.forEach((column) => {
+            columnDictionary[column.name] = column;
+        });
+        return columnDictionary;
+    };
+    const addMissingColumns = (layout) => {
+        var _a;
+        const layoutColumnNames = ((_a = layout.columns) === null || _a === void 0 ? void 0 : _a.map((column) => column.name)) || [];
+        const columnNames = Object.keys(columnDictionary.value);
+        columnNames.forEach((columnName) => {
+            var _a;
+            if (!layoutColumnNames.includes(columnName)) {
+                (_a = layout.columns) === null || _a === void 0 ? void 0 : _a.push(columnDictionary.value[columnName]);
+            }
+        });
+    };
+    const setHelperValue = (column, value) => {
+        if (column instanceof TekGridColumn) {
+            if (!Array.isArray(column.filterProps) && typeof value === 'string') {
+                column.filterProps.helperValue = value;
+            }
+            else if (Array.isArray(column.filterProps) && Array.isArray(value)) {
+                column.filterProps.forEach((prop, index) => {
+                    prop.value = value[index];
+                });
+            }
+        }
+    };
+    const getHelperValues = (dynamicFilter, columns) => {
+        const filter = cloneDeep(dynamicFilter);
+        Object.keys(filter).forEach((columnName) => {
+            const filterOptions = filter[columnName];
+            const column = columns[columns.findIndex((col) => col.name === columnName)];
+            const { filterHelperValue } = column;
+            filterOptions.forEach((item) => {
+                if (['IN', 'NOT_IN', 'BETWEEN'].includes(item.operation) && !Array.isArray(item.value)) {
+                    item.value = item.value.split(';');
+                }
+                let helperValue = '';
+                if (!Array.isArray(filterHelperValue)) {
+                    helperValue = filterHelperValue;
+                }
+                else {
+                    Object.keys(filterHelperValue).forEach((key) => {
+                        const value = filterHelperValue[key] || '';
+                        if (`${item.relation || 'AND'}-${item.operation || 'CONTAINS'}` === key) {
+                            helperValue = value;
+                        }
+                    });
+                }
+                if (helperValue) {
+                    const columnObj = instance.getColumn(column.name);
+                    item.value = TekFilterHelper.getValue(helperValue, columnObj);
+                }
+            });
+        });
+        return filter;
+    };
+    /**
+     * Applies the default grid layout
+     * @returns a boolean to indicate whether the group parameters changed
+     */
+    const applyDefaultLayout = (defaultLayout) => {
+        let groupParamsChanged = false;
+        instance.datasource.order = [...defaultLayout.originalDatasourceOrder];
+        instance.datasource.filter = Object.assign({}, defaultLayout.originalDatasourceFilter);
+        if (instance.datasource instanceof TekRestDatasource) {
+            instance.datasource.dynamicFilter = getHelperValues(defaultLayout.originalDatasourceDynamicFilter, defaultLayout.originalColumnProps);
+        }
+        instance.columns = defaultLayout.originalColumnProps.map((defaultColumn) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            const col = columnDictionary.value[defaultColumn.name];
+            groupParamsChanged =
+                groupParamsChanged ||
+                    col.grouped !== defaultColumn.grouped ||
+                    col.groupOpened !== defaultColumn.groupOpened ||
+                    col.aggregation !== defaultColumn.aggregation;
+            col.isVisible = (_a = defaultColumn.isVisible) !== null && _a !== void 0 ? _a : col.isVisible;
+            col.label = (_b = defaultColumn.label) !== null && _b !== void 0 ? _b : col.label;
+            col.align = (_c = defaultColumn.align) !== null && _c !== void 0 ? _c : col.align;
+            col.fixed = (_d = defaultColumn.fixed) !== null && _d !== void 0 ? _d : col.fixed;
+            col.grouped = (_e = defaultColumn.grouped) !== null && _e !== void 0 ? _e : col.grouped;
+            col.groupOpened = (_f = defaultColumn.groupOpened) !== null && _f !== void 0 ? _f : col.groupOpened;
+            col.aggregation = (_g = defaultColumn.aggregation) !== null && _g !== void 0 ? _g : col.aggregation;
+            col.minWidth = (_h = defaultColumn.minWidth) !== null && _h !== void 0 ? _h : col.minWidth;
+            col.maxWidth = (_j = defaultColumn.maxWidth) !== null && _j !== void 0 ? _j : col.maxWidth;
+            col.width = (_k = defaultColumn.width) !== null && _k !== void 0 ? _k : col.width;
+            setHelperValue(col, defaultColumn.filterHelperValue || '');
+            return col;
+        });
+        if (tableElement) {
+            tableElement.style.width = '100%';
+            const columnElements = Array.from(tableElement.querySelectorAll('tr th:not(.selectable)'));
+            columnElements.forEach((item) => {
+                item.style.width = 'unset';
+            });
+        }
+        return groupParamsChanged;
+    };
+    const applyNewLayout = (layout, changeLayoutCallback) => {
+        var _a;
+        const gridColumnNames = Object.keys(columnDictionary.value);
+        let layoutChanged = false;
+        // removes columns that are in the layout but not in grid
+        layout.columns = (_a = layout.columns) === null || _a === void 0 ? void 0 : _a.filter((column) => {
+            const isInGrid = gridColumnNames.includes(column.name);
+            if (!isInGrid)
+                layoutChanged = true;
+            return isInGrid;
+        });
+        if (layoutChanged) {
+            changeLayoutCallback(layout);
+        }
+        if (tableElement)
+            tableElement.style.width = layout.gridWidth || 'auto';
+        instance.datasource.order = layout.order !== undefined ? layout.order : instance.datasource.order;
+        instance.datasource.filter = layout.filter !== undefined ? layout.filter : instance.datasource.filter;
+        if (instance.datasource instanceof TekRestDatasource && layout.dynamicFilter !== undefined) {
+            instance.datasource.dynamicFilter = getHelperValues(layout.dynamicFilter, layout.columns || instance.columns);
+        }
+        if (layout.columns) {
+            instance.columns = layout.columns.map((column) => {
+                const col = columnDictionary.value[column.name];
+                col.label = column.label !== undefined ? column.label : col.label;
+                col.align = column.align !== undefined ? column.align : col.align;
+                col.isVisible = column.isVisible !== undefined ? column.isVisible : col.isVisible;
+                col.fixed = !!column.fixed;
+                col.grouped = !!column.grouped;
+                col.groupOpened = !!column.groupOpened;
+                col.aggregation = column.aggregation;
+                col.minWidth = column.minWidth || '';
+                col.maxWidth = column.maxWidth || '';
+                col.width = column.width;
+                setHelperValue(col, column.filterHelperValue || '');
+                return col;
+            });
+            // wait to change column orders
+            nextTick(() => {
+                gridColumnNames.forEach((_key, index) => {
+                    const columnElement = tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector(`tr th:not(.selectable)[index="${index}"]`);
+                    if (columnElement) {
+                        columnElement.style.width = layout.columns[index].width || 'unset';
+                    }
+                });
+            });
+        }
+    };
+    const applyLayout = ({ layout, defaultLayout, changeLayoutCallback, }) => {
+        const oldOrder = instance.datasource.order;
+        const oldFilter = instance.datasource.filter;
+        const oldDynamicFilter = datasourceDynamicFilter();
+        let groupParamsChanged = false;
+        if (layout) {
+            addMissingColumns(layout);
+            applyNewLayout(layout, changeLayoutCallback);
+        }
+        else {
+            groupParamsChanged = applyDefaultLayout(defaultLayout);
+        }
+        if ((!Utils.isEqual(instance.datasource.order, oldOrder) ||
+            !Utils.isEqual(instance.datasource.filter, oldFilter) ||
+            !Utils.isEqual(datasourceDynamicFilter(), oldDynamicFilter)) &&
+            !groupParamsChanged) {
+            // Se os parametros de agrupamento tiverem sido alterados um get é feito automaticamente
+            instance.loadAfterTasks();
+        }
+    };
+    const getColumnElements = () => {
+        const elementDict = {};
+        const columnElements = (tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll('tr th:not(.selectable)[index]')) || [];
+        columnElements.forEach((el) => {
+            const index = el.getAttribute('index');
+            if (index === null)
+                return;
+            elementDict[index] = el;
+        });
+        return elementDict;
+    };
+    const getTableWidth = () => {
+        return tableElement ? window.getComputedStyle(tableElement).width : 'auto';
+    };
+    provide('applyLayout', applyLayout);
+    provide('getColumnElements', getColumnElements);
+    provide('getTableWidth', getTableWidth);
+}
+
+const TekGridProps$1 = buildProps(Object.assign(Object.assign({}, ZdGridEditableProps), { toolbarSlot: {
+        type: Array,
+        default: undefined,
+    }, title: {
+        type: String,
+        default: '',
+    }, addButton: {
+        type: [Boolean, String],
+        default: false,
+    }, deleteButton: {
+        type: [String, Boolean],
+        default: 'none',
+    }, columnsButton: {
+        type: [Boolean, String],
+        default: false,
+    }, columnsButtonIgnore: {
+        type: [Array, String],
+        default: () => [],
+    }, showEditButtons: {
+        type: [Boolean, String],
+        default: true,
+    }, filterButton: {
+        type: [Boolean, String],
+        default: false,
+    }, modalFilterProps: {
+        type: Object,
+        default: () => ({}),
+    }, showSearch: {
+        type: [Boolean, String],
+        default: true,
+    }, columnFilterButton: {
+        type: [Boolean, String],
+        default: false,
+    }, hideActions: {
+        type: [Boolean, String],
+        default: false,
+    }, actions: {
+        type: Array,
+        default: () => [],
+    }, dragColumns: {
+        type: [Boolean, String],
+        default: true,
+    }, resizeColumns: {
+        type: [Boolean, String],
+        default: true,
+    }, showLayoutOptions: {
+        type: [Boolean, String],
+        default: true,
+    }, showExport: {
+        type: [String, Boolean],
+        default: false,
+    }, showReload: {
+        type: [Boolean, String],
+        default: true,
+    }, exportConfig: {
+        type: Array,
+    }, exportActions: {
+        type: Array,
+    }, groupsOpened: {
+        type: [Boolean, String],
+        default: false,
+    }, showSummaryTotal: {
+        type: [Boolean, String],
+        default: true,
+    }, mainGrid: {
+        type: [Boolean, String],
+        default: true,
+    }, xlsDefaultType: {
+        type: String,
+        default: undefined,
+    }, showCheckboxAllFilter: {
+        type: [Boolean, String],
+        default: Config.gridShowCheckboxAllFilter,
+    }, toolbarOpened: {
+        type: [Boolean],
+        default: true,
+    }, defaultFilter: {
+        type: Object,
+    }, reportTitle: {
+        type: String,
+    }, editNewRowsOnly: {
+        type: [Boolean, String],
+        default: false,
+    } }));
+const gridEditableComponent$1 = defineComponent({
+    props: TekGridProps$1,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, TekGrid);
+        const renderedData = computed(() => {
+            if (instance.isGrouped()) {
+                return instance.getGroupedData();
+            }
+            return instance.getData();
+        });
+        const visibleData = computed(() => {
+            return renderedData.value.filter((row) => instance.isItemVisible(row));
+        });
+        const gridEditableScope = useGridEditableInstance({ instance, root, renderedData: visibleData });
+        const rootEl = getRootElement(root);
+        const { visibleColumns } = useGridColumns({
+            instance,
+            rootEl,
+            visibilityCondition: (column) => column.isVisible && !column.grouped,
+        });
+        provideTableLayout({ instance, rootEl });
+        const debouncedDatasourceGet = debounce((instance) => {
+            const event = new Event('change', { cancelable: true });
+            instance.callEvent('beforeApplyFilter', { component: instance, event });
+            if (event.defaultPrevented)
+                return;
+            const { datasource } = instance;
+            if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+                datasource.updateDynamicFilter();
+            }
+            else {
+                datasource.get();
+            }
+        }, 500);
+        const filter = computed(() => {
+            if (instance.datasource instanceof TekRestDatasource || instance.datasource instanceof TekMemoryDatasource) {
+                return instance.datasource.dynamicFilter;
+            }
+            const datasourceFilter = instance.datasource.filter;
+            const simpleFilter = {};
+            Object.keys(datasourceFilter).forEach((key) => {
+                simpleFilter[key] = [{ relation: 'AND', operation: 'CONTAINS', value: datasourceFilter[key] }];
+            });
+            return simpleFilter;
+        });
+        const setFilter = (newFilter) => {
+            if (Utils.isEqual(filter, newFilter))
+                return;
+            if (instance.datasource instanceof TekRestDatasource || instance.datasource instanceof TekMemoryDatasource) {
+                instance.datasource.dynamicFilter = cloneDeep(newFilter);
+            }
+            else {
+                const normalFilter = {};
+                Object.keys(newFilter).forEach((key) => {
+                    if (!newFilter[key][0].value)
+                        return;
+                    normalFilter[key] = newFilter[key][0].value;
+                });
+                instance.datasource.filter = normalFilter;
+            }
+            debouncedDatasourceGet(instance);
+            instance.changeLayout();
+        };
+        const columnHasFilter = (columnName) => {
+            return instance.columnHasFilter(columnName);
+        };
+        const isRowVisible = (row, index) => {
+            return instance.isItemVisible(row) && gridEditableScope.shouldRender(index);
+        };
+        const isCurrentRowGroup = (row) => {
+            const { uniqueKey, currentRow } = instance.datasource;
+            return !!((row.group && row.groupValue === currentRow.groupValue) ||
+                (row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey]));
+        };
+        const isGroupSelectIndeterminate = (item) => {
+            let hasSelected = false;
+            let hasNotSelected = false;
+            const { uniqueKey } = instance.datasource;
+            item.children.forEach((child) => {
+                const idx = instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+                hasSelected = hasSelected || idx !== -1;
+                hasNotSelected = hasNotSelected || idx === -1;
+            });
+            return hasSelected && hasNotSelected;
+        };
+        const isGroupSelected = (item) => {
+            return item.children.every((child) => {
+                const { uniqueKey } = instance.datasource;
+                const idx = instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+                return idx !== -1;
+            });
+        };
+        const selectGroupRowClick = (row, isSelected, event) => {
+            nextTick(() => {
+                const rootElement = getRootElement(root);
+                instance.selectGroupClick(row, isSelected, event, rootElement.value);
+            });
+        };
+        const selectGroup = (item, event) => {
+            const { uniqueKey } = instance.datasource;
+            const isSelected = isGroupSelected(item);
+            if (!isSelected) {
+                // here we fetch the item from renderedData because vuetify isSelected checks for object reference
+                // so we need to find the item inside renderedData to call selectRow() with the correct reference
+                // https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDataTable/composables/select.ts#L128
+                const items = item.children.map((child) => {
+                    return renderedData.value.find((row) => child[uniqueKey] === row[uniqueKey]);
+                });
+                items.forEach((child) => {
+                    if (!child)
+                        return;
+                    const idx = instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+                    if (idx === -1) {
+                        instance.selectRow(child, true);
+                    }
+                });
+            }
+            else {
+                item.children.forEach((child) => {
+                    const idx = instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+                    if (idx !== -1) {
+                        instance.selectRow(child, false);
+                    }
+                });
+            }
+            selectGroupRowClick(item, !isSelected, event);
+        };
+        const openGroup = (item) => {
+            instance.openGroup(item);
+        };
+        const isGroup = (item) => {
+            return !!item.group;
+        };
+        const isFooter = (item) => {
+            return !!item.groupFooter;
+        };
+        const groupColumnNames = computed(() => {
+            return instance.columns.filter((column) => column.grouped).map((column) => column.name) || [];
+        });
+        return Object.assign(Object.assign({}, gridEditableScope), { instance,
+            root,
+            filter,
+            setFilter,
+            columnHasFilter,
+            visibleColumns,
+            isRowVisible,
+            isCurrentRowGroup,
+            isGroupSelectIndeterminate,
+            selectGroup,
+            isGroup,
+            openGroup,
+            renderedData,
+            isGroupSelected,
+            groupColumnNames,
+            isFooter,
+            visibleData });
+    },
+});
+
+const _hoisted_1$5 = ["colspan"];
+const _hoisted_2$2 = ["colspan"];
+
+function render$a(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_zd_grid_toolbar = resolveComponent("zd-grid-toolbar");
+  const _component_tek_grid_header_row = resolveComponent("tek-grid-header-row");
+  const _component_tek_grid_group_row = resolveComponent("tek-grid-group-row");
+  const _component_tek_grid_indentation = resolveComponent("tek-grid-indentation");
+  const _component_zd_grid_editable_row = resolveComponent("zd-grid-editable-row");
+  const _component_tek_grid_footer_row = resolveComponent("tek-grid-footer-row");
+  const _component_zd_iterable_no_data = resolveComponent("zd-iterable-no-data");
+  const _component_zd_grid_footer = resolveComponent("zd-grid-footer");
+  const _component_v_data_table = resolveComponent("v-data-table");
+
+  return withDirectives((openBlock(), createBlock(_component_v_data_table, {
+    ref: "root",
+    id: _ctx.instance.name,
+    modelValue: _ctx.selectedRows,
+    "onUpdate:modelValue": _cache[12] || (_cache[12] = $event => ((_ctx.selectedRows) = $event)),
+    class: normalizeClass([
+      'zd-grid',
+      'tek-grid',
+      'zd-grid-editable',
+      _ctx.instance.cssClass,
+      {
+        'zd-grid--loading': _ctx.instance.datasource.loading,
+        'zd-grid--cell-selection': _ctx.instance.cellSelection,
+      },
+    ]),
+    style: normalizeStyle([
+      _ctx.cssColorVars,
+      {
+        height: _ctx.$formatSize(_ctx.instance.height),
+        width: _ctx.$formatSize(_ctx.instance.width),
+        maxHeight: _ctx.$formatSize(_ctx.instance.maxHeight),
+        minHeight: _ctx.$formatSize(_ctx.instance.minHeight),
+        maxWidth: _ctx.$formatSize(_ctx.instance.maxWidth),
+        minWidth: _ctx.$formatSize(_ctx.instance.minWidth),
+      },
+      _ctx.$styleObject(_ctx.instance.cssStyle),
+    ]),
+    theme: _ctx.instance.theme,
+    "sort-asc-icon": "$collapse",
+    "sort-desc-icon": "$expand",
+    "fixed-header": "",
+    "multi-sort": "",
+    "hide-default-footer": "",
+    name: _ctx.instance.name,
+    headers: _ctx.headers,
+    items: _ctx.renderedData,
+    search: _ctx.instance.datasource.search,
+    density: _ctx.instance.dense ? 'compact' : 'default',
+    loading: _ctx.instance.datasource.loading,
+    "item-value": _ctx.instance.datasource.uniqueKey,
+    "items-per-page": -1,
+    "no-filter": "",
+    "sort-by": _ctx.sortBy,
+    "disable-sort": "",
+    "return-object": "",
+    tabindex: "0",
+    "onUpdate:sortBy": _cache[13] || (_cache[13] = $event => (_ctx.updateSortBy($event)))
+  }, createSlots({
+    top: withCtx(() => [
+      (!_ctx.hasToolbarSlot)
+        ? (openBlock(), createBlock(_component_zd_grid_toolbar, { key: 0 }))
+        : createCommentVNode("v-if", true),
+      renderSlot(_ctx.$slots, "toolbarSlot")
+    ]),
+    headers: withCtx(({ columns: tableColumns, isSorted, getSortIcon, toggleSort, sortBy }) => [
+      (_ctx.instance.showHeader)
+        ? (openBlock(), createBlock(_component_tek_grid_header_row, {
+            key: 0,
+            name: _ctx.instance.name,
+            selectable: _ctx.instance.selectable,
+            headerBackground: _ctx.instance.headerBackground,
+            showSelectAll: _ctx.instance.showSelectAll,
+            allselectedState: _ctx.allselectedState,
+            visibleColumns: _ctx.visibleColumns,
+            dragColumns: _ctx.instance.dragColumns,
+            headerCellTextColor: _ctx.instance.headerCellTextColor,
+            resizeColumns: _ctx.instance.resizeColumns,
+            getSortIcon: getSortIcon,
+            toggleSort: toggleSort,
+            sortBy: sortBy,
+            tableColumns: tableColumns,
+            isSorted: isSorted,
+            disableCheckbox: _ctx.instance.editing,
+            instanceName: _ctx.instance.name,
+            filterRelationsDatasource: _ctx.instance.filterRelationsDatasource,
+            filterOperationsDatasource: _ctx.instance.filterOperationsDatasource,
+            modelValue: _ctx.filter,
+            columnFilterButton: _ctx.instance.columnFilterButton,
+            columnHasFilter: _ctx.columnHasFilter,
+            level: _ctx.groupColumnNames.length,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (_ctx.setFilter($event))),
+            onResizeMousedown: _cache[1] || (_cache[1] = $event => (_ctx.resizeMouseDownHandler($event.column, $event.event))),
+            onResizeClick: _cache[2] || (_cache[2] = $event => (_ctx.resizeClickHandler($event.event))),
+            onSelectAllClick: _cache[3] || (_cache[3] = $event => (_ctx.selectAllClick($event)))
+          }, null, 8 /* PROPS */, ["name", "selectable", "headerBackground", "showSelectAll", "allselectedState", "visibleColumns", "dragColumns", "headerCellTextColor", "resizeColumns", "getSortIcon", "toggleSort", "sortBy", "tableColumns", "isSorted", "disableCheckbox", "instanceName", "filterRelationsDatasource", "filterOperationsDatasource", "modelValue", "columnFilterButton", "columnHasFilter", "level"]))
+        : createCommentVNode("v-if", true)
+    ]),
+    "no-data": withCtx(() => [
+      createVNode(_component_zd_iterable_no_data, null, {
+        errorSlot: withCtx(() => [
+          renderSlot(_ctx.$slots, "errorSlot")
+        ]),
+        noResultSlot: withCtx(() => [
+          renderSlot(_ctx.$slots, "noResultSlot")
+        ]),
+        noDataSlot: withCtx(() => [
+          renderSlot(_ctx.$slots, "noDataSlot")
+        ]),
+        _: 3 /* FORWARDED */
+      })
+    ]),
+    bottom: withCtx(() => [
+      (_ctx.instance.showFooter && !_ctx.hasFooterSlot)
+        ? (openBlock(), createBlock(_component_zd_grid_footer, { key: 0 }))
+        : createCommentVNode("v-if", true),
+      renderSlot(_ctx.$slots, "footerSlot")
+    ]),
+    _: 2 /* DYNAMIC */
+  }, [
+    (_ctx.addTopPadding())
+      ? {
+          name: "body.prepend",
+          fn: withCtx(({ headers }) => [
+            createElementVNode("tr", null, [
+              createElementVNode("td", {
+                colspan: headers.length,
+                style: normalizeStyle(`padding-top:${_ctx.scrollData.startHeight}px`)
+              }, null, 12 /* STYLE, PROPS */, _hoisted_1$5)
+            ])
+          ]),
+          key: "0"
+        }
+      : undefined,
+    (_ctx.addBottomPadding())
+      ? {
+          name: "body.append",
+          fn: withCtx(({ headers }) => [
+            createElementVNode("tr", null, [
+              createElementVNode("td", {
+                colspan: headers.length,
+                style: normalizeStyle(`padding-top:${_ctx.scrollData.endHeight}px`)
+              }, null, 12 /* STYLE, PROPS */, _hoisted_2$2)
+            ])
+          ]),
+          key: "1"
+        }
+      : undefined,
+    (_ctx.instance.datasource.data.length)
+      ? {
+          name: "body",
+          fn: withCtx(({ internalItems, isSelected }) => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.visibleData, (item, i) => {
+              return (openBlock(), createElementBlock(Fragment, null, [
+                (_ctx.isRowVisible(item, i))
+                  ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                      (_ctx.isGroup(item))
+                        ? (openBlock(), createBlock(_component_tek_grid_group_row, {
+                            key: item.groupColumnName + item.groupValue,
+                            row: item,
+                            "is-current-row": _ctx.isCurrentRowGroup(item),
+                            selectable: _ctx.instance.selectable,
+                            selectionDisabled: _ctx.instance.callDisableSelection(item),
+                            cellSelection: _ctx.instance.cellSelection,
+                            "is-current": _ctx.isCurrent,
+                            isSelected: _ctx.isGroupSelected(item),
+                            indeterminate: _ctx.isGroupSelectIndeterminate(item),
+                            onClick: $event => (_ctx.rowClick(item, $event)),
+                            onCheckboxClick: $event => (_ctx.selectGroup(item, $event)),
+                            onFocusin: _cache[4] || (_cache[4] = $event => (_ctx.cellFocusIn($event))),
+                            onExpandClick: $event => (_ctx.openGroup(item))
+                          }, null, 8 /* PROPS */, ["row", "is-current-row", "selectable", "selectionDisabled", "cellSelection", "is-current", "isSelected", "indeterminate", "onClick", "onCheckboxClick", "onExpandClick"]))
+                        : (!_ctx.isFooter(item))
+                          ? (openBlock(), createBlock(_component_zd_grid_editable_row, {
+                              key: _ctx.instance.getRowKey(item),
+                              isSelected: isSelected(internalItems[i]),
+                              isCurrentRow: _ctx.isCurrentRow(item),
+                              selectable: _ctx.instance.selectable,
+                              selectionDisabled: _ctx.instance.callDisableSelection(item),
+                              cellSelection: _ctx.instance.cellSelection,
+                              isCurrent: _ctx.isCurrent,
+                              columns: _ctx.visibleColumns,
+                              row: item,
+                              fixedLeft: _ctx.fixedLeft,
+                              fixedRight: _ctx.fixedRight,
+                              isEditing: _ctx.isEditing,
+                              onCellFocus: _cache[5] || (_cache[5] = $event => (_ctx.cellFocus($event))),
+                              onCellClick: _cache[6] || (_cache[6] = $event => (_ctx.cellClick($event))),
+                              onClick: $event => (_ctx.rowClick(item, $event)),
+                              onFocusin: _cache[7] || (_cache[7] = $event => (_ctx.cellFocusIn($event))),
+                              onCheckboxClick: $event => (_ctx.selectRowClick(item, !isSelected(internalItems[i]), $event)),
+                              onCellEnterEdit: _cache[8] || (_cache[8] = $event => (_ctx.cellEnterEdit($event))),
+                              onCellKeydown: _cache[9] || (_cache[9] = $event => (_ctx.cellKeydown($event)))
+                            }, {
+                              "cell-prepend": withCtx(({ index }) => [
+                                (index === 0 && _ctx.groupColumnNames.length > 0)
+                                  ? (openBlock(), createBlock(_component_tek_grid_indentation, {
+                                      key: 0,
+                                      level: item.groupHeaders?.length
+                                    }, null, 8 /* PROPS */, ["level"]))
+                                  : createCommentVNode("v-if", true)
+                              ]),
+                              _: 2 /* DYNAMIC */
+                            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["isSelected", "isCurrentRow", "selectable", "selectionDisabled", "cellSelection", "isCurrent", "columns", "row", "fixedLeft", "fixedRight", "isEditing", "onClick", "onCheckboxClick"]))
+                          : (openBlock(), createBlock(_component_tek_grid_footer_row, {
+                              key: 'footer' + item.groupColumnName + item.groupValue,
+                              isSelected: isSelected(internalItems[i]),
+                              selectable: _ctx.instance.selectable,
+                              selectionDisabled: _ctx.instance.callDisableSelection(item),
+                              cellSelection: _ctx.instance.cellSelection,
+                              isCurrent: _ctx.isCurrent,
+                              columns: _ctx.visibleColumns,
+                              row: item,
+                              fixedLeft: _ctx.fixedLeft,
+                              fixedRight: _ctx.fixedRight,
+                              onCellFocus: _cache[10] || (_cache[10] = $event => (_ctx.cellFocus($event))),
+                              onFocusin: _cache[11] || (_cache[11] = $event => (_ctx.cellFocusIn($event)))
+                            }, null, 8 /* PROPS */, ["isSelected", "selectable", "selectionDisabled", "cellSelection", "isCurrent", "columns", "row", "fixedLeft", "fixedRight"]))
+                    ], 64 /* STABLE_FRAGMENT */))
+                  : createCommentVNode("v-if", true)
+              ], 64 /* STABLE_FRAGMENT */))
+            }), 256 /* UNKEYED_FRAGMENT */))
+          ]),
+          key: "2"
+        }
+      : undefined
+  ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["id", "modelValue", "class", "style", "theme", "name", "headers", "items", "search", "density", "loading", "item-value", "sort-by"])), [
+    [vShow, _ctx.instance.isVisible]
+  ])
+}
+
+gridEditableComponent$1.render = render$a;
+gridEditableComponent$1.__file = "src/components/tek-grid/TekGrid.vue";
+
+const isArrayOperation = (operation) => {
+    return ['IN', 'NOT_IN', 'BETWEEN'].includes(operation);
+};
+
+const TekGridColumnFilterProps$1 = {
+    hasFilterData: {
+        type: Boolean,
+        default: false,
+    },
+    column: {
+        type: Object,
+        required: true,
+    },
+    modelValue: {
+        type: Array,
+        default: [],
+    },
+    instanceName: {
+        type: String,
+        required: true,
+    },
+    filterRelationsDatasource: {
+        type: [Object, null],
+        required: false,
+    },
+    filterOperationsDatasource: {
+        type: [Object, null],
+        required: false,
+    },
+    isHovering: {
+        type: Boolean,
+        default: false,
+    },
+    multiple: {
+        type: Boolean,
+        required: true,
+    },
+};
+const tekGridColumnFilter$1 = defineComponent({
+    props: TekGridColumnFilterProps$1,
+    inheritAttrs: false,
+    emits: ['update:modelValue'],
+    setup(props, ctx) {
+        const getValueInputName = (index) => `${props.instanceName}-${props.column.name}-filter-value-${index}`;
+        const focusValueInput = (index) => {
+            const valueInputName = getValueInputName(index);
+            const input = Metadata.getInstance(valueInputName);
+            input.setFocus();
+        };
+        const createNewFilter = () => {
+            return reactive({
+                operation: 'CONTAINS',
+                relation: 'AND',
+                value: undefined,
+            });
+        };
+        let newFilter = createNewFilter();
+        const convertToDateFormat = (value, revert) => {
+            const dateFormat = props.column.componentProps.dateFormat || Config.dateFormat;
+            const displayFormat = props.column.componentProps.displayFormat || Config.displayFormat;
+            if (revert) {
+                if (dayjs(value, displayFormat).isValid() || !dayjs(value, dateFormat).isValid()) {
+                    return value;
+                }
+                return dayjs(value, dateFormat).format(displayFormat);
+            }
+            if (dayjs(value, dateFormat).isValid() || !dayjs(value, displayFormat).isValid()) {
+                return value;
+            }
+            return dayjs(value, displayFormat).format(dateFormat);
+        };
+        const checkDateValueFormat = (value, revert = false) => {
+            if (!['ZdDate', 'ZdDateRange'].includes(props.column.componentProps.component))
+                return value;
+            if (Array.isArray(value)) {
+                return value.map((item) => convertToDateFormat(item, revert));
+            }
+            return convertToDateFormat(value, revert);
+        };
+        // use WeakMap to avoid memory leaks
+        const idMap = new WeakMap();
+        let idCounter = 0;
+        // retrieves a unique id for each item
+        const getId = (item) => {
+            if (!idMap.has(item)) {
+                idMap.set(item, `__item__${idCounter++}`);
+            }
+            return idMap.get(item);
+        };
+        // use computed to generate unique ids for each filter item
+        // this is needed for the v-for :key updates
+        const modelWithIds = computed(() => {
+            if (!props.multiple) {
+                if (props.modelValue.length > 0) {
+                    return [{ id: getId(props.modelValue[0]), item: props.modelValue[0] }];
+                }
+                return [{ id: getId(newFilter), item: newFilter }];
+            }
+            return [...props.modelValue, newFilter].map((item) => ({
+                id: getId(item),
+                item,
+            }));
+        });
+        const debounceUpdateModel = debounce((modelValue) => {
+            if (Utils.isEqual(modelValue, props.modelValue))
+                return;
+            ctx.emit('update:modelValue', modelValue);
+            newFilter = createNewFilter();
+        }, 500);
+        const changeRelation = (index, { component }) => {
+            const modelValue = cloneDeep(props.modelValue);
+            const isNewFilter = index === modelValue.length;
+            const filter = isNewFilter ? newFilter : modelValue[index];
+            const { value } = component;
+            focusValueInput(index);
+            // update item type value
+            filter.relation = value;
+            if (isNewFilter)
+                return;
+            debounceUpdateModel(modelValue);
+        };
+        const changeOperation = (index, { component }) => {
+            const modelValue = cloneDeep(props.modelValue);
+            const filterItem = modelValue[index];
+            const isNewFilter = index === modelValue.length;
+            const filter = isNewFilter ? newFilter : filterItem;
+            const { value } = component;
+            focusValueInput(index);
+            // if operation is IN, NOT_IN or BETWEEN, value should be an array
+            if (isArrayOperation(value)) {
+                filter.value = Array.isArray(filterItem.value) ? filterItem.value : [filterItem.value];
+            }
+            // update item type value
+            filter.operation = value;
+            if (isNewFilter)
+                return;
+            debounceUpdateModel(modelValue);
+        };
+        const changeValue = (item, index, { component }) => {
+            const modelValue = cloneDeep(props.modelValue);
+            const filter = cloneDeep(item);
+            const { value } = component;
+            const isNewFilter = props.multiple && index === modelValue.length;
+            let formattedValue = value;
+            if (value && isArrayOperation(filter.operation)) {
+                formattedValue = value.split(';');
+            }
+            filter.value = checkDateValueFormat(formattedValue);
+            if (!props.multiple) {
+                debounceUpdateModel([filter]);
+                return;
+            }
+            if (isNewFilter) {
+                // only emit event when newFilter has value
+                if (!filter.value)
+                    return;
+                debounceUpdateModel([...modelValue, filter]);
+                return;
+            }
+            if (!filter.value) {
+                // when removing the last (not new) filter, should pass its operation and relation to the new filter
+                if (index === modelValue.length - 1) {
+                    newFilter.operation = filter.operation;
+                    newFilter.relation = filter.relation;
+                }
+                modelValue.splice(index, 1);
+                // if the removed filter was the first, should set the new first relation to AND
+                if (modelValue.length > 0 && index === 0) {
+                    modelValue[0].relation = 'AND';
+                }
+                // if the removed filter was the last, should set the newFilter relation to AND
+                if (modelValue.length === 0) {
+                    newFilter.relation = 'AND';
+                }
+            }
+            debounceUpdateModel(modelValue);
+        };
+        const getComponentType = (operation) => {
+            return isArrayOperation(operation) ? 'ZdTextInput' : props.column.componentProps.component;
+        };
+        const getComponentHint = (operation) => {
+            return isArrayOperation(operation) ? 'TEKGRID_MULTIPLE_VALUE_HINT' : '';
+        };
+        const getItemValue = (item) => {
+            return isArrayOperation(item.operation) ? item.value.join(';') : item.value;
+        };
+        return {
+            changeValue,
+            changeRelation,
+            changeOperation,
+            getValueInputName,
+            newFilter,
+            getComponentType,
+            getComponentHint,
+            modelWithIds,
+            getItemValue,
+        };
+    },
+});
+
+function render$9(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_zd_grid_header_icon = resolveComponent("zd-grid-header-icon");
+  const _component_zd_radio = resolveComponent("zd-radio");
+  const _component_zd_select = resolveComponent("zd-select");
+  const _component_v_card = resolveComponent("v-card");
+  const _component_v_menu = resolveComponent("v-menu");
+
+  return (openBlock(), createBlock(_component_v_menu, {
+    "offset-overflow": "",
+    "offset-y": "",
+    transition: "scale-transition",
+    "content-class": "tek-grid-column-filter__menu",
+    "close-on-content-click": false
+  }, {
+    activator: withCtx(({ props }) => [
+      createVNode(_component_zd_grid_header_icon, mergeProps(props, {
+        icon: _ctx.$getIcon('filter'),
+        hidden: !_ctx.isHovering && !_ctx.hasFilterData,
+        color: _ctx.hasFilterData ? 'primary' : ''
+      }), null, 16 /* FULL_PROPS */, ["icon", "hidden", "color"])
+    ]),
+    default: withCtx(() => [
+      createVNode(_component_v_card, {
+        class: "zd-pa-4 zd-pb-0",
+        "min-width": 200,
+        "max-height": 300
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.modelWithIds, ({ item, id }, filterIndex) => {
+            return (openBlock(), createElementBlock(Fragment, { key: id }, [
+              createCommentVNode(" relation "),
+              (_ctx.multiple && filterIndex > 0)
+                ? (openBlock(), createBlock(_component_zd_radio, mergeProps({
+                    key: 0,
+                    name: `${_ctx.instanceName}-${_ctx.column.name}-filter-relation-${filterIndex}`
+                  }, { ref_for: true }, {
+            showLabel: false,
+            showHelper: false,
+            vertical: false,
+            cssClass: 'zd-mb-2',
+            datasource: _ctx.filterRelationsDatasource,
+            dataValue: 'value',
+            dataLabel: 'text',
+            value: item.relation,
+            events: {
+              change: (params) => _ctx.changeRelation(filterIndex, params),
+            },
+          }), null, 16 /* FULL_PROPS */, ["name"]))
+                : createCommentVNode("v-if", true),
+              createCommentVNode(" operation "),
+              (_ctx.multiple && item.operation)
+                ? (openBlock(), createBlock(_component_zd_select, mergeProps({
+                    key: 1,
+                    name: `${_ctx.instanceName}-${_ctx.column.name}-filter-operation-${filterIndex}`
+                  }, { ref_for: true }, {
+            autocomplete: false,
+            showLabel: false,
+            showHelper: false,
+            clearable: false,
+            cssClass: 'zd-mb-2',
+            datasource: _ctx.filterOperationsDatasource,
+            dataValue: 'value',
+            dataText: 'text',
+            value: item.operation,
+            events: {
+              change: (params) => _ctx.changeOperation(filterIndex, params),
+            },
+          }), null, 16 /* FULL_PROPS */, ["name"]))
+                : createCommentVNode("v-if", true),
+              createCommentVNode(" value "),
+              (openBlock(), createBlock(resolveDynamicComponent(_ctx.getComponentType(item.operation)), mergeProps({
+                name: `${_ctx.instanceName}-${_ctx.column.name}-filter-value-${filterIndex}`
+              }, { ref_for: true }, {
+            ..._ctx.column.componentProps,
+            showLabel: false,
+            showHelper: true,
+            autofill: false,
+            cssClass: 'zd-mb-2',
+            value: _ctx.getItemValue(item),
+            persistentHint: true,
+            hint: _ctx.getComponentHint(item.operation),
+            events: {
+              input: (params) => _ctx.changeValue(item, filterIndex, params),
+              change: (params) => _ctx.changeValue(item, filterIndex, params),
+            },
+          }), null, 16 /* FULL_PROPS */, ["name"]))
+            ], 64 /* STABLE_FRAGMENT */))
+          }), 128 /* KEYED_FRAGMENT */))
+        ]),
+        _: 1 /* STABLE */
+      })
+    ]),
+    _: 1 /* STABLE */
+  }))
+}
+
+tekGridColumnFilter$1.render = render$9;
+tekGridColumnFilter$1.__file = "src/components/tek-grid/column-filter/TekGridColumnFilter.vue";
+
+var script$3 = defineComponent({
+    props: {
+        selectable: {
+            type: Boolean,
+            default: false,
+        },
+        headerBackground: {
+            type: String,
+            default: '',
+        },
+        showSelectAll: {
+            type: Boolean,
+            default: false,
+        },
+        allselectedState: {
+            type: Number,
+            default: 0,
+        },
+        visibleColumns: {
+            type: Array,
+            default: () => [],
+        },
+        dragColumns: {
+            type: Boolean,
+            default: false,
+        },
+        headerCellTextColor: {
+            type: String,
+            default: '',
+        },
+        resizeColumns: {
+            type: Boolean,
+            default: false,
+        },
+        getSortIcon: {
+            type: Function,
+            default: () => { },
+        },
+        isSorted: {
+            type: Function,
+            default: () => { },
+        },
+        toggleSort: {
+            type: Function,
+            default: () => { },
+        },
+        tableColumns: {
+            type: Array,
+            default: () => [],
+        },
+        sortBy: {
+            type: Array,
+            default: () => [],
+        },
+        disableCheckbox: {
+            type: Boolean,
+            default: false,
+        },
+        sortable: {
+            type: Boolean,
+            default: true,
+        },
+        name: {
+            type: String,
+            default: '',
+        },
+        modelValue: {
+            type: Object,
+            default: () => [],
+        },
+        instanceName: {
+            type: String,
+            required: true,
+        },
+        filterRelationsDatasource: {
+            type: [Object, null],
+            required: false,
+        },
+        filterOperationsDatasource: {
+            type: [Object, null],
+            required: false,
+        },
+        columnFilterButton: {
+            type: Boolean,
+            required: true,
+        },
+        columnHasFilter: {
+            type: Function,
+            required: true,
+        },
+        level: {
+            type: Number,
+            default: 0,
+        },
+    },
+    emits: ['selectAllClick', 'resizeMousedown', 'resizeClick', 'update:modelValue'],
+    setup(props, { emit }) {
+        const calcWidth = inject('calcWidth');
+        if (!calcWidth) {
+            // TODO: use NotProvidedError
+            throw new Error('calcWidth');
+        }
+        const selectAllClick = (event) => {
+            emit('selectAllClick', event);
+        };
+        const resizeMousedown = (column, event) => {
+            emit('resizeMousedown', { event, column });
+        };
+        const resizeClick = (event) => {
+            emit('resizeClick', { event });
+        };
+        const findOrderIndex = (sortBy, column) => {
+            return sortBy.findIndex((sort) => sort.key === column.name);
+        };
+        const updateModelValue = (columnName, value) => {
+            const modelValue = Object.assign({}, props.modelValue);
+            modelValue[columnName] = value;
+            emit('update:modelValue', modelValue);
+        };
+        const showFilterButton = (column) => {
+            return column.type !== 'action' && props.columnFilterButton && column.filterable;
+        };
+        return {
+            calcWidth,
+            resizeMousedown,
+            resizeClick,
+            findOrderIndex,
+            updateModelValue,
+            showFilterButton,
+            selectAllClick,
+        };
+    },
+});
+
+const _hoisted_1$4 = {
+  key: 0,
+  class: "tek-grid-column-aggregation"
+};
+
+function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_tek_grid_indentation = resolveComponent("tek-grid-indentation");
+  const _component_tek_grid_column_filter = resolveComponent("tek-grid-column-filter");
+  const _component_zd_grid_column_header = resolveComponent("zd-grid-column-header");
+  const _component_zd_grid_header_row = resolveComponent("zd-grid-header-row");
+
+  return (openBlock(), createBlock(_component_zd_grid_header_row, {
+    name: _ctx.name,
+    selectable: _ctx.selectable,
+    headerBackground: _ctx.headerBackground,
+    showSelectAll: _ctx.showSelectAll,
+    allselectedState: _ctx.allselectedState,
+    visibleColumns: _ctx.visibleColumns,
+    dragColumns: _ctx.dragColumns,
+    headerCellTextColor: _ctx.headerCellTextColor,
+    resizeColumns: _ctx.resizeColumns,
+    getSortIcon: _ctx.getSortIcon,
+    toggleSort: _ctx.toggleSort,
+    sortBy: _ctx.sortBy,
+    tableColumns: _ctx.tableColumns,
+    isSorted: _ctx.isSorted,
+    disableCheckbox: _ctx.disableCheckbox,
+    onSelectAllClick: _ctx.selectAllClick
+  }, {
+    default: withCtx(({ column, index, isHovering }) => [
+      createVNode(_component_zd_grid_column_header, {
+        cssStyle: {
+          'color': _ctx.headerCellTextColor,
+          width: _ctx.calcWidth(column),
+        },
+        action: column.type === 'action',
+        overflow: column.overflow,
+        helperText: column.helperText,
+        label: column.label,
+        columnAlign: column.align,
+        orderIndex: _ctx.findOrderIndex(_ctx.sortBy, column),
+        isSortable: _ctx.sortable && column.sortable,
+        resizeColumns: _ctx.resizeColumns,
+        sortIcon: _ctx.getSortIcon(_ctx.tableColumns[index]),
+        isSorted: _ctx.isSorted(_ctx.tableColumns[index]),
+        isHovering: isHovering,
+        onClick: $event => (_ctx.toggleSort(_ctx.tableColumns[index])),
+        onResizeMousedown: $event => (_ctx.resizeMousedown(column, $event)),
+        onResizeClick: _cache[0] || (_cache[0] = $event => (_ctx.resizeClick($event)))
+      }, createSlots({
+        label: withCtx(() => [
+          (column.aggregation)
+            ? (openBlock(), createElementBlock("span", _hoisted_1$4, "(" + toDisplayString(_ctx.$t(`TEKGRID_AGGREGATION_${column.aggregation}`)) + ") ", 1 /* TEXT */))
+            : createCommentVNode("v-if", true)
+        ]),
+        _: 2 /* DYNAMIC */
+      }, [
+        (index === 0)
+          ? {
+              name: "prepend",
+              fn: withCtx(() => [
+                createVNode(_component_tek_grid_indentation, {
+                  level: _ctx.level,
+                  "show-divider": false
+                }, null, 8 /* PROPS */, ["level"])
+              ]),
+              key: "0"
+            }
+          : undefined,
+        (_ctx.showFilterButton(column))
+          ? {
+              name: "append",
+              fn: withCtx(({ isHovering }) => [
+                createVNode(_component_tek_grid_column_filter, {
+                  modelValue: _ctx.modelValue[column.name],
+                  hasFilterData: _ctx.columnHasFilter(column.name),
+                  column: column,
+                  instanceName: _ctx.instanceName,
+                  filterRelationsDatasource: _ctx.filterRelationsDatasource,
+                  filterOperationsDatasource: _ctx.filterOperationsDatasource,
+                  isHovering: isHovering,
+                  multiple: !!_ctx.filterRelationsDatasource && !!_ctx.filterOperationsDatasource,
+                  "onUpdate:modelValue": $event => (_ctx.updateModelValue(column.name, $event))
+                }, null, 8 /* PROPS */, ["modelValue", "hasFilterData", "column", "instanceName", "filterRelationsDatasource", "filterOperationsDatasource", "isHovering", "multiple", "onUpdate:modelValue"])
+              ]),
+              key: "1"
+            }
+          : undefined
+      ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["cssStyle", "action", "overflow", "helperText", "label", "columnAlign", "orderIndex", "isSortable", "resizeColumns", "sortIcon", "isSorted", "isHovering", "onClick", "onResizeMousedown"])
+    ]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["name", "selectable", "headerBackground", "showSelectAll", "allselectedState", "visibleColumns", "dragColumns", "headerCellTextColor", "resizeColumns", "getSortIcon", "toggleSort", "sortBy", "tableColumns", "isSorted", "disableCheckbox", "onSelectAllClick"]))
+}
+
+script$3.render = render$8;
+script$3.__file = "src/components/tek-grid/column-header/TekGridHeaderRow.vue";
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __decorate(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;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+let TekGridColumnsOptionsController = class TekGridColumnsOptionsController {
+    constructor(modal) {
+        this.columnData = {};
+        this.fixedColumns = [];
+        this.visibleColumns = [];
+        this.groupedColumns = [];
+        this.otherColumns = [];
+        this.aggregationData = [];
+        this.selectedColumnNames = [];
+        this.searchValue = '';
+        this.showGroups = true;
+        this.updatingSelect = false;
+        this.modal = modal;
+    }
+    updateArrays() {
+        this.fixedColumns = [];
+        this.visibleColumns = [];
+        this.groupedColumns = [];
+        this.otherColumns = [];
+        Object.keys(this.columnData).forEach((name) => {
+            const column = this.columnData[name];
+            if (this.instanceValue && this.instanceValue.ignoreColumns.indexOf(column.name) === -1) {
+                if (column.grouped) {
+                    this.groupedColumns.push(column);
+                }
+                else if (column.fixed) {
+                    this.fixedColumns.push(column);
+                }
+                else if (column.isVisible) {
+                    this.visibleColumns.push(column);
+                }
+                else {
+                    this.otherColumns.push(column);
+                }
+            }
+        });
+    }
+    set instance(instance) {
+        this.instanceValue = instance;
+        this.iterableComponent = instance.iterableComponent;
+        this.showGroups = instance.iterableComponent instanceof TekGrid;
+        this.aggregationData = instance.getAggregationSelectData();
+        this.columnData = {};
+        this.iterableComponent.columns.forEach((column) => {
+            this.columnData[column.name] = {
+                name: column.name,
+                label: column.label,
+                fixed: column.fixed,
+                isVisible: column.isVisible,
+                align: column.align,
+                grouped: column.grouped || false,
+                groupOpened: column.groupOpened || false,
+                aggregation: column.aggregation,
+                aggregationText: this.getAggregationText(column.aggregation),
+                selected: false,
+            };
+        });
+        this.updateArrays();
+        this.selectedColumnNames = [];
+    }
+    getAggregationText(aggregation) {
+        let result = '';
+        if (aggregation) {
+            const idx = this.aggregationData.findIndex((item) => item.value === aggregation);
+            if (idx !== -1) {
+                result = ` (${this.aggregationData[idx].text})`;
+            }
+        }
+        return result;
+    }
+    columnInSearch(column) {
+        return !this.searchValue || Utils.normalize(column.label).indexOf(Utils.normalize(this.searchValue)) !== -1;
+    }
+    get fixedColumnData() {
+        return this.fixedColumns.filter(this.columnInSearch.bind(this));
+    }
+    set fixedColumnData(_data) {
+        // do nothing
+    }
+    get visibleColumnData() {
+        return this.visibleColumns.filter(this.columnInSearch.bind(this));
+    }
+    set visibleColumnData(_data) {
+        // do nothing
+    }
+    get groupedColumnData() {
+        return this.groupedColumns.filter(this.columnInSearch.bind(this));
+    }
+    set groupedColumnData(_data) {
+        // do nothing
+    }
+    get otherColumnData() {
+        return this.otherColumns.filter(this.columnInSearch.bind(this));
+    }
+    set otherColumnData(_data) {
+        // do nothing
+    }
+    get hasSelectedColumn() {
+        return this.selectedColumnNames.length > 0;
+    }
+    get hasNoSelectedColumn() {
+        return !this.hasSelectedColumn;
+    }
+    get detailColumnName() {
+        const columnNames = this.selectedColumnNames.length
+            ? this.selectedColumnNames.join(', ')
+            : I18n.translate('TEKGRID_SELECT_COLUMN');
+        return `${I18n.translate('TEKGRID_DETAILS_FOR')} ${columnNames}`;
+    }
+    get hasNoFixedColumns() {
+        return this.fixedColumns.length === 0;
+    }
+    get hasNoVisibleColumns() {
+        return this.visibleColumns.length === 0;
+    }
+    get hasNoGroupedColumns() {
+        return this.groupedColumns.length === 0;
+    }
+    get hasNoOtherColumns() {
+        return this.otherColumns.length === 0;
+    }
+    get hasNoSingleSelection() {
+        return this.selectedColumnNames.length !== 1;
+    }
+    get selectedColumnLabel() {
+        return this.selectedColumnNames.length === 1 ? this.columnData[this.selectedColumnNames[0]].label : '';
+    }
+    set selectedColumnLabel(value) {
+        if (this.selectedColumnNames.length === 1) {
+            this.columnData[this.selectedColumnNames[0]].label = value;
+        }
+    }
+    getSameValue(propName) {
+        const isEqual = this.selectedColumnNames.length > 0 &&
+            this.selectedColumnNames.every((name) => this.columnData[name][propName] === this.columnData[this.selectedColumnNames[0]][propName]);
+        return isEqual ? this.columnData[this.selectedColumnNames[0]][propName] : undefined;
+    }
+    setSameValue(propName, value) {
+        this.selectedColumnNames.forEach((name) => {
+            this.columnData[name][propName] = value;
+        });
+    }
+    get groupInSelection() {
+        return this.hasNoSelectedColumn || this.selectedColumnNames.some((name) => this.columnData[name].grouped);
+    }
+    get notGroupInSelection() {
+        return this.hasNoSelectedColumn || this.selectedColumnNames.some((name) => !this.columnData[name].grouped);
+    }
+    get selectedColumnGroupOpened() {
+        return this.getSameValue('groupOpened');
+    }
+    set selectedColumnGroupOpened(value) {
+        this.setSameValue('groupOpened', value);
+    }
+    selectMounted({ component }) {
+        this.updatingSelect = true;
+        if (component.name === 'tekGridColumnsOptionsColumnAlignment') {
+            component.value = this.selectedColumnsAlignment;
+        }
+        else if (component.name === 'tekGridColumnsOptionsColumnAggregation') {
+            component.value = this.selectedColumnsAggregation;
+        }
+        // prevent changing column value from here
+        setTimeout(() => {
+            this.updatingSelect = false;
+        }, 0);
+    }
+    selectChange({ component }) {
+        if (this.updatingSelect)
+            return;
+        if (component.name === 'tekGridColumnsOptionsColumnAlignment') {
+            this.setSameValue('align', component.value);
+        }
+        else {
+            this.setSameValue('aggregation', component.value);
+            this.setSameValue('aggregationText', this.getAggregationText(component.value));
+        }
+    }
+    updateSelects() {
+        this.selectedColumnsAlignment = this.updateSelect('align');
+        this.selectedColumnsAggregation = this.updateSelect('aggregation');
+    }
+    updateSelect(propName) {
+        this.updatingSelect = true;
+        const propValue = this.getSameValue(propName);
+        const selectNames = {
+            align: 'tekGridColumnsOptionsColumnAlignment',
+            aggregation: 'tekGridColumnsOptionsColumnAggregation',
+        };
+        const instances = Metadata.getInstances(selectNames[propName]);
+        if (instances[0]) {
+            instances[0].value = propValue;
+        }
+        // prevent changing column value from here
+        setTimeout(() => {
+            this.updatingSelect = false;
+        }, 0);
+        return propValue;
+    }
+    columnRemoveClick(column) {
+        column.isVisible = false;
+        this.selectedColumnNames.splice(this.selectedColumnNames.indexOf(column.name), 1);
+        this.otherColumns.push(column);
+    }
+    columnFixedRemoveClick({ element }) {
+        const columnName = element === null || element === void 0 ? void 0 : element.getAttribute('columnname');
+        if (columnName) {
+            const column = this.columnData[columnName];
+            this.columnRemoveClick(column);
+            this.fixedColumns.splice(this.fixedColumns.indexOf(column), 1);
+        }
+    }
+    columnVisibleRemoveClick({ element }) {
+        const columnName = element === null || element === void 0 ? void 0 : element.getAttribute('columnname');
+        if (columnName) {
+            const column = this.columnData[columnName];
+            this.columnRemoveClick(column);
+            this.visibleColumns.splice(this.visibleColumns.indexOf(column), 1);
+        }
+    }
+    columnGroupedRemoveClick({ element }) {
+        const columnName = element === null || element === void 0 ? void 0 : element.getAttribute('columnname');
+        if (columnName) {
+            const column = this.columnData[columnName];
+            this.columnRemoveClick(column);
+            this.groupedColumns.splice(this.groupedColumns.indexOf(column), 1);
+        }
+    }
+    isMacPlatform() {
+        return /Mac/.test(navigator.platform);
+    }
+    isMobilePlatform() {
+        return /iPhone|iPad|Android/.test(navigator.platform);
+    }
+    columnClick({ element, event }) {
+        const columnName = element.getAttribute('columnname');
+        if (columnName) {
+            const mouseEvent = event;
+            const multiple = (this.isMacPlatform() && mouseEvent.metaKey) || mouseEvent.ctrlKey || this.isMobilePlatform();
+            if (!multiple) {
+                Object.keys(this.columnData).forEach((name) => {
+                    const column = this.columnData[name];
+                    column.selected = column.name === columnName;
+                });
+            }
+            else {
+                this.columnData[columnName].selected = !this.columnData[columnName].selected;
+            }
+            const orderedColumns = this.fixedColumns
+                .concat(this.visibleColumns)
+                .concat(this.groupedColumns)
+                .concat(this.otherColumns);
+            this.selectedColumnNames = orderedColumns.filter((column) => column.selected).map((column) => column.name);
+            this.updateSelects();
+        }
+    }
+    removeFromSourceList(columnName) {
+        const column = this.columnData[columnName];
+        const fixedIdx = this.fixedColumns.indexOf(column);
+        if (fixedIdx !== -1) {
+            this.fixedColumns.splice(fixedIdx, 1);
+        }
+        else {
+            const visibleIdx = this.visibleColumns.indexOf(column);
+            if (visibleIdx !== -1) {
+                this.visibleColumns.splice(visibleIdx, 1);
+            }
+            else {
+                const groupedIdx = this.groupedColumns.indexOf(column);
+                if (groupedIdx !== -1) {
+                    this.groupedColumns.splice(groupedIdx, 1);
+                }
+                else {
+                    const otherIdx = this.otherColumns.indexOf(column);
+                    if (otherIdx !== -1) {
+                        this.otherColumns.splice(otherIdx, 1);
+                    }
+                }
+            }
+        }
+    }
+    onDragEnd(event) {
+        const columnName = event.item.getAttribute('columnname');
+        if (this.selectedColumnNames.indexOf(columnName) === -1) {
+            this.selectedColumnNames = [columnName];
+            this.updateSelects();
+            setTimeout(() => {
+                Object.keys(this.columnData).forEach((name) => {
+                    const column = this.columnData[name];
+                    column.selected = column.name === columnName;
+                });
+            });
+        }
+        this.selectedColumnNames.forEach((name, index) => {
+            const newIndex = event.newIndex + index;
+            if (name) {
+                this.removeFromSourceList(name);
+                const column = this.columnData[name];
+                if (event.to.id === 'tekGridColumnsOptionsFixedColumns') {
+                    column.fixed = true;
+                    column.isVisible = true;
+                    column.grouped = false;
+                    column.groupOpened = false;
+                    this.fixedColumns.splice(newIndex, 0, column);
+                }
+                else if (event.to.id === 'tekGridColumnsOptionsVisibleColumns') {
+                    column.fixed = false;
+                    column.isVisible = true;
+                    column.grouped = false;
+                    column.groupOpened = false;
+                    this.visibleColumns.splice(newIndex, 0, column);
+                }
+                else if (event.to.id === 'tekGridColumnsOptionsOtherColumns') {
+                    column.fixed = false;
+                    column.isVisible = false;
+                    column.grouped = false;
+                    column.groupOpened = false;
+                    this.otherColumns.splice(newIndex, 0, column);
+                }
+                else if (event.to.id === 'tekGridColumnsOptionsGroupedColumns') {
+                    column.fixed = false;
+                    column.isVisible = true;
+                    column.grouped = true;
+                    column.aggregation = undefined;
+                    column.aggregationText = '';
+                    this.groupedColumns.splice(newIndex, 0, column);
+                }
+            }
+        });
+    }
+    columnContainerMounted({ element }) {
+        if (element) {
+            sortable.create(element, {
+                handle: '.tek-grid-column-option-box',
+                group: 'column-container',
+                filter: '.no-data, .tek-grid-column-option-grouped-true',
+                onEnd: this.onDragEnd.bind(this),
+            });
+        }
+    }
+    selectAll({ component }) {
+        let list;
+        if (component.name === 'tekGridColumnsOptionsFixedSelectAll') {
+            list = this.fixedColumns;
+        }
+        else if (component.name === 'tekGridColumnsOptionsVisibleSelectAll') {
+            list = this.visibleColumns;
+        }
+        else if (component.name === 'tekGridColumnsOptionsOtherSelectAll') {
+            list = this.otherColumns;
+        }
+        else {
+            list = this.groupedColumns;
+        }
+        this.selectedColumnNames = list.map((column) => column.name);
+        Object.keys(this.columnData).forEach((columnName) => {
+            const column = this.columnData[columnName];
+            column.selected = this.selectedColumnNames.indexOf(column.name) !== -1;
+        });
+    }
+    cancelChanges() {
+        this.modal.hide();
+    }
+    applyChanges({ event, element }) {
+        const ignoredColumns = this.iterableComponent.columns.filter((column) => this.instanceValue && this.instanceValue.ignoreColumns.indexOf(column.name) !== -1);
+        const orderedColumns = this.groupedColumns
+            .concat(this.fixedColumns)
+            .concat(this.visibleColumns)
+            .concat(this.otherColumns)
+            .concat(ignoredColumns);
+        if (this.iterableComponent) {
+            this.iterableComponent.columns = orderedColumns.map((orderColumn) => {
+                const columnIdx = this.iterableComponent.columns.findIndex((column) => column.name === orderColumn.name);
+                const iterableColumn = this.iterableComponent.columns[columnIdx];
+                iterableColumn.fixed = orderColumn.fixed;
+                iterableColumn.isVisible = orderColumn.isVisible;
+                iterableColumn.grouped = orderColumn.grouped;
+                iterableColumn.groupOpened = orderColumn.groupOpened;
+                iterableColumn.label = orderColumn.label;
+                iterableColumn.align = orderColumn.align;
+                iterableColumn.aggregation = orderColumn.aggregation;
+                return iterableColumn;
+            });
+            const { datasource } = this.iterableComponent;
+            const order = datasource.order.filter((item) => {
+                const columnName = item.split('.')[0];
+                return this.groupedColumns.findIndex((column) => column.name === columnName) === -1;
+            });
+            datasource.order = this.groupedColumns.map((column) => `${column.name}.asc`).concat(order);
+            this.iterableComponent.changeLayout(event, element);
+        }
+        this.modal.hide();
+    }
+};
+TekGridColumnsOptionsController = __decorate([
+    Singleton
+], TekGridColumnsOptionsController);
+var TekGridColumnsOptionsController$1 = TekGridColumnsOptionsController;
+
+class TekGridColumnsOptionsModal {
+    static show(instance) {
+        if (!TekGridColumnsOptionsModal.modal) {
+            TekGridColumnsOptionsModal.modal = ModalService.create(TekGridColumnsOptionsModal.modalDef);
+            Loader.addController(TekGridColumnsOptionsModal.controllerName, TekGridColumnsOptionsController$1, [
+                TekGridColumnsOptionsModal.modal,
+            ]);
+        }
+        const controller = Loader.getInstance(TekGridColumnsOptionsModal.controllerName);
+        controller.instance = instance;
+        TekGridColumnsOptionsModal.modal.show();
+    }
+    static hide() {
+        if (TekGridColumnsOptionsModal.modal) {
+            TekGridColumnsOptionsModal.modal.hide();
+        }
+    }
+}
+TekGridColumnsOptionsModal.controllerName = `TekGridColumnsOptionsController_${new Date().getTime()}`;
+TekGridColumnsOptionsModal.modalDef = {
+    name: 'tekGridColumnsOptionsModal',
+    title: '',
+    persistent: true,
+    grid: {
+        sm: 11,
+        md: 9,
+    },
+    children: [
+        {
+            name: 'tekGridColumnsOptionsCloseButtonContainer',
+            component: 'ZdContainer',
+            cssClass: 'zd-pa-0 zd-mb-6 zd-display-flex',
+            children: [
+                {
+                    name: 'tekGridColumnsOptionsTitleText',
+                    component: 'ZdText',
+                    text: 'TEKGRID_COLUMNS_OPTIONS',
+                    cssClass: 'zd-theme-font-title',
+                },
+                {
+                    name: 'tekGridColumnsOptionsFilterSpacer',
+                    component: 'VSpacer',
+                },
+                {
+                    name: 'tekGridColumnsOptionsCloseModalButton',
+                    component: 'ZdModalCloseButton',
+                    small: true,
+                    modalName: 'tekGridColumnsOptionsModal',
+                },
+            ],
+        },
+        {
+            name: 'tekGridColumnsOptionsSearchRow',
+            component: 'ZdRow',
+            children: [
+                {
+                    name: 'tekGridColumnsOptionsSearchCol',
+                    component: 'ZdCol',
+                    cols: 12,
+                    children: [
+                        {
+                            name: 'tekGridColumnsOptionsSearchInput',
+                            component: 'ZdTextInput',
+                            showLabel: false,
+                            showHelper: false,
+                            placeholder: 'SEARCH',
+                            appendIcon: 'magnify',
+                            value: `{{${TekGridColumnsOptionsModal.controllerName}.searchValue}}`,
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            name: 'tekGridColumnsOptionsFixedRow',
+            component: 'ZdRow',
+            children: [
+                {
+                    name: 'tekGridColumnsOptionsFixedCol',
+                    component: 'ZdCol',
+                    cols: 12,
+                    cssClass: 'tek-grid-column-option-container-col',
+                    children: [
+                        {
+                            name: 'tekGridColumnsOptionsFixedLabel',
+                            component: 'ZdText',
+                            text: 'TEKGRID_FIXED_COLUMNS',
+                            cssClass: 'tek-grid-column-option-label',
+                        },
+                        {
+                            name: 'tekGridColumnsOptionsFixedSelectAll',
+                            component: 'ZdText',
+                            text: 'TEKGRID_SELECT_ALL',
+                            cssClass: 'tek-grid-column-option-select-all',
+                            events: {
+                                click: `{{${TekGridColumnsOptionsModal.controllerName}.selectAll}}`,
+                            },
+                        },
+                        {
+                            name: 'tekGridColumnsOptionsFixedDropHere',
+                            component: 'ZdText',
+                            text: 'TEKGRID_DROP_COLUMNS',
+                            cssClass: 'tek-grid-column-option-drop-here',
+                            isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoFixedColumns}}`,
+                        },
+                        {
+                            name: 'tekGridColumnsOptionsFixedColumns',
+                            component: 'TekIterableComponentRender',
+                            id: 'tekGridColumnsOptionsFixedColumns',
+                            cssClass: 'tek-grid-column-option-container',
+                            datasource: {
+                                uniqueKey: 'name',
+                                data: `{{${TekGridColumnsOptionsModal.controllerName}.fixedColumnData}}`,
+                            },
+                            noDataSlot: [],
+                            events: {
+                                onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.columnContainerMounted}}`,
+                            },
+                            componentMetadata: {
+                                name: 'tekGridColumnsOptionsFixedColumn_<<row.name>>',
+                                component: 'ZdTag',
+                                columnName: '<<row.name>>',
+                                cssClass: 'tek-grid-column-option-box zd-elevation-1 ' + 'tek-grid-column-option-selected-<<row.selected>>',
+                                tag: 'div',
+                                children: [
+                                    {
+                                        name: 'tekGridColumnsOptionsFixedColumnText_<<row.name>>',
+                                        columnName: '<<row.name>>',
+                                        component: 'ZdText',
+                                        text: '<<row.label>><<row.aggregationText>>',
+                                    },
+                                    {
+                                        name: 'tekGridColumnsOptionsFixedColumnRemove_<<row.name>>',
+                                        columnName: '<<row.name>>',
+                                        component: 'ZdIcon',
+                                        iconName: 'close',
+                                        events: {
+                                            click: `{{${TekGridColumnsOptionsModal.controllerName}.columnFixedRemoveClick}}`,
+                                        },
+                                    },
+                                ],
+                                events: {
+                                    click: `{{${TekGridColumnsOptionsModal.controllerName}.columnClick}}`,
+                                },
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            name: 'tekGridColumnsOptionsVisibleRow',
+            component: 'ZdRow',
+            children: [
+                {
+                    name: 'tekGridColumnsOptionsVisibleCol',
+                    component: 'ZdCol',
+                    cols: 12,
+                    cssClass: 'tek-grid-column-option-container-col',
+                    children: [
+                        {
+                            name: 'tekGridColumnsOptionsVisibleLabel',
+                            component: 'ZdText',
+                            text: 'TEKGRID_VISIBLE_COLUMNS',
+                            cssClass: 'tek-grid-column-option-label',
+                        },
+                        {
+                            name: 'tekGridColumnsOptionsVisibleSelectAll',
+                            component: 'ZdText',
+                            text: 'TEKGRID_SELECT_ALL',
+                            cssClass: 'tek-grid-column-option-select-all',
+                            events: {
+                                click: `{{${TekGridColumnsOptionsModal.controllerName}.selectAll}}`,
+                            },
+                        },
+                        {
+                            name: 'tekGridColumnsOptionsVisibleDropHere',
+                            component: 'ZdText',
+                            text: 'TEKGRID_DROP_COLUMNS',
+                            cssClass: 'tek-grid-column-option-drop-here',
+                            isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoVisibleColumns}}`,
+                        },
+                        {
+                            name: 'tekGridColumnsOptionsVisibleColumns',
+                            component: 'TekIterableComponentRender',
+                            id: 'tekGridColumnsOptionsVisibleColumns',
+                            cssClass: 'tek-grid-column-option-container',
+                            datasource: {
+                                uniqueKey: 'name',
+                                data: `{{${TekGridColumnsOptionsModal.controllerName}.visibleColumnData}}`,
+                            },
+                            noDataSlot: [],
+                            events: {
+                                onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.columnContainerMounted}}`,
+                            },
+                            componentMetadata: {
+                                name: 'tekGridColumnsOptionsVisibleColumn_<<row.name>>',
+                                component: 'ZdTag',
+                                columnName: '<<row.name>>',
+                                cssClass: 'tek-grid-column-option-box zd-elevation-1 ' + 'tek-grid-column-option-selected-<<row.selected>>',
+                                tag: 'div',
+                                children: [
+                                    {
+                                        name: 'tekGridColumnsOptionsVisibleColumnText_<<row.name>>',
+                                        columnName: '<<row.name>>',
+                                        component: 'ZdText',
+                                        text: '<<row.label>><<row.aggregationText>>',
+                                    },
+                                    {
+                                        name: 'tekGridColumnsOptionsVisibleColumnRemove_<<row.name>>',
+                                        columnName: '<<row.name>>',
+                                        component: 'ZdIcon',
+                                        iconName: 'close',
+                                        events: {
+                                            click: `{{${TekGridColumnsOptionsModal.controllerName}.columnVisibleRemoveClick}}`,
+                                        },
+                                    },
+                                ],
+                                events: {
+                                    click: `{{${TekGridColumnsOptionsModal.controllerName}.columnClick}}`,
+                                },
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            name: 'tekGridColumnsOptionsGroupedRow',
+            component: 'ZdRow',
+            isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.showGroups}}`,
+            children: [
+                {
+                    name: 'tekGridColumnsOptionsGroupedCol',
+                    component: 'ZdCol',
+                    cssClass: 'tek-grid-column-option-container-col',
+                    cols: 12,
+                    children: [
+                        {
+                            name: 'tekGridColumnsOptionsGroupedLabel',
+                            component: 'ZdText',
+                            text: 'TEKGRID_GROUPED_COLUMNS',
+                            cssClass: 'tek-grid-column-option-label',
+                        },
+                        {
+                            name: 'tekGridColumnsOptionsGroupedSelectAll',
+                            component: 'ZdText',
+                            text: 'TEKGRID_SELECT_ALL',
+                            cssClass: 'tek-grid-column-option-select-all',
+                            events: {
+                                click: `{{${TekGridColumnsOptionsModal.controllerName}.selectAll}}`,
+                            },
+                        },
+                        {
+                            name: 'tekGridColumnsOptionsGroupedDropHere',
+                            component: 'ZdText',
+                            text: 'TEKGRID_DROP_COLUMNS',
+                            cssClass: 'tek-grid-column-option-drop-here',
+                            isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoGroupedColumns}}`,
+                        },
+                        {
+                            name: 'tekGridColumnsOptionsGroupedColumns',
+                            component: 'TekIterableComponentRender',
+                            id: 'tekGridColumnsOptionsGroupedColumns',
+                            cssClass: 'tek-grid-column-option-container',
+                            datasource: {
+                                uniqueKey: 'name',
+                                data: `{{${TekGridColumnsOptionsModal.controllerName}.groupedColumnData}}`,
+                            },
+                            noDataSlot: [],
+                            events: {
+                                onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.columnContainerMounted}}`,
+                            },
+                            componentMetadata: {
+                                name: 'tekGridColumnsOptionsGroupedColumn_<<row.name>>',
+                                component: 'ZdTag',
+                                columnName: '<<row.name>>',
+                                cssClass: 'tek-grid-column-option-box zd-elevation-1 ' + 'tek-grid-column-option-selected-<<row.selected>>',
+                                tag: 'div',
+                                children: [
+                                    {
+                                        name: 'tekGridColumnsOptionsGroupedColumnText_<<row.name>>',
+                                        columnName: '<<row.name>>',
+                                        component: 'ZdText',
+                                        text: '<<row.label>><<row.aggregationText>>',
+                                    },
+                                    {
+                                        name: 'tekGridColumnsOptionsGroupedColumnRemove_<<row.name>>',
+                                        columnName: '<<row.name>>',
+                                        component: 'ZdIcon',
+                                        iconName: 'close',
+                                        events: {
+                                            click: `{{${TekGridColumnsOptionsModal.controllerName}.columnGroupedRemoveClick}}`,
+                                        },
+                                    },
+                                ],
+                                events: {
+                                    click: `{{${TekGridColumnsOptionsModal.controllerName}.columnClick}}`,
+                                },
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            name: 'tekGridColumnsOptionsOtherRow',
+            component: 'ZdRow',
+            children: [
+                {
+                    name: 'tekGridColumnsOptionsOtherCol',
+                    component: 'ZdCol',
+                    cssClass: 'tek-grid-column-option-container-col',
+                    cols: 12,
+                    children: [
+                        {
+                            name: 'tekGridColumnsOptionsOtherLabel',
+                            component: 'ZdText',
+                            text: 'TEKGRID_OTHER_COLUMNS',
+                            cssClass: 'tek-grid-column-option-label',
+                        },
+                        {
+                            name: 'tekGridColumnsOptionsOtherSelectAll',
+                            component: 'ZdText',
+                            text: 'TEKGRID_SELECT_ALL',
+                            cssClass: 'tek-grid-column-option-select-all',
+                            events: {
+                                click: `{{${TekGridColumnsOptionsModal.controllerName}.selectAll}}`,
+                            },
+                        },
+                        {
+                            name: 'tekGridColumnsOptionsOtherDropHere',
+                            component: 'ZdText',
+                            text: 'TEKGRID_DROP_COLUMNS',
+                            cssClass: 'tek-grid-column-option-drop-here',
+                            isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoOtherColumns}}`,
+                        },
+                        {
+                            name: 'tekGridColumnsOptionsOtherColumns',
+                            component: 'TekIterableComponentRender',
+                            id: 'tekGridColumnsOptionsOtherColumns',
+                            cssClass: 'tek-grid-column-option-container',
+                            datasource: {
+                                uniqueKey: 'name',
+                                data: `{{${TekGridColumnsOptionsModal.controllerName}.otherColumnData}}`,
+                            },
+                            noDataSlot: [],
+                            events: {
+                                onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.columnContainerMounted}}`,
+                            },
+                            componentMetadata: {
+                                name: 'tekGridColumnsOptionsOtherColumn_<<row.name>>',
+                                component: 'ZdText',
+                                columnName: '<<row.name>>',
+                                text: '<<row.label>><<row.aggregationText>>',
+                                cssClass: 'tek-grid-column-option-box zd-elevation-1 ' + 'tek-grid-column-option-selected-<<row.selected>>',
+                                events: {
+                                    click: `{{${TekGridColumnsOptionsModal.controllerName}.columnClick}}`,
+                                },
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            name: 'tekGridColumnsOptionsDetailColumnName',
+            component: 'ZdText',
+            cssClass: 'tek-grid-column-option-detail-name',
+            text: `{{${TekGridColumnsOptionsModal.controllerName}.detailColumnName}}`,
+            grid: {
+                xs: 12,
+            },
+        },
+        {
+            name: 'tekGridColumnsOptionsDetailRow',
+            component: 'ZdRow',
+            children: [
+                {
+                    name: 'tekGridColumnsOptionsDetailCol',
+                    component: 'ZdCol',
+                    cols: 12,
+                    children: [
+                        {
+                            name: 'tekGridColumnsOptionsDetailForm',
+                            component: 'ZdForm',
+                            cssClass: 'tek-grid-column-option-detail-form',
+                            children: [
+                                {
+                                    name: 'tekGridColumnsOptionsColumnLabel',
+                                    component: 'ZdTextInput',
+                                    label: 'TEKGRID_COLUMN_LABEL',
+                                    showHelper: false,
+                                    clearable: false,
+                                    disabled: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoSingleSelection}}`,
+                                    value: `{{${TekGridColumnsOptionsModal.controllerName}.selectedColumnLabel}}`,
+                                    grid: {
+                                        xs: 12,
+                                        md: 5,
+                                    },
+                                },
+                                {
+                                    name: 'tekGridColumnsOptionsColumnAlignment',
+                                    component: 'ZdSelect',
+                                    autocomplete: false,
+                                    label: 'TEKGRID_COLUMN_ALIGNMENT',
+                                    disabled: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoSelectedColumn}}`,
+                                    showHelper: false,
+                                    clearable: false,
+                                    grid: {
+                                        xs: 6,
+                                        md: 2,
+                                    },
+                                    dataText: 'text',
+                                    dataValue: 'value',
+                                    datasource: {
+                                        data: [
+                                            { text: 'TEKGRID_LEFT', value: 'left' },
+                                            { text: 'TEKGRID_CENTER', value: 'center' },
+                                            { text: 'TEKGRID_RIGHT', value: 'right' },
+                                        ],
+                                        translate: 'text',
+                                    },
+                                    events: {
+                                        change: `{{${TekGridColumnsOptionsModal.controllerName}.selectChange}}`,
+                                        onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.selectMounted}}`,
+                                    },
+                                },
+                                {
+                                    name: 'tekGridColumnsOptionsColumnAggregation',
+                                    component: 'ZdSelect',
+                                    isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.showGroups}}`,
+                                    autocomplete: false,
+                                    label: 'TEKGRID_COLUMN_AGGREGATION',
+                                    showHelper: false,
+                                    disabled: `{{${TekGridColumnsOptionsModal.controllerName}.groupInSelection}}`,
+                                    dataText: 'text',
+                                    dataValue: 'value',
+                                    grid: {
+                                        xs: 6,
+                                        md: 2,
+                                    },
+                                    datasource: {
+                                        data: `{{${TekGridColumnsOptionsModal.controllerName}.aggregationData}}`,
+                                    },
+                                    events: {
+                                        change: `{{${TekGridColumnsOptionsModal.controllerName}.selectChange}}`,
+                                        onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.selectMounted}}`,
+                                    },
+                                },
+                                {
+                                    name: 'tekGridColumnsOptionsColumnGroupOpened',
+                                    component: 'ZdCheckbox',
+                                    isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.showGroups}}`,
+                                    cssClass: 'zd-form-input-align',
+                                    disabled: `{{${TekGridColumnsOptionsModal.controllerName}.notGroupInSelection}}`,
+                                    label: 'TEKGRID_COLUMN_GROUP_OPENED',
+                                    value: `{{${TekGridColumnsOptionsModal.controllerName}.selectedColumnGroupOpened}}`,
+                                    grid: {
+                                        xs: 6,
+                                        md: 3,
+                                    },
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            name: 'tekGridColumnsOptionsDetailFooter',
+            component: 'ZdFooter',
+            padless: true,
+            color: 'transparent',
+            cssClass: 'zd-mt-6',
+            rightSlot: [
+                {
+                    name: 'tekGridColumnsOptionsDetailCancel',
+                    component: 'ZdButton',
+                    outline: true,
+                    label: 'TEKGRID_CANCEL',
+                    events: {
+                        click: `{{${TekGridColumnsOptionsModal.controllerName}.cancelChanges}}`,
+                    },
+                },
+                {
+                    name: 'tekGridColumnsOptionsDetailApply',
+                    component: 'ZdButton',
+                    label: 'TEKGRID_APPLY',
+                    events: {
+                        click: `{{${TekGridColumnsOptionsModal.controllerName}.applyChanges}}`,
+                    },
+                },
+            ],
+        },
+    ],
+};
+
+const TekGridColumnsButtonProps$1 = Object.assign(Object.assign({}, ZdIterableColumnsButtonProps), { hideGroups: {
+        type: [Boolean, String],
+        default: false,
+    } });
+const tekGridColumnsButton$1 = defineComponent({
+    props: TekGridColumnsButtonProps$1,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, TekGridColumnsButton);
+        const buttonScope = useButtonInstance({ instance, root });
+        const menuIsOpened = ref(false);
+        const sortableInitialized = ref(false);
+        const teste = (a) => {
+            console.warn(a);
+        };
+        watch(menuIsOpened, () => {
+            if (!menuIsOpened.value || sortableInitialized.value)
+                return;
+            sortableInitialized.value = true;
+            nextTick(() => {
+                const columnsTableBody = document.querySelector(`#${instance.name}_columns_table tbody`);
+                if (columnsTableBody) {
+                    sortable.create(columnsTableBody, {
+                        handle: '.sortHandle',
+                        dragClass: 'tek-grid-columns-button-sortable-drag',
+                        onEnd: sortEnd,
+                    });
+                }
+            });
+        });
+        const gridGroupColumnNames = computed(() => {
+            return instance.iterableComponent.columns.filter((column) => column.grouped).map((column) => column.name) || [];
+        });
+        const sortEnd = (event) => {
+            const grid = instance.iterableComponent;
+            const newOrder = Array.from(event.srcElement.querySelectorAll('tr')).map((row) => row.getAttribute('name'));
+            const groupColumnNames = [];
+            const newColumns = newOrder.map((columnName) => {
+                const column = grid.getColumn(columnName);
+                if (column.grouped) {
+                    groupColumnNames.push(columnName);
+                }
+                return column;
+            });
+            const ignoredColumns = grid.columns.filter((column) => instance.ignoreColumns.indexOf(column.name) !== -1);
+            grid.columns = newColumns.concat(ignoredColumns);
+            if (grid.updateGrouping && JSON.stringify(groupColumnNames) !== JSON.stringify(gridGroupColumnNames)) {
+                grid.updateGrouping();
+            }
+            grid.changeLayout();
+        };
+        const moreOptions = () => {
+            TekGridColumnsOptionsModal.show(instance);
+        };
+        const close = () => {
+            menuIsOpened.value = false;
+        };
+        return Object.assign(Object.assign({}, buttonScope), { instance,
+            root,
+            menuIsOpened,
+            moreOptions,
+            close,
+            teste,
+            mergeProps });
+    },
+});
+
+const _hoisted_1$3 = { class: "tek-grid-columns-button-table-wrapper zd-mb-2" };
+const _hoisted_2$1 = ["id"];
+const _hoisted_3 = { key: 0 };
+const _hoisted_4 = { key: 1 };
+const _hoisted_5 = ["name"];
+const _hoisted_6 = { class: "tek-grid-columns-button-column-name sortHandle" };
+const _hoisted_7 = { key: 0 };
+const _hoisted_8 = {
+  key: 1,
+  class: "tek-grid-columns-button-column-aggregation"
+};
+const _hoisted_9 = { class: "tek-grid-columns-button-table-footer" };
+
+function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_zd_activator_wrapper = resolveComponent("zd-activator-wrapper");
+  const _component_v_tooltip = resolveComponent("v-tooltip");
+  const _component_zd_checkbox = resolveComponent("zd-checkbox");
+  const _component_zd_select = resolveComponent("zd-select");
+  const _component_zd_button = resolveComponent("zd-button");
+  const _component_v_card = resolveComponent("v-card");
+  const _component_v_menu = resolveComponent("v-menu");
+
+  return (openBlock(), createBlock(_component_v_menu, {
+    id: _ctx.instance.name,
+    modelValue: _ctx.menuIsOpened,
+    "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => ((_ctx.menuIsOpened) = $event)),
+    class: normalizeClass(['zd-iterable-columns-button', 'tek-grid-columns-button', _ctx.instance.cssClass]),
+    style: normalizeStyle(_ctx.instance.cssStyle),
+    closeOnContentClick: false,
+    "offset-y": "",
+    "content-class": "zd-iterable-columns-button-options tek-grid-columns-button-options"
+  }, {
+    activator: withCtx(({ props: onMenu }) => [
+      createVNode(_component_v_tooltip, { bottom: "" }, {
+        activator: withCtx(({ props: onTooltip }) => [
+          createVNode(_component_zd_activator_wrapper, mergeProps({
+            "child-props": {
+              component: 'ZdButton',
+              name: _ctx.instance.name,
+              instanceObject: _ctx.instance,
+            }
+          }, _ctx.mergeProps(onMenu, onTooltip)), null, 16 /* FULL_PROPS */, ["child-props"])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("span", null, toDisplayString(_ctx.$t('TEKGRID_COLUMNS')), 1 /* TEXT */)
+        ]),
+        _: 2 /* DYNAMIC */
+      }, 1024 /* DYNAMIC_SLOTS */)
+    ]),
+    default: withCtx(() => [
+      createVNode(_component_v_card, { class: "zd-pa-2" }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1$3, [
+            createElementVNode("table", {
+              class: "tek-grid-columns-button-table",
+              id: _ctx.instance.name + '_columns_table'
+            }, [
+              createElementVNode("thead", null, [
+                createElementVNode("tr", null, [
+                  _cache[3] || (_cache[3] = createElementVNode("th", null, [
+                    createCommentVNode("Name")
+                  ], -1 /* CACHED */)),
+                  createElementVNode("th", null, toDisplayString(_ctx.$t('TEKGRID_COLUMN_VISIBLE')), 1 /* TEXT */),
+                  (!_ctx.instance.hideGroups)
+                    ? (openBlock(), createElementBlock("th", _hoisted_3, toDisplayString(_ctx.$t('TEKGRID_COLUMN_GROUPED')), 1 /* TEXT */))
+                    : createCommentVNode("v-if", true),
+                  (!_ctx.instance.hideGroups)
+                    ? (openBlock(), createElementBlock("th", _hoisted_4, toDisplayString(_ctx.$t('TEKGRID_COLUMN_AGGREGATION')), 1 /* TEXT */))
+                    : createCommentVNode("v-if", true)
+                ])
+              ]),
+              createElementVNode("tbody", null, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.instance.filteredColumns(), (column) => {
+                  return (openBlock(), createElementBlock("tr", {
+                    key: column.name,
+                    name: column.name
+                  }, [
+                    createElementVNode("td", _hoisted_6, [
+                      _cache[4] || (_cache[4] = createElementVNode("span", null, "⦙⦙", -1 /* CACHED */)),
+                      createTextVNode(toDisplayString(_ctx.$t(column.label)), 1 /* TEXT */)
+                    ]),
+                    createElementVNode("td", null, [
+                      createVNode(_component_zd_checkbox, {
+                        name: _ctx.instance.name + '_column_visible_' + column.name,
+                        value: column.grouped || column.isVisible,
+                        events: {
+                    change: _ctx.instance.controller.showHideTekColumn.bind(_ctx.instance.controller, column)
+                  }
+                      }, null, 8 /* PROPS */, ["name", "value", "events"])
+                    ]),
+                    (!_ctx.instance.hideGroups)
+                      ? (openBlock(), createElementBlock("td", _hoisted_7, [
+                          (column.type !== 'action')
+                            ? (openBlock(), createBlock(_component_zd_checkbox, {
+                                key: 0,
+                                name: _ctx.instance.name + '_column_grouped_' + column.name,
+                                value: column.grouped,
+                                events: {
+                    change: _ctx.instance.controller.changeGroupedColumn.bind(_ctx.instance.controller, column)
+                  }
+                              }, null, 8 /* PROPS */, ["name", "value", "events"]))
+                            : createCommentVNode("v-if", true)
+                        ]))
+                      : createCommentVNode("v-if", true),
+                    (!_ctx.instance.hideGroups)
+                      ? (openBlock(), createElementBlock("td", _hoisted_8, [
+                          (column.type !== 'action')
+                            ? (openBlock(), createBlock(_component_zd_select, mergeProps({
+                                key: 0,
+                                name: _ctx.instance.name + '_column_aggregation_' + column.name
+                              }, { ref_for: true }, {
+                    value: column.aggregation,
+                    disabled: column.grouped  || !column.isVisible,
+                    events: {
+                      change: _ctx.instance.controller.changeAggregationColumn.bind(_ctx.instance.controller, column)
+                    },
+                    dataText: 'text',
+                    dataValue: 'value',
+                    autocomplete: false,
+                    showHelper: false,
+                    showLabel: false,
+                    datasource: {
+                      data: _ctx.instance.getAggregationSelectData(),
+                    },
+                  }), null, 16 /* FULL_PROPS */, ["name"]))
+                            : createCommentVNode("v-if", true)
+                        ]))
+                      : createCommentVNode("v-if", true)
+                  ], 8 /* PROPS */, _hoisted_5))
+                }), 128 /* KEYED_FRAGMENT */))
+              ])
+            ], 8 /* PROPS */, _hoisted_2$1)
+          ]),
+          createElementVNode("div", _hoisted_9, [
+            createVNode(_component_zd_button, {
+              name: _ctx.instance.name + '_columns_table_footer_button',
+              label: "TEKGRID_MORE_OPTIONS",
+              small: "",
+              outline: "",
+              cssClass: "zd-ma-2 zd-mr-1",
+              onClick: _cache[0] || (_cache[0] = $event => (_ctx.moreOptions()))
+            }, null, 8 /* PROPS */, ["name"]),
+            createVNode(_component_zd_button, {
+              name: _ctx.instance.name + '_columns_table_footer_close',
+              label: "TEKGRID_CLOSE",
+              small: "",
+              cssClass: "zd-ma-2 zd-ml-1",
+              onClick: _cache[1] || (_cache[1] = $event => (_ctx.close()))
+            }, null, 8 /* PROPS */, ["name"])
+          ])
+        ]),
+        _: 1 /* STABLE */
+      })
+    ]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["id", "modelValue", "class", "style"]))
+}
+
+tekGridColumnsButton$1.render = render$7;
+tekGridColumnsButton$1.__file = "src/components/tek-grid/columns-button/TekGridColumnsButton.vue";
+
+const TekGridFilterButtonProps$1 = Object.assign(Object.assign({}, ZdButtonProps), { gridName: {
+        type: String,
+        default: '',
+    }, grid: {
+        type: [Object, String],
+        default: () => { },
+    }, showCheckboxAll: {
+        type: [Boolean, String],
+        default: false,
+    } });
+const tekGridFilterButtonComponent$1 = defineComponent({
+    props: TekGridFilterButtonProps$1,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, TekGridFilterButton);
+        const buttonScope = useButtonInstance({ instance, root });
+        const filterClick = ({ event }) => {
+            instance.click(event);
+        };
+        return Object.assign(Object.assign({}, buttonScope), { instance,
+            root,
+            filterClick });
+    },
+});
+
+function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_zd_button = resolveComponent("zd-button");
+
+  return (openBlock(), createBlock(_component_zd_button, mergeProps({
+    id: `instance.name`,
+    name: `${_ctx.instance.name}_name`
+  }, {
+      icon: true,
+      cssClass: 'tek-grid-filter-button',
+      iconName: 'mdi-filter',
+      isVisible: _ctx.instance.grid.filterButton,
+      events: {
+        click: _ctx.filterClick,
+      },
+    }), null, 16 /* FULL_PROPS */, ["name"]))
+}
+
+tekGridFilterButtonComponent$1.render = render$6;
+tekGridFilterButtonComponent$1.__file = "src/components/tek-grid/filter-button/TekGridFilterButton.vue";
+
+var script$2 = defineComponent({
+    props: {
+        showDivider: {
+            type: Boolean,
+            default: true,
+        },
+        level: {
+            type: Number,
+            default: 0,
+        },
+        footer: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    setup() {
+        return {};
+    },
+});
+
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.level, (n) => {
+    return (openBlock(), createElementBlock("span", {
+      key: n,
+      class: normalizeClass([
+      'tek-grid-indentation',
+      {
+        'tek-grid-indentation--corner': _ctx.footer && n === _ctx.level,
+        'tek-grid-indentation--divider': _ctx.showDivider,
+      }
+    ])
+    }, null, 2 /* CLASS */))
+  }), 128 /* KEYED_FRAGMENT */))
+}
+
+script$2.render = render$5;
+script$2.__file = "src/components/tek-grid/indentation/TekGridIndentation.vue";
+
+const TekGridLayoutOptionsProps$1 = Object.assign({}, ZdComponentRenderProps);
+const layoutOptionsComponent$1 = defineComponent({
+    props: TekGridLayoutOptionsProps$1,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, TekGridLayoutOptions);
+        const { applyLayout: applyTekGridLayout, getColumnElements, getTableWidth } = useTableLayout();
+        onMounted(() => {
+            instance.viewApplyLayout = applyLayout;
+            instance.viewGetCurrentLayout = getCurrentLayout;
+        });
+        const confirmLayoutClick = ({ component }) => {
+            const layoutName = component.value;
+            if (layoutName) {
+                const newLayout = getCurrentLayout(layoutName);
+                instance.newLayout(newLayout);
+            }
+            menuActive.value = false;
+            component.value = '';
+        };
+        const datasourceDynamicFilter = () => {
+            const datasource = instance.grid.datasource;
+            if (datasource instanceof TekRestDatasource)
+                return datasource.dynamicFilter;
+            return {};
+        };
+        const changeLayout = (layout) => {
+            instance.updateLayout(layout.name, getCurrentLayout(layout.name));
+        };
+        const applyLayout = (layout) => {
+            const defaultLayout = {
+                originalDatasourceOrder: instance.originalDatasourceOrder,
+                originalDatasourceFilter: instance.originalDatasourceFilter,
+                originalColumnProps: instance.originalColumnProps,
+                originalDatasourceDynamicFilter: instance.originalDatasourceDynamicFilter,
+            };
+            applyTekGridLayout({ layout, defaultLayout, changeLayoutCallback: changeLayout });
+            menuActive.value = false;
+        };
+        const getCurrentLayout = (layoutName) => {
+            const { grid } = instance;
+            const gridWidth = getTableWidth();
+            const columnElementsDict = getColumnElements();
+            return {
+                name: layoutName,
+                gridWidth,
+                order: grid.datasource.order,
+                filter: grid.datasource.filter,
+                dynamicFilter: datasourceDynamicFilter(),
+                columns: grid.columns.map((column, index) => {
+                    const columnElement = columnElementsDict[index];
+                    return {
+                        name: column.name,
+                        label: column.label,
+                        align: column.align,
+                        width: columnElement ? window.getComputedStyle(columnElement).width : 'unset',
+                        minWidth: column.minWidth,
+                        maxWidth: column.maxWidth,
+                        isVisible: column.isVisible,
+                        fixed: column.fixed,
+                        grouped: column.grouped,
+                        groupOpened: column.groupOpened,
+                        aggregation: column.aggregation,
+                        filterHelperValue: instance.getHelperValue(column),
+                    };
+                }),
+            };
+        };
+        const menuActive = ref(false);
+        const applyOrUpdateLayout = (event, layoutName) => {
+            if (instance.layoutEdited) {
+                instance.updateLayout(layoutName, getCurrentLayout(layoutName));
+                event.stopImmediatePropagation();
+                menuActive.value = false;
+            }
+            else {
+                instance.applyLayout(layoutName);
+            }
+        };
+        const deleteLayout = (event, layoutName) => {
+            instance.deleteLayout(layoutName);
+            event.stopImmediatePropagation();
+        };
+        return {
+            instance,
+            root,
+            menuActive,
+            confirmLayoutClick,
+            applyOrUpdateLayout,
+            deleteLayout,
+            mergeProps,
+        };
+    },
+});
+
+const _hoisted_1$2 = {
+  key: 0,
+  class: "tek-grid-layout-item-buttons"
+};
+
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_zd_activator_wrapper = resolveComponent("zd-activator-wrapper");
+  const _component_v_badge = resolveComponent("v-badge");
+  const _component_v_tooltip = resolveComponent("v-tooltip");
+  const _component_v_list_item = resolveComponent("v-list-item");
+  const _component_zd_text_input = resolveComponent("zd-text-input");
+  const _component_zd_button = resolveComponent("zd-button");
+  const _component_v_list = resolveComponent("v-list");
+  const _component_v_menu = resolveComponent("v-menu");
+
+  return (openBlock(), createBlock(_component_v_menu, {
+    id: _ctx.instance.name,
+    name: _ctx.instance.name,
+    class: normalizeClass(['tek-grid-layout-options', _ctx.instance.cssClass]),
+    style: normalizeStyle(_ctx.instance.cssStyle),
+    modelValue: _ctx.menuActive,
+    "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => ((_ctx.menuActive) = $event)),
+    "offset-y": "",
+    closeOnContentClick: false
+  }, {
+    activator: withCtx(({ props: onMenu }) => [
+      createVNode(_component_v_tooltip, { bottom: "" }, {
+        activator: withCtx(({ props: onTooltip }) => [
+          withDirectives(createVNode(_component_v_badge, {
+            overlap: "",
+            class: "tek-grid-layout-options-badge",
+            dot: "",
+            offsetX: 12,
+            offsetY: 12,
+            value: _ctx.instance.layoutEdited
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_zd_activator_wrapper, mergeProps({ ref: "root" }, _ctx.mergeProps(onMenu, onTooltip), {
+                "child-props": {
+                component: 'ZdButton',
+                name: _ctx.instance.name + '_button',
+                icon: true,
+                iconName: 'mdi-table-star',
+                isVisible: _ctx.instance.isVisible,
+              }
+              }), null, 16 /* FULL_PROPS */, ["child-props"])
+            ]),
+            _: 2 /* DYNAMIC */
+          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["value"]), [
+            [vShow, _ctx.instance.isVisible]
+          ])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("span", null, toDisplayString(_ctx.$t('LAYOUT') + (_ctx.instance.currentLayoutName || _ctx.$t('DEFAULT_LAYOUT'))), 1 /* TEXT */)
+        ]),
+        _: 2 /* DYNAMIC */
+      }, 1024 /* DYNAMIC_SLOTS */)
+    ]),
+    default: withCtx(() => [
+      createVNode(_component_v_list, null, {
+        default: withCtx(() => [
+          createVNode(_component_v_list_item, {
+            class: normalizeClass(['tek-grid-layout-item-header', { edited: _ctx.instance.layoutEdited }])
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.instance.layoutEdited ? _ctx.$t('LAYOUT_MODIFIED') : _ctx.$t('LAYOUT_NOT_MODIFIED')), 1 /* TEXT */)
+            ]),
+            _: 1 /* STABLE */
+          }, 8 /* PROPS */, ["class"]),
+          createVNode(_component_v_list_item, null, {
+            default: withCtx(() => [
+              createVNode(_component_zd_text_input, mergeProps({
+                name: _ctx.instance.name+'_new_layout',
+                ref: "inputNewLayout"
+              }, {
+            showHelper: false,
+            showLabel: false,
+            placeholder: 'NEW_LAYOUT',
+            appendOuterIcon: 'mdi-check',
+            autofocus: true,
+            autofill: false,
+            keyMap: {
+              enter: {
+                event: _ctx.confirmLayoutClick,
+                input: true,
+                active: true,
+              },
+            },
+            events: {
+              appendOuterIconClick: _ctx.confirmLayoutClick,
+            },
+          }), null, 16 /* FULL_PROPS */, ["name"])
+            ]),
+            _: 1 /* STABLE */
+          }),
+          (!_ctx.instance.layoutEdited)
+            ? (openBlock(), createBlock(_component_v_list_item, {
+                key: 0,
+                class: normalizeClass(['tek-grid-layout-item', {
+          selected: _ctx.instance.currentLayoutName === ''
+        }]),
+                onClick: _cache[0] || (_cache[0] = $event => (_ctx.instance.applyLayout('')))
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(_ctx.$t('DEFAULT_LAYOUT')), 1 /* TEXT */)
+                ]),
+                _: 1 /* STABLE */
+              }, 8 /* PROPS */, ["class"]))
+            : createCommentVNode("v-if", true),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.instance.layoutNames, (item) => {
+            return (openBlock(), createBlock(_component_v_list_item, {
+              key: item,
+              class: normalizeClass(['tek-grid-layout-item', {
+          selected: item === _ctx.instance.currentLayoutName
+        }]),
+              onClick: $event => (_ctx.applyOrUpdateLayout($event, item))
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(item) + " ", 1 /* TEXT */),
+                (!_ctx.instance.layoutEdited)
+                  ? (openBlock(), createElementBlock("span", _hoisted_1$2, [
+                      createVNode(_component_zd_button, mergeProps({
+                        name: 'tek-grid-layout-item-delete_' + _ctx.instance.name + item
+                      }, { ref_for: true }, {
+              small: true,
+              icon: true,
+              iconName: 'mdi-trash-can-outline',
+              events: {
+                click: ({ event }) => { _ctx.deleteLayout(event, item); },
+              },
+            }), null, 16 /* FULL_PROPS */, ["name"])
+                    ]))
+                  : createCommentVNode("v-if", true)
+              ]),
+              _: 2 /* DYNAMIC */
+            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "onClick"]))
+          }), 128 /* KEYED_FRAGMENT */)),
+          (_ctx.instance.layoutEdited)
+            ? (openBlock(), createBlock(_component_v_list_item, {
+                key: 1,
+                class: normalizeClass(['tek-grid-layout-item-discard']),
+                onClick: _cache[1] || (_cache[1] = $event => (_ctx.instance.discardChanges()))
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_zd_button, {
+                    small: "",
+                    color: "error darken-2",
+                    width: "100%",
+                    name: "tek-grid-layout-item-discard-changes",
+                    label: "LAYOUT_DISCART_CHANGES"
+                  })
+                ]),
+                _: 1 /* STABLE */
+              }))
+            : createCommentVNode("v-if", true)
+        ]),
+        _: 1 /* STABLE */
+      })
+    ]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["id", "name", "class", "style", "modelValue"]))
+}
+
+layoutOptionsComponent$1.render = render$4;
+layoutOptionsComponent$1.__file = "src/components/tek-grid/layout-options/TekGridLayoutOptions.vue";
+
+var script$1 = defineComponent({
+    props: {
+        isSelected: {
+            type: Boolean,
+            required: true,
+        },
+        selectable: {
+            type: Boolean,
+            required: true,
+        },
+        selectionDisabled: {
+            type: Boolean,
+            required: true,
+        },
+        cellSelection: {
+            type: Boolean,
+            required: true,
+        },
+        isCurrent: {
+            type: Function,
+            required: true,
+        },
+        columns: {
+            type: Array,
+            required: true,
+        },
+        row: {
+            type: Object,
+            required: true,
+        },
+        fixedLeft: {
+            type: Object,
+            required: true,
+        },
+        fixedRight: {
+            type: Object,
+            required: true,
+        },
+    },
+    emits: ['focusin'],
+    setup(props, { emit }) {
+        const focusin = (event) => {
+            emit('focusin', { event, row: props.row });
+        };
+        const getLevel = (row) => {
+            if (!row.groupHeaders)
+                return 0;
+            const { length } = row.groupHeaders;
+            return length + 1;
+        };
+        return {
+            focusin,
+            getLevel,
+        };
+    },
+});
+
+const _hoisted_1$1 = {
+  key: 0,
+  class: /*@__PURE__*/normalizeClass([
+        'zd-grid__cell',
+        'zd-grid__cell--fixed',
+        'zd-grid__selectable-cell',
+      ])
+};
+
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_tek_grid_indentation = resolveComponent("tek-grid-indentation");
+  const _component_zd_grid_cell = resolveComponent("zd-grid-cell");
+  const _component_table_row = resolveComponent("table-row");
+
+  return (openBlock(), createBlock(_component_table_row, {
+    cssClass: [
+      'tek-grid-footer-row',
+      { 'tek-grid-footer-row--summary': _ctx.row.groupSummary }
+    ]
+  }, {
+    default: withCtx(() => [
+      (_ctx.selectable)
+        ? (openBlock(), createElementBlock("td", _hoisted_1$1))
+        : createCommentVNode("v-if", true),
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (column, index, ___, _cached) => {
+        const _memo = ([_ctx.row, column, _ctx.fixedLeft, _ctx.fixedRight, _ctx.cellSelection, _ctx.isCurrent({ row: _ctx.row, column })]);
+        if (_cached && _cached.key === column.name && isMemoSame(_cached, _memo)) return _cached
+        const _item = (openBlock(), createBlock(_component_zd_grid_cell, {
+          key: column.name,
+          row: _ctx.row,
+          column: column,
+          cssClass: [
+        {
+          'zd-grid__cell--fixed': column.fixed,
+          'zd-grid__action-cell--fixed': column.actionFixed,
+        },
+      ],
+          cssStyle: [{
+        left: column.fixed ? _ctx.fixedLeft[column.name] : 'unset',
+        right: column.actionFixed ? _ctx.fixedRight[column.name] : 'unset',
+      }],
+          cellSelection: _ctx.cellSelection,
+          isCurrent: _ctx.isCurrent({ row: _ctx.row, column }),
+          onFocus: $event => (_ctx.cellFocus($event, column)),
+          onFocusin: $event => (_ctx.focusin($event, column))
+        }, {
+          prepend: withCtx(() => [
+            (index === 0)
+              ? (openBlock(), createBlock(_component_tek_grid_indentation, {
+                  key: 0,
+                  footer: "",
+                  level: _ctx.getLevel(_ctx.row)
+                }, null, 8 /* PROPS */, ["level"]))
+              : createCommentVNode("v-if", true)
+          ]),
+          _: 2 /* DYNAMIC */
+        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["row", "column", "cssClass", "cssStyle", "cellSelection", "isCurrent", "onFocus", "onFocusin"]));
+        _item.memo = _memo;
+        return _item
+      }, _cache, 0), 128 /* KEYED_FRAGMENT */))
+    ]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["cssClass"]))
+}
+
+script$1.render = render$3;
+script$1.__file = "src/components/tek-grid/row/TekGridFooterRow.vue";
+
+var script = defineComponent({
+    props: {
+        isSelected: {
+            type: Boolean,
+            required: true,
+        },
+        isCurrentRow: {
+            type: Boolean,
+            required: true,
+        },
+        selectable: {
+            type: Boolean,
+            required: true,
+        },
+        selectionDisabled: {
+            type: Boolean,
+            required: true,
+        },
+        cellSelection: {
+            type: Boolean,
+            required: true,
+        },
+        isCurrent: {
+            type: Function,
+            required: true,
+        },
+        row: {
+            type: Object,
+            required: true,
+        },
+        indeterminate: {
+            type: Boolean,
+            required: true,
+        },
+    },
+    emits: ['click', 'checkboxClick', 'focusin', 'expandClick'],
+    setup(props, { emit }) {
+        const click = (event) => {
+            emit('click', event);
+        };
+        const checkboxClick = (event) => {
+            emit('checkboxClick', event);
+        };
+        const focusin = (event) => {
+            emit('focusin', { event, row: props.row });
+        };
+        const expandClick = (event) => {
+            emit('expandClick', { event, row: props.row });
+        };
+        return {
+            click,
+            focusin,
+            checkboxClick,
+            expandClick,
+        };
+    },
+});
+
+const _hoisted_1 = ["tabindex"];
+const _hoisted_2 = { class: "tek-grid__group-text zd-ml-2" };
+
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_zd_grid_checkbox = resolveComponent("zd-grid-checkbox");
+  const _component_tek_grid_indentation = resolveComponent("tek-grid-indentation");
+  const _component_v_icon = resolveComponent("v-icon");
+  const _component_table_row = resolveComponent("table-row");
+
+  return (openBlock(), createBlock(_component_table_row, {
+    class: normalizeClass([
+      'tek-grid-group-row',
+      { 'tek-grid-row-group--summary': _ctx.row.groupSummary }
+    ]),
+    isCurrentRow: _ctx.isCurrentRow,
+    onClick: _cache[3] || (_cache[3] = $event => (_ctx.click($event)))
+  }, {
+    default: withCtx(() => [
+      (_ctx.selectable)
+        ? (openBlock(), createBlock(_component_zd_grid_checkbox, {
+            key: 0,
+            disabled: _ctx.selectionDisabled,
+            isSelected: _ctx.isSelected,
+            indeterminate: _ctx.indeterminate,
+            cellSelection: _ctx.cellSelection,
+            isCurrent: _ctx.isCurrent({ row: _ctx.row }),
+            onFocusin: _cache[0] || (_cache[0] = $event => (_ctx.focusin($event))),
+            onClick: _cache[1] || (_cache[1] = withModifiers($event => (_ctx.checkboxClick($event)), ["stop"]))
+          }, null, 8 /* PROPS */, ["disabled", "isSelected", "indeterminate", "cellSelection", "isCurrent"]))
+        : createCommentVNode("v-if", true),
+      createElementVNode("td", {
+        colspan: 999,
+        class: normalizeClass(
+        [
+          'zd-grid__cell',
+          'text-left',
+          'tek-grid-group-cell',
+          'zd-grid__cell--fixed',
+        ]),
+        style: normalizeStyle(`left: ${(_ctx.selectable ? 40 : 0)}px`),
+        tabindex: _ctx.cellSelection ? 0 : ''
+      }, [
+        createElementVNode("span", {
+          class: normalizeClass([
+          'tek-grid-group-cell__container'
+        ]),
+          style: normalizeStyle(`left: ${(_ctx.selectable ? 48 : 8)}px`)
+        }, [
+          createVNode(_component_tek_grid_indentation, {
+            level: _ctx.row.groupHeaders.length
+          }, null, 8 /* PROPS */, ["level"]),
+          (openBlock(), createBlock(_component_v_icon, {
+            class: normalizeClass({ closed: !_ctx.row.groupOpened }),
+            onClick: _cache[2] || (_cache[2] = $event => (_ctx.expandClick($event))),
+            key: `${_ctx.row.groupIndex}_${_ctx.row.groupValue}`
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.$getIcon('expand')), 1 /* TEXT */)
+            ]),
+            _: 1 /* STABLE */
+          }, 8 /* PROPS */, ["class"])),
+          createElementVNode("span", _hoisted_2, toDisplayString((_ctx.row.groupLabel? _ctx.row.groupLabel + ': ': '') + _ctx.row.groupValue), 1 /* TEXT */)
+        ], 4 /* STYLE */)
+      ], 12 /* STYLE, PROPS */, _hoisted_1)
+    ]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["class", "isCurrentRow"]))
+}
+
+script.render = render$2;
+script.__file = "src/components/tek-grid/row/TekGridGroupRow.vue";
+
+const TekUserInfoProps$1 = Object.assign(Object.assign({}, ZdUserInfoProps), { aboutImage: {
+        type: String,
+        default: '',
+    }, defaultEmail: {
+        type: String,
+        default: '',
+    }, versionInfo: {
+        type: [Object, String],
+        default: null,
+    }, versionUrl: {
+        type: String,
+        default: '',
+    }, bottomSlot: {
+        type: Array,
+        default: undefined,
+    } });
+const tekUserInfoComponent$1 = defineComponent({
+    props: TekUserInfoProps$1,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, TekUserInfo);
+        const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+        return {
+            instance,
+            root,
+            click,
+            focus,
+            blur,
+            mouseenter,
+            mouseleave,
+        };
+    }
+});
+
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_zd_user_info = resolveComponent("zd-user-info");
+
+  return (openBlock(), createBlock(_component_zd_user_info, {
+    id: _ctx.instance.name,
+    "instance-object": _ctx.instance,
+    name: "user-info"
+  }, null, 8 /* PROPS */, ["id", "instance-object"]))
+}
+
+tekUserInfoComponent$1.render = render$1;
+tekUserInfoComponent$1.__file = "src/components/tek-user-info/TekUserInfo.vue";
+
+const TekUserInfoListProps$1 = Object.assign(Object.assign({}, ZdListProps), { parentName: {
+        type: String,
+        default: '',
+    }, dense: {
+        type: [Boolean, String],
+        default: true,
+    } });
+const tekUserInfoListComponent$1 = defineComponent({
+    props: TekUserInfoListProps$1,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, TekUserInfoList);
+        const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+        return {
+            instance,
+            root,
+            click,
+            focus,
+            blur,
+            mouseenter,
+            mouseleave,
+        };
+    }
+});
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_zd_list = resolveComponent("zd-list");
+
+  return (openBlock(), createBlock(_component_zd_list, {
+    id: _ctx.instance.name,
+    "instance-object": _ctx.instance,
+    name: "list"
+  }, null, 8 /* PROPS */, ["id", "instance-object"]))
+}
+
+tekUserInfoListComponent$1.render = render;
+tekUserInfoListComponent$1.__file = "src/components/tek-user-info/TekUserInfoList.vue";
+
+const TekBreadcrumbHeaderProps = Object.assign(Object.assign({}, ZdComponentRenderProps), { title: {
+        type: String,
+        default: '',
+    }, breadcrumb: {
+        type: Object,
+        default: {},
+    }, rightSlot: {
+        type: Array,
+        default: () => [],
+    } });
+const breadcrumbHeaderComponent = defineComponent({
+    props: TekBreadcrumbHeaderProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, BreadcrumbHeader);
+        return {
+            instance,
+            root,
+        };
+    },
+});
+
+const components = {
+    TekBreadcrumbHeader: breadcrumbHeaderComponent$1,
+    TekGrid: gridEditableComponent$1,
+    TekGridColumnFilter: tekGridColumnFilter$1,
+    TekGridHeaderRow: script$3,
+    TekGridColumnsButton: tekGridColumnsButton$1,
+    TekGridFilterButton: tekGridFilterButtonComponent$1,
+    TekGridIndentation: script$2,
+    TekGridLayoutOptions: layoutOptionsComponent$1,
+    TekGridFooterRow: script$1,
+    TekGridGroupRow: script,
+    TekUserInfo: tekUserInfoComponent$1,
+    TekUserInfoList: tekUserInfoListComponent$1,
+};
+
+const TekGridProps = buildProps(Object.assign(Object.assign({}, ZdGridEditableProps), { toolbarSlot: {
+        type: Array,
+        default: undefined,
+    }, title: {
+        type: String,
+        default: '',
+    }, addButton: {
+        type: [Boolean, String],
+        default: false,
+    }, deleteButton: {
+        type: [String, Boolean],
+        default: 'none',
+    }, columnsButton: {
+        type: [Boolean, String],
+        default: false,
+    }, columnsButtonIgnore: {
+        type: [Array, String],
+        default: () => [],
+    }, showEditButtons: {
+        type: [Boolean, String],
+        default: true,
+    }, filterButton: {
+        type: [Boolean, String],
+        default: false,
+    }, modalFilterProps: {
+        type: Object,
+        default: () => ({}),
+    }, showSearch: {
+        type: [Boolean, String],
+        default: true,
+    }, columnFilterButton: {
+        type: [Boolean, String],
+        default: false,
+    }, hideActions: {
+        type: [Boolean, String],
+        default: false,
+    }, actions: {
+        type: Array,
+        default: () => [],
+    }, dragColumns: {
+        type: [Boolean, String],
+        default: true,
+    }, resizeColumns: {
+        type: [Boolean, String],
+        default: true,
+    }, showLayoutOptions: {
+        type: [Boolean, String],
+        default: true,
+    }, showExport: {
+        type: [String, Boolean],
+        default: false,
+    }, showReload: {
+        type: [Boolean, String],
+        default: true,
+    }, exportConfig: {
+        type: Array,
+    }, exportActions: {
+        type: Array,
+    }, groupsOpened: {
+        type: [Boolean, String],
+        default: false,
+    }, showSummaryTotal: {
+        type: [Boolean, String],
+        default: true,
+    }, mainGrid: {
+        type: [Boolean, String],
+        default: true,
+    }, xlsDefaultType: {
+        type: String,
+        default: undefined,
+    }, showCheckboxAllFilter: {
+        type: [Boolean, String],
+        default: Config.gridShowCheckboxAllFilter,
+    }, toolbarOpened: {
+        type: [Boolean],
+        default: true,
+    }, defaultFilter: {
+        type: Object,
+    }, reportTitle: {
+        type: String,
+    }, editNewRowsOnly: {
+        type: [Boolean, String],
+        default: false,
+    } }));
+const gridEditableComponent = defineComponent({
+    props: TekGridProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, TekGrid);
+        const renderedData = computed(() => {
+            if (instance.isGrouped()) {
+                return instance.getGroupedData();
+            }
+            return instance.getData();
+        });
+        const visibleData = computed(() => {
+            return renderedData.value.filter((row) => instance.isItemVisible(row));
+        });
+        const gridEditableScope = useGridEditableInstance({ instance, root, renderedData: visibleData });
+        const rootEl = getRootElement(root);
+        const { visibleColumns } = useGridColumns({
+            instance,
+            rootEl,
+            visibilityCondition: (column) => column.isVisible && !column.grouped,
+        });
+        provideTableLayout({ instance, rootEl });
+        const debouncedDatasourceGet = debounce((instance) => {
+            const event = new Event('change', { cancelable: true });
+            instance.callEvent('beforeApplyFilter', { component: instance, event });
+            if (event.defaultPrevented)
+                return;
+            const { datasource } = instance;
+            if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+                datasource.updateDynamicFilter();
+            }
+            else {
+                datasource.get();
+            }
+        }, 500);
+        const filter = computed(() => {
+            if (instance.datasource instanceof TekRestDatasource || instance.datasource instanceof TekMemoryDatasource) {
+                return instance.datasource.dynamicFilter;
+            }
+            const datasourceFilter = instance.datasource.filter;
+            const simpleFilter = {};
+            Object.keys(datasourceFilter).forEach((key) => {
+                simpleFilter[key] = [{ relation: 'AND', operation: 'CONTAINS', value: datasourceFilter[key] }];
+            });
+            return simpleFilter;
+        });
+        const setFilter = (newFilter) => {
+            if (Utils.isEqual(filter, newFilter))
+                return;
+            if (instance.datasource instanceof TekRestDatasource || instance.datasource instanceof TekMemoryDatasource) {
+                instance.datasource.dynamicFilter = cloneDeep(newFilter);
+            }
+            else {
+                const normalFilter = {};
+                Object.keys(newFilter).forEach((key) => {
+                    if (!newFilter[key][0].value)
+                        return;
+                    normalFilter[key] = newFilter[key][0].value;
+                });
+                instance.datasource.filter = normalFilter;
+            }
+            debouncedDatasourceGet(instance);
+            instance.changeLayout();
+        };
+        const columnHasFilter = (columnName) => {
+            return instance.columnHasFilter(columnName);
+        };
+        const isRowVisible = (row, index) => {
+            return instance.isItemVisible(row) && gridEditableScope.shouldRender(index);
+        };
+        const isCurrentRowGroup = (row) => {
+            const { uniqueKey, currentRow } = instance.datasource;
+            return !!((row.group && row.groupValue === currentRow.groupValue) ||
+                (row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey]));
+        };
+        const isGroupSelectIndeterminate = (item) => {
+            let hasSelected = false;
+            let hasNotSelected = false;
+            const { uniqueKey } = instance.datasource;
+            item.children.forEach((child) => {
+                const idx = instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+                hasSelected = hasSelected || idx !== -1;
+                hasNotSelected = hasNotSelected || idx === -1;
+            });
+            return hasSelected && hasNotSelected;
+        };
+        const isGroupSelected = (item) => {
+            return item.children.every((child) => {
+                const { uniqueKey } = instance.datasource;
+                const idx = instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+                return idx !== -1;
+            });
+        };
+        const selectGroupRowClick = (row, isSelected, event) => {
+            nextTick(() => {
+                const rootElement = getRootElement(root);
+                instance.selectGroupClick(row, isSelected, event, rootElement.value);
+            });
+        };
+        const selectGroup = (item, event) => {
+            const { uniqueKey } = instance.datasource;
+            const isSelected = isGroupSelected(item);
+            if (!isSelected) {
+                // here we fetch the item from renderedData because vuetify isSelected checks for object reference
+                // so we need to find the item inside renderedData to call selectRow() with the correct reference
+                // https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDataTable/composables/select.ts#L128
+                const items = item.children.map((child) => {
+                    return renderedData.value.find((row) => child[uniqueKey] === row[uniqueKey]);
+                });
+                items.forEach((child) => {
+                    if (!child)
+                        return;
+                    const idx = instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+                    if (idx === -1) {
+                        instance.selectRow(child, true);
+                    }
+                });
+            }
+            else {
+                item.children.forEach((child) => {
+                    const idx = instance.selectedRows.findIndex((row) => child[uniqueKey] === row[uniqueKey]);
+                    if (idx !== -1) {
+                        instance.selectRow(child, false);
+                    }
+                });
+            }
+            selectGroupRowClick(item, !isSelected, event);
+        };
+        const openGroup = (item) => {
+            instance.openGroup(item);
+        };
+        const isGroup = (item) => {
+            return !!item.group;
+        };
+        const isFooter = (item) => {
+            return !!item.groupFooter;
+        };
+        const groupColumnNames = computed(() => {
+            return instance.columns.filter((column) => column.grouped).map((column) => column.name) || [];
+        });
+        return Object.assign(Object.assign({}, gridEditableScope), { instance,
+            root,
+            filter,
+            setFilter,
+            columnHasFilter,
+            visibleColumns,
+            isRowVisible,
+            isCurrentRowGroup,
+            isGroupSelectIndeterminate,
+            selectGroup,
+            isGroup,
+            openGroup,
+            renderedData,
+            isGroupSelected,
+            groupColumnNames,
+            isFooter,
+            visibleData });
+    },
+});
+
+const TekGridColumnFilterProps = {
+    hasFilterData: {
+        type: Boolean,
+        default: false,
+    },
+    column: {
+        type: Object,
+        required: true,
+    },
+    modelValue: {
+        type: Array,
+        default: [],
+    },
+    instanceName: {
+        type: String,
+        required: true,
+    },
+    filterRelationsDatasource: {
+        type: [Object, null],
+        required: false,
+    },
+    filterOperationsDatasource: {
+        type: [Object, null],
+        required: false,
+    },
+    isHovering: {
+        type: Boolean,
+        default: false,
+    },
+    multiple: {
+        type: Boolean,
+        required: true,
+    },
+};
+const tekGridColumnFilter = defineComponent({
+    props: TekGridColumnFilterProps,
+    inheritAttrs: false,
+    emits: ['update:modelValue'],
+    setup(props, ctx) {
+        const getValueInputName = (index) => `${props.instanceName}-${props.column.name}-filter-value-${index}`;
+        const focusValueInput = (index) => {
+            const valueInputName = getValueInputName(index);
+            const input = Metadata.getInstance(valueInputName);
+            input.setFocus();
+        };
+        const createNewFilter = () => {
+            return reactive({
+                operation: 'CONTAINS',
+                relation: 'AND',
+                value: undefined,
+            });
+        };
+        let newFilter = createNewFilter();
+        const convertToDateFormat = (value, revert) => {
+            const dateFormat = props.column.componentProps.dateFormat || Config.dateFormat;
+            const displayFormat = props.column.componentProps.displayFormat || Config.displayFormat;
+            if (revert) {
+                if (dayjs(value, displayFormat).isValid() || !dayjs(value, dateFormat).isValid()) {
+                    return value;
+                }
+                return dayjs(value, dateFormat).format(displayFormat);
+            }
+            if (dayjs(value, dateFormat).isValid() || !dayjs(value, displayFormat).isValid()) {
+                return value;
+            }
+            return dayjs(value, displayFormat).format(dateFormat);
+        };
+        const checkDateValueFormat = (value, revert = false) => {
+            if (!['ZdDate', 'ZdDateRange'].includes(props.column.componentProps.component))
+                return value;
+            if (Array.isArray(value)) {
+                return value.map((item) => convertToDateFormat(item, revert));
+            }
+            return convertToDateFormat(value, revert);
+        };
+        // use WeakMap to avoid memory leaks
+        const idMap = new WeakMap();
+        let idCounter = 0;
+        // retrieves a unique id for each item
+        const getId = (item) => {
+            if (!idMap.has(item)) {
+                idMap.set(item, `__item__${idCounter++}`);
+            }
+            return idMap.get(item);
+        };
+        // use computed to generate unique ids for each filter item
+        // this is needed for the v-for :key updates
+        const modelWithIds = computed(() => {
+            if (!props.multiple) {
+                if (props.modelValue.length > 0) {
+                    return [{ id: getId(props.modelValue[0]), item: props.modelValue[0] }];
+                }
+                return [{ id: getId(newFilter), item: newFilter }];
+            }
+            return [...props.modelValue, newFilter].map((item) => ({
+                id: getId(item),
+                item,
+            }));
+        });
+        const debounceUpdateModel = debounce((modelValue) => {
+            if (Utils.isEqual(modelValue, props.modelValue))
+                return;
+            ctx.emit('update:modelValue', modelValue);
+            newFilter = createNewFilter();
+        }, 500);
+        const changeRelation = (index, { component }) => {
+            const modelValue = cloneDeep(props.modelValue);
+            const isNewFilter = index === modelValue.length;
+            const filter = isNewFilter ? newFilter : modelValue[index];
+            const { value } = component;
+            focusValueInput(index);
+            // update item type value
+            filter.relation = value;
+            if (isNewFilter)
+                return;
+            debounceUpdateModel(modelValue);
+        };
+        const changeOperation = (index, { component }) => {
+            const modelValue = cloneDeep(props.modelValue);
+            const filterItem = modelValue[index];
+            const isNewFilter = index === modelValue.length;
+            const filter = isNewFilter ? newFilter : filterItem;
+            const { value } = component;
+            focusValueInput(index);
+            // if operation is IN, NOT_IN or BETWEEN, value should be an array
+            if (isArrayOperation(value)) {
+                filter.value = Array.isArray(filterItem.value) ? filterItem.value : [filterItem.value];
+            }
+            // update item type value
+            filter.operation = value;
+            if (isNewFilter)
+                return;
+            debounceUpdateModel(modelValue);
+        };
+        const changeValue = (item, index, { component }) => {
+            const modelValue = cloneDeep(props.modelValue);
+            const filter = cloneDeep(item);
+            const { value } = component;
+            const isNewFilter = props.multiple && index === modelValue.length;
+            let formattedValue = value;
+            if (value && isArrayOperation(filter.operation)) {
+                formattedValue = value.split(';');
+            }
+            filter.value = checkDateValueFormat(formattedValue);
+            if (!props.multiple) {
+                debounceUpdateModel([filter]);
+                return;
+            }
+            if (isNewFilter) {
+                // only emit event when newFilter has value
+                if (!filter.value)
+                    return;
+                debounceUpdateModel([...modelValue, filter]);
+                return;
+            }
+            if (!filter.value) {
+                // when removing the last (not new) filter, should pass its operation and relation to the new filter
+                if (index === modelValue.length - 1) {
+                    newFilter.operation = filter.operation;
+                    newFilter.relation = filter.relation;
+                }
+                modelValue.splice(index, 1);
+                // if the removed filter was the first, should set the new first relation to AND
+                if (modelValue.length > 0 && index === 0) {
+                    modelValue[0].relation = 'AND';
+                }
+                // if the removed filter was the last, should set the newFilter relation to AND
+                if (modelValue.length === 0) {
+                    newFilter.relation = 'AND';
+                }
+            }
+            debounceUpdateModel(modelValue);
+        };
+        const getComponentType = (operation) => {
+            return isArrayOperation(operation) ? 'ZdTextInput' : props.column.componentProps.component;
+        };
+        const getComponentHint = (operation) => {
+            return isArrayOperation(operation) ? 'TEKGRID_MULTIPLE_VALUE_HINT' : '';
+        };
+        const getItemValue = (item) => {
+            return isArrayOperation(item.operation) ? item.value.join(';') : item.value;
+        };
+        return {
+            changeValue,
+            changeRelation,
+            changeOperation,
+            getValueInputName,
+            newFilter,
+            getComponentType,
+            getComponentHint,
+            modelWithIds,
+            getItemValue,
+        };
+    },
+});
+
+const TekGridColumnsButtonProps = Object.assign(Object.assign({}, ZdIterableColumnsButtonProps), { hideGroups: {
+        type: [Boolean, String],
+        default: false,
+    } });
+const tekGridColumnsButton = defineComponent({
+    props: TekGridColumnsButtonProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, TekGridColumnsButton);
+        const buttonScope = useButtonInstance({ instance, root });
+        const menuIsOpened = ref(false);
+        const sortableInitialized = ref(false);
+        const teste = (a) => {
+            console.warn(a);
+        };
+        watch(menuIsOpened, () => {
+            if (!menuIsOpened.value || sortableInitialized.value)
+                return;
+            sortableInitialized.value = true;
+            nextTick(() => {
+                const columnsTableBody = document.querySelector(`#${instance.name}_columns_table tbody`);
+                if (columnsTableBody) {
+                    sortable.create(columnsTableBody, {
+                        handle: '.sortHandle',
+                        dragClass: 'tek-grid-columns-button-sortable-drag',
+                        onEnd: sortEnd,
+                    });
+                }
+            });
+        });
+        const gridGroupColumnNames = computed(() => {
+            return instance.iterableComponent.columns.filter((column) => column.grouped).map((column) => column.name) || [];
+        });
+        const sortEnd = (event) => {
+            const grid = instance.iterableComponent;
+            const newOrder = Array.from(event.srcElement.querySelectorAll('tr')).map((row) => row.getAttribute('name'));
+            const groupColumnNames = [];
+            const newColumns = newOrder.map((columnName) => {
+                const column = grid.getColumn(columnName);
+                if (column.grouped) {
+                    groupColumnNames.push(columnName);
+                }
+                return column;
+            });
+            const ignoredColumns = grid.columns.filter((column) => instance.ignoreColumns.indexOf(column.name) !== -1);
+            grid.columns = newColumns.concat(ignoredColumns);
+            if (grid.updateGrouping && JSON.stringify(groupColumnNames) !== JSON.stringify(gridGroupColumnNames)) {
+                grid.updateGrouping();
+            }
+            grid.changeLayout();
+        };
+        const moreOptions = () => {
+            TekGridColumnsOptionsModal.show(instance);
+        };
+        const close = () => {
+            menuIsOpened.value = false;
+        };
+        return Object.assign(Object.assign({}, buttonScope), { instance,
+            root,
+            menuIsOpened,
+            moreOptions,
+            close,
+            teste,
+            mergeProps });
+    },
+});
+
+const TekGridFilterButtonProps = Object.assign(Object.assign({}, ZdButtonProps), { gridName: {
+        type: String,
+        default: '',
+    }, grid: {
+        type: [Object, String],
+        default: () => { },
+    }, showCheckboxAll: {
+        type: [Boolean, String],
+        default: false,
+    } });
+const tekGridFilterButtonComponent = defineComponent({
+    props: TekGridFilterButtonProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, TekGridFilterButton);
+        const buttonScope = useButtonInstance({ instance, root });
+        const filterClick = ({ event }) => {
+            instance.click(event);
+        };
+        return Object.assign(Object.assign({}, buttonScope), { instance,
+            root,
+            filterClick });
+    },
+});
+
+const TekGridLayoutOptionsProps = Object.assign({}, ZdComponentRenderProps);
+const layoutOptionsComponent = defineComponent({
+    props: TekGridLayoutOptionsProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, TekGridLayoutOptions);
+        const { applyLayout: applyTekGridLayout, getColumnElements, getTableWidth } = useTableLayout();
+        onMounted(() => {
+            instance.viewApplyLayout = applyLayout;
+            instance.viewGetCurrentLayout = getCurrentLayout;
+        });
+        const confirmLayoutClick = ({ component }) => {
+            const layoutName = component.value;
+            if (layoutName) {
+                const newLayout = getCurrentLayout(layoutName);
+                instance.newLayout(newLayout);
+            }
+            menuActive.value = false;
+            component.value = '';
+        };
+        const datasourceDynamicFilter = () => {
+            const datasource = instance.grid.datasource;
+            if (datasource instanceof TekRestDatasource)
+                return datasource.dynamicFilter;
+            return {};
+        };
+        const changeLayout = (layout) => {
+            instance.updateLayout(layout.name, getCurrentLayout(layout.name));
+        };
+        const applyLayout = (layout) => {
+            const defaultLayout = {
+                originalDatasourceOrder: instance.originalDatasourceOrder,
+                originalDatasourceFilter: instance.originalDatasourceFilter,
+                originalColumnProps: instance.originalColumnProps,
+                originalDatasourceDynamicFilter: instance.originalDatasourceDynamicFilter,
+            };
+            applyTekGridLayout({ layout, defaultLayout, changeLayoutCallback: changeLayout });
+            menuActive.value = false;
+        };
+        const getCurrentLayout = (layoutName) => {
+            const { grid } = instance;
+            const gridWidth = getTableWidth();
+            const columnElementsDict = getColumnElements();
+            return {
+                name: layoutName,
+                gridWidth,
+                order: grid.datasource.order,
+                filter: grid.datasource.filter,
+                dynamicFilter: datasourceDynamicFilter(),
+                columns: grid.columns.map((column, index) => {
+                    const columnElement = columnElementsDict[index];
+                    return {
+                        name: column.name,
+                        label: column.label,
+                        align: column.align,
+                        width: columnElement ? window.getComputedStyle(columnElement).width : 'unset',
+                        minWidth: column.minWidth,
+                        maxWidth: column.maxWidth,
+                        isVisible: column.isVisible,
+                        fixed: column.fixed,
+                        grouped: column.grouped,
+                        groupOpened: column.groupOpened,
+                        aggregation: column.aggregation,
+                        filterHelperValue: instance.getHelperValue(column),
+                    };
+                }),
+            };
+        };
+        const menuActive = ref(false);
+        const applyOrUpdateLayout = (event, layoutName) => {
+            if (instance.layoutEdited) {
+                instance.updateLayout(layoutName, getCurrentLayout(layoutName));
+                event.stopImmediatePropagation();
+                menuActive.value = false;
+            }
+            else {
+                instance.applyLayout(layoutName);
+            }
+        };
+        const deleteLayout = (event, layoutName) => {
+            instance.deleteLayout(layoutName);
+            event.stopImmediatePropagation();
+        };
+        return {
+            instance,
+            root,
+            menuActive,
+            confirmLayoutClick,
+            applyOrUpdateLayout,
+            deleteLayout,
+            mergeProps,
+        };
+    },
+});
+
+const TekUserInfoProps = Object.assign(Object.assign({}, ZdUserInfoProps), { aboutImage: {
+        type: String,
+        default: '',
+    }, defaultEmail: {
+        type: String,
+        default: '',
+    }, versionInfo: {
+        type: [Object, String],
+        default: null,
+    }, versionUrl: {
+        type: String,
+        default: '',
+    }, bottomSlot: {
+        type: Array,
+        default: undefined,
+    } });
+const tekUserInfoComponent = defineComponent({
+    props: TekUserInfoProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, TekUserInfo);
+        const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+        return {
+            instance,
+            root,
+            click,
+            focus,
+            blur,
+            mouseenter,
+            mouseleave,
+        };
+    }
+});
+
+const TekUserInfoListProps = Object.assign(Object.assign({}, ZdListProps), { parentName: {
+        type: String,
+        default: '',
+    }, dense: {
+        type: [Boolean, String],
+        default: true,
+    } });
+const tekUserInfoListComponent = defineComponent({
+    props: TekUserInfoListProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, TekUserInfoList);
+        const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+        return {
+            instance,
+            root,
+            click,
+            focus,
+            blur,
+            mouseenter,
+            mouseleave,
+        };
+    }
+});
+
+Icons.addIcons({
+    add: 'mdi-plus-box',
+    delete: 'mdi-trash-can-outline',
+    refresh: 'mdi-refresh',
+    more: 'mdi-dots-vertical',
+    filter: 'mdi-filter',
+    confirmLayout: 'mdi-check',
+    updateLayout: 'mdi-square-edit-outline',
+    layout: 'mdi-table-star',
+});
+const TeknisaComponents = {
+    install(app) {
+        Object.keys(components).forEach((id) => {
+            app.component(id, components[id]);
+        });
+        app.component('ZdUserInfo', ZdUserInfoComponent);
+    },
+};
+
+export { breadcrumbHeaderComponent as TekBreadcrumbHeader, gridEditableComponent as TekGrid, tekGridColumnFilter as TekGridColumnFilter, tekGridColumnsButton as TekGridColumnsButton, tekGridFilterButtonComponent as TekGridFilterButton, layoutOptionsComponent as TekGridLayoutOptions, tekUserInfoComponent as TekUserInfo, tekUserInfoListComponent as TekUserInfoList, TeknisaComponents as default };