import { Component, Input, EventEmitter, Output, ChangeDetectorRef } from '@angular/core';
import { FormBuilder, FormControl } from '@angular/forms';
import { BehaviorSubject, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { cloneDeep, merge } from 'lodash';
import { FILTER_STATUSES_ENUM } from './table.types';
import { DEFAULT_CONFIG, DEFAULT_COLUMN_CONFIG, DEFAULT_SPINNER_PLACEHOLDER_CONFIG, TABLES_CONFIG, PAGINATOR_OPTIONS_ROWS, } from './table.constants';
import { SpinnerService } from '../spinners';
import { StorageService } from '../storage-service';
import { PopupServiceClass } from '../popup';
import { loggerCreate } from '../logger';
import * as i0 from "@angular/core";
import * as i1 from "../spinners";
import * as i2 from "@angular/forms";
import * as i3 from "../storage-service";
import * as i4 from "../popup";
import * as i5 from "@angular/common";
import * as i6 from "@angular/router";
import * as i7 from "../paginator/paginator.component";
import * as i8 from "../pipes-directives/directives/dropdown/index";
import * as i9 from "../spinners/components/spinner-button/spinner-button.component";
import * as i10 from "../spinners/components/spinner-table-placeholder/spinner-table-placeholder.component";
import * as i11 from "../spinners/components/spinner-table-no-data/spinner-table-no-data.component";
import * as i12 from "../dropdown/dropdown.component";
import * as i13 from "@angular/material/slide-toggle";
import * as i14 from "@angular/material/checkbox";
import * as i15 from "@angular/material/tooltip";
import * as i16 from "../banner-info/banner-info.component";
import * as i17 from "../show-more-text/show-more-text.component";
import * as i18 from "@angular/material/progress-spinner";
import * as i19 from "../input-counter/input-counter.component";
import * as i20 from "../custom-select/src/lib/select-components";
export class TableComponent {
    constructor(spinner, formBuilder, storageService, popupService, cdr) {
        this.spinner = spinner;
        this.formBuilder = formBuilder;
        this.storageService = storageService;
        this.popupService = popupService;
        this.cdr = cdr;
        this.incomingData = null;
        this.useDefaultSpinner = false;
        this.checkboxesVisible = false;
        this.sortTimeout = 0;
        this.tablePlaceholderConfig = DEFAULT_SPINNER_PLACEHOLDER_CONFIG;
        this.showCheckboxes = false;
        this.pushedBulkList = new EventEmitter();
        this.allCheckboxesSelected = new EventEmitter();
        this.sortKey = null;
        this.showDefaultNoDataSpinner = false;
        this.searchString = null;
        this.paginatorOptionsRows = PAGINATOR_OPTIONS_ROWS;
        this.changeSortKey = new EventEmitter();
        this.changePaginatorSettings = new EventEmitter();
        this.defaultConfig = DEFAULT_CONFIG;
        this.defaultColumnConfig = DEFAULT_COLUMN_CONFIG;
        this.dataArray$ = new BehaviorSubject([]);
        this.paginatedArray$ = new BehaviorSubject([]);
        this.visibleColumns = [];
        this.tableConfigFromStorage = {};
        this.currentFilterStatus = FILTER_STATUSES_ENUM.ALL;
        this.dropDownState = { visible: false, readyToClose: false };
        // sort part
        this.currentSortColumn = '';
        this.directionASC = true;
        this.bulkList = [];
        this.oneItemSelected = false;
        this.allItemsSelected = false;
        this.destroy$ = new Subject();
        this.logger = loggerCreate(this.constructor['name']);
        this.logger.log('Init Table component');
    }
    ngOnInit() {
        this.incomingDataSubscription = this.incomingData.subscribe((response) => {
            this.tableConfig = merge(cloneDeep(this.defaultConfig), this.userConfig);
            this.tableConfig.columnsConfig = this.tableConfig.columnsConfig.map((column) => {
                return merge(cloneDeep(this.defaultColumnConfig), column);
            });
            this.dataArray = response;
            let sortedResponse;
            if (this.sortKey && this.sortKey.key) {
                this.directionASC = this.sortKey.directionASC;
                sortedResponse = this.sort(this.dataArray, this.sortKey.key, false);
            }
            else {
                sortedResponse =
                    this.currentSortColumn !== '' ? this.sort(this.dataArray, this.currentSortColumn, false) : response;
            }
            this.sortedItems = sortedResponse;
            this.clearBulkList();
            this.pushedBulkList.emit(this.bulkList);
            if (this.tableConfig.pagination.enabled) {
                this.dataArray$.next(sortedResponse);
            }
            else {
                this.paginatedArray$.next(sortedResponse);
            }
            this.cdr.detectChanges();
            if (this.showDefaultNoDataSpinner && !sortedResponse?.length) {
                this.spinner.open('table-default-no-data-state');
            }
            else {
                this.spinner.close('table-default-no-data-state');
            }
        }, (error) => {
            this.logger.log(error);
        });
        if (this.userConfig.isActiveCustomization) {
            this.setBaseColumnsConfig();
            this.createForm();
        }
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
        this.incomingDataSubscription.unsubscribe();
    }
    selectAll(event) {
        this.sortedItems.forEach((item) => {
            item.checked = event.checked;
            this.updateBulkList(item);
        });
        this.updateAllComplete();
        this.pushedBulkList.emit(this.bulkList);
    }
    updateAllComplete() {
        this.oneItemSelected = this.sortedItems.some((t) => t.checked);
        this.allItemsSelected = this.sortedItems.every((t) => t.checked);
        this.allCheckboxesSelected.emit(this.allItemsSelected);
    }
    fillBulkList(item) {
        this.updateBulkList(item);
        this.pushedBulkList.emit(this.bulkList);
    }
    sort(array, prop, changeDirection = true) {
        if (changeDirection) {
            this.directionASC = this.currentSortColumn === prop ? !this.directionASC : true;
        }
        this.currentSortColumn = prop;
        const sortColumn = this.tableConfig.columnsConfig.find((item) => item.sort.sortKey === prop) ||
            this.tableConfig.columnsConfig.find((item) => item.sort.active);
        const arrayWithWarningMessage = this.sortArray(array.filter((item) => item.warningArray?.length), sortColumn);
        const arrayWithoutWarningMessage = this.sortArray(array.filter((item) => !item.warningArray?.length), sortColumn);
        const sorted = [...arrayWithWarningMessage, ...arrayWithoutWarningMessage];
        this.changeSortKey.emit({ key: prop, directionASC: this.directionASC });
        return sorted;
    }
    compare(a, b) {
        if (a === null && b !== null) {
            return this.directionASC ? -1 : 1;
        }
        if (a !== null && b === null) {
            return this.directionASC ? 1 : -1;
        }
        if (a > b) {
            return this.directionASC ? 1 : -1;
        }
        if (a < b) {
            return this.directionASC ? -1 : 1;
        }
        return 0;
    }
    compareString(a, b) {
        const propA = a.toLowerCase();
        const propB = b.toLowerCase();
        if (propA > propB) {
            return this.directionASC ? 1 : -1;
        }
        if (propA < propB) {
            return this.directionASC ? -1 : 1;
        }
        if (a > b) {
            return this.directionASC ? 1 : -1;
        }
        if (a < b) {
            return this.directionASC ? -1 : 1;
        }
        return 0;
    }
    sortWithTimeout(column) {
        if (!column.filter.active && column.sort.active) {
            if (this.useDefaultSpinner) {
                this.spinner.open();
            }
            else {
                this.spinner.open('table-placeholder');
            }
            setTimeout(() => {
                if (this.useDefaultSpinner) {
                    this.spinner.close();
                }
                else {
                    this.spinner.close('table-placeholder');
                }
                this.sortItems(column);
                this.clearBulkList();
                this.pushedBulkList.emit(this.bulkList);
            }, this.sortTimeout);
        }
    }
    sortItems(column) {
        if (column.sort.active) {
            const sorted = this.sort(this.dataArray, column.sort.sortKey);
            if (this.tableConfig.pagination.enabled) {
                this.dataArray$.next(sorted);
            }
            else {
                this.paginatedArray$.next(sorted);
            }
        }
    }
    getTdClass(column) {
        return column.commonOptions ? column.commonOptions.class : '';
    }
    getThClass(column) {
        const sort = column.sort.active ? 'sort' : '';
        return `${sort} ${this.getTdClass(column)}`;
    }
    setThClassForLast(isLast) {
        return isLast && this.userConfig.isActiveCustomization;
    }
    getMacrosedLink(row, linkArr) {
        return linkArr.map((item) => {
            if (typeof item === 'object') {
                return `${row[item.property]}`;
            }
            return item;
        });
    }
    applyAction(row, alias) {
        this.currentFilterStatus = row;
        this.actionList[alias](row);
    }
    selectFormControl(values, row, alias) {
        const selectedValue = values.find((item) => item.value === row.campaignId).value;
        const control = new FormControl([selectedValue]);
        control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((item) => {
            row = {
                ...row,
                selectedId: item[0],
            };
            this.applyAction(row, alias);
        });
        return control;
    }
    /**
     * Handling form submit, show columns by config and set to local storage
     * @param form
     */
    columnsFormSubmit() {
        const items = this.columnsForm.value.items.map((selected, i) => {
            return {
                name: this.tableConfig.columnsConfig[i].textContent.title,
                selected,
            };
        });
        this.visibleColumns = items;
        this.formingAndSetDataToStorage();
        this.dropDownState = {
            visible: false,
            readyToClose: false,
        };
    }
    closeDropDownEvent() {
        this.setDefaultControlsState();
    }
    cancelSelection() {
        this.setDefaultControlsState();
        this.dropDownState = {
            visible: false,
            readyToClose: false,
        };
    }
    /**
     * Set all controls (checkbox) value false
     */
    clearAllOptionsForColumns() {
        this.columnsForm.reset();
    }
    /**
     * Set all controls (checkbox) value true
     */
    selectAllOptionsForColumns() {
        this.columnsForm.controls['items'].controls.forEach((control) => control.setValue(true));
    }
    /**
     * Check all controls from form and set selected value from visibleColumns array
     */
    setDefaultControlsState() {
        this.columnsForm.controls['items'].controls.forEach((control, i) => {
            control.setValue(this.visibleColumns[i].selected);
        });
    }
    /**
     * Check in template is visible this column or not
     * @param columnName: string
     */
    isVisibleCurrentColumn(columnName) {
        const column = this.visibleColumns.find((column) => column.name === columnName);
        return column && column.selected;
    }
    /**
     * Init all columns (show all columns) in table
     */
    initAndSelectAllColumns() {
        this.visibleColumns = this.tableConfig.columnsConfig.map((column) => {
            return {
                name: column.textContent.title,
                selected: true,
            };
        });
    }
    /**
     * Check data from local storage and set this data to our model
     */
    setBaseColumnsConfig() {
        const columnStorageConfig = this.storageService.get(TABLES_CONFIG);
        if (columnStorageConfig) {
            this.tableConfigFromStorage = columnStorageConfig;
            if (this.tableConfigFromStorage.hasOwnProperty(this.userConfig.tableName)) {
                this.visibleColumns = this.tableConfigFromStorage[this.userConfig.tableName];
            }
            else {
                this.initAndFormingData();
            }
        }
        else {
            this.initAndFormingData();
        }
    }
    initAndFormingData() {
        this.initAndSelectAllColumns();
        this.formingAndSetDataToStorage();
    }
    /**
     * Initialize form with dynamically count of controls
     */
    createForm() {
        this.columnsForm = this.formBuilder.group({
            items: this.formBuilder.array(this.getColumnsArray()),
        });
    }
    /**
     * If data in local storage is exist - init controls with selected state
     * If data is not exist - init defauld control
     */
    getColumnsArray() {
        const columnsArray = this.tableConfig.columnsConfig.map((config, i) => {
            if (this.visibleColumns.length > 0) {
                return new FormControl(this.visibleColumns[i].selected);
            }
            return new FormControl();
        });
        return columnsArray;
    }
    /**
     * Set values to local storage
     * @param data Array<FormConfig>
     */
    formingAndSetDataToStorage() {
        this.tableConfigFromStorage[this.userConfig.tableName] = this.visibleColumns;
        this.storageService.setInLocal(TABLES_CONFIG, this.tableConfigFromStorage);
    }
    createVideoPopup(title, url) {
        const videoTag = `<video controls="controls" class="video-in-popup"><source src="${url}" ></video>`;
        return this.popupService.popupCreate({
            title,
            body: videoTag,
            buttonsPosition: 'right',
            closeButton: true,
            width: 'md',
        });
    }
    getLabelTextColor(hex) {
        const backgroundColor = this.hexToRgb(`#${hex}`);
        const brightness = Math.round((backgroundColor.red * 299 + backgroundColor.green * 587 + backgroundColor.blue * 114) / 1000);
        return brightness > 125 ? '#1A1C1E' : '#FFF';
    }
    hexToRgb(hex) {
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result
            ? {
                red: parseInt(result[1], 16),
                green: parseInt(result[2], 16),
                blue: parseInt(result[3], 16),
            }
            : null;
    }
    sortArray(array, sortColumn) {
        return array.sort((a, b) => {
            if (sortColumn.sort.reverseSort) {
                [a, b] = [b, a];
            }
            if (typeof a[this.currentSortColumn] === 'string' && typeof b[this.currentSortColumn] === 'string') {
                return this.compareString(a[this.currentSortColumn], b[this.currentSortColumn]);
            }
            else {
                return this.compare(a[this.currentSortColumn], b[this.currentSortColumn]);
            }
        });
    }
    updateBulkList(item) {
        if (item.checked && !this.bulkList.find((creative) => creative.id === item.id)) {
            this.bulkList.push(item);
        }
        else {
            this.bulkList = this.bulkList.filter((creative) => creative.id !== item.id);
        }
    }
    clearBulkList() {
        this.bulkList = [];
        this.oneItemSelected = false;
        this.allItemsSelected = false;
    }
    changePerPageEmitter(event) {
        event.currentPageIndex++;
        this.changePaginatorSettings.emit(event);
    }
}
TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, deps: [{ token: i1.SpinnerService }, { token: i2.FormBuilder }, { token: i3.StorageService }, { token: i4.PopupServiceClass }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "ng2-table", inputs: { incomingData: ["incoming", "incomingData"], userConfig: ["tableConfig", "userConfig"], actionList: "actionList", valueList: "valueList", useDefaultSpinner: "useDefaultSpinner", checkboxesVisible: "checkboxesVisible", sortTimeout: "sortTimeout", tablePlaceholderConfig: "tablePlaceholderConfig", showCheckboxes: "showCheckboxes", sortKey: "sortKey", showDefaultNoDataSpinner: "showDefaultNoDataSpinner", searchString: "searchString", paginatorOptionsRows: "paginatorOptionsRows" }, outputs: { pushedBulkList: "pushedBulkList", allCheckboxesSelected: "allCheckboxesSelected", changeSortKey: "changeSortKey", changePaginatorSettings: "changePaginatorSettings" }, ngImport: i0, template: "<div class=\"component-container component-table-container\">\n  <div class=\"component-data component-table-data\" #tableData>\n    <div class=\"table-flex\" [ngClass]=\"{'no-data' : !this.paginatedArray$.value?.length}\">\n      <table class=\"table table-component\" [ngClass]=\"tableConfig.cellsVerticalAlign\">\n        <thead>\n          <tr>\n            <ng-container *ngFor=\"let column of tableConfig.columnsConfig; let lastIndex = last\">\n              <th\n                [style.width]=\"column.columnWidth\"\n                [ngClass]=\"getThClass(column)\"\n                [class.last-th]=\"setThClassForLast(lastIndex)\"\n                [class.select-th]=\"showCheckboxes && column.checkboxContent.header && (paginatedArray$ | async)?.length !== 0\"\n                *ngIf=\"!visibleColumns.length || isVisibleCurrentColumn(column.textContent.title)\"\n                (click)=\"sortWithTimeout(column)\"\n              >\n                <span *ngIf=\"column.HTMLContent?.header\">{{ column.HTMLContent.title }}</span>\n                <span\n                  *ngIf=\"!column.filter.active && column.textContent.header &&\n                         column.iconsContent.header && !column.tooltipContent.tooltip\"\n                  class=\"table-header-with-icon\"\n                >\n                  <span\n                    class=\"material-icons material-icons-outlined button-icon button-icon-outline button-icon-small\"\n                    [matTooltip]=\"column.iconsContent.title\"\n                    matTooltipPosition=\"above\"\n                    >{{ column.iconsContent.headerClass }}</span\n                  >\n                  <span>{{ column.textContent.title }}</span>\n                </span>\n                <span\n                  class=\"text-with-icon\"\n                  style=\"display: flex; align-items: center\"\n                  *ngIf=\"!column.filter.active &&\n              column.textContent.header && column.tooltipContent.tooltip\"\n                >\n                  {{ column.textContent.title }}\n                  <span class=\"wrapper\">\n                    <i\n                      [ngClass]=\"column.tooltipContent.iconContent\"\n                      *ngIf=\"column.tooltipContent.iconContent\"\n                      class=\"tooltip-icon\"\n                    ></i>\n                    <div class=\"tooltip\">{{ column.tooltipContent.text }}</div>\n                  </span>\n                </span>\n                <span\n                  *ngIf=\"!column.filter.active && column.textContent.header &&\n                         !column.iconsContent.header && !column.tooltipContent.tooltip\"\n                >\n                  {{ column.textContent.title }}\n                </span>\n                <span\n                  *ngIf=\"!column.filter.active && column.iconsContent.header &&\n                         !column.textContent.header && !column.tooltipContent.tooltip\"\n                  class=\"only-icon\"\n                >\n                  <i [ngClass]=\"column.iconsContent.headerClass\"></i>\n                </span>\n                <div *ngIf=\"column.filter.active\" class=\"th-filter dropdown\" dropDown>\n                  <div *ngIf=\"column.filter.active\" class=\"th-filter dropdown\" #dropDownButton>\n                    <span\n                      *ngIf=\"column.textContent.header &&\n                              column.iconsContent.header && column.filter.activeValueAlias\"\n                      class=\"{{valueList[column.filter.activeValueAlias]}} text-capitalize\"\n                    >\n                      <i class=\"status-icon\"></i>\n                    </span>\n                    <span\n                      class=\"material-icons material-icons-outlined button-icon button-icon-primary button-icon-large filter-icon\"\n                      *ngIf=\"column.textContent.header &&\n                              column.iconsContent.header && !column.filter.activeValueAlias\"\n                    >\n                      filter_list\n                    </span>\n\n                    <epom-dropdown\n                      [toggleButton]=\"dropDownButton\"\n                      [position]=\"'dropdown-left'\"\n                      [width]=\"'auto'\"\n                      [marginTop]=\"0\"\n                    >\n                      <ul class=\"dropdown dropdown-left\">\n                        <li\n                          *ngFor=\"let filter of column.filter.filterList\"\n                          [ngClass]=\"{'dropdown-filter-active' : currentFilterStatus === filter.name}\"\n                        >\n                          <a (click)=\"applyAction(filter.name, column.filter.alias)\">\n                            <span class=\"{{filter.class}} text-capitalize\">\n                              <i class=\"status-icon\"></i>{{ filter.description }}\n                            </span>\n                          </a>\n                        </li>\n                      </ul>\n                    </epom-dropdown>\n                  </div>\n                </div>\n                <mat-checkbox\n                  *ngIf=\"showCheckboxes && column.checkboxContent.header && (paginatedArray$ | async)?.length !== 0\"\n                  matTooltip=\"{{column.checkboxContent.headerCheckboxMessage}}\"\n                  matTooltipDisabled=\"{{!column.checkboxContent.headerCheckboxMessage ||\n                            !column.checkboxContent.headerCheckboxMessage.length}}\"\n                  [indeterminate]=\"allItemsSelected || oneItemSelected\"\n                  [disabled]=\"column.checkboxContent.disabledCheckbox\"\n                  [(ngModel)]=\"allItemsSelected || oneItemSelected\"\n                  (change)=\"selectAll($event)\"\n                >\n                </mat-checkbox>\n              </th>\n            </ng-container>\n            <div class=\"customization-table dropdown\" *ngIf=\"userConfig.isActiveCustomization\">\n              <button class=\"dropdown-button\" #dropDownButton>\n                <i class=\"icon-cog\"></i>\n              </button>\n              <form [formGroup]=\"columnsForm\" (submit)=\"columnsFormSubmit();\">\n                <epom-dropdown [state]=\"dropDownState\" (close)=\"closeDropDownEvent()\" [toggleButton]=\"dropDownButton\">\n                  <div class=\"actions-container\">\n                    <button type=\"button\" class=\"select-all-button\" (click)=\"selectAllOptionsForColumns()\">\n                      Select all\n                    </button>\n                    <button type=\"button\" class=\"clear-all-button\" (click)=\"clearAllOptionsForColumns()\">\n                      Clear all\n                    </button>\n                  </div>\n                  <ul\n                    formArrayName=\"items\"\n                    class=\"dropdown dropdown-left\"\n                    [class.rows-direction]=\"tableConfig.columnsConfig.length >= 6\"\n                  >\n                    <li *ngFor=\"let col of tableConfig.columnsConfig; index as i\">\n                      <input\n                        [formControlName]=\"i\"\n                        class=\"switchers\"\n                        id=\"{{col.textContent.title}}\"\n                        type=\"checkbox\"\n                        value=\"{{col.textContent.title}}\"\n                        formControlName=\"col.textContent.title\"\n                      />\n                      <label for=\"{{col.textContent.title}}\">{{ col.textContent.title }}</label>\n                    </li>\n                  </ul>\n                  <div class=\"content-footer\">\n                    <button type=\"button\" (click)=\"cancelSelection()\" class=\"btn btn-default\">Cancel</button>\n                    <button type=\"submit\" class=\"btn btn-default\">Save</button>\n                  </div>\n                </epom-dropdown>\n              </form>\n            </div>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngIf=\"tableConfig.fixedRow.top\" class=\"total\">\n            <ng-container *ngFor=\"let column of tableConfig.columnsConfig\">\n              <td *ngIf=\"!visibleColumns.length || isVisibleCurrentColumn(column.textContent.title)\">\n                <span class=\"{{tableConfig.fixedRow.class}}\">\n                  {{ tableConfig.fixedRow.cells[column.textContent.contentProperty] }}\n                </span>\n              </td>\n            </ng-container>\n          </tr>\n          <ng-container *ngFor=\"let row of paginatedArray$ | async\">\n            <tr\n              class=\"{{row.activeClass}}\"\n              [attr.data-qa]=\"'ssp-ep-item'\"\n              [class.previous-row-hover]=\"row.warningArray?.length\"\n            >\n              <ng-container *ngFor=\"let column of tableConfig.columnsConfig\">\n                <td\n                  *ngIf=\"!visibleColumns.length || isVisibleCurrentColumn(column.textContent.title)\"\n                  [ngClass]=\"getTdClass(column)\"\n                  [class.select-th]=\"showCheckboxes && column.checkboxContent.header && (paginatedArray$ | async)?.length !== 0\"\n                  class=\"{{row[column.tdCustomClass.tdCustomClassProperty]}}\"\n                >\n                  <div [ngClass]=\"(column?.wrapper?.class || '') + ' ' + (row[column?.wrapper?.classProperty] || '')\">\n                    <span *ngIf=\"column.HTMLContent?.body\" [innerHTML]=\"row[column.HTMLContent.contentProperty]\"></span>\n                    <span\n                      *ngIf=\"column.labelContent && column.labelContent.body\"\n                      class=\"{{row[column.customClass.bodyClassProperty]}}\"\n                    >\n                      <ul class=\"list-labels\" *ngIf=\"row[column.labelContent.contentProperty].length\">\n                        <li class=\"label-enpoint\" *ngFor=\"let label of row[column.labelContent.contentProperty]\">\n                          <span\n                            [style.background-color]=\"'#' + label[column.labelContent.backgroundProperty]\"\n                            class=\"label label-enpoint\"\n                            [style.color]=\"getLabelTextColor(label[column.labelContent.backgroundProperty])\"\n                          >\n                            {{ label[column.labelContent.titleProperty] }}\n                          </span>\n                        </li>\n                      </ul>\n                      <ng-container *ngIf=\"!row[column.labelContent.contentProperty].length\">-</ng-container>\n                    </span>\n                    <div *ngIf=\"column.endpointsListContent && column.endpointsListContent.body\">\n                      <ul class=\"table-endpoint-list\">\n                        <li *ngFor=\"let endpoint of row[column.endpointsListContent.contentProperty]\">\n                          <a\n                            title=\"{{endpoint[column.endpointsListContent.name]}}\"\n                            [routerLink]=\"endpoint[column.endpointsListContent.link]\"\n                          >\n                            {{ endpoint[column.endpointsListContent.name] }}</a\n                          >\n                        </li>\n                      </ul>\n                    </div>\n                    <div *ngIf=\"column.inputContent as input\" class=\"form-control-wrapper\">\n                      <epom-input-counter\n                        *ngIf=\"input.type === 'number'\"\n                        ngDefaultControl\n                        [showIcon]=\"input.showIcon\"\n                        [isMaterialIcon]=\"input.isMaterialIcon\"\n                        [icon]=\"row[input.iconProperty]\"\n                        [formControl]=\"row[input.formControlProperty]\"\n                      >\n                      </epom-input-counter>\n                      <custom-select\n                        class=\"table-custom-select\"\n                        *ngIf=\"input.type === 'select'\"\n                        [formElement]=\"row[input.formControlProperty]\"\n                        [valuesStream]=\"row[input.valuesStreamProperty]\"\n                        [placeholder]=\"input.placeholder\"\n                      >\n                      </custom-select>\n                    </div>\n                    <span\n                      *ngIf=\"!column.textContent.body &&\n                         !column.iconsContent.body &&\n                         !column.imagesContent.body &&\n                         column.videosContent?.body &&\n                         !column.videosContent?.isBodyLink\"\n                      class=\"{{row[column.customClass.bodyClassProperty]}}\"\n                    >\n                      <span\n                        *ngFor=\"let videoProperty of column.videosContent.bodyProperties\"\n                        (click)=\"createVideoPopup('Video',row[videoProperty])\"\n                        class=\"video-preview\"\n                      >\n                        <video class=\"image-in-td\">\n                          <source [src]=\"row[videoProperty]\" />\n                        </video>\n                      </span>\n                    </span>\n\n                    <a *ngIf=\"column.imagesContent.isBodyLink\" href=\"row[column.imagesContent.bodyLinkProperty]\">\n                      <span\n                        *ngIf=\"!column.textContent.body &&\n                           !column.iconsContent.body &&\n                           !column.videosContent?.body &&\n                            column.imagesContent.body\"\n                        class=\"{{row[column.customClass.bodyClassProperty]}}\"\n                      >\n                        <img\n                          *ngFor=\"let imageProperty of column.imagesContent.bodyProperties\"\n                          [src]=\"row[imageProperty]\"\n                          class=\"image-in-td\"\n                        />\n                      </span>\n                    </a>\n\n                    <span\n                      *ngIf=\"!column.iconsContent.body &&\n                         !column.videosContent?.body &&\n                         column.imagesContent.body &&\n                         !column.imagesContent.isBodyLink\"\n                      class=\"{{row[column.customClass.bodyClassProperty]}}\"\n                    >\n                      <img\n                        *ngFor=\"let imageProperty of column.imagesContent.bodyProperties\"\n                        [src]=\"row[imageProperty]\"\n                        class=\"image-in-td\"\n                      />\n                    </span>\n\n                    <a *ngIf=\"column.iconsContent.isBodyLink\" href=\"row[column.iconsContent.bodyLinkProperty]\">\n                      <span\n                        *ngIf=\"!column.textContent.body &&\n                          !column.imagesContent.body &&\n                         column.iconsContent.body\"\n                        class=\"{{row[column.customClass.bodyClassProperty]}}\"\n                      >\n                        <i\n                          *ngFor=\"let iconProperty of column.iconsContent.bodyProperties\"\n                          [ngClass]=\"row[iconProperty]\"\n                        ></i>\n                      </span>\n                    </a>\n                    <div *ngIf=\"column.iconsContent.isBodyAction && row[column.textContent.showProperty]\">\n                      <div class=\"table-hyperlink\" (click)=\"applyAction(row, column.textContent.alias)\">\n                        <span class=\"material-icons material-icons-outlined\"\n                          >{{ column.iconsContent.bodyLinkProperty }}</span\n                        >\n                        <span class=\"table-text-item ml-4\">{{column.iconsContent.title}}</span>\n                      </div>\n                      <span>{{ row[column.textContent.contentProperty] }}</span>\n                    </div>\n\n                    <span\n                      *ngIf=\"!column.imagesContent.body &&\n                         column.iconsContent.body &&\n                         !column.iconsContent.isBodyLink\"\n                      class=\"{{row[column.customClass.bodyClassProperty]}} table-info-icon tooltip-wrapper d-flex\"\n                      [attr.title]=\"column.iconsContent.titleProperty ? row[column.iconsContent.titleProperty] : ''\"\n                    >\n                      <ng-container *ngIf=\"!column.iconsContent.material\">\n                        <!-- todo remove after changing all icons to material -->\n                        <i\n                          *ngFor=\"let iconProperty of column.iconsContent.bodyProperties\"\n                          [ngClass]=\"row[iconProperty]\"\n                        ></i>\n                      </ng-container>\n                      <ng-container *ngIf=\"column.iconsContent.material\">\n                        <span\n                          *ngFor=\"let iconProperty of column.iconsContent.bodyProperties\"\n                          class=\"material-icons material-icons-outlined\"\n                        >\n                          {{ row[iconProperty] }}</span\n                        >\n                      </ng-container>\n                      <span *ngIf=\"column.tooltipContent.body\" class=\"tooltip-toggle\">{{ row.uiType }} </span>\n                    </span>\n                    <a\n                      class=\"table-link\"\n                      *ngIf=\"column.textContent.isBodyLink\"\n                      [routerLink]=\"row[column.textContent.bodyLinkProperty]\"\n                      [queryParams]=\"row[column.textContent.queryParamsProperty]\"\n                      [ngClass]=\"{'disabled-Link': !row[column.textContent.bodyLinkProperty]?.length}\"\n                    >\n                      <span\n                        *ngIf=\"column.textContent.body &&\n                           !column.textContent.isBodyAction &&\n                           !column.iconsContent.body\"\n                        class=\"{{row[column.customClass.bodyClassProperty]}}\"\n                      >\n                        {{ row[column.textContent.contentProperty] }}\n                      </span>\n                    </a>\n                    <span\n                      *ngIf=\"column.textContent.isBodyLink &&\n                            column.textContent.body &&\n                            column.textContent.isBodyAction &&\n                           !column.iconsContent.body\"\n                      class=\"{{row[column.customClass.bodyClassProperty]}} body-action-text\"\n                      (click)=\"applyAction(row, column.textContent.alias)\"\n                    >\n                      {{ row[column.textContent.contentProperty] }}\n                    </span>\n\n                    <span\n                      *ngIf=\"column.textContent.body && column.textContent.isStatus\"\n                      class=\"status-wrapper\"\n                      [ngClass]=\"row[column.customClass.bodyClassProperty]\"\n                    >\n                      <span class=\"material-icons\">circle</span>\n                      <span>{{ row[column.textContent.contentProperty] }}</span>\n                    </span>\n\n                    <span\n                      *ngIf=\"column.textContent.body &&\n                         !column.iconsContent.body &&\n                         !column.textContent.isBodyLink &&\n                         !column.textContent.showMoreText &&\n                         !column.textContent.isStatus\"\n                      class=\"{{row[column.customClass.bodyClassProperty]}}\"\n                    >\n                      {{ row[column.textContent.contentProperty] }}\n                    </span>\n                    <span\n                      *ngIf=\"column.textContent.body &&\n                        !column.imagesContent.body &&\n                         column.iconsContent.body\"\n                      class=\"{{row[column.customClass.bodyClassProperty]}}\"\n                    >\n                      <i\n                        *ngFor=\"let iconProperty of column.iconsContent.bodyProperties\"\n                        [ngClass]=\"row[iconProperty]\"\n                      ></i>\n                      {{ row[column.textContent.contentProperty] }}\n                    </span>\n                    <epom-show-more-text\n                      *ngIf=\"column.textContent.body && column.textContent.showMoreText\"\n                      [text]=\"row[column.textContent.contentProperty]\"\n                    >\n                    </epom-show-more-text>\n                    <mat-checkbox\n                      *ngIf=\"showCheckboxes && column.checkboxContent.body\"\n                      matTooltip=\"{{row.disabledCheckboxMessage}}\"\n                      matTooltipDisabled=\"{{!row.disabledCheckboxMessage || !row.disabledCheckboxMessage.length}}\"\n                      [disabled]=\"row.disabledCheckbox\"\n                      [(ngModel)]=\"row.checked\"\n                      (change)=\"fillBulkList(row)\"\n                      (ngModelChange)=\"updateAllComplete()\"\n                    >\n                    </mat-checkbox>\n                    <ul class=\"actions-list\" *ngIf=\"column.buttonsContent.body\" [class]=\"column.buttonsContent.class\">\n                      <li\n                        *ngFor=\"let button of column.buttonsContent.togglTextButtonList\"\n                        (click)=\"applyAction(row, button.alias)\"\n                      >\n                        <button\n                          *ngIf=\"row[button.showProperty]\"\n                          [attr.data-qa]=\"button.alias\"\n                          [class]=\"'status-switcher-on ' + button.class\"\n                        >\n                          <epom-spinner-button\n                            *ngIf=\"button.spinner && row.spinnerPlaceholderName\"\n                            [placement]=\"row.spinnerPlaceholderName\"\n                          ></epom-spinner-button>\n                          <mat-slide-toggle [checked]=\"row.status === 'Active'\">\n                            <span *ngIf=\"row.status !== 'Active'\" class=\"switcher-text text-on-off\">Off</span>\n                            <span *ngIf=\"row.status === 'Active'\" class=\"switcher-text text-on\">On</span>\n                          </mat-slide-toggle>\n                        </button>\n                      </li>\n\n                      <li *ngIf=\"column.buttonsContent.select as select\" class=\"table-custom-select\">\n                        <custom-select\n                          [dataQa]=\"select?.alias\"\n                          [valuesStream]=\"select?.availableData$\"\n                          [useClear]=\"select?.useClear\"\n                          [clearLikeOption]=\"select?.clearLikeOption\"\n                          [multiple]=\"select?.multiple\"\n                          [search]=\"select?.search\"\n                          [placeholder]=\"select?.placeholder\"\n                          [formElement]=\"selectFormControl((select?.availableData$ | async), row, select?.alias)\"\n                        ></custom-select>\n                      </li>\n\n                      <li\n                        *ngFor=\"let button of column.buttonsContent.textButtonList\"\n                        (click)=\"applyAction(row, button.alias)\"\n                      >\n                        <span *ngIf=\"row[button.showProperty]\" class=\"text\">{{ button.text }}</span>\n                      </li>\n                      <li\n                        *ngFor=\"let button of column.buttonsContent.buttonList\"\n                        matTooltip=\"{{button.title}}\"\n                        matTooltipPosition=\"above\"\n                        [attr.data-qa]=\"button.alias\"\n                        [matTooltipClass]=\"'table-tooltip'\"\n                        matTooltipDisabled=\"{{!row[button.showProperty] || !button.title?.length || !button.showMatTooltip}}\"\n                        class=\"{{button.class}}\"\n                        [ngClass]=\"{'ml-0': !row[button.showProperty]}\"\n                        (click)=\"applyAction(row, button.alias)\"\n                      >\n                        <button *ngIf=\"column.textContent.material\" [attr.data-qa]=\"button.alias\" class=\"icon-btn\">\n                          <span\n                            *ngIf=\"row[button.showProperty]\"\n                            class=\"material-icons material-icons-outlined button-icon button-icon-large\"\n                            [class]=\"button.iconClass\"\n                            >{{ button.icon }}</span\n                          >\n                        </button>\n\n                        <ng-container *ngIf=\"!column.textContent.material\">\n                          <!-- todo remove after changing all icons to material -->\n                          <span *ngIf=\"row[button.showProperty]\" class=\"icon\"><i [ngClass]=\"button.icon\"></i></span>\n                        </ng-container>\n                      </li>\n                    </ul>\n                  </div>\n                </td>\n              </ng-container>\n            </tr>\n            <tr *ngIf=\"row.warningArray?.length\" [attr.data-qa]=\"'warning-msg'\" class=\"next-row-hover\">\n              <td [attr.colspan]=\"tableConfig.columnsConfig.length\" class=\"warning-cell\">\n                <div class=\"warnings-container\">\n                  <app-banner-info\n                    *ngFor=\"let warning of row.warningArray\"\n                    [textBanner]=\"true\"\n                    [showIcon]=\"true\"\n                    [showCloseButton]=\"false\"\n                    [status]=\"warning.warningIcon\"\n                    [textInfo]=\"warning.warningMessage\"\n                    [bannerWrapperClass]=\"warning.warningClass\"\n                  ></app-banner-info>\n                </div>\n              </td>\n            </tr>\n            <tr *ngIf=\"row.uploadingStarted\" class=\"upload-row\" [attr.data-qa]=\"'warning-msg'\">\n              <td [attr.colspan]=\"tableConfig.columnsConfig.length\">\n                <ng-container *ngIf=\"row.uploadingStarted && row.uploadItems?.length\">\n                  <span>Uploading items:</span>\n\n                  <div class=\"upload-table-item mt-8\" *ngFor=\"let uploadItem of row.uploadItems\">\n                    <ng-container *ngIf=\"!uploadItem.uploadedWithError\">\n                      <div class=\"mb-8\">\n                        <span class=\"material-icons material-icons-outlined upload-table-item-icon\">\n                          insert_drive_file\n                        </span>\n                        <div class=\"upload-table-text-block\" *ngIf=\"uploadItem?.linesCount\">\n                          <span class=\"upload-table-item-name\">{{uploadItem?.fileName}}</span>\n                          <div class=\"upload-file-records\">\n                            Processed {{uploadItem?.processedCount}} of {{ uploadItem?.linesCount}} Records.\n                          </div>\n                        </div>\n                        <span class=\"upload-table-item-name\" *ngIf=\"!uploadItem?.linesCount\"\n                          >{{uploadItem?.fileName}}</span\n                        >\n                        <mat-spinner\n                          class=\"upload-item-spinner\"\n                          [diameter]=\"24\"\n                          *ngIf=\"!uploadItem?.linesCount\"\n                        ></mat-spinner>\n                      </div>\n                      <div class=\"progress\">\n                        <div\n                          class=\"progress-bar\"\n                          role=\"progressbar\"\n                          [ngStyle]=\"{width: uploadItem?.processedCount/uploadItem?.linesCount*100 + '%'}\"\n                        ></div>\n                      </div>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"uploadItem.uploadedWithError\">\n                      <app-banner-info\n                        [smallSize]=\"false\"\n                        [showIcon]=\"true\"\n                        [showCloseButton]=\"false\"\n                        [status]=\"'error'\"\n                        [textInfo]=\"'Upload ' + uploadItem?.fileName + ' failed'\"\n                      >\n                      </app-banner-info>\n                    </ng-container>\n                  </div>\n                </ng-container>\n              </td>\n            </tr>\n          </ng-container>\n          <tr *ngIf=\"tableConfig.fixedRow.bottom\" class=\"total\">\n            <ng-container *ngFor=\"let column of tableConfig.columnsConfig\">\n              <td *ngIf=\"!visibleColumns.length || isVisibleCurrentColumn(column.textContent.title)\">\n                <span class=\"{{tableConfig.fixedRow.class}}\">\n                  {{ tableConfig.fixedRow.cells[column.textContent.contentProperty] }}\n                </span>\n              </td>\n            </ng-container>\n          </tr>\n          <tr\n            *ngIf=\"(paginatedArray$ | async)?.length === 0 && tableConfig.showDefaultPlaceholder && !showDefaultNoDataSpinner\"\n            class=\"no-hover\"\n          >\n            <td [attr.colspan]=\"tableConfig.columnsConfig.length\">\n              <div class=\"config-no-data\">No available data to show</div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n  <epom-spinner-table-placeholder\n    placement=\"table-placeholder\"\n    [autoopen]=\"false\"\n    [config]=\"tablePlaceholderConfig\"\n    [toggleFadeElement]=\"tableData\"\n  ></epom-spinner-table-placeholder>\n  <epom-spinner-table-no-data\n    *ngIf=\"showDefaultNoDataSpinner\"\n    [searchData]=\"searchString\"\n    placement=\"table-default-no-data-state\"\n  ></epom-spinner-table-no-data>\n  <epom-paginator\n    [ngClass]=\"{'no-data': !this.paginatedArray$.value?.length && !tableConfig.showDefaultPlaceholder}\"\n    *ngIf=\"tableConfig.pagination.enabled\"\n    [incoming]=\"dataArray$\"\n    [outcoming]=\"paginatedArray$\"\n    [perPage]=\"tableConfig.pagination.perPage\"\n    [pageValue]=\"tableConfig.pagination.pageValue || 1\"\n    [isShowPaginatorOptions]=\"tableConfig.pagination.paginatorDropdownEnabled\"\n    [optionsRows]=\"paginatorOptionsRows\"\n    (changePageEvent)=\"changePerPageEmitter($event)\"\n  ></epom-paginator>\n</div>\n", styles: [".table-component{border-radius:3px}.table-component ul.actions-list>li>span.icon{display:block;width:36px;height:36px;text-align:center;border-radius:50px;color:var(--outline-light);overflow:hidden;position:relative;cursor:pointer}.component-table-data,.component-data{z-index:1}.table-component ul.actions-list>li>span.text{display:block;line-height:36px;height:36px;text-align:center;border-radius:50px;color:#d6d6d6;overflow:hidden;position:relative;cursor:pointer;padding:0 10px;text-transform:uppercase}.table-component ul.actions-list>li>span>i{line-height:37px}.table-component ul.actions-list>li>span:hover{background:#ececec}.table-component thead span{position:relative}.table-component th{vertical-align:middle;text-align:left;white-space:nowrap}.table-component .only-icon{display:block;margin-top:3px}.table-component .image-in-td{max-width:100%}.customization-table{position:absolute;top:7px;right:15px;margin-left:1em}.customization-table>.dropdown-button{outline:none;border:none;padding:0;margin:0;background-color:transparent;cursor:pointer}ul.dropdown>li{list-style:none;width:100%}input.switchers+label{width:100%;text-align:left}.customization-table ul{display:flex;flex-direction:column;align-items:baseline;padding:0;width:100%}.switchers{width:100%}.customization-table .content-footer{padding:0;border:none;text-align:center;width:100%}.customization-table .content-footer>button{color:#fff;background:#6f79dd;outline:none}.customization-table .actions-container{width:100%;display:flex;justify-content:space-around;align-items:center;flex-direction:row}.customization-table .actions-container>button{border:none;color:#24b47e;outline:none;background-color:#fff}.customization-table ul.rows-direction{display:flex;justify-content:center;flex-direction:row;flex-wrap:wrap}.customization-table ul.rows-direction li{width:45%;margin:3px}.last-th{padding-right:5em}.select-th{text-align:center!important}.video-preview{cursor:pointer}.body-action-text{color:#43a0de;cursor:pointer}.wrapper{position:relative}.wrapper .tooltip{background:#23323f;bottom:100%;color:#fff;display:block;left:-90px;width:212px;margin-bottom:15px;opacity:0;padding:20px;pointer-events:none;position:absolute;font-size:12px;font-family:Open Sans,sans-serif;transform:translateY(10px);transition:all .25s ease-out;-ms-box-shadow:2px 2px 6px rgba(0,0,0,.28);-o-box-shadow:2px 2px 6px rgba(0,0,0,.28);box-shadow:2px 2px 6px #00000047}.wrapper .tooltip:before{bottom:-20px;content:\" \";display:block;height:20px;left:0;position:absolute;width:100%}.wrapper .tooltip:after{border-left:solid transparent 10px;border-right:solid transparent 10px;border-top:solid #23323f 10px;bottom:-10px;content:\" \";height:0;left:50%;margin-left:-13px;position:absolute;width:0}.wrapper:hover .tooltip{opacity:1;pointer-events:auto;transform:translateY(0)}.lte8 .wrapper .tooltip{display:none}.lte8 .wrapper:hover .tooltip{display:block}.icon-info.tooltip-icon{padding-left:4px}li.label-enpoint{max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.list-labels{display:flex;gap:4px;flex-wrap:wrap}.tooltip-wrapper{position:relative;display:inline-block;cursor:pointer}.status-wrapper{display:flex;align-items:center}.align-buttons-left{justify-content:flex-start!important;margin-left:-6px}thead tr:first-child th:first-child{border-top-left-radius:2px}thead tr:first-child th:last-child{border-top-right-radius:2px}.tooltip-wrapper .tooltip-toggle{visibility:hidden;background-color:#333;color:#fff;text-align:center;border-radius:2px;padding:4px;position:fixed;z-index:1;opacity:.6;font-size:10px}.tooltip-wrapper:hover .tooltip-toggle{visibility:visible}.table-endpoint-list{padding:0;margin:0}.table-endpoint-list li{list-style-type:none;max-width:270px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.config-no-data{color:var(--outline-light);font-size:var(--font-caption);font-weight:var(--font-weight-regular);line-height:12px;text-align:center;height:34px;display:flex;align-items:center;justify-content:center}.status>span.material-icons{color:var(--themePrimButtonsBg-color);font-size:20px;line-height:20px;vertical-align:middle}.material-icons-outlined{vertical-align:middle}.table>tbody>tr.warning-message>td{background-color:var(--warning-container-color);padding-top:0}label.mat-checkbox-layout{margin-bottom:2px}.actions-list button.icon-btn{padding:0}.status-switcher{text-transform:capitalize;height:20px;line-height:20px;padding:0}.table>tbody>tr>td>span{display:inline-block}ul.actions-list{justify-content:flex-end;height:20px;align-items:center}ul.switcher-cell{justify-content:flex-start}::ng-deep .status-switcher label.mat-slide-toggle-label{margin-bottom:0}::ng-deep .mat-slide-toggle{height:20px;line-height:20px}.table-header-with-icon{height:18px;display:flex;align-items:center}.table-header-with-icon .material-icons{margin-right:6px}ul.actions-list>li.ml-0{margin-left:0}.table-flex.no-data{border-radius:3px 3px 0 0}.table-custom-select{min-width:292px;max-width:292px}.table-flex table{border-radius:3px}thead th:first-child{border-top-left-radius:2px}thead th:last-child{border-top-right-radius:2px}.table-hyperlink{color:var(--themePrimButtonsBg-color);cursor:pointer;white-space:nowrap;.material-icons {font-size: 16px; margin-bottom: 2px;} .table-text-item {font-size: 12px; font-weight: 600;} &:hover {color: var(--themePrimButtonsBg-hover-color);}}.table-flex{overflow:visible!important}.table-link{width:-webkit-fill-available}.table-link span{overflow:hidden;text-overflow:ellipsis}.status{display:flex;align-items:center}.warning-cell{padding:0 0 8px 12px}.table>tbody>tr.no-border{border-bottom:0}.warnings-container{display:flex;flex-direction:column;gap:8px}.table>tbody>tr.previous-row-hover:hover+tr>td{background:var(--neutral-on-main-neutral-4-color)}.table>tbody>tr:has(+ tr.next-row-hover:hover)>td{background:var(--neutral-on-main-neutral-4-color)}.th-filter{position:relative!important}.filter-icon{margin:0 0 0 8px;position:absolute!important;transform:translate(-50%,-50%)}.dropdown{position:unset}table.top>tbody>tr>td{vertical-align:top}table.middle>tbody>tr>td{vertical-align:middle}.dropdown-filter{height:auto;padding:4px;margin-top:12px;overflow-y:auto;border-top-color:var(--themePrimButtonsBg-color)}.dropdown-filter-active{background-color:var(--themePrimButtonsBg-12-color)}.upload-table-item{max-width:720px;border-radius:4px;background:var(--themePrimButtonsBg-8-color);padding:12px}.upload-item-spinner{float:right}.upload-table-item-name{color:var(--neutral-on-main-neutral-color);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin-left:12px}.upload-table-item-icon{color:var(--neutral-outline-color);font-size:24px}.file-block{display:flex;flex-direction:column;width:100%;position:relative;height:40px}.file-block-title{width:100%;display:flex;justify-content:space-between;height:40px}.upload-table-text-block{display:inline-block;width:95%}.upload-file-records{float:inline-end}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i7.PaginatorComponentClass, selector: "epom-paginator", inputs: ["viewStartLimit", "incoming", "outcoming", "optionsRows", "isShowPaginatorOptions", "pageValue", "perPage", "usePaginatorSpinner", "noDataMode", "totalRows"], outputs: ["changePageEvent"] }, { kind: "directive", type: i8.DropdownDirective, selector: "[dropDown]" }, { kind: "component", type: i9.SpinnerButtonComponent, selector: "epom-spinner-button", inputs: ["placement", "config", "toggleFadeElement", "autoopen"] }, { kind: "component", type: i10.SpinnerTablePlaceholderComponent, selector: "epom-spinner-table-placeholder", inputs: ["placement", "config", "toggleFadeElement", "autoopen", "subscription"] }, { kind: "component", type: i11.SpinnerTableNoDataComponent, selector: "epom-spinner-table-no-data", inputs: ["placement", "config", "toggleFadeElement", "autoopen", "searchData", "openStatePosition"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i12.DropdownComponentClass, selector: "epom-dropdown", inputs: ["toggleButton", "position", "marginTop", "width", "state", "closeDropdownOnSelection"], outputs: ["close", "visibilityChange"] }, { kind: "component", type: i13.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i14.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i15.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i16.BannerInfoComponent, selector: "app-banner-info", inputs: ["smallSize", "textBanner", "showIcon", "showCloseButton", "textInfo", "status", "bannerWrapperClass"] }, { kind: "component", type: i17.ShowMoreTextComponent, selector: "epom-show-more-text", inputs: ["text"] }, { kind: "component", type: i18.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i19.InputCounterComponent, selector: "epom-input-counter", inputs: ["step", "minQuantity", "maxQuantity", "icon", "formControl", "showIcon", "iconColor", "isMaterialIcon", "showQuantityButton", "placeholder", "isReadOnly", "iconPosition", "isIconOperationSign"] }, { kind: "component", type: i20.SelectComponentClass, selector: "custom-select", inputs: ["valuesStream", "useClear", "clearLikeOption", "subtitle", "placeholder", "selectedDefaultIndex", "selectedDefaultValue", "formElement", "multiple", "search", "disable", "required", "direction", "maxItems", "dataQa", "canRemoveLastItem", "showFlag", "readOnly", "width", "withDescription", "withOperation", "isEmptyStateDescription", "createSelectOptionText", "selectedItemsOnTop", "startTypingText", "isSearchDelay"], outputs: ["valueChanged", "createOptionHandler", "searchHandler"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ng2-table', template: "<div class=\"component-container component-table-container\">\n  <div class=\"component-data component-table-data\" #tableData>\n    <div class=\"table-flex\" [ngClass]=\"{'no-data' : !this.paginatedArray$.value?.length}\">\n      <table class=\"table table-component\" [ngClass]=\"tableConfig.cellsVerticalAlign\">\n        <thead>\n          <tr>\n            <ng-container *ngFor=\"let column of tableConfig.columnsConfig; let lastIndex = last\">\n              <th\n                [style.width]=\"column.columnWidth\"\n                [ngClass]=\"getThClass(column)\"\n                [class.last-th]=\"setThClassForLast(lastIndex)\"\n                [class.select-th]=\"showCheckboxes && column.checkboxContent.header && (paginatedArray$ | async)?.length !== 0\"\n                *ngIf=\"!visibleColumns.length || isVisibleCurrentColumn(column.textContent.title)\"\n                (click)=\"sortWithTimeout(column)\"\n              >\n                <span *ngIf=\"column.HTMLContent?.header\">{{ column.HTMLContent.title }}</span>\n                <span\n                  *ngIf=\"!column.filter.active && column.textContent.header &&\n                         column.iconsContent.header && !column.tooltipContent.tooltip\"\n                  class=\"table-header-with-icon\"\n                >\n                  <span\n                    class=\"material-icons material-icons-outlined button-icon button-icon-outline button-icon-small\"\n                    [matTooltip]=\"column.iconsContent.title\"\n                    matTooltipPosition=\"above\"\n                    >{{ column.iconsContent.headerClass }}</span\n                  >\n                  <span>{{ column.textContent.title }}</span>\n                </span>\n                <span\n                  class=\"text-with-icon\"\n                  style=\"display: flex; align-items: center\"\n                  *ngIf=\"!column.filter.active &&\n              column.textContent.header && column.tooltipContent.tooltip\"\n                >\n                  {{ column.textContent.title }}\n                  <span class=\"wrapper\">\n                    <i\n                      [ngClass]=\"column.tooltipContent.iconContent\"\n                      *ngIf=\"column.tooltipContent.iconContent\"\n                      class=\"tooltip-icon\"\n                    ></i>\n                    <div class=\"tooltip\">{{ column.tooltipContent.text }}</div>\n                  </span>\n                </span>\n                <span\n                  *ngIf=\"!column.filter.active && column.textContent.header &&\n                         !column.iconsContent.header && !column.tooltipContent.tooltip\"\n                >\n                  {{ column.textContent.title }}\n                </span>\n                <span\n                  *ngIf=\"!column.filter.active && column.iconsContent.header &&\n                         !column.textContent.header && !column.tooltipContent.tooltip\"\n                  class=\"only-icon\"\n                >\n                  <i [ngClass]=\"column.iconsContent.headerClass\"></i>\n                </span>\n                <div *ngIf=\"column.filter.active\" class=\"th-filter dropdown\" dropDown>\n                  <div *ngIf=\"column.filter.active\" class=\"th-filter dropdown\" #dropDownButton>\n                    <span\n                      *ngIf=\"column.textContent.header &&\n                              column.iconsContent.header && column.filter.activeValueAlias\"\n                      class=\"{{valueList[column.filter.activeValueAlias]}} text-capitalize\"\n                    >\n                      <i class=\"status-icon\"></i>\n                    </span>\n                    <span\n                      class=\"material-icons material-icons-outlined button-icon button-icon-primary button-icon-large filter-icon\"\n                      *ngIf=\"column.textContent.header &&\n                              column.iconsContent.header && !column.filter.activeValueAlias\"\n                    >\n                      filter_list\n                    </span>\n\n                    <epom-dropdown\n                      [toggleButton]=\"dropDownButton\"\n                      [position]=\"'dropdown-left'\"\n                      [width]=\"'auto'\"\n                      [marginTop]=\"0\"\n                    >\n                      <ul class=\"dropdown dropdown-left\">\n                        <li\n                          *ngFor=\"let filter of column.filter.filterList\"\n                          [ngClass]=\"{'dropdown-filter-active' : currentFilterStatus === filter.name}\"\n                        >\n                          <a (click)=\"applyAction(filter.name, column.filter.alias)\">\n                            <span class=\"{{filter.class}} text-capitalize\">\n                              <i class=\"status-icon\"></i>{{ filter.description }}\n                            </span>\n                          </a>\n                        </li>\n                      </ul>\n                    </epom-dropdown>\n                  </div>\n                </div>\n                <mat-checkbox\n                  *ngIf=\"showCheckboxes && column.checkboxContent.header && (paginatedArray$ | async)?.length !== 0\"\n                  matTooltip=\"{{column.checkboxContent.headerCheckboxMessage}}\"\n                  matTooltipDisabled=\"{{!column.checkboxContent.headerCheckboxMessage ||\n                            !column.checkboxContent.headerCheckboxMessage.length}}\"\n                  [indeterminate]=\"allItemsSelected || oneItemSelected\"\n                  [disabled]=\"column.checkboxContent.disabledCheckbox\"\n                  [(ngModel)]=\"allItemsSelected || oneItemSelected\"\n                  (change)=\"selectAll($event)\"\n                >\n                </mat-checkbox>\n              </th>\n            </ng-container>\n            <div class=\"customization-table dropdown\" *ngIf=\"userConfig.isActiveCustomization\">\n              <button class=\"dropdown-button\" #dropDownButton>\n                <i class=\"icon-cog\"></i>\n              </button>\n              <form [formGroup]=\"columnsForm\" (submit)=\"columnsFormSubmit();\">\n                <epom-dropdown [state]=\"dropDownState\" (close)=\"closeDropDownEvent()\" [toggleButton]=\"dropDownButton\">\n                  <div class=\"actions-container\">\n                    <button type=\"button\" class=\"select-all-button\" (click)=\"selectAllOptionsForColumns()\">\n                      Select all\n                    </button>\n                    <button type=\"button\" class=\"clear-all-button\" (click)=\"clearAllOptionsForColumns()\">\n                      Clear all\n                    </button>\n                  </div>\n                  <ul\n                    formArrayName=\"items\"\n                    class=\"dropdown dropdown-left\"\n                    [class.rows-direction]=\"tableConfig.columnsConfig.length >= 6\"\n                  >\n                    <li *ngFor=\"let col of tableConfig.columnsConfig; index as i\">\n                      <input\n                        [formControlName]=\"i\"\n                        class=\"switchers\"\n                        id=\"{{col.textContent.title}}\"\n                        type=\"checkbox\"\n                        value=\"{{col.textContent.title}}\"\n                        formControlName=\"col.textContent.title\"\n                      />\n                      <label for=\"{{col.textContent.title}}\">{{ col.textContent.title }}</label>\n                    </li>\n                  </ul>\n                  <div class=\"content-footer\">\n                    <button type=\"button\" (click)=\"cancelSelection()\" class=\"btn btn-default\">Cancel</button>\n                    <button type=\"submit\" class=\"btn btn-default\">Save</button>\n                  </div>\n                </epom-dropdown>\n              </form>\n            </div>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngIf=\"tableConfig.fixedRow.top\" class=\"total\">\n            <ng-container *ngFor=\"let column of tableConfig.columnsConfig\">\n              <td *ngIf=\"!visibleColumns.length || isVisibleCurrentColumn(column.textContent.title)\">\n                <span class=\"{{tableConfig.fixedRow.class}}\">\n                  {{ tableConfig.fixedRow.cells[column.textContent.contentProperty] }}\n                </span>\n              </td>\n            </ng-container>\n          </tr>\n          <ng-container *ngFor=\"let row of paginatedArray$ | async\">\n            <tr\n              class=\"{{row.activeClass}}\"\n              [attr.data-qa]=\"'ssp-ep-item'\"\n              [class.previous-row-hover]=\"row.warningArray?.length\"\n            >\n              <ng-container *ngFor=\"let column of tableConfig.columnsConfig\">\n                <td\n                  *ngIf=\"!visibleColumns.length || isVisibleCurrentColumn(column.textContent.title)\"\n                  [ngClass]=\"getTdClass(column)\"\n                  [class.select-th]=\"showCheckboxes && column.checkboxContent.header && (paginatedArray$ | async)?.length !== 0\"\n                  class=\"{{row[column.tdCustomClass.tdCustomClassProperty]}}\"\n                >\n                  <div [ngClass]=\"(column?.wrapper?.class || '') + ' ' + (row[column?.wrapper?.classProperty] || '')\">\n                    <span *ngIf=\"column.HTMLContent?.body\" [innerHTML]=\"row[column.HTMLContent.contentProperty]\"></span>\n                    <span\n                      *ngIf=\"column.labelContent && column.labelContent.body\"\n                      class=\"{{row[column.customClass.bodyClassProperty]}}\"\n                    >\n                      <ul class=\"list-labels\" *ngIf=\"row[column.labelContent.contentProperty].length\">\n                        <li class=\"label-enpoint\" *ngFor=\"let label of row[column.labelContent.contentProperty]\">\n                          <span\n                            [style.background-color]=\"'#' + label[column.labelContent.backgroundProperty]\"\n                            class=\"label label-enpoint\"\n                            [style.color]=\"getLabelTextColor(label[column.labelContent.backgroundProperty])\"\n                          >\n                            {{ label[column.labelContent.titleProperty] }}\n                          </span>\n                        </li>\n                      </ul>\n                      <ng-container *ngIf=\"!row[column.labelContent.contentProperty].length\">-</ng-container>\n                    </span>\n                    <div *ngIf=\"column.endpointsListContent && column.endpointsListContent.body\">\n                      <ul class=\"table-endpoint-list\">\n                        <li *ngFor=\"let endpoint of row[column.endpointsListContent.contentProperty]\">\n                          <a\n                            title=\"{{endpoint[column.endpointsListContent.name]}}\"\n                            [routerLink]=\"endpoint[column.endpointsListContent.link]\"\n                          >\n                            {{ endpoint[column.endpointsListContent.name] }}</a\n                          >\n                        </li>\n                      </ul>\n                    </div>\n                    <div *ngIf=\"column.inputContent as input\" class=\"form-control-wrapper\">\n                      <epom-input-counter\n                        *ngIf=\"input.type === 'number'\"\n                        ngDefaultControl\n                        [showIcon]=\"input.showIcon\"\n                        [isMaterialIcon]=\"input.isMaterialIcon\"\n                        [icon]=\"row[input.iconProperty]\"\n                        [formControl]=\"row[input.formControlProperty]\"\n                      >\n                      </epom-input-counter>\n                      <custom-select\n                        class=\"table-custom-select\"\n                        *ngIf=\"input.type === 'select'\"\n                        [formElement]=\"row[input.formControlProperty]\"\n                        [valuesStream]=\"row[input.valuesStreamProperty]\"\n                        [placeholder]=\"input.placeholder\"\n                      >\n                      </custom-select>\n                    </div>\n                    <span\n                      *ngIf=\"!column.textContent.body &&\n                         !column.iconsContent.body &&\n                         !column.imagesContent.body &&\n                         column.videosContent?.body &&\n                         !column.videosContent?.isBodyLink\"\n                      class=\"{{row[column.customClass.bodyClassProperty]}}\"\n                    >\n                      <span\n                        *ngFor=\"let videoProperty of column.videosContent.bodyProperties\"\n                        (click)=\"createVideoPopup('Video',row[videoProperty])\"\n                        class=\"video-preview\"\n                      >\n                        <video class=\"image-in-td\">\n                          <source [src]=\"row[videoProperty]\" />\n                        </video>\n                      </span>\n                    </span>\n\n                    <a *ngIf=\"column.imagesContent.isBodyLink\" href=\"row[column.imagesContent.bodyLinkProperty]\">\n                      <span\n                        *ngIf=\"!column.textContent.body &&\n                           !column.iconsContent.body &&\n                           !column.videosContent?.body &&\n                            column.imagesContent.body\"\n                        class=\"{{row[column.customClass.bodyClassProperty]}}\"\n                      >\n                        <img\n                          *ngFor=\"let imageProperty of column.imagesContent.bodyProperties\"\n                          [src]=\"row[imageProperty]\"\n                          class=\"image-in-td\"\n                        />\n                      </span>\n                    </a>\n\n                    <span\n                      *ngIf=\"!column.iconsContent.body &&\n                         !column.videosContent?.body &&\n                         column.imagesContent.body &&\n                         !column.imagesContent.isBodyLink\"\n                      class=\"{{row[column.customClass.bodyClassProperty]}}\"\n                    >\n                      <img\n                        *ngFor=\"let imageProperty of column.imagesContent.bodyProperties\"\n                        [src]=\"row[imageProperty]\"\n                        class=\"image-in-td\"\n                      />\n                    </span>\n\n                    <a *ngIf=\"column.iconsContent.isBodyLink\" href=\"row[column.iconsContent.bodyLinkProperty]\">\n                      <span\n                        *ngIf=\"!column.textContent.body &&\n                          !column.imagesContent.body &&\n                         column.iconsContent.body\"\n                        class=\"{{row[column.customClass.bodyClassProperty]}}\"\n                      >\n                        <i\n                          *ngFor=\"let iconProperty of column.iconsContent.bodyProperties\"\n                          [ngClass]=\"row[iconProperty]\"\n                        ></i>\n                      </span>\n                    </a>\n                    <div *ngIf=\"column.iconsContent.isBodyAction && row[column.textContent.showProperty]\">\n                      <div class=\"table-hyperlink\" (click)=\"applyAction(row, column.textContent.alias)\">\n                        <span class=\"material-icons material-icons-outlined\"\n                          >{{ column.iconsContent.bodyLinkProperty }}</span\n                        >\n                        <span class=\"table-text-item ml-4\">{{column.iconsContent.title}}</span>\n                      </div>\n                      <span>{{ row[column.textContent.contentProperty] }}</span>\n                    </div>\n\n                    <span\n                      *ngIf=\"!column.imagesContent.body &&\n                         column.iconsContent.body &&\n                         !column.iconsContent.isBodyLink\"\n                      class=\"{{row[column.customClass.bodyClassProperty]}} table-info-icon tooltip-wrapper d-flex\"\n                      [attr.title]=\"column.iconsContent.titleProperty ? row[column.iconsContent.titleProperty] : ''\"\n                    >\n                      <ng-container *ngIf=\"!column.iconsContent.material\">\n                        <!-- todo remove after changing all icons to material -->\n                        <i\n                          *ngFor=\"let iconProperty of column.iconsContent.bodyProperties\"\n                          [ngClass]=\"row[iconProperty]\"\n                        ></i>\n                      </ng-container>\n                      <ng-container *ngIf=\"column.iconsContent.material\">\n                        <span\n                          *ngFor=\"let iconProperty of column.iconsContent.bodyProperties\"\n                          class=\"material-icons material-icons-outlined\"\n                        >\n                          {{ row[iconProperty] }}</span\n                        >\n                      </ng-container>\n                      <span *ngIf=\"column.tooltipContent.body\" class=\"tooltip-toggle\">{{ row.uiType }} </span>\n                    </span>\n                    <a\n                      class=\"table-link\"\n                      *ngIf=\"column.textContent.isBodyLink\"\n                      [routerLink]=\"row[column.textContent.bodyLinkProperty]\"\n                      [queryParams]=\"row[column.textContent.queryParamsProperty]\"\n                      [ngClass]=\"{'disabled-Link': !row[column.textContent.bodyLinkProperty]?.length}\"\n                    >\n                      <span\n                        *ngIf=\"column.textContent.body &&\n                           !column.textContent.isBodyAction &&\n                           !column.iconsContent.body\"\n                        class=\"{{row[column.customClass.bodyClassProperty]}}\"\n                      >\n                        {{ row[column.textContent.contentProperty] }}\n                      </span>\n                    </a>\n                    <span\n                      *ngIf=\"column.textContent.isBodyLink &&\n                            column.textContent.body &&\n                            column.textContent.isBodyAction &&\n                           !column.iconsContent.body\"\n                      class=\"{{row[column.customClass.bodyClassProperty]}} body-action-text\"\n                      (click)=\"applyAction(row, column.textContent.alias)\"\n                    >\n                      {{ row[column.textContent.contentProperty] }}\n                    </span>\n\n                    <span\n                      *ngIf=\"column.textContent.body && column.textContent.isStatus\"\n                      class=\"status-wrapper\"\n                      [ngClass]=\"row[column.customClass.bodyClassProperty]\"\n                    >\n                      <span class=\"material-icons\">circle</span>\n                      <span>{{ row[column.textContent.contentProperty] }}</span>\n                    </span>\n\n                    <span\n                      *ngIf=\"column.textContent.body &&\n                         !column.iconsContent.body &&\n                         !column.textContent.isBodyLink &&\n                         !column.textContent.showMoreText &&\n                         !column.textContent.isStatus\"\n                      class=\"{{row[column.customClass.bodyClassProperty]}}\"\n                    >\n                      {{ row[column.textContent.contentProperty] }}\n                    </span>\n                    <span\n                      *ngIf=\"column.textContent.body &&\n                        !column.imagesContent.body &&\n                         column.iconsContent.body\"\n                      class=\"{{row[column.customClass.bodyClassProperty]}}\"\n                    >\n                      <i\n                        *ngFor=\"let iconProperty of column.iconsContent.bodyProperties\"\n                        [ngClass]=\"row[iconProperty]\"\n                      ></i>\n                      {{ row[column.textContent.contentProperty] }}\n                    </span>\n                    <epom-show-more-text\n                      *ngIf=\"column.textContent.body && column.textContent.showMoreText\"\n                      [text]=\"row[column.textContent.contentProperty]\"\n                    >\n                    </epom-show-more-text>\n                    <mat-checkbox\n                      *ngIf=\"showCheckboxes && column.checkboxContent.body\"\n                      matTooltip=\"{{row.disabledCheckboxMessage}}\"\n                      matTooltipDisabled=\"{{!row.disabledCheckboxMessage || !row.disabledCheckboxMessage.length}}\"\n                      [disabled]=\"row.disabledCheckbox\"\n                      [(ngModel)]=\"row.checked\"\n                      (change)=\"fillBulkList(row)\"\n                      (ngModelChange)=\"updateAllComplete()\"\n                    >\n                    </mat-checkbox>\n                    <ul class=\"actions-list\" *ngIf=\"column.buttonsContent.body\" [class]=\"column.buttonsContent.class\">\n                      <li\n                        *ngFor=\"let button of column.buttonsContent.togglTextButtonList\"\n                        (click)=\"applyAction(row, button.alias)\"\n                      >\n                        <button\n                          *ngIf=\"row[button.showProperty]\"\n                          [attr.data-qa]=\"button.alias\"\n                          [class]=\"'status-switcher-on ' + button.class\"\n                        >\n                          <epom-spinner-button\n                            *ngIf=\"button.spinner && row.spinnerPlaceholderName\"\n                            [placement]=\"row.spinnerPlaceholderName\"\n                          ></epom-spinner-button>\n                          <mat-slide-toggle [checked]=\"row.status === 'Active'\">\n                            <span *ngIf=\"row.status !== 'Active'\" class=\"switcher-text text-on-off\">Off</span>\n                            <span *ngIf=\"row.status === 'Active'\" class=\"switcher-text text-on\">On</span>\n                          </mat-slide-toggle>\n                        </button>\n                      </li>\n\n                      <li *ngIf=\"column.buttonsContent.select as select\" class=\"table-custom-select\">\n                        <custom-select\n                          [dataQa]=\"select?.alias\"\n                          [valuesStream]=\"select?.availableData$\"\n                          [useClear]=\"select?.useClear\"\n                          [clearLikeOption]=\"select?.clearLikeOption\"\n                          [multiple]=\"select?.multiple\"\n                          [search]=\"select?.search\"\n                          [placeholder]=\"select?.placeholder\"\n                          [formElement]=\"selectFormControl((select?.availableData$ | async), row, select?.alias)\"\n                        ></custom-select>\n                      </li>\n\n                      <li\n                        *ngFor=\"let button of column.buttonsContent.textButtonList\"\n                        (click)=\"applyAction(row, button.alias)\"\n                      >\n                        <span *ngIf=\"row[button.showProperty]\" class=\"text\">{{ button.text }}</span>\n                      </li>\n                      <li\n                        *ngFor=\"let button of column.buttonsContent.buttonList\"\n                        matTooltip=\"{{button.title}}\"\n                        matTooltipPosition=\"above\"\n                        [attr.data-qa]=\"button.alias\"\n                        [matTooltipClass]=\"'table-tooltip'\"\n                        matTooltipDisabled=\"{{!row[button.showProperty] || !button.title?.length || !button.showMatTooltip}}\"\n                        class=\"{{button.class}}\"\n                        [ngClass]=\"{'ml-0': !row[button.showProperty]}\"\n                        (click)=\"applyAction(row, button.alias)\"\n                      >\n                        <button *ngIf=\"column.textContent.material\" [attr.data-qa]=\"button.alias\" class=\"icon-btn\">\n                          <span\n                            *ngIf=\"row[button.showProperty]\"\n                            class=\"material-icons material-icons-outlined button-icon button-icon-large\"\n                            [class]=\"button.iconClass\"\n                            >{{ button.icon }}</span\n                          >\n                        </button>\n\n                        <ng-container *ngIf=\"!column.textContent.material\">\n                          <!-- todo remove after changing all icons to material -->\n                          <span *ngIf=\"row[button.showProperty]\" class=\"icon\"><i [ngClass]=\"button.icon\"></i></span>\n                        </ng-container>\n                      </li>\n                    </ul>\n                  </div>\n                </td>\n              </ng-container>\n            </tr>\n            <tr *ngIf=\"row.warningArray?.length\" [attr.data-qa]=\"'warning-msg'\" class=\"next-row-hover\">\n              <td [attr.colspan]=\"tableConfig.columnsConfig.length\" class=\"warning-cell\">\n                <div class=\"warnings-container\">\n                  <app-banner-info\n                    *ngFor=\"let warning of row.warningArray\"\n                    [textBanner]=\"true\"\n                    [showIcon]=\"true\"\n                    [showCloseButton]=\"false\"\n                    [status]=\"warning.warningIcon\"\n                    [textInfo]=\"warning.warningMessage\"\n                    [bannerWrapperClass]=\"warning.warningClass\"\n                  ></app-banner-info>\n                </div>\n              </td>\n            </tr>\n            <tr *ngIf=\"row.uploadingStarted\" class=\"upload-row\" [attr.data-qa]=\"'warning-msg'\">\n              <td [attr.colspan]=\"tableConfig.columnsConfig.length\">\n                <ng-container *ngIf=\"row.uploadingStarted && row.uploadItems?.length\">\n                  <span>Uploading items:</span>\n\n                  <div class=\"upload-table-item mt-8\" *ngFor=\"let uploadItem of row.uploadItems\">\n                    <ng-container *ngIf=\"!uploadItem.uploadedWithError\">\n                      <div class=\"mb-8\">\n                        <span class=\"material-icons material-icons-outlined upload-table-item-icon\">\n                          insert_drive_file\n                        </span>\n                        <div class=\"upload-table-text-block\" *ngIf=\"uploadItem?.linesCount\">\n                          <span class=\"upload-table-item-name\">{{uploadItem?.fileName}}</span>\n                          <div class=\"upload-file-records\">\n                            Processed {{uploadItem?.processedCount}} of {{ uploadItem?.linesCount}} Records.\n                          </div>\n                        </div>\n                        <span class=\"upload-table-item-name\" *ngIf=\"!uploadItem?.linesCount\"\n                          >{{uploadItem?.fileName}}</span\n                        >\n                        <mat-spinner\n                          class=\"upload-item-spinner\"\n                          [diameter]=\"24\"\n                          *ngIf=\"!uploadItem?.linesCount\"\n                        ></mat-spinner>\n                      </div>\n                      <div class=\"progress\">\n                        <div\n                          class=\"progress-bar\"\n                          role=\"progressbar\"\n                          [ngStyle]=\"{width: uploadItem?.processedCount/uploadItem?.linesCount*100 + '%'}\"\n                        ></div>\n                      </div>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"uploadItem.uploadedWithError\">\n                      <app-banner-info\n                        [smallSize]=\"false\"\n                        [showIcon]=\"true\"\n                        [showCloseButton]=\"false\"\n                        [status]=\"'error'\"\n                        [textInfo]=\"'Upload ' + uploadItem?.fileName + ' failed'\"\n                      >\n                      </app-banner-info>\n                    </ng-container>\n                  </div>\n                </ng-container>\n              </td>\n            </tr>\n          </ng-container>\n          <tr *ngIf=\"tableConfig.fixedRow.bottom\" class=\"total\">\n            <ng-container *ngFor=\"let column of tableConfig.columnsConfig\">\n              <td *ngIf=\"!visibleColumns.length || isVisibleCurrentColumn(column.textContent.title)\">\n                <span class=\"{{tableConfig.fixedRow.class}}\">\n                  {{ tableConfig.fixedRow.cells[column.textContent.contentProperty] }}\n                </span>\n              </td>\n            </ng-container>\n          </tr>\n          <tr\n            *ngIf=\"(paginatedArray$ | async)?.length === 0 && tableConfig.showDefaultPlaceholder && !showDefaultNoDataSpinner\"\n            class=\"no-hover\"\n          >\n            <td [attr.colspan]=\"tableConfig.columnsConfig.length\">\n              <div class=\"config-no-data\">No available data to show</div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n  <epom-spinner-table-placeholder\n    placement=\"table-placeholder\"\n    [autoopen]=\"false\"\n    [config]=\"tablePlaceholderConfig\"\n    [toggleFadeElement]=\"tableData\"\n  ></epom-spinner-table-placeholder>\n  <epom-spinner-table-no-data\n    *ngIf=\"showDefaultNoDataSpinner\"\n    [searchData]=\"searchString\"\n    placement=\"table-default-no-data-state\"\n  ></epom-spinner-table-no-data>\n  <epom-paginator\n    [ngClass]=\"{'no-data': !this.paginatedArray$.value?.length && !tableConfig.showDefaultPlaceholder}\"\n    *ngIf=\"tableConfig.pagination.enabled\"\n    [incoming]=\"dataArray$\"\n    [outcoming]=\"paginatedArray$\"\n    [perPage]=\"tableConfig.pagination.perPage\"\n    [pageValue]=\"tableConfig.pagination.pageValue || 1\"\n    [isShowPaginatorOptions]=\"tableConfig.pagination.paginatorDropdownEnabled\"\n    [optionsRows]=\"paginatorOptionsRows\"\n    (changePageEvent)=\"changePerPageEmitter($event)\"\n  ></epom-paginator>\n</div>\n", styles: [".table-component{border-radius:3px}.table-component ul.actions-list>li>span.icon{display:block;width:36px;height:36px;text-align:center;border-radius:50px;color:var(--outline-light);overflow:hidden;position:relative;cursor:pointer}.component-table-data,.component-data{z-index:1}.table-component ul.actions-list>li>span.text{display:block;line-height:36px;height:36px;text-align:center;border-radius:50px;color:#d6d6d6;overflow:hidden;position:relative;cursor:pointer;padding:0 10px;text-transform:uppercase}.table-component ul.actions-list>li>span>i{line-height:37px}.table-component ul.actions-list>li>span:hover{background:#ececec}.table-component thead span{position:relative}.table-component th{vertical-align:middle;text-align:left;white-space:nowrap}.table-component .only-icon{display:block;margin-top:3px}.table-component .image-in-td{max-width:100%}.customization-table{position:absolute;top:7px;right:15px;margin-left:1em}.customization-table>.dropdown-button{outline:none;border:none;padding:0;margin:0;background-color:transparent;cursor:pointer}ul.dropdown>li{list-style:none;width:100%}input.switchers+label{width:100%;text-align:left}.customization-table ul{display:flex;flex-direction:column;align-items:baseline;padding:0;width:100%}.switchers{width:100%}.customization-table .content-footer{padding:0;border:none;text-align:center;width:100%}.customization-table .content-footer>button{color:#fff;background:#6f79dd;outline:none}.customization-table .actions-container{width:100%;display:flex;justify-content:space-around;align-items:center;flex-direction:row}.customization-table .actions-container>button{border:none;color:#24b47e;outline:none;background-color:#fff}.customization-table ul.rows-direction{display:flex;justify-content:center;flex-direction:row;flex-wrap:wrap}.customization-table ul.rows-direction li{width:45%;margin:3px}.last-th{padding-right:5em}.select-th{text-align:center!important}.video-preview{cursor:pointer}.body-action-text{color:#43a0de;cursor:pointer}.wrapper{position:relative}.wrapper .tooltip{background:#23323f;bottom:100%;color:#fff;display:block;left:-90px;width:212px;margin-bottom:15px;opacity:0;padding:20px;pointer-events:none;position:absolute;font-size:12px;font-family:Open Sans,sans-serif;transform:translateY(10px);transition:all .25s ease-out;-ms-box-shadow:2px 2px 6px rgba(0,0,0,.28);-o-box-shadow:2px 2px 6px rgba(0,0,0,.28);box-shadow:2px 2px 6px #00000047}.wrapper .tooltip:before{bottom:-20px;content:\" \";display:block;height:20px;left:0;position:absolute;width:100%}.wrapper .tooltip:after{border-left:solid transparent 10px;border-right:solid transparent 10px;border-top:solid #23323f 10px;bottom:-10px;content:\" \";height:0;left:50%;margin-left:-13px;position:absolute;width:0}.wrapper:hover .tooltip{opacity:1;pointer-events:auto;transform:translateY(0)}.lte8 .wrapper .tooltip{display:none}.lte8 .wrapper:hover .tooltip{display:block}.icon-info.tooltip-icon{padding-left:4px}li.label-enpoint{max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.list-labels{display:flex;gap:4px;flex-wrap:wrap}.tooltip-wrapper{position:relative;display:inline-block;cursor:pointer}.status-wrapper{display:flex;align-items:center}.align-buttons-left{justify-content:flex-start!important;margin-left:-6px}thead tr:first-child th:first-child{border-top-left-radius:2px}thead tr:first-child th:last-child{border-top-right-radius:2px}.tooltip-wrapper .tooltip-toggle{visibility:hidden;background-color:#333;color:#fff;text-align:center;border-radius:2px;padding:4px;position:fixed;z-index:1;opacity:.6;font-size:10px}.tooltip-wrapper:hover .tooltip-toggle{visibility:visible}.table-endpoint-list{padding:0;margin:0}.table-endpoint-list li{list-style-type:none;max-width:270px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.config-no-data{color:var(--outline-light);font-size:var(--font-caption);font-weight:var(--font-weight-regular);line-height:12px;text-align:center;height:34px;display:flex;align-items:center;justify-content:center}.status>span.material-icons{color:var(--themePrimButtonsBg-color);font-size:20px;line-height:20px;vertical-align:middle}.material-icons-outlined{vertical-align:middle}.table>tbody>tr.warning-message>td{background-color:var(--warning-container-color);padding-top:0}label.mat-checkbox-layout{margin-bottom:2px}.actions-list button.icon-btn{padding:0}.status-switcher{text-transform:capitalize;height:20px;line-height:20px;padding:0}.table>tbody>tr>td>span{display:inline-block}ul.actions-list{justify-content:flex-end;height:20px;align-items:center}ul.switcher-cell{justify-content:flex-start}::ng-deep .status-switcher label.mat-slide-toggle-label{margin-bottom:0}::ng-deep .mat-slide-toggle{height:20px;line-height:20px}.table-header-with-icon{height:18px;display:flex;align-items:center}.table-header-with-icon .material-icons{margin-right:6px}ul.actions-list>li.ml-0{margin-left:0}.table-flex.no-data{border-radius:3px 3px 0 0}.table-custom-select{min-width:292px;max-width:292px}.table-flex table{border-radius:3px}thead th:first-child{border-top-left-radius:2px}thead th:last-child{border-top-right-radius:2px}.table-hyperlink{color:var(--themePrimButtonsBg-color);cursor:pointer;white-space:nowrap;.material-icons {font-size: 16px; margin-bottom: 2px;} .table-text-item {font-size: 12px; font-weight: 600;} &:hover {color: var(--themePrimButtonsBg-hover-color);}}.table-flex{overflow:visible!important}.table-link{width:-webkit-fill-available}.table-link span{overflow:hidden;text-overflow:ellipsis}.status{display:flex;align-items:center}.warning-cell{padding:0 0 8px 12px}.table>tbody>tr.no-border{border-bottom:0}.warnings-container{display:flex;flex-direction:column;gap:8px}.table>tbody>tr.previous-row-hover:hover+tr>td{background:var(--neutral-on-main-neutral-4-color)}.table>tbody>tr:has(+ tr.next-row-hover:hover)>td{background:var(--neutral-on-main-neutral-4-color)}.th-filter{position:relative!important}.filter-icon{margin:0 0 0 8px;position:absolute!important;transform:translate(-50%,-50%)}.dropdown{position:unset}table.top>tbody>tr>td{vertical-align:top}table.middle>tbody>tr>td{vertical-align:middle}.dropdown-filter{height:auto;padding:4px;margin-top:12px;overflow-y:auto;border-top-color:var(--themePrimButtonsBg-color)}.dropdown-filter-active{background-color:var(--themePrimButtonsBg-12-color)}.upload-table-item{max-width:720px;border-radius:4px;background:var(--themePrimButtonsBg-8-color);padding:12px}.upload-item-spinner{float:right}.upload-table-item-name{color:var(--neutral-on-main-neutral-color);font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin-left:12px}.upload-table-item-icon{color:var(--neutral-outline-color);font-size:24px}.file-block{display:flex;flex-direction:column;width:100%;position:relative;height:40px}.file-block-title{width:100%;display:flex;justify-content:space-between;height:40px}.upload-table-text-block{display:inline-block;width:95%}.upload-file-records{float:inline-end}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.SpinnerService }, { type: i2.FormBuilder }, { type: i3.StorageService }, { type: i4.PopupServiceClass }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { incomingData: [{
                type: Input,
                args: ['incoming']
            }], userConfig: [{
                type: Input,
                args: ['tableConfig']
            }], actionList: [{
                type: Input,
                args: ['actionList']
            }], valueList: [{
                type: Input,
                args: ['valueList']
            }], useDefaultSpinner: [{
                type: Input,
                args: ['useDefaultSpinner']
            }], checkboxesVisible: [{
                type: Input,
                args: ['checkboxesVisible']
            }], sortTimeout: [{
                type: Input
            }], tablePlaceholderConfig: [{
                type: Input
            }], showCheckboxes: [{
                type: Input
            }], pushedBulkList: [{
                type: Output
            }], allCheckboxesSelected: [{
                type: Output
            }], sortKey: [{
                type: Input,
                args: ['sortKey']
            }], showDefaultNoDataSpinner: [{
                type: Input,
                args: ['showDefaultNoDataSpinner']
            }], searchString: [{
                type: Input,
                args: ['searchString']
            }], paginatorOptionsRows: [{
                type: Input,
                args: ['paginatorOptionsRows']
            }], changeSortKey: [{
                type: Output
            }], changePaginatorSettings: [{
                type: Output,
                args: ['changePaginatorSettings']
            }] } });
//# sourceMappingURL=data:application/json;base64, 