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

package/table/src/components/columns/boolean-column/boolean-column.component.html

@@ -0,0 +1,15 @@
+<div [ngClass]="getClasses()">
+    @switch (config.displayType) {
+        @case ('text') {
+            {{ prefix }}{{ prefixSpace }}{{ !!value ? textService.getText(config.trueText) : textService.getText(config.falseText) }}{{ suffixSpace }}{{ suffix }}
+        }
+        @case ('toggle') {
+            {{ prefix }}{{ prefixSpace }}
+            <upd-icon [tablerIcon]="!!value ? 'toggle-right' : 'toggle-left'"></upd-icon>{{ suffixSpace }}{{ suffix }}
+        }
+        @case ('icon') {
+            {{ prefix }}{{ prefixSpace }}
+            <upd-icon [model]="!!value ? config.trueIcon : config.falseIcon"></upd-icon>{{ suffixSpace }}{{ suffix }}
+        }
+    }
+</div>

package/table/src/components/columns/boolean-column/boolean-column.component.scss

@@ -0,0 +1 @@
+

package/table/src/components/columns/boolean-column/boolean-column.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BooleanColumnComponent } from './boolean-column.component';
+
+describe('BooleanColumnComponent', () => {
+  let component: BooleanColumnComponent;
+  let fixture: ComponentFixture<BooleanColumnComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [BooleanColumnComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BooleanColumnComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/table/src/components/columns/boolean-column/boolean-column.component.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+
+import { BaseColumn } from '../../../abstractions/base.column';
+import { BooleanColumnModel } from '../../../models/columns/boolean-column.model';
+
+@Component({
+    selector: 'upd-boolean-column',
+    templateUrl: './boolean-column.component.html',
+    styleUrl: './boolean-column.component.scss'
+})
+export class BooleanColumnComponent extends BaseColumn<BooleanColumnModel> {
+    override getClasses(): string[] {
+        return [
+            ...super.getClasses(),
+            this.colorClass
+        ];
+    }
+
+    private get colorClass(): string {
+        if (!this.config.shouldColorHighlight) {
+            return '';
+        }
+
+        return `text-${(!!this.value ? this.config.trueColor : this.config.falseColor)}`;
+    }
+}

package/table/src/components/columns/date-time-column/date-time-column.component.html

@@ -0,0 +1 @@
+<span [ngClass]="getClasses()">{{ prefix }}{{ prefixSpace }}{{ value | date:config.dateTimeFormat }}{{ suffixSpace }}{{ suffix }}</span>

package/table/src/components/columns/date-time-column/date-time-column.component.scss

@@ -0,0 +1 @@
+

package/table/src/components/columns/date-time-column/date-time-column.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DateTimeColumnComponent } from './date-time-column.component';
+
+describe('DateTimeColumnComponent', () => {
+  let component: DateTimeColumnComponent;
+  let fixture: ComponentFixture<DateTimeColumnComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DateTimeColumnComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DateTimeColumnComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/table/src/components/columns/date-time-column/date-time-column.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { BaseColumn } from '../../../abstractions/base.column';
+import { DateTimeColumnModel } from '../../../models/columns/date-time-column.model';
+
+@Component({
+    selector: 'upd-date-time-column',
+    templateUrl: './date-time-column.component.html',
+    styleUrl: './date-time-column.component.scss'
+})
+export class DateTimeColumnComponent extends BaseColumn<DateTimeColumnModel> {}

package/table/src/components/columns/number-column/number-column.component.html

@@ -0,0 +1 @@
+<span [ngClass]="getClasses()">{{ prefix }}{{ prefixSpace }}{{ value | number:config.numberFormat }}{{ suffixSpace }}{{ suffix }}</span>

package/table/src/components/columns/number-column/number-column.component.scss

@@ -0,0 +1 @@
+

package/table/src/components/columns/number-column/number-column.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NumberColumnComponent } from './number-column.component';
+
+describe('NumberColumnComponent', () => {
+  let component: NumberColumnComponent;
+  let fixture: ComponentFixture<NumberColumnComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NumberColumnComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NumberColumnComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/table/src/components/columns/number-column/number-column.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { BaseColumn } from '../../../abstractions/base.column';
+import { NumberColumnModel } from '../../../models/columns/number-column.model';
+
+@Component({
+    selector: 'upd-number-column',
+    templateUrl: './number-column.component.html',
+    styleUrl: './number-column.component.scss'
+})
+export class NumberColumnComponent extends BaseColumn<NumberColumnModel> {}

package/table/src/components/columns/text-column/text-column.component.html

@@ -0,0 +1 @@
+<span [ngClass]="getClasses()">{{ prefix }}{{ prefixSpace }}{{ value }}{{ suffixSpace }}{{ suffix }}</span>

package/table/src/components/columns/text-column/text-column.component.scss

@@ -0,0 +1 @@
+

package/table/src/components/columns/text-column/text-column.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TextColumnComponent } from './text-column.component';
+
+describe('TextColumnComponent', () => {
+  let component: TextColumnComponent;
+  let fixture: ComponentFixture<TextColumnComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TextColumnComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TextColumnComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/table/src/components/columns/text-column/text-column.component.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+
+import { BaseColumn } from '../../../abstractions/base.column';
+import { TextColumnModel } from '../../../models/columns/text-column.model';
+
+@Component({
+    selector: 'upd-text-column',
+    templateUrl: './text-column.component.html',
+    styleUrl: './text-column.component.scss'
+})
+export class TextColumnComponent extends BaseColumn<TextColumnModel> {
+    override getClasses(): string[] {
+        return [
+            ...super.getClasses(),
+            this.transformClass
+        ];
+    }
+
+    private get transformClass(): string {
+        switch (this.config.transform) {
+            case 'capitalize':
+                return 'text-capitalize';
+            case 'lowercase':
+                return 'text-lowercase';
+            case 'uppercase':
+                return 'text-uppercase';
+            default:
+                return '';
+        }
+    }
+}

package/table/src/components/columns-manager/columns-manager.component.html

@@ -0,0 +1,3 @@
+<ng-container *transloco="let t; prefix: 'UpDevs.Table.ColumnsManager'">
+    <upd-drag-and-drop [config]="config()" [(columns)]="columns"></upd-drag-and-drop>
+</ng-container>

package/table/src/components/columns-manager/columns-manager.component.scss

@@ -0,0 +1 @@
+

package/table/src/components/columns-manager/columns-manager.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ColumnsManagerComponent } from './columns-manager.component';
+
+describe('ColumnVisibilityComponent', () => {
+  let component: ColumnsManagerComponent;
+  let fixture: ComponentFixture<ColumnsManagerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ColumnsManagerComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ColumnsManagerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/table/src/components/columns-manager/columns-manager.component.ts

@@ -0,0 +1,37 @@
+import { Component, computed, signal } from '@angular/core';
+import { DragAndDropColumnConfig, DragAndDropColumnModel } from '@updevs/components/drag-and-drop';
+import { BaseModal } from '@updevs/components/modal';
+
+import { TableConfig } from '../../models/table.config';
+
+@Component({
+    selector: 'upd-columns-manager',
+    templateUrl: './columns-manager.component.html',
+    styleUrl: './columns-manager.component.scss'
+})
+export class ColumnsManagerComponent<T> extends BaseModal<TableConfig<T>> {
+    config = computed(() => ({ columns: [this.visibleColumn(), this.hiddenColumn()], canReorder: true }));
+    columns = signal<DragAndDropColumnModel[]>([]);
+
+    private readonly visibleColumn = computed<DragAndDropColumnConfig>(() =>
+        ({
+            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 }
+            }))
+        })
+    );
+    private readonly hiddenColumn = computed<DragAndDropColumnConfig>(() =>
+        ({
+            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 }
+            }))
+        })
+    );
+}

