@updevs/components 1.0.0-alpha.6 → 1.0.0-alpha.60

package/fesm2022/updevs-components-table.mjs

@@ -0,0 +1,1754 @@
+import { DataTypeEnum, StringColumnFilter, GuidColumnFilter, NumberColumnFilter, DateColumnFilter, BooleanColumnFilter, SortDirectionEnum, ColumnSort, BaseStore, FilterOperandEnum, FilterDateOperandEnum, FilterNumberOperandEnum, FilterBooleanOperandEnum, FilterGuidOperandEnum } from '@updevs/sdk/stores';
+import * as i0 from '@angular/core';
+import { inject, Directive, Component, input, ViewContainerRef, effect, computed, signal, Injectable, model, InjectionToken, Inject, EventEmitter, Output, HostBinding, viewChild, ElementRef, NgModule } from '@angular/core';
+import { DynamicComponentLoaderService, BaseComponent, ButtonModel } from '@updevs/sdk/layout';
+import { TextService } from '@updevs/sdk';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@updevs/icons';
+import { UpdIconsModule } from '@updevs/icons';
+import { DateTimeFormatEnum, Tools, SelectionModel, ServerResponseService } from '@updevs/sdk/core';
+import { BaseModal, ModalService, ModalAlertService, UpdModalModule } from '@updevs/components/modal';
+import { Subject, distinctUntilChanged, debounceTime, tap, switchMap, catchError, of, finalize, forkJoin } from 'rxjs';
+import * as i1$1 from '@jsverse/transloco';
+import { TranslocoDirective } from '@jsverse/transloco';
+import * as i2 from '@updevs/components/drag-and-drop';
+import { UpdDragAndDropModule } from '@updevs/components/drag-and-drop';
+import { FormGroup, Validators } from '@angular/forms';
+import * as i3$1 from '@updevs/components/form';
+import { DynamicFieldType, UpdFormModule } from '@updevs/components/form';
+import { BaseByUserSignalStorage } from '@updevs/sdk/security';
+import * as i4 from '@updevs/components/button';
+import { UpdButtonModule } from '@updevs/components/button';
+import * as i5$1 from '@updevs/components/paginator';
+import { UpdPaginatorModule } from '@updevs/components/paginator';
+import * as i6 from '@updevs/components/form-controls/checkbox';
+import { UpdCheckboxModule } from '@updevs/components/form-controls/checkbox';
+import * as i7 from '@updevs/components/dropdown';
+import { UpdDropdownModule } from '@updevs/components/dropdown';
+import * as i8 from '@updevs/components/popover';
+import { UpdPopoverModule } from '@updevs/components/popover';
+import * as i5 from '@updevs/components/form-controls/input';
+import { UpdInputModule } from '@updevs/components/form-controls/input';
+import * as i3$2 from '@updevs/components/form-controls/select';
+import { UpdSelectModule } from '@updevs/components/form-controls/select';
+import { UpdTimePickerModule } from '@updevs/components/form-controls/time-picker';
+import { UpdBadgeModule } from '@updevs/components/badge';
+
+var ColumnTypeEnum;
+(function (ColumnTypeEnum) {
+    ColumnTypeEnum[ColumnTypeEnum["Text"] = 1] = "Text";
+    ColumnTypeEnum[ColumnTypeEnum["DateTime"] = 2] = "DateTime";
+    ColumnTypeEnum[ColumnTypeEnum["Number"] = 3] = "Number";
+    ColumnTypeEnum[ColumnTypeEnum["Boolean"] = 4] = "Boolean";
+    ColumnTypeEnum[ColumnTypeEnum["Date"] = 5] = "Date";
+    ColumnTypeEnum[ColumnTypeEnum["Time"] = 6] = "Time";
+    ColumnTypeEnum[ColumnTypeEnum["Image"] = 7] = "Image";
+    ColumnTypeEnum[ColumnTypeEnum["Currency"] = 8] = "Currency";
+    ColumnTypeEnum[ColumnTypeEnum["Custom"] = 9] = "Custom";
+    ColumnTypeEnum[ColumnTypeEnum["Masked"] = 10] = "Masked";
+    ColumnTypeEnum[ColumnTypeEnum["Guid"] = 11] = "Guid";
+})(ColumnTypeEnum || (ColumnTypeEnum = {}));
+
+class BaseColumnModel {
+    get dataType() {
+        switch (this.type) {
+            case ColumnTypeEnum.Boolean:
+                return DataTypeEnum.Boolean;
+            case ColumnTypeEnum.DateTime:
+            case ColumnTypeEnum.Date:
+            case ColumnTypeEnum.Time:
+                return DataTypeEnum.Date;
+            case ColumnTypeEnum.Currency:
+            case ColumnTypeEnum.Number:
+                return DataTypeEnum.Number;
+            case ColumnTypeEnum.Guid:
+                return DataTypeEnum.Guid;
+            default:
+                return DataTypeEnum.String;
+        }
+    }
+    get widthClass() {
+        if (!this.width || !!this.width.pixels) {
+            return '';
+        }
+        const prefix = !!this.width.gridColumn ? 'col' : 'w';
+        const auto = !!this.width.gridColumn && this.width.gridColumn === 0 ? 'auto' : '';
+        return `${prefix}-${auto || this.widthSize}`;
+    }
+    get widthSize() {
+        return !this.width ? 0 : this.width.gridColumn || this.width.percentage || 0;
+    }
+    get pixelsSize() {
+        return this.width?.pixels;
+    }
+    constructor(columnType, init) {
+        this.titleAlignment = 'left';
+        this.allowSort = true;
+        this.isItalic = false;
+        this.type = ColumnTypeEnum.Text;
+        this.alignment = 'left';
+        this.weight = 'normal';
+        this.overflowStrategy = 'truncate';
+        this.shouldSpaceAfterPrefix = true;
+        this.shouldSpaceBeforeSuffix = true;
+        this.isHidden = false;
+        if (!!init) {
+            Object.assign(this, init);
+        }
+        this.type = columnType;
+    }
+}
+
+class FiltersOperandsService {
+}
+
+class BaseColumn {
+    constructor() {
+        this.textService = inject(TextService);
+    }
+    static { this.alignmentClassMap = {
+        justify: { text: 'text-justify', nonText: 'justify-content-between' },
+        center: { text: 'text-center', nonText: 'justify-content-center' },
+        right: { text: 'text-end', nonText: 'justify-content-end' },
+        left: { text: 'text-start', nonText: 'justify-content-start' }
+    }; }
+    static { this.overflowClassMap = {
+        'no-wrap': 'text-nowrap',
+        wrap: 'text-wrap',
+        'word-break': 'text-break',
+        truncate: 'text-truncate'
+    }; }
+    static { this.decorationClassMap = {
+        underline: 'text-decoration-underline',
+        strikethrough: 'text-decoration-line-through',
+        none: 'text-decoration-none'
+    }; }
+    static { this.weightClassMap = {
+        bold: 'fw-bold',
+        bolder: 'fw-bolder',
+        light: 'fw-light',
+        lighter: 'fw-lighter',
+        normal: 'fw-normal'
+    }; }
+    get value() {
+        return this.record[this.config.name];
+    }
+    get isTextType() {
+        return this.config.type !== ColumnTypeEnum.Boolean
+            && this.config.type !== ColumnTypeEnum.Image
+            && this.config.type !== ColumnTypeEnum.Custom;
+    }
+    get prefix() {
+        return this.textService.getText(this.config.prefix);
+    }
+    get suffix() {
+        return this.textService.getText(this.config.suffix);
+    }
+    get prefixSpace() {
+        return !!this.prefix && this.config.shouldSpaceAfterPrefix ? ' ' : '';
+    }
+    get suffixSpace() {
+        return !!this.suffix && this.config.shouldSpaceBeforeSuffix ? ' ' : '';
+    }
+    get alignmentClass() {
+        const map = BaseColumn.alignmentClassMap[this.config.alignment] || BaseColumn.alignmentClassMap['left'];
+        return this.isTextType ? map.text : map.nonText;
+    }
+    get overflowClass() {
+        return BaseColumn.overflowClassMap[this.config.overflowStrategy] || 'text-truncate';
+    }
+    get decorationClass() {
+        return this.config.decoration ? BaseColumn.decorationClassMap[this.config.decoration] : '';
+    }
+    get weightClass() {
+        return BaseColumn.weightClassMap[this.config.weight] || 'fw-normal';
+    }
+    getRecordAs() {
+        return this.record;
+    }
+    getClasses() {
+        return [
+            this.alignmentClass,
+            this.overflowClass,
+            this.decorationClass,
+            this.weightClass,
+            this.config.isItalic ? 'fst-italic' : ''
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BaseColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: BaseColumn, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BaseColumn, decorators: [{
+            type: Directive
+        }] });
+
+class TextColumnComponent extends BaseColumn {
+    getClasses() {
+        return [
+            ...super.getClasses(),
+            this.transformClass
+        ];
+    }
+    get transformClass() {
+        switch (this.config.transform) {
+            case 'capitalize':
+                return 'text-capitalize';
+            case 'lowercase':
+                return 'text-lowercase';
+            case 'uppercase':
+                return 'text-uppercase';
+            default:
+                return '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TextColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: TextColumnComponent, selector: "upd-text-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"getClasses()\">{{ prefix }}{{ prefixSpace }}{{ value }}{{ suffixSpace }}{{ suffix }}</span>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TextColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-text-column', template: "<span [ngClass]=\"getClasses()\">{{ prefix }}{{ prefixSpace }}{{ value }}{{ suffixSpace }}{{ suffix }}</span>\n" }]
+        }] });
+
+class NumberColumnComponent extends BaseColumn {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NumberColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: NumberColumnComponent, selector: "upd-number-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"getClasses()\">{{ prefix }}{{ prefixSpace }}{{ value | number:config.numberFormat }}{{ suffixSpace }}{{ suffix }}</span>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NumberColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-number-column', template: "<span [ngClass]=\"getClasses()\">{{ prefix }}{{ prefixSpace }}{{ value | number:config.numberFormat }}{{ suffixSpace }}{{ suffix }}</span>\n" }]
+        }] });
+
+class BooleanColumnComponent extends BaseColumn {
+    getClasses() {
+        return [
+            ...super.getClasses(),
+            this.colorClass
+        ];
+    }
+    get colorClass() {
+        if (!this.config.shouldColorHighlight) {
+            return '';
+        }
+        return `text-${(!!this.value ? this.config.trueColor : this.config.falseColor)}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BooleanColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: BooleanColumnComponent, selector: "upd-boolean-column", usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"getClasses()\">\n    @switch (config.displayType) {\n        @case ('text') {\n            {{ prefix }}{{ prefixSpace }}{{ !!value ? textService.getText(config.trueText) : textService.getText(config.falseText) }}{{ suffixSpace }}{{ suffix }}\n        }\n        @case ('toggle') {\n            {{ prefix }}{{ prefixSpace }}\n            <upd-icon [tablerIcon]=\"!!value ? 'toggle-right' : 'toggle-left'\"></upd-icon>{{ suffixSpace }}{{ suffix }}\n        }\n        @case ('icon') {\n            {{ prefix }}{{ prefixSpace }}\n            <upd-icon [model]=\"!!value ? config.trueIcon : config.falseIcon\"></upd-icon>{{ suffixSpace }}{{ suffix }}\n        }\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BooleanColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-boolean-column', template: "<div [ngClass]=\"getClasses()\">\n    @switch (config.displayType) {\n        @case ('text') {\n            {{ prefix }}{{ prefixSpace }}{{ !!value ? textService.getText(config.trueText) : textService.getText(config.falseText) }}{{ suffixSpace }}{{ suffix }}\n        }\n        @case ('toggle') {\n            {{ prefix }}{{ prefixSpace }}\n            <upd-icon [tablerIcon]=\"!!value ? 'toggle-right' : 'toggle-left'\"></upd-icon>{{ suffixSpace }}{{ suffix }}\n        }\n        @case ('icon') {\n            {{ prefix }}{{ prefixSpace }}\n            <upd-icon [model]=\"!!value ? config.trueIcon : config.falseIcon\"></upd-icon>{{ suffixSpace }}{{ suffix }}\n        }\n    }\n</div>\n" }]
+        }] });
+
+class DateTimeColumnComponent extends BaseColumn {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DateTimeColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: DateTimeColumnComponent, selector: "upd-date-time-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"getClasses()\">{{ prefix }}{{ prefixSpace }}{{ value | date:config.dateTimeFormat }}{{ suffixSpace }}{{ suffix }}</span>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DateTimeColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-date-time-column', template: "<span [ngClass]=\"getClasses()\">{{ prefix }}{{ prefixSpace }}{{ value | date:config.dateTimeFormat }}{{ suffixSpace }}{{ suffix }}</span>\n" }]
+        }] });
+
+class TableColumnDirective {
+    constructor() {
+        this.record = input.required();
+        this.config = input.required();
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.dynamicLoaderService = inject(DynamicComponentLoaderService);
+        effect(() => {
+            const component = this.dynamicLoaderService.load(this.getComponentType(), this.viewContainerRef);
+            component.instance.record = this.record();
+            component.instance.config = this.config();
+        });
+    }
+    getComponentType() {
+        switch (this.config().type) {
+            case ColumnTypeEnum.Text:
+                // @ts-ignore
+                return TextColumnComponent;
+            case ColumnTypeEnum.Number:
+                // @ts-ignore
+                return NumberColumnComponent;
+            case ColumnTypeEnum.Boolean:
+                // @ts-ignore
+                return BooleanColumnComponent;
+            case ColumnTypeEnum.Date:
+            case ColumnTypeEnum.DateTime:
+                // @ts-ignore
+                return DateTimeColumnComponent;
+            case ColumnTypeEnum.Guid:
+                // @ts-ignore
+                return TextColumnComponent;
+            default:
+                throw Error();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.0", type: TableColumnDirective, selector: "[updTableColumn]", inputs: { record: { classPropertyName: "record", publicName: "record", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TableColumnDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[updTableColumn]'
+                }]
+        }], ctorParameters: () => [] });
+
+class BooleanColumnModel extends BaseColumnModel {
+    constructor(init) {
+        super(ColumnTypeEnum.Boolean, init);
+        this.displayType = 'text';
+        this.trueText = { text: 'UpDevs.Table.Filters.Boolean.True', isTranslated: false };
+        this.falseText = { text: 'UpDevs.Table.Filters.Boolean.False', isTranslated: false };
+        this.trueIcon = { tablerIcon: 'square-check' };
+        this.falseIcon = { tablerIcon: 'square' };
+        this.trueColor = 'success';
+        this.falseColor = 'secondary';
+        this.shouldColorHighlight = true;
+        if (this.displayType !== 'text') {
+            this.alignment = 'center';
+        }
+        if (!!init) {
+            Object.assign(this, init);
+        }
+    }
+}
+
+class DateTimeColumnModel extends BaseColumnModel {
+    get dateTimeFormat() {
+        return this.customFormat || this.format;
+    }
+    constructor(init) {
+        super(ColumnTypeEnum.DateTime, init);
+        this.format = DateTimeFormatEnum.ShortDate;
+        if (!!init) {
+            Object.assign(this, init);
+        }
+    }
+}
+
+class TextColumnModel extends BaseColumnModel {
+    constructor(init) {
+        super(ColumnTypeEnum.Text, init);
+        if (!!init) {
+            Object.assign(this, init);
+        }
+    }
+}
+
+class GuidColumnModel extends TextColumnModel {
+    constructor(init) {
+        super(init);
+        this.transform = 'uppercase';
+        if (!!init) {
+            Object.assign(this, init);
+        }
+        this.type = ColumnTypeEnum.Guid;
+    }
+}
+
+class ImageColumnModel extends BaseColumnModel {
+    constructor(init) {
+        super(ColumnTypeEnum.Image, init);
+        if (!!init) {
+            Object.assign(this, init);
+        }
+    }
+}
+
+class NumberColumnModel extends BaseColumnModel {
+    get numberFormat() {
+        return `${this.minIntegerDigits}.${this.minFractionDigits}-${this.maxFractionDigits}`;
+    }
+    constructor(init) {
+        super(ColumnTypeEnum.Number, init);
+        this.minIntegerDigits = 1;
+        this.minFractionDigits = 0;
+        this.maxFractionDigits = 3;
+        if (!!init) {
+            Object.assign(this, init);
+        }
+    }
+}
+
+class TableConfigModel {
+    constructor(init) {
+        this.columns = [];
+        this.canSearch = true;
+        this.canSaveViews = true;
+        this.canLoadSavedViews = true;
+        this.canManageColumns = true;
+        this.shouldAutoSearch = true;
+        this.hasCheckboxColumn = true;
+        this.isResponsive = true;
+        this.hasStickyHeader = false;
+        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);
+        }
+    }
+}
+
+class ColumnsManagerComponent extends BaseModal {
+    constructor() {
+        super(...arguments);
+        this.config = computed(() => ({ columns: [this.visibleColumn(), this.hiddenColumn()], canReorder: true }));
+        this.columns = signal([]);
+        this.visibleColumn = computed(() => ({
+            name: 'visible',
+            title: { text: 'UpDevs.Table.VisibleColumns', isTranslated: false },
+            canBeEmpty: false,
+            items: this.data().columns.filter(c => !c.isHidden).map(c => ({
+                name: c.name,
+                text: c.title || { text: 'UpDevs.Table.ColumnTitleNotSet', isTranslated: false }
+            }))
+        }));
+        this.hiddenColumn = computed(() => ({
+            name: 'hidden',
+            title: { text: 'UpDevs.Table.HiddenColumns', isTranslated: false },
+            items: this.data().columns.filter(c => c.isHidden).map(c => ({
+                name: c.name,
+                text: c.title || { text: 'UpDevs.Table.ColumnTitleNotSet', isTranslated: false }
+            }))
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ColumnsManagerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: ColumnsManagerComponent, selector: "upd-columns-manager", usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table.ColumnsManager'\">\n    <upd-drag-and-drop [config]=\"config()\" [(columns)]=\"columns\"></upd-drag-and-drop>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i2.DragAndDropComponent, selector: "upd-drag-and-drop", inputs: ["config", "columns"], outputs: ["columnsChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ColumnsManagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-columns-manager', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table.ColumnsManager'\">\n    <upd-drag-and-drop [config]=\"config()\" [(columns)]=\"columns\"></upd-drag-and-drop>\n</ng-container>\n" }]
+        }] });
+
+class SavedViewsStorage extends BaseByUserSignalStorage {
+    constructor() {
+        super('saved-views');
+        this.lastStateKey = 'last-state';
+    }
+    saveView(data) {
+        data.id = data.id || Tools.Guid.generate();
+        data.userId = this._loggedUserId;
+        this.save(data, this._getUserKey(data.id, data.tableName));
+    }
+    saveLastState(data) {
+        data.id = this.lastStateKey;
+        this.saveView(data);
+    }
+    getById(tableName, id) {
+        return this.get(this._getUserKey(id, tableName));
+    }
+    getAll(tableName) {
+        return computed(() => {
+            const records = this.getAllItems();
+            return records().filter(sv => sv.tableName.toLowerCase() === tableName.toLowerCase()
+                && sv.userId === this._loggedUserId
+                && sv.id !== this.lastStateKey);
+        });
+    }
+    getLastState(tableName) {
+        return this.getById(tableName, this.lastStateKey);
+    }
+    resetAllIsDefault(tableName) {
+        const savedViews = this.getAll(tableName)();
+        savedViews.forEach(sv => {
+            sv.isDefault = false;
+            this.saveView(sv);
+        });
+    }
+    removeViews(tableName, ...keys) {
+        super.remove(...keys.map(k => this._getUserKey(k, tableName)));
+    }
+    getByName(tableName, name) {
+        const records = this.getAllItems();
+        return records().find(sv => sv.tableName.toLowerCase() === tableName.toLowerCase()
+            && sv.userId === this._loggedUserId
+            && sv.name?.toLowerCase() === name?.toLowerCase()
+            && sv.id !== this.lastStateKey);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SavedViewsStorage, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SavedViewsStorage }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SavedViewsStorage, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class SaveSearchComponent extends BaseModal {
+    constructor() {
+        super(...arguments);
+        this.formGroup = model(new FormGroup({}));
+        this.formRows = [];
+        this.savedViewsStorage = inject(SavedViewsStorage);
+        this.uniqueNameValidator = () => (control) => {
+            const existingRecord = this.savedViewsStorage.getByName(this.data().tableName, control.value);
+            return !!existingRecord
+                ? { nameNotUnique: { errorText: { text: 'UpDevs.Table.SavedViews.NameNotUnique', isTranslated: false } } }
+                // eslint-disable-next-line no-null/no-null
+                : null;
+        };
+    }
+    ngOnInit() {
+        this.formRows = [
+            {
+                fields: [
+                    {
+                        name: 'name',
+                        type: DynamicFieldType.Input,
+                        colSize: { default: 12 },
+                        label: { text: 'UpDevs.Table.SaveSearch.Name', isTranslated: false },
+                        validators: [Validators.required, Validators.minLength(3), this.uniqueNameValidator()],
+                        initValue: this.data().name
+                    }
+                ]
+            },
+            {
+                fields: [
+                    {
+                        name: 'isDefault',
+                        type: DynamicFieldType.Checkbox,
+                        colSize: { default: 6 },
+                        label: { text: 'UpDevs.Table.SaveSearch.IsDefault', isTranslated: false },
+                        hint: { text: 'UpDevs.Table.SaveSearch.IsDefaultHint', isTranslated: false },
+                        hintAsTooltip: true,
+                        initValue: this.data().isDefault || false
+                    }
+                ]
+            }
+        ];
+    }
+    cancel() {
+        this.modalRef().close();
+    }
+    save() {
+        const formValue = this.formGroup().value;
+        const data = { ...this.data(), name: formValue.name, isDefault: formValue.isDefault };
+        if (data.isDefault) {
+            this.savedViewsStorage.resetAllIsDefault(this.data().tableName);
+        }
+        this.savedViewsStorage.saveView(data);
+        this.modalRef().close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SaveSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.0", type: SaveSearchComponent, selector: "upd-save-search", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formGroup: "formGroupChange" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table.SaveSearch'\">\n    <div class=\"modal-header\">\n        <h5 class=\"modal-title\">{{ t('Title') }}</h5>\n    </div>\n    <div class=\"modal-body py-4\">\n        <upd-form [rows]=\"formRows\" [hasActionsSection]=\"false\" [(formGroup)]=\"formGroup\"></upd-form>\n    </div>\n    <div class=\"modal-footer\">\n        <upd-button colorStyle=\"secondary\" [isLink]=\"true\" (clicked)=\"cancel()\">\n            {{ t('Cancel') }}\n        </upd-button>\n        <upd-button colorStyle=\"primary\" [iconModel]=\"{tablerIcon:'device-floppy'}\" (clicked)=\"save()\" [isDisabled]=\"!formGroup().valid\">\n            {{ t('Save') }}\n        </upd-button>\n    </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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: i3$1.FormComponent, selector: "upd-form", inputs: ["rows", "layout", "title", "hasActionsSection", "isCard", "isDisabled", "isLoading", "isSaving", "formData", "formGroup"], outputs: ["initialized", "dataLoaded", "submitted", "formDataChange", "formGroupChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SaveSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-save-search', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table.SaveSearch'\">\n    <div class=\"modal-header\">\n        <h5 class=\"modal-title\">{{ t('Title') }}</h5>\n    </div>\n    <div class=\"modal-body py-4\">\n        <upd-form [rows]=\"formRows\" [hasActionsSection]=\"false\" [(formGroup)]=\"formGroup\"></upd-form>\n    </div>\n    <div class=\"modal-footer\">\n        <upd-button colorStyle=\"secondary\" [isLink]=\"true\" (clicked)=\"cancel()\">\n            {{ t('Cancel') }}\n        </upd-button>\n        <upd-button colorStyle=\"primary\" [iconModel]=\"{tablerIcon:'device-floppy'}\" (clicked)=\"save()\" [isDisabled]=\"!formGroup().valid\">\n            {{ t('Save') }}\n        </upd-button>\n    </div>\n</ng-container>\n" }]
+        }] });
+
+class FilterTools {
+    static convertToFilterItem(filters, operands) {
+        return filters.map(f => ({
+            name: f.column,
+            value: f.value,
+            operandConfig: operands[f.dataType].find(op => op.operand === f.operand)
+        }));
+    }
+    static convertToRequestFilter(filters, columns) {
+        return filters.map(af => {
+            const col = columns.find(c => c.name === af.name);
+            switch (col?.dataType) {
+                case DataTypeEnum.Boolean:
+                    return new BooleanColumnFilter({
+                        column: af.name,
+                        value: af.value,
+                        operand: !!af.operandConfig ? af.operandConfig.operand : undefined
+                    });
+                case DataTypeEnum.Date:
+                    return new DateColumnFilter({
+                        column: af.name,
+                        value: af.value,
+                        operand: !!af.operandConfig ? af.operandConfig.operand : undefined
+                    });
+                case DataTypeEnum.Number:
+                    return new NumberColumnFilter({
+                        column: af.name,
+                        value: af.value,
+                        operand: !!af.operandConfig ? af.operandConfig.operand : undefined
+                    });
+                case DataTypeEnum.Guid:
+                    return new GuidColumnFilter({
+                        column: af.name,
+                        value: af.value,
+                        operand: !!af.operandConfig ? af.operandConfig.operand : undefined
+                    });
+                default:
+                    return new StringColumnFilter({
+                        column: af.name,
+                        value: af.value,
+                        operand: !!af.operandConfig ? af.operandConfig.operand : undefined
+                    });
+            }
+        });
+    }
+}
+
+/**
+ * Table constants.
+ */
+class TableConstants {
+    /**
+     * Key to inject the default configuration.
+     */
+    static { this.defaultOptionsKey = 'upd-table-default-options'; }
+    /**
+     * Injection token for the default configuration.
+     */
+    static { this.defaultOptionsInjectionToken = new InjectionToken(TableConstants.defaultOptionsKey); }
+}
+
+class UpdTableConfigModel {
+    constructor(init) {
+        this.shouldLoadFieldsFromServer = false;
+        if (!!init) {
+            Object.assign(this, init);
+        }
+    }
+}
+
+class UpdTableConfigService {
+    constructor(layoutConfig) {
+        this.config = new UpdTableConfigModel(layoutConfig);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdTableConfigService, deps: [{ token: TableConstants.defaultOptionsInjectionToken }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdTableConfigService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdTableConfigService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TableConstants.defaultOptionsInjectionToken]
+                }] }] });
+
+class FilterRowComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.wrapperClasses = 'd-flex gap-2';
+        this.removed = new EventEmitter();
+        this.DataTypeEnum = DataTypeEnum;
+        this.activeFilters = model.required();
+        this.rowIndex = input.required();
+        this.columns = input.required();
+        this.isDisabled = input.required();
+        this.store = input();
+        this.currentFilter = input();
+        this.currentField = signal(undefined);
+        this.currentOperand = signal(undefined);
+        this.fieldsOptions = signal([]);
+        this.comparisonOperatorOptions = signal([]);
+        this.isValueSectionEnabled = signal(true);
+        this.currentOperands = [];
+        this.configService = inject(UpdTableConfigService);
+        this.filtersOperandsService = inject(FiltersOperandsService);
+        this.textService = inject(TextService);
+    }
+    get fieldType() {
+        return this.currentField()?.objectData || DataTypeEnum.String;
+    }
+    get selectedField() {
+        const currentFilter = this.currentFilter();
+        return !!currentFilter?.name
+            ? this.fieldsOptions().find(f => f.value === currentFilter.name)
+            : undefined;
+    }
+    get selectedOperand() {
+        const currentFilter = this.currentFilter();
+        return !!currentFilter?.name
+            ? this.comparisonOperatorOptions().find(co => co.value === currentFilter.operandConfig?.operand)
+            : undefined;
+    }
+    get selectedValue() {
+        const currentFilter = this.currentFilter();
+        return !!currentFilter?.name ? currentFilter.value : undefined;
+    }
+    ngOnInit() {
+        if (!!this.store() && this.configService.config.shouldLoadFieldsFromServer) {
+            this.store().getFilterableFields().subscribe(fields => this.fieldsOptions.set(fields.map(f => ({ value: f.name, text: f.description, objectData: f.type }))));
+        }
+        else {
+            this.fieldsOptions.set(this.columns().filter(c => !!c.title).map(c => ({ value: c.name, text: this.textService.getText(c.title), objectData: c.dataType })));
+        }
+        if (!!this.selectedField) {
+            if (!!this.selectedOperand) {
+                this.onSelectOperand(this.selectedOperand);
+            }
+            this.onSelectField(this.selectedField);
+        }
+    }
+    onSelectField(item) {
+        this.currentField.set(item);
+        const dataType = item?.objectData;
+        if (!!dataType) {
+            this.currentOperands = this.filtersOperandsService.getOperands(dataType);
+            this.comparisonOperatorOptions.set(this.currentOperands.map(o => ({ value: o.operand, text: this.textService.getText(o.text), listItem: { icon: o.icon } })));
+        }
+        else {
+            this.comparisonOperatorOptions.set([]);
+        }
+        this.activeFilters.update(curr => {
+            curr[this.rowIndex()].name = this.currentField()?.value;
+            return [...curr];
+        });
+    }
+    onSelectOperand(item) {
+        this.currentOperand.set(this.currentOperands.find(co => co.operand === item?.value));
+        this.isValueSectionEnabled.set(!!this.currentOperand()?.requiresValue);
+        this.activeFilters.update(curr => {
+            curr[this.rowIndex()].operandConfig = this.currentOperand();
+            return [...curr];
+        });
+    }
+    updateValue(value) {
+        this.activeFilters.update(curr => {
+            curr[this.rowIndex()].value = value;
+            return [...curr];
+        });
+    }
+    removeFilterItem() {
+        this.activeFilters.update(curr => {
+            curr.splice(this.rowIndex(), 1);
+            return [...curr];
+        });
+        this.removed.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FilterRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: FilterRowComponent, selector: "upd-filter-row", inputs: { activeFilters: { classPropertyName: "activeFilters", publicName: "activeFilters", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: true, transformFunction: null }, store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, currentFilter: { classPropertyName: "currentFilter", publicName: "currentFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed", activeFilters: "activeFiltersChange" }, host: { properties: { "class": "this.wrapperClasses" } }, usesInheritance: true, ngImport: i0, template: "<upd-select class=\"w-100\" [isDisabled]=\"isDisabled()\" [items]=\"fieldsOptions()\" (selectedItem)=\"onSelectField($event)\"\n    [selected]=\"selectedField\">\n</upd-select>\n<upd-select class=\"w-100\" [isDisabled]=\"isDisabled()\" [items]=\"comparisonOperatorOptions()\" (selectedItem)=\"onSelectOperand($event)\"\n    [selected]=\"selectedOperand\">\n</upd-select>\n\n@if (isValueSectionEnabled()) {\n    @switch (fieldType) {\n        @case (DataTypeEnum.Number) {\n            <upd-input wrapperClasses=\"w-100\" customClasses=\"h-100\" type=\"number\" (valueChange)=\"updateValue($event)\"\n                [value]=\"selectedValue\"></upd-input>\n        }\n        @case (DataTypeEnum.Date) {\n\n        }\n        @default {\n            <upd-input wrapperClasses=\"w-100\" customClasses=\"h-100\" type=\"text\" (valueChange)=\"updateValue($event)\"\n                [value]=\"selectedValue\"></upd-input>\n        }\n    }\n} @else {\n    <div class=\"w-100\">\n        <input type=\"text\" class=\"form-control h-100\" disabled>\n    </div>\n}\n\n<upd-button class=\"flex-shrink-1\" colorStyle=\"danger\" [isDisabled]=\"isDisabled()\" [isOutline]=\"true\" [isIcon]=\"true\"\n    [iconModel]=\"{tablerIcon:'x'}\" (clicked)=\"removeFilterItem()\"></upd-button>\n", styles: [""], dependencies: [{ 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.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "maxLength", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }, { kind: "component", type: i3$2.SelectComponent, selector: "upd-select", inputs: ["useSystemStyle", "shouldShowClearButton", "shouldTruncateSelectedText", "isCompact", "selected"], outputs: ["selectedItem"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FilterRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-filter-row', template: "<upd-select class=\"w-100\" [isDisabled]=\"isDisabled()\" [items]=\"fieldsOptions()\" (selectedItem)=\"onSelectField($event)\"\n    [selected]=\"selectedField\">\n</upd-select>\n<upd-select class=\"w-100\" [isDisabled]=\"isDisabled()\" [items]=\"comparisonOperatorOptions()\" (selectedItem)=\"onSelectOperand($event)\"\n    [selected]=\"selectedOperand\">\n</upd-select>\n\n@if (isValueSectionEnabled()) {\n    @switch (fieldType) {\n        @case (DataTypeEnum.Number) {\n            <upd-input wrapperClasses=\"w-100\" customClasses=\"h-100\" type=\"number\" (valueChange)=\"updateValue($event)\"\n                [value]=\"selectedValue\"></upd-input>\n        }\n        @case (DataTypeEnum.Date) {\n\n        }\n        @default {\n            <upd-input wrapperClasses=\"w-100\" customClasses=\"h-100\" type=\"text\" (valueChange)=\"updateValue($event)\"\n                [value]=\"selectedValue\"></upd-input>\n        }\n    }\n} @else {\n    <div class=\"w-100\">\n        <input type=\"text\" class=\"form-control h-100\" disabled>\n    </div>\n}\n\n<upd-button class=\"flex-shrink-1\" colorStyle=\"danger\" [isDisabled]=\"isDisabled()\" [isOutline]=\"true\" [isIcon]=\"true\"\n    [iconModel]=\"{tablerIcon:'x'}\" (clicked)=\"removeFilterItem()\"></upd-button>\n" }]
+        }], propDecorators: { wrapperClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], removed: [{
+                type: Output
+            }] } });
+
+class SearchSectionComponent extends BaseComponent {
+    constructor() {
+        super();
+        this.wrapperClass = 'card-body border-bottom py-3 d-flex flex-column gap-2';
+        this.searchRequest = model.required();
+        this.hasChanges = model.required();
+        this.columns = input.required();
+        this.isSearching = input.required();
+        this.searchRequestSubject = input.required();
+        this.config = input.required();
+        this.actionsTpl = input();
+        this.activeFilters = signal([]);
+        this.isFilterSectionOpen = signal(false);
+        this.canApplyFilters = computed(() => this.activeFilters().length > 0
+            && this.activeFilters().every(af => !!af.name && !!af.operandConfig?.operand && (!af.operandConfig?.requiresValue || !!af.value)));
+        this.canPerformActions = computed(() => this.canApplyFilters() && !this.isSearching());
+        this.badgeConfig = computed(() => (this.searchRequest().filters?.length || 0) > 0
+            ? ({
+                isNotification: true,
+                isPill: true,
+                bgColor: 'primary-lt',
+                text: { text: this.searchRequest().filters.length.toString(), isTranslated: true }
+            })
+            : undefined);
+        this.filterSectionBtnColor = computed(() => this.isFilterSectionOpen() ? 'primary' : undefined);
+        this.searchSubject = new Subject();
+        this.filtersOperandsService = inject(FiltersOperandsService);
+        effect(() => {
+            if ((this.searchRequest().filters?.length || 0) > 0) {
+                this.activeFilters.set([...FilterTools.convertToFilterItem(this.searchRequest().filters || [], this.filtersOperandsService.getAllOperands())]);
+            }
+            else {
+                this.activeFilters.set([]);
+                this.isFilterSectionOpen.set(false);
+            }
+        }, { allowSignalWrites: true });
+    }
+    ngOnInit() {
+        const searchSub = this.searchSubject
+            .pipe(distinctUntilChanged(), debounceTime(this.config().searchInputDebounceTime))
+            .subscribe(term => this.searchRequestSubject().next({
+            ...this.searchRequest(),
+            description: term
+        }));
+        this.addSubscriptions(searchSub);
+    }
+    search() {
+        this.searchRequestSubject().next({
+            ...this.searchRequest(),
+            filters: FilterTools.convertToRequestFilter(this.activeFilters(), this.config().columns)
+        });
+    }
+    toggleFilterSection() {
+        if (this.activeFilters().length === 0) {
+            this.addEmptyFilterRow();
+        }
+        this.isFilterSectionOpen.update(isOpen => !isOpen);
+    }
+    onRowRemoved() {
+        if (this.activeFilters().length === 0) {
+            this.isFilterSectionOpen.set(false);
+        }
+        this.search();
+    }
+    addEmptyFilterRow() {
+        this.activeFilters.update(curr => {
+            curr.push({});
+            return [...curr];
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SearchSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SearchSectionComponent, selector: "upd-search-section", inputs: { searchRequest: { classPropertyName: "searchRequest", publicName: "searchRequest", isSignal: true, isRequired: true, transformFunction: null }, hasChanges: { classPropertyName: "hasChanges", publicName: "hasChanges", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, isSearching: { classPropertyName: "isSearching", publicName: "isSearching", isSignal: true, isRequired: true, transformFunction: null }, searchRequestSubject: { classPropertyName: "searchRequestSubject", publicName: "searchRequestSubject", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, actionsTpl: { classPropertyName: "actionsTpl", publicName: "actionsTpl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchRequest: "searchRequestChange", hasChanges: "hasChangesChange" }, host: { properties: { "class": "this.wrapperClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n    @if (!!actionsTpl()) {\n        <ng-template [ngTemplateOutlet]=\"actionsTpl()!\"></ng-template>\n    }\n\n    <div class=\"d-flex align-items-center gap-2\">\n        <upd-input wrapperClasses=\"w-100\" [placeholder]=\"{text:'UpDevs.Table.Search', isTranslated:false}\" [isAppendButton]=\"true\"\n            (valueChange)=\"searchSubject.next($event)\" [value]=\"searchRequest().description\">\n            <ng-template updInputAppend>\n                <upd-button [isIcon]=\"true\" [colorStyle]=\"filterSectionBtnColor()\" (clicked)=\"toggleFilterSection()\"\n                    [badgeConfig]=\"badgeConfig()\">\n                    <upd-icon [tablerIcon]=\"isFilterSectionOpen() ? 'filter-up' : 'filter-down'\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            </ng-template>\n        </upd-input>\n    </div>\n\n    @if (isFilterSectionOpen()) {\n        @for (row of activeFilters(); track row; let i = $index) {\n            <upd-filter-row [store]=\"config().store\" [currentFilter]=\"row\" [(activeFilters)]=\"activeFilters\" [columns]=\"columns()\"\n                [rowIndex]=\"i\" (removed)=\"onRowRemoved()\" [isDisabled]=\"isSearching()\">\n            </upd-filter-row>\n        }\n\n        <div class=\"ms-auto d-flex gap-2\">\n            <upd-button customClasses=\"gap-2\" colorStyle=\"primary\" [isOutline]=\"true\" (clicked)=\"addEmptyFilterRow()\"\n                [isDisabled]=\"!canPerformActions()\">\n                <upd-icon tablerIcon=\"plus\" tablerIconWeight=\"bold\" [tablerIconSize]=\"20\"></upd-icon>\n                {{ t('AddNewFilter') }}\n            </upd-button>\n            <upd-button customClasses=\"gap-2\" colorStyle=\"success\" [isDisabled]=\"!canPerformActions()\" (clicked)=\"search()\">\n                <upd-icon tablerIcon=\"checks\" tablerIconWeight=\"bold\" [tablerIconSize]=\"20\"></upd-icon>\n                {{ t('ApplyFilters') }}\n            </upd-button>\n        </div>\n    }\n</ng-container>\n", styles: [""], dependencies: [{ 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.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "maxLength", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }, { kind: "directive", type: i5.InputAppendDirective, selector: "ng-template[updInputAppend]" }, { kind: "component", type: FilterRowComponent, selector: "upd-filter-row", inputs: ["activeFilters", "rowIndex", "columns", "isDisabled", "store", "currentFilter"], outputs: ["removed", "activeFiltersChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SearchSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'upd-search-section', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n    @if (!!actionsTpl()) {\n        <ng-template [ngTemplateOutlet]=\"actionsTpl()!\"></ng-template>\n    }\n\n    <div class=\"d-flex align-items-center gap-2\">\n        <upd-input wrapperClasses=\"w-100\" [placeholder]=\"{text:'UpDevs.Table.Search', isTranslated:false}\" [isAppendButton]=\"true\"\n            (valueChange)=\"searchSubject.next($event)\" [value]=\"searchRequest().description\">\n            <ng-template updInputAppend>\n                <upd-button [isIcon]=\"true\" [colorStyle]=\"filterSectionBtnColor()\" (clicked)=\"toggleFilterSection()\"\n                    [badgeConfig]=\"badgeConfig()\">\n                    <upd-icon [tablerIcon]=\"isFilterSectionOpen() ? 'filter-up' : 'filter-down'\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            </ng-template>\n        </upd-input>\n    </div>\n\n    @if (isFilterSectionOpen()) {\n        @for (row of activeFilters(); track row; let i = $index) {\n            <upd-filter-row [store]=\"config().store\" [currentFilter]=\"row\" [(activeFilters)]=\"activeFilters\" [columns]=\"columns()\"\n                [rowIndex]=\"i\" (removed)=\"onRowRemoved()\" [isDisabled]=\"isSearching()\">\n            </upd-filter-row>\n        }\n\n        <div class=\"ms-auto d-flex gap-2\">\n            <upd-button customClasses=\"gap-2\" colorStyle=\"primary\" [isOutline]=\"true\" (clicked)=\"addEmptyFilterRow()\"\n                [isDisabled]=\"!canPerformActions()\">\n                <upd-icon tablerIcon=\"plus\" tablerIconWeight=\"bold\" [tablerIconSize]=\"20\"></upd-icon>\n                {{ t('AddNewFilter') }}\n            </upd-button>\n            <upd-button customClasses=\"gap-2\" colorStyle=\"success\" [isDisabled]=\"!canPerformActions()\" (clicked)=\"search()\">\n                <upd-icon tablerIcon=\"checks\" tablerIconWeight=\"bold\" [tablerIconSize]=\"20\"></upd-icon>\n                {{ t('ApplyFilters') }}\n            </upd-button>\n        </div>\n    }\n</ng-container>\n" }]
+        }], ctorParameters: () => [], propDecorators: { wrapperClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+var Utils = Tools.Utils;
+class TableComponent extends BaseComponent {
+    get numberOfColumns() {
+        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);
+    }
+    get pendingWidthColClass() {
+        if (!this.hasWidth || this.isWidthInPixels) {
+            return '';
+        }
+        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() {
+        return this.columns().some(rec => !!rec.width?.pixels);
+    }
+    get isRemote() {
+        return !!this.configModel().store;
+    }
+    get store() {
+        return this.configModel().store;
+    }
+    constructor() {
+        super();
+        this.savedViewsRef = viewChild('savedViewsBtn', { read: ElementRef });
+        this.config = model.required();
+        this.isSearching = signal(false);
+        this.selectedItems = computed(() => this.selectionModel().selected());
+        this.activeSavedView = signal(undefined);
+        this.isMainCheckboxChecked = false;
+        this.isMainCheckboxIndeterminate = false;
+        this.isSavedViewsDropdownOpen = false;
+        this.searchRequest = model({});
+        this.activeFilters = model([]);
+        this.currentPage = model(1);
+        this.pageSize = model(0);
+        this.hasSearchChanged = signal(false);
+        this.totalRecords = signal(0);
+        this.configModel = computed(() => new TableConfigModel(this.config()));
+        this.data = computed(() => this.configModel().data.length > 0 ? this.configModel().data : this.currentData());
+        this.selectionModel = computed(() => new SelectionModel(this.configModel().getIdFunction));
+        this.currentSorting = signal(undefined);
+        this.hiddenColumns = computed(() => this.configModel().canManageColumns ? this.configModel().columns.filter(c => c.isHidden).length : 0);
+        this.columns = signal([]);
+        this.searchRequestSubject = new Subject();
+        this.textService = inject(TextService);
+        this.savedViewsOptions = computed(() => {
+            const allSavedViewsOptions = [];
+            this.allSavedViews().forEach(sv => allSavedViewsOptions.push(this.getSavedViewOption(sv)));
+            return allSavedViewsOptions;
+        });
+        this.shouldForceSearch = false;
+        this.columnsBackup = [];
+        this.currentData = signal([]);
+        this.currentFavoriteButtons = computed(() => this.favoriteButtons);
+        this.smallSizeSignal = signal('small');
+        this.allSavedViews = computed(() => this.savedViewsStorage.getAll(this.configModel().name)());
+        this.favoriteButtons = [];
+        this.serverResponseService = inject(ServerResponseService);
+        this.savedViewsStorage = inject(SavedViewsStorage);
+        this.modalService = inject(ModalService);
+        this.modalAlertService = inject(ModalAlertService);
+        effect(() => {
+            if (this.data().length > 0 && this.configModel().data.length > 0) {
+                this.setupPreSelected();
+            }
+            if (this.selectedItems().length > 0) {
+                if (this.selectedItems().length !== this.data().length) {
+                    this.isMainCheckboxChecked = false;
+                    this.isMainCheckboxIndeterminate = true;
+                }
+                else {
+                    this.isMainCheckboxIndeterminate = false;
+                    this.isMainCheckboxChecked = true;
+                }
+            }
+            else {
+                this.isMainCheckboxChecked = false;
+                this.isMainCheckboxIndeterminate = false;
+            }
+        });
+    }
+    ngOnInit() {
+        this.columnsBackup = [...this.config().columns];
+        const searchSubjectSub = this.searchRequestSubject
+            .pipe(distinctUntilChanged((prev, curr) => !this.shouldForceSearch ? Utils.areEqual(prev, curr) : false), tap((request) => {
+            this.isSearching.set(true);
+            this.currentData.set([]);
+            this.searchRequest.set(request);
+            if ((request.filters?.length || 0) > 0
+                || (request.description || '').length > 0
+                || (request.sortings?.length || 0) > 0) {
+                this.hasSearchChanged.set(true);
+            }
+        }), switchMap(() => this.store.search(this.searchRequest()).pipe(catchError(() => of()) // Already handled by the ServerResponseService.
+        )), finalize(() => this.shouldForceSearch = false))
+            .subscribe(resp => this.setupSearchResults(resp));
+        const serverResponseSub = this.serverResponseService.onError.subscribe(error => {
+            if (!!error) {
+                this.isSearching.set(false);
+            }
+        });
+        if (this.configModel().shouldAutoSearch && this.isRemote) {
+            this.shouldForceSearch = true;
+            this.searchRequestSubject.next({});
+        }
+        this.updateColumns(this.configModel().columns);
+        this.addSubscriptions(searchSubjectSub, serverResponseSub);
+    }
+    toggleAllSelection(isChecked) {
+        if (isChecked) {
+            this.selectionModel().select(...this.currentData());
+        }
+        else {
+            this.selectionModel().clearSelection();
+        }
+    }
+    toggleItemSelection(record) {
+        if (this.selectionModel().isSelected(record)) {
+            this.selectionModel().deselect(record);
+        }
+        else {
+            this.selectionModel().select(record);
+        }
+    }
+    canSortColumn(columnName) {
+        return this.getColumnByName(columnName).allowSort;
+    }
+    sortByColumn(columnName) {
+        const currentSort = this.currentSorting();
+        const nextDirection = (currentSort?.column === columnName && currentSort.direction === SortDirectionEnum.Asc)
+            ? SortDirectionEnum.Desc
+            : SortDirectionEnum.Asc;
+        this.currentSorting.set(new ColumnSort({
+            column: columnName,
+            direction: nextDirection
+        }));
+        if (this.isRemote) {
+            this.searchRequest.set({
+                ...this.searchRequest(),
+                sortings: [this.currentSorting()]
+            });
+            this.searchRequestSubject.next(this.searchRequest());
+        }
+        else {
+            const col = this.getColumnByName(columnName);
+            // TODO: local sort
+        }
+    }
+    getSortingIcon(columnName) {
+        return !!this.currentSorting() && this.currentSorting().column === columnName
+            ? (this.currentSorting().direction === SortDirectionEnum.Asc ? 'sort-ascending' : 'sort-descending')
+            : 'arrows-sort';
+    }
+    onPageSettingsChanged() {
+        this.searchRequest.set({
+            ...this.searchRequest(),
+            pageSize: this.pageSize(),
+            pageIndex: this.currentPage()
+        });
+        this.searchRequestSubject.next(this.searchRequest());
+    }
+    getRecordId(record) {
+        return this.configModel().getIdFunction(record);
+    }
+    openColumnsManagerModal() {
+        const ref = this.modalService.open(undefined, {
+            bodyContentType: ColumnsManagerComponent,
+            showCloseButton: false,
+            showCancelButton: true,
+            data: this.config(),
+            isTextCentered: false,
+            actionButtons: [
+                new ButtonModel({
+                    text: signal({ text: 'UpDevs.Table.ColumnsManager.Apply', isTranslated: false }),
+                    colorStyle: signal('primary'),
+                    iconModel: signal({ tablerIcon: 'checks' }),
+                    clickFunction: () => ref.close()
+                })
+            ]
+        });
+        ref.afterClose = () => {
+            const result = ref.getBodyInstance()?.columns();
+            if (!!result) {
+                const previousVisibleColumnsOrder = this.columns().map(c => c.name);
+                const visibleColumnsNames = result.find(c => c.name === 'visible')?.items().map(i => i.name) || [];
+                const newColumns = [];
+                this.config.update(config => {
+                    visibleColumnsNames.forEach(name => {
+                        const col = config.columns.find(c => c.name === name);
+                        col.isHidden = false;
+                        newColumns.push(col);
+                    });
+                    config.columns.forEach(c => {
+                        if (!visibleColumnsNames.includes(c.name)) {
+                            c.isHidden = true;
+                            newColumns.push(c);
+                        }
+                    });
+                    return { ...config, columns: [...newColumns] };
+                });
+                this.updateColumns(newColumns);
+                const newVisibleColumnsOrder = newColumns.map(c => c.name);
+                if (previousVisibleColumnsOrder.length !== newVisibleColumnsOrder.length
+                    || !previousVisibleColumnsOrder.every((v, i) => v === newVisibleColumnsOrder[i])) {
+                    this.hasSearchChanged.set(true);
+                }
+            }
+        };
+    }
+    openSaveSearchModal(data) {
+        data = data || {
+            tableName: this.configModel().name,
+            request: this.searchRequest(),
+            columns: this.configModel().columns
+        };
+        this.modalService.open(SaveSearchComponent, { showCloseButton: false, data });
+    }
+    selectSavedView(item) {
+        const savedView = this.savedViewsStorage.getById(this.configModel().name, item.id)();
+        this.isSavedViewsDropdownOpen = false;
+        if (!!savedView) {
+            this.updateColumns(savedView.columns);
+            this.config.update(curr => {
+                curr.columns = savedView.columns;
+                return { ...curr };
+            });
+            this.activeSavedView.set(savedView);
+            this.searchRequestSubject.next({ ...savedView.request });
+        }
+    }
+    resetViewState() {
+        this.activeSavedView.set(undefined);
+        this.updateColumns(this.columnsBackup);
+        this.config.update(curr => {
+            curr.columns = this.columnsBackup;
+            return { ...curr };
+        });
+        this.searchRequestSubject.next({});
+    }
+    reload() {
+        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 => this.createColumnModel(c)));
+    }
+    createColumnModel(data) {
+        switch (data.type) {
+            case ColumnTypeEnum.Text:
+                return new TextColumnModel({ ...data });
+            case ColumnTypeEnum.Number:
+                return new NumberColumnModel({ ...data });
+            case ColumnTypeEnum.Boolean:
+                return new BooleanColumnModel({ ...data });
+            case ColumnTypeEnum.DateTime:
+            case ColumnTypeEnum.Date:
+            case ColumnTypeEnum.Time:
+                return new DateTimeColumnModel({ ...data });
+            case ColumnTypeEnum.Image:
+                return new ImageColumnModel({ ...data });
+            case ColumnTypeEnum.Guid:
+                return new GuidColumnModel({ ...data });
+            case ColumnTypeEnum.Masked:
+            case ColumnTypeEnum.Custom:
+            case ColumnTypeEnum.Currency:
+            default:
+                return new BaseColumnModel(data.type, { ...data });
+        }
+    }
+    getColumnByName(columnName) {
+        const col = this.columns().find(c => c.name === columnName);
+        if (!col) {
+            throw Error('Tried accessing non existing column');
+        }
+        return col;
+    }
+    setupPreSelected() {
+        this.configModel().preSelectedItems.forEach(item => {
+            const id = this.getRecordId(item);
+            if (this.data().find(d => this.getRecordId(d) === id) && !this.selectionModel().isSelected(item)) {
+                this.selectionModel().select(item);
+            }
+        });
+    }
+    setupSearchResults(resp) {
+        this.isSearching.set(false);
+        this.currentData.set(resp.records);
+        this.totalRecords.set(resp.totalRecords || 0);
+        this.currentPage.set(resp.pageIndex || 0);
+        this.pageSize.set(resp.pageSize || 0);
+        this.setupPreSelected();
+    }
+    getActionButtons(currentFavoriteButtons, savedView) {
+        return [
+            new ButtonModel({
+                isIcon: signal(true),
+                isGhost: signal(true),
+                colorStyle: signal('primary'),
+                size: this.smallSizeSignal,
+                title: signal({ text: 'UpDevs.Table.SavedViews.MarkAsDefault', isTranslated: false }),
+                isActive: signal(savedView.isDefault || false),
+                iconModel: signal({ tablerIcon: 'heart' }),
+                clickFunction: (evt) => {
+                    const btnModel = evt.data;
+                    const isButtonActive = btnModel.button.isActive();
+                    if (!isButtonActive) {
+                        this.savedViewsStorage.resetAllIsDefault(this.configModel().name);
+                    }
+                    savedView.isDefault = !isButtonActive;
+                    currentFavoriteButtons().forEach(cfb => cfb.isActive.set(false));
+                    btnModel.button.isActive.set(!isButtonActive);
+                    this.savedViewsStorage.saveView(savedView);
+                }
+            }),
+            new ButtonModel({
+                isIcon: signal(true),
+                isGhost: signal(true),
+                colorStyle: signal('secondary'),
+                size: this.smallSizeSignal,
+                title: signal({ text: 'UpDevs.Table.SavedViews.Duplicate', isTranslated: false }),
+                iconModel: signal({ tablerIcon: 'copy' }),
+                clickFunction: () => {
+                    const duplicateView = {
+                        ...savedView,
+                        id: Tools.Guid.generate(),
+                        name: savedView.name +
+                            ` (${this.textService.getText({ text: 'UpDevs.Table.SavedViews.DuplicateSuffix', isTranslated: false })})`
+                    };
+                    this.openSaveSearchModal(duplicateView);
+                }
+            }),
+            new ButtonModel({
+                isIcon: signal(true),
+                isGhost: signal(true),
+                colorStyle: signal('secondary'),
+                size: this.smallSizeSignal,
+                title: signal({ text: 'UpDevs.Table.SavedViews.Edit', isTranslated: false }),
+                iconModel: signal({ tablerIcon: 'edit' }),
+                clickFunction: () => this.openSaveSearchModal(savedView)
+            }),
+            new ButtonModel({
+                isIcon: signal(true),
+                isGhost: signal(true),
+                colorStyle: signal('danger'),
+                size: this.smallSizeSignal,
+                title: signal({ text: 'UpDevs.Table.SavedViews.Remove', isTranslated: false }),
+                iconModel: signal({ tablerIcon: 'x' }),
+                clickFunction: () => {
+                    const title = this.textService.getText({ text: 'UpDevs.Table.SavedViews.ConfirmRemove', isTranslated: false }, { view: savedView.name });
+                    this.modalAlertService.showConfirm({ text: title, isTranslated: true }).subscribe(isConfirmed => {
+                        if (isConfirmed) {
+                            this.savedViewsStorage.removeViews(this.configModel().name, savedView.id);
+                        }
+                    });
+                }
+            })
+        ];
+    }
+    getSavedViewOption(savedView) {
+        const actionButtons = this.getActionButtons(this.currentFavoriteButtons, savedView);
+        this.favoriteButtons.push(actionButtons.find(ab => ab.iconModel?.().tablerIcon === 'heart'));
+        return {
+            id: savedView.id,
+            type: 'with-toolbar',
+            text: { text: savedView.name, isTranslated: true },
+            toolbarType: 'spaced',
+            isActive: this.activeSavedView()?.id === savedView.id,
+            actionButtons
+        };
+    }
+    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().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().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 = {
+	Table: {
+		Search: "Search",
+		NoRecordsFoundTitle: "No records found",
+		NoRecordsFoundSubtitle: "Please, adjust your search terms to find what you're looking for",
+		HiddenColumnsTooltip: "Hidden columns",
+		SaveCurrentView: "Save current view",
+		ApplyFilters: "Apply filters",
+		AddNewFilter: "Add new filter",
+		Loading: "Loading",
+		VisibleColumns: "Visible",
+		HiddenColumns: "Hidden",
+		ColumnTitleNotSet: "Title not set",
+		NoSavedViews: "No saved views",
+		CurrentSavedView: "View currently applied",
+		ColumnsManagerButton: "Columns manager",
+		ResetView: "Reset table state",
+		Filters: {
+			General: {
+				Equals: "Equals",
+				NotEquals: "Different than",
+				IsEmpty: "Is empty",
+				IsNotEmpty: "Is not empty"
+			},
+			"String": {
+				StartsWith: "Starts with",
+				EndsWith: "Ends with",
+				Contains: "Contains",
+				NotContains: "Doesn't contain",
+				In: "In"
+			},
+			"Boolean": {
+				True: "True",
+				False: "False"
+			},
+			DateOrNumber: {
+				GreaterThan: "Greater than",
+				LessThan: "Less than",
+				GreaterThanOrEqualTo: "Greater than or equal to",
+				LessThanOrEqualTo: "Less than or equal to"
+			},
+			"Date": {
+				Between: "Between"
+			},
+			"Number": {
+				In: "In"
+			}
+		},
+		ColumnsManager: {
+			Apply: "Apply"
+		},
+		SaveSearch: {
+			Title: "Save view",
+			Save: "Save",
+			Cancel: "Cancel",
+			Name: "Name",
+			IsDefault: "Is default",
+			IsDefaultHint: "If this option is checked, this view will be loaded by default.",
+			NoSavedViews: "No saved views"
+		},
+		SavedViews: {
+			ButtonTitle: "Saved views",
+			MarkAsDefault: "Mark as default (loads on start)",
+			Duplicate: "Duplicate",
+			DuplicateSuffix: "copy",
+			Edit: "Edit",
+			Remove: "Remove",
+			ConfirmRemove: "Are you sure you would like to remove the view \"{{view}}\"?<br><br><b class='text-danger'>This action can not be undone.</b>",
+			NameNotUnique: "There is already a saved view with that name, please choose another."
+		}
+	}
+};
+var en = {
+	UpDevs: UpDevs$1
+};
+
+var en$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    UpDevs: UpDevs$1,
+    default: en
+});
+
+var UpDevs = {
+	Table: {
+		Search: "Pesquisar",
+		NoRecordsFoundTitle: "Nenhum registro encontrado",
+		NoRecordsFoundSubtitle: "Por favor, ajuste sua pesquisa para encontrar o que você está procurando",
+		HiddenColumnsTooltip: "Colunas ocultas",
+		SaveCurrentView: "Salvar consulta atual",
+		ApplyFilters: "Aplicar filtros",
+		AddNewFilter: "Adicionar novo filtro",
+		Loading: "Carregando",
+		VisibleColumns: "Visíveis",
+		HiddenColumns: "Ocultas",
+		ColumnTitleNotSet: "Título não definido",
+		NoSavedViews: "Nenhuma consulta salva",
+		CurrentSavedView: "Consulta sendo visualizada",
+		ColumnsManagerButton: "Gerenciar colunas",
+		ResetView: "Restaurar a condição tabela",
+		Filters: {
+			General: {
+				Equals: "Igual à",
+				NotEquals: "Diferente de",
+				IsEmpty: "Está vazio",
+				IsNotEmpty: "Não está vazio"
+			},
+			"String": {
+				StartsWith: "Começa com",
+				EndsWith: "Termina com",
+				Contains: "Contém",
+				NotContains: "Não contém",
+				In: "Está em"
+			},
+			"Boolean": {
+				True: "Verdadeiro",
+				False: "Falso"
+			},
+			DateOrNumber: {
+				GreaterThan: "Maior que",
+				LessThan: "Menor que",
+				GreaterThanOrEqualTo: "Maior que ou igual à",
+				LessThanOrEqualTo: "Menor que ou igual à"
+			},
+			"Date": {
+				Between: "Entre"
+			},
+			"Number": {
+				In: "Está em"
+			}
+		},
+		ColumnsManager: {
+			Apply: "Aplicar"
+		},
+		SaveSearch: {
+			Title: "Salvar consulta",
+			Save: "Salvar",
+			Cancel: "Cancelar",
+			Name: "Nome",
+			IsDefault: "É padrão",
+			IsDefaultHint: "Se esta opção estiver marcada, esta consulta será carregada por padrão.",
+			NoSavedViews: "Sem consultas salvas"
+		},
+		SavedViews: {
+			ButtonTitle: "Consultas salvas",
+			MarkAsDefault: "Mark como padrão (carrega automaticamente)",
+			Duplicate: "Duplicar",
+			DuplicateSuffix: "cópia",
+			Edit: "Editar",
+			Remove: "Remover",
+			ConfirmRemove: "Deseja realmente remover a consulta \"{{view}}\"?<br><br><b class='text-danger'>Esta ação não pode ser desfeita.</b>",
+			NameNotUnique: "Já existe uma consulta com esse nome, favor escolher outro."
+		}
+	}
+};
+var pt = {
+	UpDevs: UpDevs
+};
+
+var pt$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    UpDevs: UpDevs,
+    default: pt
+});
+
+class FiltersOperandsStore extends BaseStore {
+    constructor(configService) {
+        super({ baseUrl: configService.config.urlToLoadOperandsFromServer || '' });
+    }
+    load(fieldType) {
+        return this._requestService.makeGet(this.getRequestModel(fieldType.toString()));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FiltersOperandsStore, deps: [{ token: UpdTableConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FiltersOperandsStore }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FiltersOperandsStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: UpdTableConfigService }] });
+
+const translationKey$3 = 'UpDevs.Table.Filters.General';
+class FilterOperandsListConfig {
+    static { this.options = {
+        [FilterOperandEnum.Equals]: {
+            operand: FilterOperandEnum.Equals,
+            text: { text: `${translationKey$3}.Equals`, isTranslated: false },
+            icon: { tablerIcon: 'equal' },
+            requiresValue: true
+        },
+        [FilterOperandEnum.NotEquals]: {
+            operand: FilterOperandEnum.NotEquals,
+            text: { text: `${translationKey$3}.NotEquals`, isTranslated: false },
+            icon: { tablerIcon: 'equal-not' },
+            requiresValue: true
+        },
+        [FilterOperandEnum.IsEmpty]: {
+            operand: FilterOperandEnum.IsEmpty,
+            text: { text: `${translationKey$3}.IsEmpty`, isTranslated: false },
+            icon: { tablerIcon: 'droplet' },
+            requiresValue: false
+        },
+        [FilterOperandEnum.IsNotEmpty]: {
+            operand: FilterOperandEnum.IsNotEmpty,
+            text: { text: `${translationKey$3}.IsNotEmpty`, isTranslated: false },
+            icon: { tablerIcon: 'droplet', tablerIconType: 'solid' },
+            requiresValue: false
+        }
+    }; }
+}
+
+const translationKey$2 = 'UpDevs.Table.Filters.String';
+class StringFilterOperandsListModel {
+    static { this.options = {
+        [FilterOperandEnum.Equals]: FilterOperandsListConfig.options[FilterOperandEnum.Equals],
+        [FilterOperandEnum.NotEquals]: FilterOperandsListConfig.options[FilterOperandEnum.NotEquals],
+        [FilterOperandEnum.StartsWith]: {
+            operand: FilterOperandEnum.StartsWith,
+            text: { text: `${translationKey$2}.StartsWith`, isTranslated: false },
+            icon: { tablerIcon: 'brackets-contain-start' },
+            requiresValue: true
+        },
+        [FilterOperandEnum.EndsWith]: {
+            operand: FilterOperandEnum.EndsWith,
+            text: { text: `${translationKey$2}.EndsWith`, isTranslated: false },
+            icon: { tablerIcon: 'brackets-contain-end' },
+            requiresValue: true
+        },
+        [FilterOperandEnum.Contains]: {
+            operand: FilterOperandEnum.Contains,
+            text: { text: `${translationKey$2}.Contains`, isTranslated: false },
+            icon: { tablerIcon: 'brackets-contain' },
+            requiresValue: true
+        },
+        [FilterOperandEnum.NotContains]: {
+            operand: FilterOperandEnum.NotContains,
+            text: { text: `${translationKey$2}.NotContains`, isTranslated: false },
+            icon: { tablerIcon: 'brackets-off' },
+            requiresValue: true
+        },
+        [FilterOperandEnum.IsEmpty]: FilterOperandsListConfig.options[FilterOperandEnum.IsEmpty],
+        [FilterOperandEnum.IsNotEmpty]: FilterOperandsListConfig.options[FilterOperandEnum.IsNotEmpty],
+        [FilterOperandEnum.In]: {
+            operand: FilterOperandEnum.In,
+            text: { text: `${translationKey$2}.In`, isTranslated: false },
+            icon: { tablerIcon: 'spacing-horizontal' },
+            requiresValue: true
+        }
+    }; }
+    static get optionsAsList() {
+        return (Object.values(this.options) || []);
+    }
+}
+
+const translationKey$1 = 'UpDevs.Table.Filters.DateOrNumber';
+class DateOrNumberOperandsListConfig {
+    static { this.options = {
+        [FilterDateOperandEnum.GreaterThan]: {
+            operand: FilterDateOperandEnum.GreaterThan,
+            text: { text: `${translationKey$1}.GreaterThan`, isTranslated: false },
+            icon: { tablerIcon: 'math-greater' },
+            requiresValue: true
+        },
+        [FilterDateOperandEnum.LessThan]: {
+            operand: FilterDateOperandEnum.LessThan,
+            text: { text: `${translationKey$1}.LessThan`, isTranslated: false },
+            icon: { tablerIcon: 'math-lower' },
+            requiresValue: true
+        },
+        [FilterDateOperandEnum.GreaterThanOrEqualTo]: {
+            operand: FilterDateOperandEnum.GreaterThanOrEqualTo,
+            text: { text: `${translationKey$1}.GreaterThanOrEqualTo`, isTranslated: false },
+            icon: { tablerIcon: 'math-equal-greater' },
+            requiresValue: true
+        },
+        [FilterDateOperandEnum.LessThanOrEqualTo]: {
+            operand: FilterDateOperandEnum.LessThanOrEqualTo,
+            text: { text: `${translationKey$1}.LessThanOrEqualTo`, isTranslated: false },
+            icon: { tablerIcon: 'math-equal-lower' },
+            requiresValue: true
+        }
+    }; }
+}
+
+class NumberFilterOperandsListModel {
+    static { this.options = {
+        [FilterNumberOperandEnum.Equals]: FilterOperandsListConfig.options[FilterOperandEnum.Equals],
+        [FilterNumberOperandEnum.NotEquals]: FilterOperandsListConfig.options[FilterOperandEnum.NotEquals],
+        [FilterNumberOperandEnum.GreaterThan]: DateOrNumberOperandsListConfig.options[FilterDateOperandEnum.GreaterThan],
+        [FilterNumberOperandEnum.LessThan]: DateOrNumberOperandsListConfig.options[FilterDateOperandEnum.LessThan],
+        [FilterNumberOperandEnum.GreaterThanOrEqualTo]: DateOrNumberOperandsListConfig.options[FilterDateOperandEnum.GreaterThanOrEqualTo],
+        [FilterNumberOperandEnum.LessThanOrEqualTo]: DateOrNumberOperandsListConfig.options[FilterDateOperandEnum.LessThanOrEqualTo],
+        [FilterNumberOperandEnum.IsEmpty]: FilterOperandsListConfig.options[FilterOperandEnum.IsEmpty],
+        [FilterNumberOperandEnum.IsNotEmpty]: FilterOperandsListConfig.options[FilterOperandEnum.IsNotEmpty],
+        [FilterNumberOperandEnum.In]: {
+            operand: FilterNumberOperandEnum.In,
+            text: { text: 'UpDevs.Table.Filters.Number.In', isTranslated: false },
+            icon: { tablerIcon: 'spacing-horizontal' },
+            requiresValue: true
+        }
+    }; }
+    static get optionsAsList() {
+        return (Object.values(this.options) || []);
+    }
+}
+
+const translationKey = 'UpDevs.Table.Filters.Boolean';
+class BooleanFilterOperandsListModel {
+    static { this.options = {
+        [FilterBooleanOperandEnum.True]: {
+            operand: FilterBooleanOperandEnum.True,
+            text: { text: `${translationKey}.True`, isTranslated: false },
+            icon: { tablerIcon: 'toggle-right' },
+            requiresValue: false
+        },
+        [FilterBooleanOperandEnum.False]: {
+            operand: FilterBooleanOperandEnum.False,
+            text: { text: `${translationKey}.False`, isTranslated: false },
+            icon: { tablerIcon: 'toggle-left' },
+            requiresValue: false
+        },
+        [FilterBooleanOperandEnum.IsEmpty]: FilterOperandsListConfig.options[FilterOperandEnum.IsEmpty],
+        [FilterBooleanOperandEnum.IsNotEmpty]: FilterOperandsListConfig.options[FilterOperandEnum.IsNotEmpty]
+    }; }
+    static get optionsAsList() {
+        return (Object.values(this.options) || []);
+    }
+}
+
+class DateFilterOperandsListModel {
+    static { this.options = {
+        [FilterDateOperandEnum.Equals]: FilterOperandsListConfig.options[FilterOperandEnum.Equals],
+        [FilterDateOperandEnum.NotEquals]: FilterOperandsListConfig.options[FilterOperandEnum.NotEquals],
+        [FilterDateOperandEnum.GreaterThan]: DateOrNumberOperandsListConfig.options[FilterDateOperandEnum.GreaterThan],
+        [FilterDateOperandEnum.LessThan]: DateOrNumberOperandsListConfig.options[FilterDateOperandEnum.LessThan],
+        [FilterDateOperandEnum.GreaterThanOrEqualTo]: DateOrNumberOperandsListConfig.options[FilterDateOperandEnum.GreaterThanOrEqualTo],
+        [FilterDateOperandEnum.LessThanOrEqualTo]: DateOrNumberOperandsListConfig.options[FilterDateOperandEnum.LessThanOrEqualTo],
+        [FilterDateOperandEnum.IsEmpty]: FilterOperandsListConfig.options[FilterOperandEnum.IsEmpty],
+        [FilterDateOperandEnum.IsNotEmpty]: FilterOperandsListConfig.options[FilterOperandEnum.IsNotEmpty],
+        [FilterDateOperandEnum.Between]: {
+            operand: FilterDateOperandEnum.Between,
+            text: { text: 'UpDevs.Table.Filters.Date.Between', isTranslated: false },
+            icon: { tablerIcon: 'spacing-horizontal' },
+            requiresValue: true
+        }
+    }; }
+    static get optionsAsList() {
+        return (Object.values(this.options) || []);
+    }
+}
+
+class GuidFilterOperandsListModel {
+    static { this.options = {
+        [FilterGuidOperandEnum.Equals]: FilterOperandsListConfig.options[FilterOperandEnum.Equals],
+        [FilterGuidOperandEnum.NotEquals]: FilterOperandsListConfig.options[FilterOperandEnum.NotEquals],
+        [FilterGuidOperandEnum.IsEmpty]: FilterOperandsListConfig.options[FilterOperandEnum.IsEmpty],
+        [FilterGuidOperandEnum.IsNotEmpty]: FilterOperandsListConfig.options[FilterOperandEnum.IsNotEmpty],
+        [FilterGuidOperandEnum.In]: StringFilterOperandsListModel.options[FilterOperandEnum.In]
+    }; }
+    static get optionsAsList() {
+        return (Object.values(this.options) || []);
+    }
+}
+
+class DefaultFiltersOperandsService extends FiltersOperandsService {
+    get isLoaded() {
+        return this._isLoaded;
+    }
+    constructor() {
+        super();
+        this._isLoaded = false;
+        this.configService = inject(UpdTableConfigService);
+        this.filterOperandsStore = inject(FiltersOperandsStore);
+        this.cachedData = {};
+        if (!!this.configService.config.urlToLoadOperandsFromServer) {
+            forkJoin({
+                guidOps: this.filterOperandsStore.load(DataTypeEnum.Guid),
+                stringOps: this.filterOperandsStore.load(DataTypeEnum.String),
+                numberOps: this.filterOperandsStore.load(DataTypeEnum.Number),
+                dateOps: this.filterOperandsStore.load(DataTypeEnum.Date),
+                booleanOps: this.filterOperandsStore.load(DataTypeEnum.Boolean)
+            }).subscribe(resp => {
+                this.cachedData[DataTypeEnum.Guid] = resp.guidOps;
+                this.cachedData[DataTypeEnum.String] = resp.stringOps;
+                this.cachedData[DataTypeEnum.Number] = resp.numberOps;
+                this.cachedData[DataTypeEnum.Date] = resp.dateOps;
+                this.cachedData[DataTypeEnum.Boolean] = resp.booleanOps;
+                this._isLoaded = true;
+            });
+        }
+        else {
+            this.cachedData[DataTypeEnum.Guid] = GuidFilterOperandsListModel.optionsAsList;
+            this.cachedData[DataTypeEnum.String] = StringFilterOperandsListModel.optionsAsList;
+            this.cachedData[DataTypeEnum.Number] = NumberFilterOperandsListModel.optionsAsList;
+            this.cachedData[DataTypeEnum.Date] = DateFilterOperandsListModel.optionsAsList;
+            this.cachedData[DataTypeEnum.Boolean] = BooleanFilterOperandsListModel.optionsAsList;
+            this._isLoaded = true;
+        }
+    }
+    getOperands(type) {
+        return this._isLoaded ? this.cachedData[type] : [];
+    }
+    getAllOperands() {
+        return this.cachedData;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DefaultFiltersOperandsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DefaultFiltersOperandsService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DefaultFiltersOperandsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class UpdTableModule {
+    constructor(translocoService) {
+        translocoService.setFallbackLangForMissingTranslation({ fallbackLang: 'en' });
+        translocoService.setTranslation(en$1, 'en');
+        translocoService.setTranslation(pt$1, 'pt');
+    }
+    /**
+     * Sets up the table module with the provided configuration.
+     * @param config Configuration.
+     */
+    static forRoot(config) {
+        const customizableProviders = [
+            config.filtersOperandsService || {
+                provide: FiltersOperandsService,
+                useClass: DefaultFiltersOperandsService
+            }
+        ];
+        return {
+            ngModule: UpdTableModule,
+            providers: [
+                { provide: TableConstants.defaultOptionsInjectionToken, useValue: config },
+                ...customizableProviders
+            ]
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdTableModule, deps: [{ token: i1$1.TranslocoService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: UpdTableModule, declarations: [TableComponent,
+            SearchSectionComponent,
+            FilterRowComponent,
+            TableColumnDirective,
+            NumberColumnComponent,
+            DateTimeColumnComponent,
+            BooleanColumnComponent,
+            TextColumnComponent,
+            ColumnsManagerComponent,
+            SaveSearchComponent], imports: [CommonModule,
+            TranslocoDirective,
+            UpdIconsModule,
+            UpdButtonModule,
+            UpdModalModule,
+            UpdPaginatorModule,
+            UpdInputModule,
+            UpdCheckboxModule,
+            UpdSelectModule,
+            UpdDragAndDropModule,
+            UpdFormModule,
+            UpdDropdownModule,
+            UpdTimePickerModule,
+            UpdBadgeModule,
+            UpdPopoverModule], exports: [TableComponent,
+            TableColumnDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdTableModule, providers: [
+            UpdTableConfigService,
+            FiltersOperandsStore,
+            SavedViewsStorage
+        ], imports: [CommonModule,
+            UpdIconsModule,
+            UpdButtonModule,
+            UpdModalModule,
+            UpdPaginatorModule,
+            UpdInputModule,
+            UpdCheckboxModule,
+            UpdSelectModule,
+            UpdDragAndDropModule,
+            UpdFormModule,
+            UpdDropdownModule,
+            UpdTimePickerModule,
+            UpdBadgeModule,
+            UpdPopoverModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        TranslocoDirective,
+                        UpdIconsModule,
+                        UpdButtonModule,
+                        UpdModalModule,
+                        UpdPaginatorModule,
+                        UpdInputModule,
+                        UpdCheckboxModule,
+                        UpdSelectModule,
+                        UpdDragAndDropModule,
+                        UpdFormModule,
+                        UpdDropdownModule,
+                        UpdTimePickerModule,
+                        UpdBadgeModule,
+                        UpdPopoverModule
+                    ],
+                    declarations: [
+                        TableComponent,
+                        SearchSectionComponent,
+                        FilterRowComponent,
+                        TableColumnDirective,
+                        NumberColumnComponent,
+                        DateTimeColumnComponent,
+                        BooleanColumnComponent,
+                        TextColumnComponent,
+                        ColumnsManagerComponent,
+                        SaveSearchComponent
+                    ],
+                    exports: [
+                        TableComponent,
+                        TableColumnDirective
+                    ],
+                    providers: [
+                        UpdTableConfigService,
+                        FiltersOperandsStore,
+                        SavedViewsStorage
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: i1$1.TranslocoService }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BaseColumnModel, BooleanColumnModel, ColumnTypeEnum, DateTimeColumnModel, FiltersOperandsService, GuidColumnModel, ImageColumnModel, NumberColumnModel, TableColumnDirective, TableComponent, TextColumnModel, UpdTableModule };
+//# sourceMappingURL=updevs-components-table.mjs.map