@updevs/components 1.0.0-alpha.31 → 1.0.0-alpha.33

package/fesm2022/updevs-components-table.mjs

@@ -397,7 +397,14 @@ class TableConfigModel {
         this.data = [];
         this.preSelectedItems = [];
         this.searchInputDebounceTime = 300;
+        /**
+         * Actions added to each record row as a group of buttons.
+         */
         this.customActions = [];
+        /**
+         * Actions added to the header of the table as regular buttons.
+         */
+        this.customHeaderActions = [];
         this.getIdFunction = (item) => item.id;
         if (!!init) {
             Object.assign(this, init);
@@ -823,7 +830,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
 var Utils = Tools.Utils;
 class TableComponent extends BaseComponent {
     get numberOfColumns() {
-        return this.columns().length + (this.configModel().hasCheckboxColumn ? 1 : 0) + (!!this.pendingWidthColClass ? 1 : 0);
+        return this.columns().length
+            + (this.configModel().hasCheckboxColumn ? 1 : 0)
+            + (this.configModel().customActions.length > 0 ? 1 : 0)
+            + (!!this.pendingWidthColClass ? 1 : 0);
     }
     get hasWidth() {
         return this.columns().some(rec => !!rec.width);
@@ -835,6 +845,7 @@ class TableComponent extends BaseComponent {
         const isGrid = this.columns().some(rec => !!rec.width?.gridColumn);
         const total = isGrid ? 12 : 100;
         const remainingSize = total - this.columns().reduce((acc, item) => acc + item.widthSize, 0);
+        // TODO: add spaces of checkbox and customactions columns
         return remainingSize > 0 ? `${(isGrid ? 'col' : 'w')}-${remainingSize}` : '';
     }
     get isWidthInPixels() {
@@ -1071,6 +1082,28 @@ class TableComponent extends BaseComponent {
         this.shouldForceSearch = true;
         this.searchRequestSubject.next({});
     }
+    adaptCustomAction(btn, item) {
+        const newBtn = new ButtonModel({
+            id: btn.id,
+            iconModel: btn.iconModel,
+            title: btn.title,
+            isIcon: signal(true),
+            isLink: signal(true),
+            size: signal('small'),
+            text: undefined,
+            colorStyle: btn.colorStyle,
+            isOutline: btn.isOutline
+        });
+        const defaultFunction = btn.clickFunction;
+        newBtn.clickFunction = (evt) => {
+            evt.event?.preventDefault();
+            evt.event?.stopPropagation();
+            if (!!defaultFunction) {
+                defaultFunction({ event: evt.event, data: item });
+            }
+        };
+        return newBtn;
+    }
     updateColumns(columns) {
         this.columns.set(columns.filter(c => !c.isHidden).map(c => new BaseColumnModel(c.type, { ...c })));
     }
@@ -1176,11 +1209,11 @@ class TableComponent extends BaseComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: TableComponent, selector: "upd-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, searchRequest: { classPropertyName: "searchRequest", publicName: "searchRequest", isSignal: true, isRequired: false, transformFunction: null }, activeFilters: { classPropertyName: "activeFilters", publicName: "activeFilters", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange", searchRequest: "searchRequestChange", activeFilters: "activeFiltersChange", currentPage: "currentPageChange", pageSize: "pageSizeChange" }, viewQueries: [{ propertyName: "savedViewsRef", first: true, predicate: ["savedViewsBtn"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n    <div class=\"card\">\n        @if (!!configModel().title || !configModel().canSearch) {\n            <div class=\"card-header\">\n                @if (!!configModel().title) {\n                    <h3 class=\"card-title\">{{ textService.getText(configModel().title) }}</h3>\n                }\n                <ng-template [ngTemplateOutlet]=\"actionsTpl\"></ng-template>\n            </div>\n        }\n\n        @if (configModel().customActions.length > 0) {\n            <div class=\"card-body py-3 d-flex flex-column gap-2\">\n                <div class=\"ms-auto d-flex gap-2\">\n                    @for (btn of configModel().customActions; track btn) {\n                        <upd-button customClasses=\"gap-2\" [model]=\"btn\"></upd-button>\n                    }\n                </div>\n            </div>\n        }\n\n        @if (configModel().canSearch) {\n            <upd-search-section [actionsTpl]=\"!configModel().title ? actionsTpl : undefined\" [isSearching]=\"isSearching()\"\n                [(searchRequest)]=\"searchRequest\" [searchRequestSubject]=\"searchRequestSubject\" [config]=\"configModel()\"\n                [(hasChanges)]=\"hasSearchChanged\" [columns]=\"columns()\">\n            </upd-search-section>\n        }\n\n        <div [class.table-responsive]=\"configModel().isResponsive\">\n            <!-- TODO: implement pixel sized table -->\n            <table class=\"table card-table table-vcenter table-nowrap\" [class.fixed]=\"hasWidth\"\n                [class.pixel-sized]=\"isWidthInPixels\">\n                <thead [class.sticky-top]=\"configModel().hasStickyHeader\">\n                <tr>\n                    @if (configModel().hasCheckboxColumn) {\n                        <th class=\"checkbox-selector\">\n                            <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleAllSelection($event)\"\n                                [(isChecked)]=\"isMainCheckboxChecked\"\n                                [(isIndeterminate)]=\"isMainCheckboxIndeterminate\"></upd-checkbox>\n                        </th>\n                    }\n\n                    @for (col of columns(); track col) {\n                        <th [ngClass]=\"col.widthClass\" [style.width.px]=\"col.pixelsSize\">\n                            {{ textService.getText(col.title) }}\n                            @if (canSortColumn(col.name)) {\n                                <upd-icon [tablerIcon]=\"getSortingIcon(col.name)\" tablerIconWeight=\"bold\" colorClass=\"text-body-tertiary\"\n                                    [tablerIconSize]=\"16\" (click)=\"sortByColumn(col.name)\">\n                                </upd-icon>\n                            }\n                        </th>\n                    }\n\n                    @if (!!pendingWidthColClass) {\n                        <th [ngClass]=\"pendingWidthColClass\"></th>\n                    }\n                </tr>\n                </thead>\n\n                <tbody>\n                    @if (isSearching()) {\n                        <tr>\n                            <td [colSpan]=\"numberOfColumns\">\n                                <div class=\"empty\">\n                                    <h1 class=\"text-body-tertiary\">{{ t('Loading') }}...</h1>\n                                    <div class=\"progress progress-sm w-25\">\n                                        <div class=\"progress-bar progress-bar-indeterminate bg-body-tertiary\"></div>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                    } @else {\n                        @for (record of data(); track record) {\n                            <tr>\n                                @if (configModel().hasCheckboxColumn) {\n                                    <td>\n                                        <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleItemSelection(record)\"\n                                            [isChecked]=\"selectionModel().isSelected(record)\"></upd-checkbox>\n                                    </td>\n                                }\n\n                                @for (col of columns(); track col) {\n                                    <td>\n                                        <ng-container updTableColumn [record]=\"record\" [config]=\"col\"></ng-container>\n                                    </td>\n                                }\n\n                                @if (!!pendingWidthColClass) {\n                                    <td></td>\n                                }\n                            </tr>\n                        } @empty {\n                            <tr>\n                                <td [colSpan]=\"numberOfColumns\">\n                                    <div class=\"empty\">\n                                        <p class=\"empty-title\">{{ t('NoRecordsFoundTitle') }}</p>\n                                        <p class=\"empty-subtitle text-secondary\">{{ t('NoRecordsFoundSubtitle') }}</p>\n                                    </div>\n                                </td>\n                            </tr>\n                        }\n                    }\n                </tbody>\n            </table>\n        </div>\n        <upd-paginator wrapperClasses=\"card-footer\" [shouldDisplayPreviousText]=\"false\" [shouldDisplayNextText]=\"false\"\n            [(pageSize)]=\"pageSize\" [shouldDisplayFirstText]=\"false\" [shouldDisplayLastText]=\"false\"\n            [(currentPage)]=\"currentPage\"\n            [totalRecords]=\"totalRecords()\" (changed)=\"onPageSettingsChanged()\">\n        </upd-paginator>\n    </div>\n\n    <ng-template #actionsTpl>\n        <div class=\"ms-auto d-flex gap-2\">\n            @if (!!activeSavedView()) {\n                @if (activeSavedView()!.isDefault) {\n                    <div class=\"ribbon ribbon-top ribbon-start\">\n                        <upd-icon tablerIcon=\"heart\" [tablerIconSize]=\"20\"></upd-icon>\n                    </div>\n                }\n                <div class=\"tag align-self-center py-3 text-primary bg-primary-lt border-primary\"\n                    updPopover=\"{{ t('CurrentSavedView') }}\"\n                    [updPopoverActAsTooltip]=\"true\">\n                    <upd-icon tablerIcon=\"list-details\" [tablerIconSize]=\"20\"></upd-icon>\n                    <span class=\"me-1\">{{ activeSavedView()!.name }}</span>\n                </div>\n            }\n            @if (hiddenColumns() > 0) {\n                <div class=\"tag align-self-center py-3 text-orange bg-orange-lt border-orange\"\n                    updPopover=\"{{ t('HiddenColumnsTooltip') }}\"\n                    [updPopoverActAsTooltip]=\"true\">\n                    <upd-icon tablerIcon=\"eye-off\" [tablerIconSize]=\"20\"></upd-icon>\n                    <span class=\"me-1\">{{ hiddenColumns() }}</span>\n                </div>\n            }\n            @if (!!activeSavedView() || hiddenColumns() > 0) {\n                <upd-button (clicked)=\"resetViewState()\" colorStyle=\"danger\" updPopover=\"{{ t('ResetView') }}\"\n                    [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\" [isOutline]=\"true\">\n                    <upd-icon tablerIcon=\"restore\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            }\n            @if (configModel().canSaveViews) {\n                <upd-button customClasses=\"gap-2\" [isDisabled]=\"!hasSearchChanged()\" (clicked)=\"openSaveSearchModal()\"\n                    updPopover=\"{{ t('SaveCurrentView') }}\" [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\">\n                    <upd-icon tablerIcon=\"device-floppy\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            }\n            @if (configModel().canManageColumns) {\n                <upd-button customClasses=\"gap-2\" (clicked)=\"openColumnsManagerModal()\">\n                    <upd-icon tablerIcon=\"columns\" [tablerIconSize]=\"20\"></upd-icon>\n                    {{ t('ColumnsManagerButton') }}\n                </upd-button>\n            }\n            @if (configModel().canSaveViews || configModel().canLoadSavedViews) {\n                <upd-button customClasses=\"gap-2\" (clicked)=\"isSavedViewsDropdownOpen = true\" #savedViewsBtn>\n                    <upd-icon tablerIcon=\"folders\" [tablerIconSize]=\"20\"></upd-icon>\n                    {{ t('SavedViews.ButtonTitle') }}\n                </upd-button>\n                <upd-dropdown wrapperClasses=\"overflow-x-hidden mt-1\" [isOpen]=\"isSavedViewsDropdownOpen\"\n                    [dropdownReference]=\"savedViewsRef()\" [items]=\"savedViewsOptions()\" [shouldCloseOnOutsideClick]=\"true\"\n                    (isOpenChange)=\"isSavedViewsDropdownOpen = $event\" [minWidth]=\"350\" (selectedItem)=\"selectSavedView($event)\">\n                    @if (savedViewsOptions().length < 1) {\n                        <span class=\"m-2\">{{ t('NoSavedViews') }}</span>\n                    }\n                </upd-dropdown>\n            }\n        </div>\n    </ng-template>\n</ng-container>\n", styles: [".fixed{table-layout:fixed!important}.fixed td,.fixed th{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.checkbox-selector{width:52px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "component", type: i5$1.PaginatorComponent, selector: "upd-paginator", inputs: ["startPageIndex", "currentPage", "wrapperClasses", "availablePageSizes", "defaultInitPageSize", "pageSize", "shouldDisplayFirstIcon", "shouldDisplayFirstText", "shouldDisplayPreviousIcon", "shouldDisplayPreviousText", "shouldDisplayNextIcon", "shouldDisplayNextText", "shouldDisplayLastIcon", "shouldDisplayLastText", "previousDescription", "nextDescription", "totalRecords"], outputs: ["changed", "currentPageChange", "pageSizeChange"] }, { kind: "component", type: i6.CheckboxComponent, selector: "upd-checkbox", inputs: ["wrapperClasses", "value", "customClasses", "isChecked", "isInline", "isSwitch", "isIndeterminate"], outputs: ["changed", "isCheckedChange", "isIndeterminateChange"] }, { kind: "component", type: i7.DropdownComponent, selector: "upd-dropdown", inputs: ["items", "header", "isOpen", "shouldCloseOnOutsideClick", "arrowType", "wrapperClasses", "elementsExcludedFromOutsideClick", "minHeight", "maxHeight", "minWidth", "maxWidth", "dropdownReference", "dropdownReferencePosition", "textOverflowStrategy"], outputs: ["isOpenChange", "selectedItem", "checkboxChanged"] }, { kind: "directive", type: i8.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }, { kind: "component", type: SearchSectionComponent, selector: "upd-search-section", inputs: ["searchRequest", "hasChanges", "columns", "isSearching", "searchRequestSubject", "config", "actionsTpl"], outputs: ["searchRequestChange", "hasChangesChange"] }, { kind: "directive", type: TableColumnDirective, selector: "[updTableColumn]", inputs: ["record", "config"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: TableComponent, selector: "upd-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, searchRequest: { classPropertyName: "searchRequest", publicName: "searchRequest", isSignal: true, isRequired: false, transformFunction: null }, activeFilters: { classPropertyName: "activeFilters", publicName: "activeFilters", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange", searchRequest: "searchRequestChange", activeFilters: "activeFiltersChange", currentPage: "currentPageChange", pageSize: "pageSizeChange" }, viewQueries: [{ propertyName: "savedViewsRef", first: true, predicate: ["savedViewsBtn"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n    <div class=\"card\">\n        @if (!!configModel().title || !configModel().canSearch) {\n            <div class=\"card-header\">\n                @if (!!configModel().title) {\n                    <h3 class=\"card-title\">{{ textService.getText(configModel().title) }}</h3>\n                }\n                <ng-template [ngTemplateOutlet]=\"actionsTpl\"></ng-template>\n            </div>\n        }\n\n        @if (configModel().customHeaderActions.length > 0) {\n            <div class=\"card-body py-3 d-flex flex-column gap-2\">\n                <div class=\"ms-auto d-flex gap-2\">\n                    @for (btn of configModel().customHeaderActions; track btn) {\n                        <upd-button customClasses=\"gap-2\" [model]=\"btn\"></upd-button>\n                    }\n                </div>\n            </div>\n        }\n\n        @if (configModel().canSearch) {\n            <upd-search-section [actionsTpl]=\"!configModel().title ? actionsTpl : undefined\" [isSearching]=\"isSearching()\"\n                [(searchRequest)]=\"searchRequest\" [searchRequestSubject]=\"searchRequestSubject\" [config]=\"configModel()\"\n                [(hasChanges)]=\"hasSearchChanged\" [columns]=\"columns()\">\n            </upd-search-section>\n        }\n\n        <div [class.table-responsive]=\"configModel().isResponsive\">\n            <!-- TODO: implement pixel sized table -->\n            <table class=\"table card-table table-vcenter table-nowrap\" [class.fixed]=\"hasWidth\"\n                [class.pixel-sized]=\"isWidthInPixels\">\n                <thead [class.sticky-top]=\"configModel().hasStickyHeader\">\n                <tr>\n                    @if (configModel().hasCheckboxColumn) {\n                        <th class=\"checkbox-selector\">\n                            <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleAllSelection($event)\"\n                                [(isChecked)]=\"isMainCheckboxChecked\"\n                                [(isIndeterminate)]=\"isMainCheckboxIndeterminate\"></upd-checkbox>\n                        </th>\n                    }\n\n                    @for (col of columns(); track col) {\n                        <th [ngClass]=\"col.widthClass\" [style.width.px]=\"col.pixelsSize\">\n                            {{ textService.getText(col.title) }}\n                            @if (canSortColumn(col.name)) {\n                                <upd-icon [tablerIcon]=\"getSortingIcon(col.name)\" tablerIconWeight=\"bold\" colorClass=\"text-body-tertiary\"\n                                    [tablerIconSize]=\"16\" (click)=\"sortByColumn(col.name)\">\n                                </upd-icon>\n                            }\n                        </th>\n                    }\n\n                    @if (!!pendingWidthColClass) {\n                        <th [ngClass]=\"pendingWidthColClass\"></th>\n                    }\n\n                    @if (configModel().customActions.length > 0) {\n                        <th class=\"custom-actions\"></th>\n                    }\n                </tr>\n                </thead>\n\n                <tbody>\n                    @if (isSearching()) {\n                        <tr>\n                            <td [colSpan]=\"numberOfColumns\">\n                                <div class=\"empty\">\n                                    <h1 class=\"text-body-tertiary\">{{ t('Loading') }}...</h1>\n                                    <div class=\"progress progress-sm w-25\">\n                                        <div class=\"progress-bar progress-bar-indeterminate bg-body-tertiary\"></div>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                    } @else {\n                        @for (record of data(); track record) {\n                            <tr>\n                                @if (configModel().hasCheckboxColumn) {\n                                    <td>\n                                        <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleItemSelection(record)\"\n                                            [isChecked]=\"selectionModel().isSelected(record)\"></upd-checkbox>\n                                    </td>\n                                }\n\n                                @for (col of columns(); track col) {\n                                    <td>\n                                        <ng-container updTableColumn [record]=\"record\" [config]=\"col\"></ng-container>\n                                    </td>\n                                }\n\n                                @if (!!pendingWidthColClass) {\n                                    <td></td>\n                                }\n\n                                @if (configModel().customActions.length > 0) {\n                                    <td style=\"overflow: unset\">\n                                        <div class=\"grow-left d-flex\">\n                                            @if (configModel().customActions.length > 1) {\n                                                <upd-button customClasses=\"ca-item\" [iconModel]=\"{tablerIcon:'dots'}\" [isIcon]=\"true\"\n                                                    [isLink]=\"true\" size=\"small\"></upd-button>\n\n                                                <div class=\"ca-dropdown-content rounded shadow-sm\">\n                                                    @for (btn of configModel().customActions; track btn) {\n                                                        <upd-button [model]=\"adaptCustomAction(btn, record)\"></upd-button>\n                                                    }\n                                                </div>\n                                            } @else {\n                                                <upd-button [model]=\"adaptCustomAction(configModel().customActions[0], record)\">\n                                                </upd-button>\n                                            }\n                                        </div>\n                                    </td>\n                                }\n                            </tr>\n                        } @empty {\n                            <tr>\n                                <td [colSpan]=\"numberOfColumns\">\n                                    <div class=\"empty\">\n                                        <p class=\"empty-title\">{{ t('NoRecordsFoundTitle') }}</p>\n                                        <p class=\"empty-subtitle text-secondary\">{{ t('NoRecordsFoundSubtitle') }}</p>\n                                    </div>\n                                </td>\n                            </tr>\n                        }\n                    }\n                </tbody>\n            </table>\n        </div>\n        <upd-paginator wrapperClasses=\"card-footer\" [shouldDisplayPreviousText]=\"false\" [shouldDisplayNextText]=\"false\"\n            [(pageSize)]=\"pageSize\" [shouldDisplayFirstText]=\"false\" [shouldDisplayLastText]=\"false\"\n            [(currentPage)]=\"currentPage\"\n            [totalRecords]=\"totalRecords()\" (changed)=\"onPageSettingsChanged()\">\n        </upd-paginator>\n    </div>\n\n    <ng-template #actionsTpl>\n        <div class=\"ms-auto d-flex gap-2\">\n            @if (!!activeSavedView()) {\n                @if (activeSavedView()!.isDefault) {\n                    <div class=\"ribbon ribbon-top ribbon-start\">\n                        <upd-icon tablerIcon=\"heart\" [tablerIconSize]=\"20\"></upd-icon>\n                    </div>\n                }\n                <div class=\"tag align-self-center py-3 text-primary bg-primary-lt border-primary\"\n                    updPopover=\"{{ t('CurrentSavedView') }}\"\n                    [updPopoverActAsTooltip]=\"true\">\n                    <upd-icon tablerIcon=\"list-details\" [tablerIconSize]=\"20\"></upd-icon>\n                    <span class=\"me-1\">{{ activeSavedView()!.name }}</span>\n                </div>\n            }\n            @if (hiddenColumns() > 0) {\n                <div class=\"tag align-self-center py-3 text-orange bg-orange-lt border-orange\"\n                    updPopover=\"{{ t('HiddenColumnsTooltip') }}\"\n                    [updPopoverActAsTooltip]=\"true\">\n                    <upd-icon tablerIcon=\"eye-off\" [tablerIconSize]=\"20\"></upd-icon>\n                    <span class=\"me-1\">{{ hiddenColumns() }}</span>\n                </div>\n            }\n            @if (!!activeSavedView() || hiddenColumns() > 0) {\n                <upd-button (clicked)=\"resetViewState()\" colorStyle=\"danger\" updPopover=\"{{ t('ResetView') }}\"\n                    [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\" [isOutline]=\"true\">\n                    <upd-icon tablerIcon=\"restore\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            }\n            @if (configModel().canSaveViews) {\n                <upd-button customClasses=\"gap-2\" [isDisabled]=\"!hasSearchChanged()\" (clicked)=\"openSaveSearchModal()\"\n                    updPopover=\"{{ t('SaveCurrentView') }}\" [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\">\n                    <upd-icon tablerIcon=\"device-floppy\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            }\n            @if (configModel().canManageColumns) {\n                <upd-button customClasses=\"gap-2\" (clicked)=\"openColumnsManagerModal()\">\n                    <upd-icon tablerIcon=\"columns\" [tablerIconSize]=\"20\"></upd-icon>\n                    {{ t('ColumnsManagerButton') }}\n                </upd-button>\n            }\n            @if (configModel().canSaveViews || configModel().canLoadSavedViews) {\n                <upd-button customClasses=\"gap-2\" (clicked)=\"isSavedViewsDropdownOpen = true\" #savedViewsBtn>\n                    <upd-icon tablerIcon=\"folders\" [tablerIconSize]=\"20\"></upd-icon>\n                    {{ t('SavedViews.ButtonTitle') }}\n                </upd-button>\n                <upd-dropdown wrapperClasses=\"overflow-x-hidden mt-1\" [isOpen]=\"isSavedViewsDropdownOpen\"\n                    [dropdownReference]=\"savedViewsRef()\" [items]=\"savedViewsOptions()\" [shouldCloseOnOutsideClick]=\"true\"\n                    (isOpenChange)=\"isSavedViewsDropdownOpen = $event\" [minWidth]=\"350\" (selectedItem)=\"selectSavedView($event)\">\n                    @if (savedViewsOptions().length < 1) {\n                        <span class=\"m-2\">{{ t('NoSavedViews') }}</span>\n                    }\n                </upd-dropdown>\n            }\n        </div>\n    </ng-template>\n</ng-container>\n", styles: [".fixed{table-layout:fixed!important}.fixed td,.fixed th{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.checkbox-selector{width:52px!important}.custom-actions{width:56px!important}.ca-item{transition:all,.5s}.ca-item:hover{width:400px}.grow-left{direction:rtl}.ca-dropdown-content{display:none;background:var(--upd-secondary-lt)}.grow-left:hover .ca-dropdown-content{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "component", type: i5$1.PaginatorComponent, selector: "upd-paginator", inputs: ["startPageIndex", "currentPage", "wrapperClasses", "availablePageSizes", "defaultInitPageSize", "pageSize", "shouldDisplayFirstIcon", "shouldDisplayFirstText", "shouldDisplayPreviousIcon", "shouldDisplayPreviousText", "shouldDisplayNextIcon", "shouldDisplayNextText", "shouldDisplayLastIcon", "shouldDisplayLastText", "previousDescription", "nextDescription", "totalRecords"], outputs: ["changed", "currentPageChange", "pageSizeChange"] }, { kind: "component", type: i6.CheckboxComponent, selector: "upd-checkbox", inputs: ["wrapperClasses", "value", "customClasses", "isChecked", "isInline", "isSwitch", "isIndeterminate"], outputs: ["changed", "isCheckedChange", "isIndeterminateChange"] }, { kind: "component", type: i7.DropdownComponent, selector: "upd-dropdown", inputs: ["items", "header", "isOpen", "shouldCloseOnOutsideClick", "arrowType", "wrapperClasses", "elementsExcludedFromOutsideClick", "minHeight", "maxHeight", "minWidth", "maxWidth", "dropdownReference", "dropdownReferencePosition", "textOverflowStrategy"], outputs: ["isOpenChange", "selectedItem", "checkboxChanged"] }, { kind: "directive", type: i8.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }, { kind: "component", type: SearchSectionComponent, selector: "upd-search-section", inputs: ["searchRequest", "hasChanges", "columns", "isSearching", "searchRequestSubject", "config", "actionsTpl"], outputs: ["searchRequestChange", "hasChangesChange"] }, { kind: "directive", type: TableColumnDirective, selector: "[updTableColumn]", inputs: ["record", "config"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-table', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n    <div class=\"card\">\n        @if (!!configModel().title || !configModel().canSearch) {\n            <div class=\"card-header\">\n                @if (!!configModel().title) {\n                    <h3 class=\"card-title\">{{ textService.getText(configModel().title) }}</h3>\n                }\n                <ng-template [ngTemplateOutlet]=\"actionsTpl\"></ng-template>\n            </div>\n        }\n\n        @if (configModel().customActions.length > 0) {\n            <div class=\"card-body py-3 d-flex flex-column gap-2\">\n                <div class=\"ms-auto d-flex gap-2\">\n                    @for (btn of configModel().customActions; track btn) {\n                        <upd-button customClasses=\"gap-2\" [model]=\"btn\"></upd-button>\n                    }\n                </div>\n            </div>\n        }\n\n        @if (configModel().canSearch) {\n            <upd-search-section [actionsTpl]=\"!configModel().title ? actionsTpl : undefined\" [isSearching]=\"isSearching()\"\n                [(searchRequest)]=\"searchRequest\" [searchRequestSubject]=\"searchRequestSubject\" [config]=\"configModel()\"\n                [(hasChanges)]=\"hasSearchChanged\" [columns]=\"columns()\">\n            </upd-search-section>\n        }\n\n        <div [class.table-responsive]=\"configModel().isResponsive\">\n            <!-- TODO: implement pixel sized table -->\n            <table class=\"table card-table table-vcenter table-nowrap\" [class.fixed]=\"hasWidth\"\n                [class.pixel-sized]=\"isWidthInPixels\">\n                <thead [class.sticky-top]=\"configModel().hasStickyHeader\">\n                <tr>\n                    @if (configModel().hasCheckboxColumn) {\n                        <th class=\"checkbox-selector\">\n                            <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleAllSelection($event)\"\n                                [(isChecked)]=\"isMainCheckboxChecked\"\n                                [(isIndeterminate)]=\"isMainCheckboxIndeterminate\"></upd-checkbox>\n                        </th>\n                    }\n\n                    @for (col of columns(); track col) {\n                        <th [ngClass]=\"col.widthClass\" [style.width.px]=\"col.pixelsSize\">\n                            {{ textService.getText(col.title) }}\n                            @if (canSortColumn(col.name)) {\n                                <upd-icon [tablerIcon]=\"getSortingIcon(col.name)\" tablerIconWeight=\"bold\" colorClass=\"text-body-tertiary\"\n                                    [tablerIconSize]=\"16\" (click)=\"sortByColumn(col.name)\">\n                                </upd-icon>\n                            }\n                        </th>\n                    }\n\n                    @if (!!pendingWidthColClass) {\n                        <th [ngClass]=\"pendingWidthColClass\"></th>\n                    }\n                </tr>\n                </thead>\n\n                <tbody>\n                    @if (isSearching()) {\n                        <tr>\n                            <td [colSpan]=\"numberOfColumns\">\n                                <div class=\"empty\">\n                                    <h1 class=\"text-body-tertiary\">{{ t('Loading') }}...</h1>\n                                    <div class=\"progress progress-sm w-25\">\n                                        <div class=\"progress-bar progress-bar-indeterminate bg-body-tertiary\"></div>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                    } @else {\n                        @for (record of data(); track record) {\n                            <tr>\n                                @if (configModel().hasCheckboxColumn) {\n                                    <td>\n                                        <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleItemSelection(record)\"\n                                            [isChecked]=\"selectionModel().isSelected(record)\"></upd-checkbox>\n                                    </td>\n                                }\n\n                                @for (col of columns(); track col) {\n                                    <td>\n                                        <ng-container updTableColumn [record]=\"record\" [config]=\"col\"></ng-container>\n                                    </td>\n                                }\n\n                                @if (!!pendingWidthColClass) {\n                                    <td></td>\n                                }\n                            </tr>\n                        } @empty {\n                            <tr>\n                                <td [colSpan]=\"numberOfColumns\">\n                                    <div class=\"empty\">\n                                        <p class=\"empty-title\">{{ t('NoRecordsFoundTitle') }}</p>\n                                        <p class=\"empty-subtitle text-secondary\">{{ t('NoRecordsFoundSubtitle') }}</p>\n                                    </div>\n                                </td>\n                            </tr>\n                        }\n                    }\n                </tbody>\n            </table>\n        </div>\n        <upd-paginator wrapperClasses=\"card-footer\" [shouldDisplayPreviousText]=\"false\" [shouldDisplayNextText]=\"false\"\n            [(pageSize)]=\"pageSize\" [shouldDisplayFirstText]=\"false\" [shouldDisplayLastText]=\"false\"\n            [(currentPage)]=\"currentPage\"\n            [totalRecords]=\"totalRecords()\" (changed)=\"onPageSettingsChanged()\">\n        </upd-paginator>\n    </div>\n\n    <ng-template #actionsTpl>\n        <div class=\"ms-auto d-flex gap-2\">\n            @if (!!activeSavedView()) {\n                @if (activeSavedView()!.isDefault) {\n                    <div class=\"ribbon ribbon-top ribbon-start\">\n                        <upd-icon tablerIcon=\"heart\" [tablerIconSize]=\"20\"></upd-icon>\n                    </div>\n                }\n                <div class=\"tag align-self-center py-3 text-primary bg-primary-lt border-primary\"\n                    updPopover=\"{{ t('CurrentSavedView') }}\"\n                    [updPopoverActAsTooltip]=\"true\">\n                    <upd-icon tablerIcon=\"list-details\" [tablerIconSize]=\"20\"></upd-icon>\n                    <span class=\"me-1\">{{ activeSavedView()!.name }}</span>\n                </div>\n            }\n            @if (hiddenColumns() > 0) {\n                <div class=\"tag align-self-center py-3 text-orange bg-orange-lt border-orange\"\n                    updPopover=\"{{ t('HiddenColumnsTooltip') }}\"\n                    [updPopoverActAsTooltip]=\"true\">\n                    <upd-icon tablerIcon=\"eye-off\" [tablerIconSize]=\"20\"></upd-icon>\n                    <span class=\"me-1\">{{ hiddenColumns() }}</span>\n                </div>\n            }\n            @if (!!activeSavedView() || hiddenColumns() > 0) {\n                <upd-button (clicked)=\"resetViewState()\" colorStyle=\"danger\" updPopover=\"{{ t('ResetView') }}\"\n                    [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\" [isOutline]=\"true\">\n                    <upd-icon tablerIcon=\"restore\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            }\n            @if (configModel().canSaveViews) {\n                <upd-button customClasses=\"gap-2\" [isDisabled]=\"!hasSearchChanged()\" (clicked)=\"openSaveSearchModal()\"\n                    updPopover=\"{{ t('SaveCurrentView') }}\" [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\">\n                    <upd-icon tablerIcon=\"device-floppy\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            }\n            @if (configModel().canManageColumns) {\n                <upd-button customClasses=\"gap-2\" (clicked)=\"openColumnsManagerModal()\">\n                    <upd-icon tablerIcon=\"columns\" [tablerIconSize]=\"20\"></upd-icon>\n                    {{ t('ColumnsManagerButton') }}\n                </upd-button>\n            }\n            @if (configModel().canSaveViews || configModel().canLoadSavedViews) {\n                <upd-button customClasses=\"gap-2\" (clicked)=\"isSavedViewsDropdownOpen = true\" #savedViewsBtn>\n                    <upd-icon tablerIcon=\"folders\" [tablerIconSize]=\"20\"></upd-icon>\n                    {{ t('SavedViews.ButtonTitle') }}\n                </upd-button>\n                <upd-dropdown wrapperClasses=\"overflow-x-hidden mt-1\" [isOpen]=\"isSavedViewsDropdownOpen\"\n                    [dropdownReference]=\"savedViewsRef()\" [items]=\"savedViewsOptions()\" [shouldCloseOnOutsideClick]=\"true\"\n                    (isOpenChange)=\"isSavedViewsDropdownOpen = $event\" [minWidth]=\"350\" (selectedItem)=\"selectSavedView($event)\">\n                    @if (savedViewsOptions().length < 1) {\n                        <span class=\"m-2\">{{ t('NoSavedViews') }}</span>\n                    }\n                </upd-dropdown>\n            }\n        </div>\n    </ng-template>\n</ng-container>\n", styles: [".fixed{table-layout:fixed!important}.fixed td,.fixed th{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.checkbox-selector{width:52px!important}\n"] }]
+            args: [{ selector: 'upd-table', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n    <div class=\"card\">\n        @if (!!configModel().title || !configModel().canSearch) {\n            <div class=\"card-header\">\n                @if (!!configModel().title) {\n                    <h3 class=\"card-title\">{{ textService.getText(configModel().title) }}</h3>\n                }\n                <ng-template [ngTemplateOutlet]=\"actionsTpl\"></ng-template>\n            </div>\n        }\n\n        @if (configModel().customHeaderActions.length > 0) {\n            <div class=\"card-body py-3 d-flex flex-column gap-2\">\n                <div class=\"ms-auto d-flex gap-2\">\n                    @for (btn of configModel().customHeaderActions; track btn) {\n                        <upd-button customClasses=\"gap-2\" [model]=\"btn\"></upd-button>\n                    }\n                </div>\n            </div>\n        }\n\n        @if (configModel().canSearch) {\n            <upd-search-section [actionsTpl]=\"!configModel().title ? actionsTpl : undefined\" [isSearching]=\"isSearching()\"\n                [(searchRequest)]=\"searchRequest\" [searchRequestSubject]=\"searchRequestSubject\" [config]=\"configModel()\"\n                [(hasChanges)]=\"hasSearchChanged\" [columns]=\"columns()\">\n            </upd-search-section>\n        }\n\n        <div [class.table-responsive]=\"configModel().isResponsive\">\n            <!-- TODO: implement pixel sized table -->\n            <table class=\"table card-table table-vcenter table-nowrap\" [class.fixed]=\"hasWidth\"\n                [class.pixel-sized]=\"isWidthInPixels\">\n                <thead [class.sticky-top]=\"configModel().hasStickyHeader\">\n                <tr>\n                    @if (configModel().hasCheckboxColumn) {\n                        <th class=\"checkbox-selector\">\n                            <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleAllSelection($event)\"\n                                [(isChecked)]=\"isMainCheckboxChecked\"\n                                [(isIndeterminate)]=\"isMainCheckboxIndeterminate\"></upd-checkbox>\n                        </th>\n                    }\n\n                    @for (col of columns(); track col) {\n                        <th [ngClass]=\"col.widthClass\" [style.width.px]=\"col.pixelsSize\">\n                            {{ textService.getText(col.title) }}\n                            @if (canSortColumn(col.name)) {\n                                <upd-icon [tablerIcon]=\"getSortingIcon(col.name)\" tablerIconWeight=\"bold\" colorClass=\"text-body-tertiary\"\n                                    [tablerIconSize]=\"16\" (click)=\"sortByColumn(col.name)\">\n                                </upd-icon>\n                            }\n                        </th>\n                    }\n\n                    @if (!!pendingWidthColClass) {\n                        <th [ngClass]=\"pendingWidthColClass\"></th>\n                    }\n\n                    @if (configModel().customActions.length > 0) {\n                        <th class=\"custom-actions\"></th>\n                    }\n                </tr>\n                </thead>\n\n                <tbody>\n                    @if (isSearching()) {\n                        <tr>\n                            <td [colSpan]=\"numberOfColumns\">\n                                <div class=\"empty\">\n                                    <h1 class=\"text-body-tertiary\">{{ t('Loading') }}...</h1>\n                                    <div class=\"progress progress-sm w-25\">\n                                        <div class=\"progress-bar progress-bar-indeterminate bg-body-tertiary\"></div>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                    } @else {\n                        @for (record of data(); track record) {\n                            <tr>\n                                @if (configModel().hasCheckboxColumn) {\n                                    <td>\n                                        <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleItemSelection(record)\"\n                                            [isChecked]=\"selectionModel().isSelected(record)\"></upd-checkbox>\n                                    </td>\n                                }\n\n                                @for (col of columns(); track col) {\n                                    <td>\n                                        <ng-container updTableColumn [record]=\"record\" [config]=\"col\"></ng-container>\n                                    </td>\n                                }\n\n                                @if (!!pendingWidthColClass) {\n                                    <td></td>\n                                }\n\n                                @if (configModel().customActions.length > 0) {\n                                    <td style=\"overflow: unset\">\n                                        <div class=\"grow-left d-flex\">\n                                            @if (configModel().customActions.length > 1) {\n                                                <upd-button customClasses=\"ca-item\" [iconModel]=\"{tablerIcon:'dots'}\" [isIcon]=\"true\"\n                                                    [isLink]=\"true\" size=\"small\"></upd-button>\n\n                                                <div class=\"ca-dropdown-content rounded shadow-sm\">\n                                                    @for (btn of configModel().customActions; track btn) {\n                                                        <upd-button [model]=\"adaptCustomAction(btn, record)\"></upd-button>\n                                                    }\n                                                </div>\n                                            } @else {\n                                                <upd-button [model]=\"adaptCustomAction(configModel().customActions[0], record)\">\n                                                </upd-button>\n                                            }\n                                        </div>\n                                    </td>\n                                }\n                            </tr>\n                        } @empty {\n                            <tr>\n                                <td [colSpan]=\"numberOfColumns\">\n                                    <div class=\"empty\">\n                                        <p class=\"empty-title\">{{ t('NoRecordsFoundTitle') }}</p>\n                                        <p class=\"empty-subtitle text-secondary\">{{ t('NoRecordsFoundSubtitle') }}</p>\n                                    </div>\n                                </td>\n                            </tr>\n                        }\n                    }\n                </tbody>\n            </table>\n        </div>\n        <upd-paginator wrapperClasses=\"card-footer\" [shouldDisplayPreviousText]=\"false\" [shouldDisplayNextText]=\"false\"\n            [(pageSize)]=\"pageSize\" [shouldDisplayFirstText]=\"false\" [shouldDisplayLastText]=\"false\"\n            [(currentPage)]=\"currentPage\"\n            [totalRecords]=\"totalRecords()\" (changed)=\"onPageSettingsChanged()\">\n        </upd-paginator>\n    </div>\n\n    <ng-template #actionsTpl>\n        <div class=\"ms-auto d-flex gap-2\">\n            @if (!!activeSavedView()) {\n                @if (activeSavedView()!.isDefault) {\n                    <div class=\"ribbon ribbon-top ribbon-start\">\n                        <upd-icon tablerIcon=\"heart\" [tablerIconSize]=\"20\"></upd-icon>\n                    </div>\n                }\n                <div class=\"tag align-self-center py-3 text-primary bg-primary-lt border-primary\"\n                    updPopover=\"{{ t('CurrentSavedView') }}\"\n                    [updPopoverActAsTooltip]=\"true\">\n                    <upd-icon tablerIcon=\"list-details\" [tablerIconSize]=\"20\"></upd-icon>\n                    <span class=\"me-1\">{{ activeSavedView()!.name }}</span>\n                </div>\n            }\n            @if (hiddenColumns() > 0) {\n                <div class=\"tag align-self-center py-3 text-orange bg-orange-lt border-orange\"\n                    updPopover=\"{{ t('HiddenColumnsTooltip') }}\"\n                    [updPopoverActAsTooltip]=\"true\">\n                    <upd-icon tablerIcon=\"eye-off\" [tablerIconSize]=\"20\"></upd-icon>\n                    <span class=\"me-1\">{{ hiddenColumns() }}</span>\n                </div>\n            }\n            @if (!!activeSavedView() || hiddenColumns() > 0) {\n                <upd-button (clicked)=\"resetViewState()\" colorStyle=\"danger\" updPopover=\"{{ t('ResetView') }}\"\n                    [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\" [isOutline]=\"true\">\n                    <upd-icon tablerIcon=\"restore\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            }\n            @if (configModel().canSaveViews) {\n                <upd-button customClasses=\"gap-2\" [isDisabled]=\"!hasSearchChanged()\" (clicked)=\"openSaveSearchModal()\"\n                    updPopover=\"{{ t('SaveCurrentView') }}\" [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\">\n                    <upd-icon tablerIcon=\"device-floppy\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            }\n            @if (configModel().canManageColumns) {\n                <upd-button customClasses=\"gap-2\" (clicked)=\"openColumnsManagerModal()\">\n                    <upd-icon tablerIcon=\"columns\" [tablerIconSize]=\"20\"></upd-icon>\n                    {{ t('ColumnsManagerButton') }}\n                </upd-button>\n            }\n            @if (configModel().canSaveViews || configModel().canLoadSavedViews) {\n                <upd-button customClasses=\"gap-2\" (clicked)=\"isSavedViewsDropdownOpen = true\" #savedViewsBtn>\n                    <upd-icon tablerIcon=\"folders\" [tablerIconSize]=\"20\"></upd-icon>\n                    {{ t('SavedViews.ButtonTitle') }}\n                </upd-button>\n                <upd-dropdown wrapperClasses=\"overflow-x-hidden mt-1\" [isOpen]=\"isSavedViewsDropdownOpen\"\n                    [dropdownReference]=\"savedViewsRef()\" [items]=\"savedViewsOptions()\" [shouldCloseOnOutsideClick]=\"true\"\n                    (isOpenChange)=\"isSavedViewsDropdownOpen = $event\" [minWidth]=\"350\" (selectedItem)=\"selectSavedView($event)\">\n                    @if (savedViewsOptions().length < 1) {\n                        <span class=\"m-2\">{{ t('NoSavedViews') }}</span>\n                    }\n                </upd-dropdown>\n            }\n        </div>\n    </ng-template>\n</ng-container>\n", styles: [".fixed{table-layout:fixed!important}.fixed td,.fixed th{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.checkbox-selector{width:52px!important}.custom-actions{width:56px!important}.ca-item{transition:all,.5s}.ca-item:hover{width:400px}.grow-left{direction:rtl}.ca-dropdown-content{display:none;background:var(--upd-secondary-lt)}.grow-left:hover .ca-dropdown-content{display:block}\n"] }]
         }], ctorParameters: () => [] });
 
 var UpDevs$1 = {