package/table/src/components/filter-row/filter-row.component.html

@@ -0,0 +1,29 @@
+<upd-select class="w-100" [isDisabled]="isDisabled()" [items]="fieldsOptions()" (selectedItem)="onSelectField($event)"
+    [selected]="selectedField">
+</upd-select>
+<upd-select class="w-100" [isDisabled]="isDisabled()" [items]="comparisonOperatorOptions()" (selectedItem)="onSelectOperand($event)"
+    [selected]="selectedOperand">
+</upd-select>
+
+@if (isValueSectionEnabled()) {
+    @switch (fieldType) {
+        @case (DataTypeEnum.Number) {
+            <upd-input wrapperClasses="w-100" customClasses="h-100" type="number" (valueChange)="updateValue($event)"
+                [value]="selectedValue"></upd-input>
+        }
+        @case (DataTypeEnum.Date) {
+
+        }
+        @default {
+            <upd-input wrapperClasses="w-100" customClasses="h-100" type="text" (valueChange)="updateValue($event)"
+                [value]="selectedValue"></upd-input>
+        }
+    }
+} @else {
+    <div class="w-100">
+        <input type="text" class="form-control h-100" disabled>
+    </div>
+}
+
+<upd-button class="flex-shrink-1" colorStyle="danger" [isDisabled]="isDisabled()" [isOutline]="true" [isIcon]="true"
+    [iconModel]="{tablerIcon:'x'}" (clicked)="removeFilterItem()"></upd-button>

package/table/src/components/filter-row/filter-row.component.scss

@@ -0,0 +1 @@
+

package/table/src/components/filter-row/filter-row.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FilterRowComponent } from './filter-row.component';
+
+describe('FilterRowComponent', () => {
+  let component: FilterRowComponent;
+  let fixture: ComponentFixture<FilterRowComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FilterRowComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FilterRowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/table/src/components/filter-row/filter-row.component.ts

@@ -0,0 +1,127 @@
+import { Component, signal, inject, OnInit, input, model, HostBinding, Output, EventEmitter } from '@angular/core';
+import { TextService } from '@updevs/sdk';
+import { BaseSearchStore, DataTypeEnum } from '@updevs/sdk/stores';
+import { OptionalType } from '@updevs/sdk/types';
+import { SelectItem } from '@updevs/components/form-controls/select';
+import { BaseComponent } from '@updevs/sdk/layout';
+
+import { UpdTableConfigService } from '../../services/upd-table-config.service';
+import { FiltersOperandsService } from '../../abstractions/filters-operands.service';
+import { FilterItemModel } from '../../models/filter-item.model';
+import { BaseColumnModel } from '../../abstractions/base-column.model';
+import { FilterOperandConfig } from '../../models/filter-operand.config';
+
+@Component({
+    selector: 'upd-filter-row',
+    templateUrl: './filter-row.component.html',
+    styleUrl: './filter-row.component.scss'
+})
+export class FilterRowComponent extends BaseComponent implements OnInit {
+    @HostBinding('class') wrapperClasses = 'd-flex gap-2';
+
+    @Output() readonly removed: EventEmitter<void> = new EventEmitter();
+
+    DataTypeEnum = DataTypeEnum;
+
+    activeFilters = model.required<FilterItemModel[]>();
+    rowIndex = input.required<number>();
+    columns = input.required<BaseColumnModel[]>();
+    isDisabled = input.required<boolean>();
+    store = input<BaseSearchStore>();
+    currentFilter = input<FilterItemModel>();
+    currentField = signal<OptionalType<SelectItem>>(undefined);
+    currentOperand = signal<OptionalType<FilterOperandConfig>>(undefined);
+    fieldsOptions = signal<SelectItem[]>([]);
+    comparisonOperatorOptions = signal<SelectItem[]>([]);
+    isValueSectionEnabled = signal<boolean>(true);
+
+    get fieldType(): DataTypeEnum {
+        return this.currentField()?.objectData || DataTypeEnum.String;
+    }
+    get selectedField(): OptionalType<SelectItem> {
+        const currentFilter = this.currentFilter();
+        return !!currentFilter?.name
+            ? this.fieldsOptions().find(f => f.value === currentFilter.name)
+            : undefined;
+    }
+    get selectedOperand(): OptionalType<SelectItem> {
+        const currentFilter = this.currentFilter();
+        return !!currentFilter?.name
+            ? this.comparisonOperatorOptions().find(co => co.value === currentFilter.operandConfig?.operand)
+            : undefined;
+    }
+    get selectedValue(): OptionalType<any> {
+        const currentFilter = this.currentFilter();
+        return !!currentFilter?.name ? currentFilter.value : undefined;
+    }
+
+    private currentOperands: FilterOperandConfig[] = [];
+    private readonly configService = inject(UpdTableConfigService);
+    private readonly filtersOperandsService = inject(FiltersOperandsService);
+    private readonly textService = inject(TextService);
+
+    ngOnInit(): void {
+        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?: SelectItem): void {
+        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?: SelectItem): void {
+        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?: any): void {
+        this.activeFilters.update(curr => {
+            curr[this.rowIndex()].value = value;
+            return [...curr];
+        });
+    }
+
+    removeFilterItem(): void {
+        this.activeFilters.update(curr => {
+            curr.splice(this.rowIndex(), 1);
+            return [...curr];
+        });
+        this.removed.emit();
+    }
+}

package/table/src/components/save-search/save-search.component.html

@@ -0,0 +1,16 @@
+<ng-container *transloco="let t; prefix: 'UpDevs.Table.SaveSearch'">
+    <div class="modal-header">
+        <h5 class="modal-title">{{ t('Title') }}</h5>
+    </div>
+    <div class="modal-body py-4">
+        <upd-form [rows]="formRows" [hasActionsSection]="false" [(formGroup)]="formGroup"></upd-form>
+    </div>
+    <div class="modal-footer">
+        <upd-button colorStyle="secondary" [isLink]="true" (clicked)="cancel()">
+            {{ t('Cancel') }}
+        </upd-button>
+        <upd-button colorStyle="primary" [iconModel]="{tablerIcon:'device-floppy'}" (clicked)="save()" [isDisabled]="!formGroup().valid">
+            {{ t('Save') }}
+        </upd-button>
+    </div>
+</ng-container>

package/table/src/components/save-search/save-search.component.scss

@@ -0,0 +1 @@
+

package/table/src/components/save-search/save-search.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SaveSearchComponent } from './save-search.component';
+
+describe('SaveSearchComponent', () => {
+  let component: SaveSearchComponent;
+  let fixture: ComponentFixture<SaveSearchComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SaveSearchComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SaveSearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/table/src/components/save-search/save-search.component.ts

@@ -0,0 +1,73 @@
+import { Component, model, inject, OnInit } from '@angular/core';
+import { Validators, FormGroup, ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';
+import { FormRowModel, DynamicFieldType } from '@updevs/components/form';
+import { BaseModal } from '@updevs/components/modal';
+
+import { SavedViewModel } from '../../models/saved-view.model';
+import { SavedViewsStorage } from '../../services/storages/saved-views.storage';
+
+@Component({
+    selector: 'upd-save-search',
+    templateUrl: './save-search.component.html',
+    styleUrl: './save-search.component.scss'
+})
+export class SaveSearchComponent extends BaseModal<SavedViewModel> implements OnInit {
+    formGroup = model(new FormGroup({}));
+    formRows: FormRowModel[] = [];
+
+    private readonly savedViewsStorage = inject(SavedViewsStorage);
+
+    ngOnInit(): void {
+        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(): void {
+        this.modalRef().close();
+    }
+
+    save(): void {
+        const formValue = this.formGroup().value as any;
+        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();
+    }
+
+    private uniqueNameValidator = (): ValidatorFn => (control: AbstractControl): ValidationErrors | null => {
+        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;
+    };
+}

package/table/src/components/search-section/search-section.component.html

@@ -0,0 +1,37 @@
+<ng-container *transloco="let t; prefix: 'UpDevs.Table'">
+    @if (!!actionsTpl()) {
+        <ng-template [ngTemplateOutlet]="actionsTpl()!"></ng-template>
+    }
+
+    <div class="d-flex align-items-center gap-2">
+        <upd-input wrapperClasses="w-100" [placeholder]="{text:'UpDevs.Table.Search', isTranslated:false}" [isAppendButton]="true"
+            (valueChange)="searchSubject.next($event)" [value]="searchRequest().description">
+            <ng-template updInputAppend>
+                <upd-button [isIcon]="true" [colorStyle]="filterSectionBtnColor()" (clicked)="toggleFilterSection()"
+                    [badgeConfig]="badgeConfig()">
+                    <upd-icon [tablerIcon]="isFilterSectionOpen() ? 'filter-up' : 'filter-down'" [tablerIconSize]="20"></upd-icon>
+                </upd-button>
+            </ng-template>
+        </upd-input>
+    </div>
+
+    @if (isFilterSectionOpen()) {
+        @for (row of activeFilters(); track row; let i = $index) {
+            <upd-filter-row [store]="config().store" [currentFilter]="row" [(activeFilters)]="activeFilters" [columns]="columns()"
+                [rowIndex]="i" (removed)="onRowRemoved()" [isDisabled]="isSearching()">
+            </upd-filter-row>
+        }
+
+        <div class="ms-auto d-flex gap-2">
+            <upd-button customClasses="gap-2" colorStyle="primary" [isOutline]="true" (clicked)="addEmptyFilterRow()"
+                [isDisabled]="!canPerformActions()">
+                <upd-icon tablerIcon="plus" tablerIconWeight="bold" [tablerIconSize]="20"></upd-icon>
+                {{ t('AddNewFilter') }}
+            </upd-button>
+            <upd-button customClasses="gap-2" colorStyle="success" [isDisabled]="!canPerformActions()" (clicked)="search()">
+                <upd-icon tablerIcon="checks" tablerIconWeight="bold" [tablerIconSize]="20"></upd-icon>
+                {{ t('ApplyFilters') }}
+            </upd-button>
+        </div>
+    }
+</ng-container>

package/table/src/components/search-section/search-section.component.scss

@@ -0,0 +1 @@
+

package/table/src/components/search-section/search-section.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SearchSectionComponent } from './search-section.component';
+
+describe('SearchSectionComponent', () => {
+  let component: SearchSectionComponent;
+  let fixture: ComponentFixture<SearchSectionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SearchSectionComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SearchSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});