@testgorilla/tgo-ui 2.30.12 → 2.31.0

package/fesm2022/testgorilla-tgo-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, ViewEncapsulation, Optional, Inject, HostBinding, Input, EventEmitter, booleanAttribute, Output, Pipe, ChangeDetectionStrategy, NgModule, Directive, HostListener, ViewChild, Self, ContentChild, signal, ElementRef, forwardRef, input, computed, ViewContainerRef, Host, inject, ViewChildren, InjectionToken, PLATFORM_ID, ChangeDetectorRef, TemplateRef, effect, DestroyRef, EnvironmentInjector, ApplicationRef, Injector, createComponent, viewChild, model, output } from '@angular/core';
 import * as i1$1 from '@angular/common';
-import { CommonModule, KeyValuePipe, NgIf, NgForOf, NgClass, NgTemplateOutlet, AsyncPipe, formatDate, isPlatformBrowser, NgOptimizedImage } from '@angular/common';
+import { CommonModule, KeyValuePipe, NgIf, NgForOf, NgClass, NgTemplateOutlet, AsyncPipe, formatDate, isPlatformBrowser, NgOptimizedImage, DecimalPipe } from '@angular/common';
 import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/platform-browser';
@@ -23,7 +23,7 @@ import { MatRadioModule } from '@angular/material/radio';
 import { trigger, transition, animate, style, state } from '@angular/animations';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$2 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormGroup, FormControl, Validators, UntypedFormControl } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormGroup, FormControl, NG_VALIDATORS, Validators, UntypedFormControl } from '@angular/forms';
 import * as i2$3 from '@angular/cdk/a11y';
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import * as i4$2 from '@angular/material/checkbox';
@@ -69,6 +69,7 @@ import * as i7$2 from '@angular/material/sort';
 import { MatSortModule } from '@angular/material/sort';
 import * as i2$7 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
+import { provideNgxMask, NgxMaskDirective } from 'ngx-mask';
 import * as i2$8 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import { hasModifierKey, SPACE, ENTER } from '@angular/cdk/keycodes';
@@ -13667,7 +13668,7 @@ class TableComponent {
         this.tableData = data;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.DestroyRef }, { token: IS_MOBILE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TableComponent, selector: "ui-table", inputs: { config: "config", data: "data", loading: "loading", applicationTheme: "applicationTheme", tableDetailColumns: "tableDetailColumns", tableDetails: "tableDetails", disableBorderRadius: "disableBorderRadius", isCondensed: "isCondensed", stickyHeader: "stickyHeader", maxHeight: "maxHeight" }, outputs: { onRowClickEvent: "onRowClickEvent", onDetailRowClickEvent: "onDetailRowClickEvent", paginatorChange: "paginatorChange", sortChange: "sortChange" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #tableContainer class=\"table-container\"\r\n     [ngClass]=\"{ 'without-title': !tableConfig?.title, 'disable-border-radius': disableBorderRadius }\"\r\n     [attr.theme]=\"applicationTheme\">\r\n  <div *ngIf=\"tableConfig?.title\" class=\"table-header\">\r\n    {{ tableConfig.title | sentencecase }}\r\n    <ng-content select=\"[title-actions]\"></ng-content>\r\n  </div>\r\n  <div\r\n    #table\r\n    *ngIf=\"scrollSettings$ | async as scrollSettings\"\r\n    class=\"table-wrapper\"\r\n    [class.sticky-header]=\"stickyHeader\"\r\n    [style.--table-max-height]=\"maxHeight\">\r\n    <table\r\n      [tabIndex]=\"0\"\r\n      class=\"main-table\"\r\n      [class.condensed]=\"isCondensed\"\r\n      mat-table\r\n      [dataSource]=\"tableData\"\r\n      matSort\r\n      [matSortStart]=\"tableConfig?.sort?.defaultSortStart ?? 'asc'\"\r\n      [matSortActive]=\"tableConfig?.sort?.active ?? ''\"\r\n      [matSortDirection]=\"tableConfig?.sort?.direction ?? ''\"\r\n      (matSortChange)=\"onSortChange($event)\"\r\n      multiTemplateDataRows\r\n    >\r\n\r\n      <ng-container\r\n        *ngFor=\"let column of tableConfig.columns; index as i, last as isLast; trackBy: trackColumnUniqueId\">\r\n        <ng-container *ngIf=\"isLast && column.isSticky && column.allowSort\">\r\n          <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\" [stickyEnd]=\"!scrollSettings?.scrollEnd\">\r\n            <th mat-header-cell\r\n                [start]=\"column.sortStart ?? 'asc'\"\r\n                [mat-sort-header]=\"column.sortHeader ?? column.key\"\r\n                *matHeaderCellDef\r\n                [attr.sortable]=\"column.allowSort ?? false\"\r\n                [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\r\n                [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\r\n                [style.font-weight]=\"'bold'\"\r\n            >\r\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title, column, colIndex: i}\"></ng-container>\r\n              </ng-container>\r\n              <ng-template #configValue>\r\n                <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\r\n              </ng-template>\r\n            </th>\r\n\r\n            <td mat-cell\r\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\r\n                [align]=\"column.styles?.alignment\"\r\n                [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\r\n                (click)=\"onRowClick(element); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\r\n            >\r\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\r\n                           *ngIf=\"loading; else value\"></ui-skeleton>\r\n              <ng-template #value>\r\n                <div class=\"row-value\">\r\n                  <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\r\n\r\n                  @if (column?.type) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element, rowIndex}\"></ng-container>\r\n                    </ng-container>\r\n                    <ng-template #configData>\r\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\r\n                        [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\r\n                    </ng-template>\r\n                  }\r\n                </div>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"isLast && column.isSticky && !column.allowSort\">\r\n          <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\"\r\n                        [stickyEnd]=\"scrollSettings.horizontalScroll ? !scrollSettings.scrollEnd : true\">\r\n            <th mat-header-cell\r\n                *matHeaderCellDef\r\n                [attr.sortable]=\"column.allowSort ?? false\"\r\n                [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\r\n                [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\r\n                [style.font-weight]=\"'bold'\"\r\n            >\r\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title, column, colIndex: i}\"></ng-container>\r\n              </ng-container>\r\n              <ng-template #configValue>\r\n                <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\r\n              </ng-template>\r\n            </th>\r\n\r\n            <td mat-cell\r\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\r\n                [align]=\"column.styles?.alignment\"\r\n                [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\r\n                (click)=\"onRowClick(element); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\r\n            >\r\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\"\r\n                           [appearance]=\"'line'\"\r\n                           *ngIf=\"loading; else value\"></ui-skeleton>\r\n              <ng-template #value>\r\n                <div class=\"row-value\">\r\n                  <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\r\n\r\n                  @if (column?.type) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"></ng-container>\r\n                    </ng-container>\r\n                    <ng-template #configData>\r\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\r\n                        [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\r\n                    </ng-template>\r\n                  }\r\n                </div>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container\r\n          *ngIf=\"!(isLast && column.isSticky) && column.allowSort\">\r\n          <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\"\r\n                        [sticky]=\"(isMobile$ | async) ? false : !scrollSettings.scrollStart  && !!column.isSticky\">\r\n            <th mat-header-cell\r\n                [start]=\"column.sortStart ?? 'asc'\"\r\n                [mat-sort-header]=\"column.sortHeader ?? column.key\"\r\n                [attr.sortable]=\"column.allowSort ?? false\"\r\n                *matHeaderCellDef\r\n                [style.font-weight]=\"'bold'\"\r\n                [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\r\n                [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\r\n            >\r\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: { $implicit: column.title, column, colIndex: i }\"></ng-container>\r\n              </ng-container>\r\n              <ng-template #configValue>\r\n                <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\r\n              </ng-template>\r\n            </th>\r\n\r\n            <td mat-cell\r\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\r\n                [align]=\"column.styles?.alignment\"\r\n                [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\r\n                (click)=\"onRowClick(element); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\r\n            >\r\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\"\r\n                           [appearance]=\"'line'\"\r\n                           *ngIf=\"loading; else value\"></ui-skeleton>\r\n              <ng-template #value>\r\n                <div class=\"row-value\">\r\n                  <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\r\n\r\n                  @if (column?.type) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"></ng-container>\r\n                    </ng-container>\r\n                    <ng-template #configData>\r\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\r\n                        [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\r\n                    </ng-template>\r\n                  }\r\n                </div>\r\n\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container\r\n          *ngIf=\"!(isLast && column.isSticky) && !column.allowSort\">\r\n          <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\"\r\n                        [sticky]=\"(isMobile$ | async) ? false : !scrollSettings.scrollStart && !!column.isSticky\">\r\n            <th mat-header-cell\r\n                [attr.sortable]=\"column.allowSort ?? false\"\r\n                *matHeaderCellDef\r\n                [style.font-weight]=\"'bold'\"\r\n                [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\r\n                [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\r\n            >\r\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: { $implicit: column.title, column, colIndex: i }\"></ng-container>\r\n              </ng-container>\r\n              <ng-template #configValue>\r\n                <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\r\n              </ng-template>\r\n            </th>\r\n\r\n            <td mat-cell\r\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\r\n                [align]=\"column.styles?.alignment\"\r\n                [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\r\n                (click)=\"onRowClick(element); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\r\n            >\r\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\"\r\n                           [appearance]=\"'line'\"\r\n                           *ngIf=\"loading; else value\"></ui-skeleton>\r\n              <ng-template #value>\r\n                <div class=\"row-value\">\r\n                  <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\r\n\r\n                  @if (column?.type) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit:  element, rowIndex }\"></ng-container>\r\n                    </ng-container>\r\n                    <ng-template #configData>\r\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\r\n                        [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\r\n                    </ng-template>\r\n                  }\r\n                </div>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n      </ng-container>\r\n\r\n\r\n      <ng-container matColumnDef=\"expandedDetail\">\r\n        <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\r\n          <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\r\n               [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\r\n            <table\r\n              mat-table\r\n              [dataSource]=\"dataSourceDetail\"\r\n              [ngClass]=\"{ 'hide-borders': element === tableData[tableData.length - 1] }\"\r\n            >\r\n              <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\r\n                            [matColumnDef]=\"tableColumn.title ?? ''\">\r\n                <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\r\n                    [ngStyle]=\"{width: tableColumn.styles?.width}\"\r\n                    [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\r\n                  {{ tableColumn.title | uppercase }}\r\n                </th>\r\n\r\n                <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\r\n                    [align]=\"tableColumn.styles?.alignment\"\r\n                    [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\r\n                    [ngStyle]=\"{width: tableColumn.styles?.width }\">\r\n                  <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\r\n                </td>\r\n              </ng-container>\r\n\r\n              <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\r\n              <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\r\n            </table>\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\r\n        <div class=\"align-wrapper\">\r\n          <ng-container [ngSwitch]=\"tableColumn.type\">\r\n            <ng-container *ngSwitchCase=\"DataType.FIELD\">\r\n              {{ element | dataPropertyGetter: tableColumn.key }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\r\n              {{ tableColumn.function?.(element) }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"DataType.RENDERER\">\r\n              <ng-template\r\n                [dynamicComponent]=\"[tableColumn.renderer, element] | memoizeFunc : callRenderer\">\r\n              </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n              {{ element | dataPropertyGetter: tableColumn.key }}\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: stickyHeader\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n          [ngClass]=\"{'expanded-row': elementDetail === row, 'row-clickable': tableDetails, 'selected': row?.selected, 'last-row': row === tableData[tableData.length - 1] && !elementDetail }\"\r\n          (click)=\"toggleRow(row)\">\r\n      </tr>\r\n      <ng-container *ngIf=\"tableDetails && tableDetailColumns?.columnDefs?.length\">\r\n        <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"tableConfig.noDataRowTpl\">\r\n        <tr *matNoDataRow>\r\n          <ng-container *ngTemplateOutlet=\"tableConfig.noDataRowTpl\"></ng-container>\r\n        </tr>\r\n      </ng-container>\r\n    </table>\r\n  </div>\r\n\r\n  <ui-paginator\r\n    *ngIf=\"!tableConfig?.hidePagination && tableConfig?.pagination\"\r\n    [disabled]=\"loading\"\r\n    [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\r\n    [pageSize]=\"tableConfig.pagination?.itemsPerPage ?? 25\"\r\n    [length]=\"tableConfig.pagination?.totalItems ?? 0\"\r\n    [currentPage]=\"tableConfig.pagination?.currentPage ?? 0\"\r\n    [pageSizeOptions]=\"tableConfig.pagination?.itemsPerPageOptions ?? [10, 25, 50]\"\r\n    (paginatorChange)=\"onPaginatorChange($event)\"\r\n  ></ui-paginator>\r\n</div>\r\n\r\n<ng-template #expandButton let-i=\"index\" let-element=\"element\">\r\n  <ui-button\r\n    [applicationTheme]=\"applicationTheme\"\r\n    *ngIf=\"!i && tableDetails\"\r\n    variant=\"icon-button\"\r\n    [ngClass]=\"{ opened: elementDetail && element == elementDetail }\"\r\n    [iconName]=\"elementDetail && element == elementDetail ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\r\n  ></ui-button>\r\n</ng-template>\r\n\r\n<ng-template #columnHeader let-column=\"column\" let-i=\"i\">\r\n  <div class=\"header-section\">\r\n                    <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\r\n                          class=\"column-title\">{{ column.title | sentencecase }}\r\n                 </span>\r\n    <ui-icon *ngIf=\"column?.showTooltip\" [name]=\"'Help-in-line'\"\r\n             [matTooltipClass]=\"applicationTheme\"\r\n             [matTooltip]=\"(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title ) : '') || ''\"\r\n    ></ui-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host-context(.without-table-border) .table-container{border:none}.flex-left,.table-container .table-header{display:flex;justify-content:flex-start;align-items:center}.table-container{--mat-table-background-color: #ffffff;overflow:hidden;border:1px #E0E0E0 solid;border-radius:8px}.table-container ::ng-deep .mat-sort-header-arrow{color:#000}.table-container .table-header{min-height:56px;padding:8px;background:#fff;line-height:24px;font-size:16px;font-weight:700;text-transform:uppercase;display:flex;justify-content:space-between}.table-container .table-wrapper{max-width:100%;overflow:auto}.table-container .table-wrapper.sticky-header{max-height:var(--table-max-height);overflow-y:auto}.table-container .table-wrapper table.main-table{width:100%;box-shadow:unset}.table-container .table-wrapper table.main-table ::ng-deep .mat-sort-header-arrow{margin-left:8px}.table-container .table-wrapper table.main-table .mdc-data-table__cell,.table-container .table-wrapper table.main-table .mdc-data-table__header-cell{padding:8px 24px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:not(:first-child):not(:last-child){padding:8px 12px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:first-child{padding:8px 12px 8px 24px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:last-child{padding:8px 24px 8px 12px}.table-container .table-wrapper table.main-table th{font-size:14px;line-height:16px;text-transform:uppercase}.table-container .table-wrapper table.main-table th.mat-mdc-header-cell.mdc-data-table__header-cell{border-top:1px solid #E0E0E0}.table-container .table-wrapper table.main-table td{font-size:14px;line-height:20px}.table-container .table-wrapper table.main-table td .row-value{display:flex;align-items:center;gap:16px}.table-container .table-wrapper table.main-table td .row-value ui-icon ::ng-deep mat-icon{transition:all .3s!important;font-size:24px}.table-container .table-wrapper table.main-table td .row-value ui-icon.opened ::ng-deep mat-icon{transform:rotate(180deg)}.table-container .table-wrapper table.main-table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader{display:flex;justify-content:center;align-items:center;line-height:unset}.table-container .table-wrapper table.main-table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader .skeleton-loader{margin-bottom:0}.table-container .table-wrapper table.main-table ::ng-deep thead{background:#f6f6f6!important}.table-container .table-wrapper table.main-table .mat-mdc-table-sticky-border-elem-left{box-shadow:24px 8px 24px #00000014}.table-container .table-wrapper table.main-table .mat-mdc-table-sticky-border-elem-right{box-shadow:0 8px 24px 4px #00000014}.table-container .header-section{display:flex;gap:4px;align-items:center}.table-container .header-section .column-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;max-width:fit-content;font-weight:700}.table-container.without-title table{border:unset!important}.table-container.disable-border-radius{border-radius:0!important}.table-container ::ng-deep .mat-mdc-paginator-container{padding:0 24px}.table-container[theme=dark],.table-container[theme=light]{border-radius:10px}.table-container[theme=dark] tr.selected,.table-container[theme=light] tr.selected{background:#f4f4f4!important}.table-container[theme=dark] .table-header,.table-container[theme=light] .table-header{padding:8px 24px;text-transform:none}.table-container[theme=dark] .table-wrapper table th,.table-container[theme=light] .table-wrapper table th{text-transform:none}.table-container[theme=dark] .table-wrapper table td,.table-container[theme=light] .table-wrapper table td{transition:border .3s}.table-container[theme=dark] .table-wrapper table tr.last-row td,.table-container[theme=light] .table-wrapper table tr.last-row td{--mat-table-row-item-outline-color: rgb(0, 0, 0, 0)}.table-container[theme=dark] .table-wrapper table .mat-mdc-table-sticky-border-elem-right,.table-container[theme=light] .table-wrapper table .mat-mdc-table-sticky-border-elem-right{box-shadow:0 8px 24px 4px #24242414!important}.table-container[theme=dark] .table-wrapper table .mat-mdc-table-sticky-border-elem-left,.table-container[theme=light] .table-wrapper table .mat-mdc-table-sticky-border-elem-left{box-shadow:24px 8px 24px #24242414!important}.table-container[theme=dark] .table-wrapper table ::ng-deep thead,.table-container[theme=light] .table-wrapper table ::ng-deep thead{background-color:#fff!important}.table-container[theme=dark] .table-wrapper table ::ng-deep :not(thead) tr:hover,.table-container[theme=light] .table-wrapper table ::ng-deep :not(thead) tr:hover{background-color:#fff2fc}.table-container ::ng-deep tr.detail-row{height:0}.table-container ::ng-deep tr.detail-row td{border:unset!important}.table-container ::ng-deep .mat-column-expandedDetail{padding:0!important}.table-container ::ng-deep .element-detail{overflow:hidden!important;display:flex!important}.table-container ::ng-deep .element-detail table{background-color:#fff;border-bottom:1px solid #D3D3D3;transition:border .3s}.table-container ::ng-deep .element-detail table.hide-borders{border-bottom:unset}.table-container ::ng-deep .element-detail table .mat-mdc-header-row{visibility:collapse}.table-container ::ng-deep .element-detail table .mat-mdc-cell{border-width:0}.table-container ::ng-deep .element-detail table td:first-child{padding-left:64px!important}table th.th-right{text-align:right}table th.th-right ::ng-deep .header-section{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .header-section{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .header-section{justify-content:center}table td.td-right{text-align:right}table td.td-right div{justify-content:end}table td.td-left{text-align:left}table td.td-left div{justify-content:start}table td.td-center{text-align:center}table td.td-center div{justify-content:center}::ng-deep table:not(.main-table) thead{display:none!important}ui-paginator{width:100%;display:flex;justify-content:flex-end;border-top:1px solid #D3D3D3}ui-paginator ::ng-deep .mat-mdc-paginator{width:100%}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$6.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "applicationTheme"] }, { kind: "component", type: PaginatorComponent, selector: "ui-paginator", inputs: ["pageSizeOptions", "length", "pageSize", "disabled", "applicationTheme", "currentPage"], outputs: ["paginatorChange"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: i7$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "directive", type: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: ["dynamicComponent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: DataPropertyGetterPipe, name: "dataPropertyGetter" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }, { kind: "pipe", type: SentenceCasePipe, name: "sentencecase" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TableComponent, selector: "ui-table", inputs: { config: "config", data: "data", loading: "loading", applicationTheme: "applicationTheme", tableDetailColumns: "tableDetailColumns", tableDetails: "tableDetails", disableBorderRadius: "disableBorderRadius", isCondensed: "isCondensed", stickyHeader: "stickyHeader", maxHeight: "maxHeight" }, outputs: { onRowClickEvent: "onRowClickEvent", onDetailRowClickEvent: "onDetailRowClickEvent", paginatorChange: "paginatorChange", sortChange: "sortChange" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #tableContainer class=\"table-container\"\r\n     [ngClass]=\"{ 'without-title': !tableConfig?.title, 'disable-border-radius': disableBorderRadius }\"\r\n     [attr.theme]=\"applicationTheme\">\r\n  <div *ngIf=\"tableConfig?.title\" class=\"table-header\">\r\n    {{ tableConfig.title | sentencecase }}\r\n    <ng-content select=\"[title-actions]\"></ng-content>\r\n  </div>\r\n  <div\r\n    #table\r\n    *ngIf=\"scrollSettings$ | async as scrollSettings\"\r\n    class=\"table-wrapper\"\r\n    [class.sticky-header]=\"stickyHeader\"\r\n    [style.--table-max-height]=\"maxHeight\">\r\n    <table\r\n      [tabIndex]=\"0\"\r\n      class=\"main-table\"\r\n      [class.condensed]=\"isCondensed\"\r\n      mat-table\r\n      [dataSource]=\"tableData\"\r\n      matSort\r\n      [matSortStart]=\"tableConfig?.sort?.defaultSortStart ?? 'asc'\"\r\n      [matSortActive]=\"tableConfig?.sort?.active ?? ''\"\r\n      [matSortDirection]=\"tableConfig?.sort?.direction ?? ''\"\r\n      (matSortChange)=\"onSortChange($event)\"\r\n      multiTemplateDataRows\r\n    >\r\n\r\n      <ng-container\r\n        *ngFor=\"let column of tableConfig.columns; index as i, last as isLast; trackBy: trackColumnUniqueId\">\r\n        <ng-container *ngIf=\"isLast && column.isSticky && column.allowSort\">\r\n          <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\" [stickyEnd]=\"!scrollSettings?.scrollEnd\">\r\n            <th mat-header-cell\r\n                [start]=\"column.sortStart ?? 'asc'\"\r\n                [mat-sort-header]=\"column.sortHeader ?? column.key\"\r\n                *matHeaderCellDef\r\n                [attr.sortable]=\"column.allowSort ?? false\"\r\n                [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\r\n                [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\r\n                [style.font-weight]=\"'bold'\"\r\n            >\r\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title, column, colIndex: i}\"></ng-container>\r\n              </ng-container>\r\n              <ng-template #configValue>\r\n                <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\r\n              </ng-template>\r\n            </th>\r\n\r\n            <td mat-cell\r\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\r\n                [align]=\"column.styles?.alignment\"\r\n                [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\r\n                (click)=\"onRowClick(element); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\r\n            >\r\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\r\n                           *ngIf=\"loading; else value\"></ui-skeleton>\r\n              <ng-template #value>\r\n                <div class=\"row-value\">\r\n                  <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\r\n\r\n                  @if (column?.type) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element, rowIndex}\"></ng-container>\r\n                    </ng-container>\r\n                    <ng-template #configData>\r\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\r\n                        [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\r\n                    </ng-template>\r\n                  }\r\n                </div>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"isLast && column.isSticky && !column.allowSort\">\r\n          <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\"\r\n                        [stickyEnd]=\"scrollSettings.horizontalScroll ? !scrollSettings.scrollEnd : true\">\r\n            <th mat-header-cell\r\n                *matHeaderCellDef\r\n                [attr.sortable]=\"column.allowSort ?? false\"\r\n                [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\r\n                [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\r\n                [style.font-weight]=\"'bold'\"\r\n            >\r\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title, column, colIndex: i}\"></ng-container>\r\n              </ng-container>\r\n              <ng-template #configValue>\r\n                <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\r\n              </ng-template>\r\n            </th>\r\n\r\n            <td mat-cell\r\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\r\n                [align]=\"column.styles?.alignment\"\r\n                [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\r\n                (click)=\"onRowClick(element); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\r\n            >\r\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\"\r\n                           [appearance]=\"'line'\"\r\n                           *ngIf=\"loading; else value\"></ui-skeleton>\r\n              <ng-template #value>\r\n                <div class=\"row-value\">\r\n                  <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\r\n\r\n                  @if (column?.type) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"></ng-container>\r\n                    </ng-container>\r\n                    <ng-template #configData>\r\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\r\n                        [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\r\n                    </ng-template>\r\n                  }\r\n                </div>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container\r\n          *ngIf=\"!(isLast && column.isSticky) && column.allowSort\">\r\n          <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\"\r\n                        [sticky]=\"(isMobile$ | async) ? false : !scrollSettings.scrollStart  && !!column.isSticky\">\r\n            <th mat-header-cell\r\n                [start]=\"column.sortStart ?? 'asc'\"\r\n                [mat-sort-header]=\"column.sortHeader ?? column.key\"\r\n                [attr.sortable]=\"column.allowSort ?? false\"\r\n                *matHeaderCellDef\r\n                [style.font-weight]=\"'bold'\"\r\n                [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\r\n                [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\r\n            >\r\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: { $implicit: column.title, column, colIndex: i }\"></ng-container>\r\n              </ng-container>\r\n              <ng-template #configValue>\r\n                <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\r\n              </ng-template>\r\n            </th>\r\n\r\n            <td mat-cell\r\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\r\n                [align]=\"column.styles?.alignment\"\r\n                [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\r\n                (click)=\"onRowClick(element); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\r\n            >\r\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\"\r\n                           [appearance]=\"'line'\"\r\n                           *ngIf=\"loading; else value\"></ui-skeleton>\r\n              <ng-template #value>\r\n                <div class=\"row-value\">\r\n                  <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\r\n\r\n                  @if (column?.type) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"></ng-container>\r\n                    </ng-container>\r\n                    <ng-template #configData>\r\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\r\n                        [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\r\n                    </ng-template>\r\n                  }\r\n                </div>\r\n\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container\r\n          *ngIf=\"!(isLast && column.isSticky) && !column.allowSort\">\r\n          <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\"\r\n                        [sticky]=\"(isMobile$ | async) ? false : !scrollSettings.scrollStart && !!column.isSticky\">\r\n            <th mat-header-cell\r\n                [attr.sortable]=\"column.allowSort ?? false\"\r\n                *matHeaderCellDef\r\n                [style.font-weight]=\"'bold'\"\r\n                [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\r\n                [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\r\n            >\r\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: { $implicit: column.title, column, colIndex: i }\"></ng-container>\r\n              </ng-container>\r\n              <ng-template #configValue>\r\n                <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\r\n              </ng-template>\r\n            </th>\r\n\r\n            <td mat-cell\r\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\r\n                [align]=\"column.styles?.alignment\"\r\n                [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\r\n                (click)=\"onRowClick(element); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\r\n            >\r\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\"\r\n                           [appearance]=\"'line'\"\r\n                           *ngIf=\"loading; else value\"></ui-skeleton>\r\n              <ng-template #value>\r\n                <div class=\"row-value\">\r\n                  <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\r\n\r\n                  @if (column?.type) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit:  element, rowIndex }\"></ng-container>\r\n                    </ng-container>\r\n                    <ng-template #configData>\r\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\r\n                        [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\r\n                    </ng-template>\r\n                  }\r\n                </div>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n      </ng-container>\r\n\r\n\r\n      <ng-container matColumnDef=\"expandedDetail\">\r\n        <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\r\n          <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\r\n               [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\r\n            <table\r\n              mat-table\r\n              [dataSource]=\"dataSourceDetail\"\r\n              [ngClass]=\"{ 'hide-borders': element === tableData[tableData.length - 1] }\"\r\n            >\r\n              <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\r\n                            [matColumnDef]=\"tableColumn.title ?? ''\">\r\n                <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\r\n                    [ngStyle]=\"{width: tableColumn.styles?.width}\"\r\n                    [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\r\n                  {{ tableColumn.title | uppercase }}\r\n                </th>\r\n\r\n                <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\r\n                    [align]=\"tableColumn.styles?.alignment\"\r\n                    [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\r\n                    [ngStyle]=\"{width: tableColumn.styles?.width }\">\r\n                  <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\r\n                </td>\r\n              </ng-container>\r\n\r\n              <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\r\n              <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\r\n            </table>\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\r\n        <div class=\"align-wrapper\">\r\n          <ng-container [ngSwitch]=\"tableColumn.type\">\r\n            <ng-container *ngSwitchCase=\"DataType.FIELD\">\r\n              {{ element | dataPropertyGetter: tableColumn.key }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\r\n              {{ tableColumn.function?.(element) }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"DataType.RENDERER\">\r\n              <ng-template\r\n                [dynamicComponent]=\"[tableColumn.renderer, element] | memoizeFunc : callRenderer\">\r\n              </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n              {{ element | dataPropertyGetter: tableColumn.key }}\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: stickyHeader\" [class.is-title-present]=\"tableConfig.title\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n          [ngClass]=\"{'expanded-row': elementDetail === row, 'row-clickable': tableDetails, 'selected': row?.selected, 'last-row': row === tableData[tableData.length - 1] && !elementDetail }\"\r\n          (click)=\"toggleRow(row)\">\r\n      </tr>\r\n      <ng-container *ngIf=\"tableDetails && tableDetailColumns?.columnDefs?.length\">\r\n        <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"tableConfig.noDataRowTpl\">\r\n        <tr *matNoDataRow>\r\n          <ng-container *ngTemplateOutlet=\"tableConfig.noDataRowTpl\"></ng-container>\r\n        </tr>\r\n      </ng-container>\r\n    </table>\r\n  </div>\r\n\r\n  <ui-paginator\r\n    *ngIf=\"!tableConfig?.hidePagination && tableConfig?.pagination\"\r\n    [disabled]=\"loading\"\r\n    [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\r\n    [pageSize]=\"tableConfig.pagination?.itemsPerPage ?? 25\"\r\n    [length]=\"tableConfig.pagination?.totalItems ?? 0\"\r\n    [currentPage]=\"tableConfig.pagination?.currentPage ?? 0\"\r\n    [pageSizeOptions]=\"tableConfig.pagination?.itemsPerPageOptions ?? [10, 25, 50]\"\r\n    (paginatorChange)=\"onPaginatorChange($event)\"\r\n  ></ui-paginator>\r\n</div>\r\n\r\n<ng-template #expandButton let-i=\"index\" let-element=\"element\">\r\n  <ui-button\r\n    [applicationTheme]=\"applicationTheme\"\r\n    *ngIf=\"!i && tableDetails\"\r\n    variant=\"icon-button\"\r\n    [ngClass]=\"{ opened: elementDetail && element == elementDetail }\"\r\n    [iconName]=\"elementDetail && element == elementDetail ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\r\n  ></ui-button>\r\n</ng-template>\r\n\r\n<ng-template #columnHeader let-column=\"column\" let-i=\"i\">\r\n  <div class=\"header-section\">\r\n                    <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\r\n                          class=\"column-title\">{{ column.title | sentencecase }}\r\n                 </span>\r\n    <ui-icon *ngIf=\"column?.showTooltip\" [name]=\"'Help-in-line'\"\r\n             [matTooltipClass]=\"applicationTheme\"\r\n             [matTooltip]=\"(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title ) : '') || ''\"\r\n    ></ui-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host-context(.without-table-border) .table-container{border:none}.flex-left,.table-container .table-header{display:flex;justify-content:flex-start;align-items:center}.table-container{--mat-table-background-color: #ffffff;overflow:hidden;border:1px #E0E0E0 solid;border-radius:8px}.table-container ::ng-deep .mat-sort-header-arrow{color:#000}.table-container .table-header{min-height:56px;padding:8px;background:#fff;line-height:24px;font-size:16px;font-weight:700;text-transform:uppercase;display:flex;justify-content:space-between}.table-container .table-wrapper{max-width:100%;overflow:auto}.table-container .table-wrapper.sticky-header{max-height:var(--table-max-height);overflow-y:auto}.table-container .table-wrapper table.main-table{width:100%;box-shadow:unset}.table-container .table-wrapper table.main-table ::ng-deep .mat-sort-header-arrow{margin-left:8px}.table-container .table-wrapper table.main-table .mdc-data-table__cell,.table-container .table-wrapper table.main-table .mdc-data-table__header-cell{padding:8px 24px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:not(:first-child):not(:last-child){padding:8px 12px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:first-child{padding:8px 12px 8px 24px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:last-child{padding:8px 24px 8px 12px}.table-container .table-wrapper table.main-table th{font-size:14px;line-height:16px;text-transform:uppercase}.table-container .table-wrapper table.main-table tr.is-title-present th.mat-mdc-header-cell.mdc-data-table__header-cell{border-top:1px solid #E0E0E0}.table-container .table-wrapper table.main-table td{font-size:14px;line-height:20px}.table-container .table-wrapper table.main-table td .row-value{display:flex;align-items:center;gap:16px}.table-container .table-wrapper table.main-table td .row-value ui-icon ::ng-deep mat-icon{transition:all .3s!important;font-size:24px}.table-container .table-wrapper table.main-table td .row-value ui-icon.opened ::ng-deep mat-icon{transform:rotate(180deg)}.table-container .table-wrapper table.main-table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader{display:flex;justify-content:center;align-items:center;line-height:unset}.table-container .table-wrapper table.main-table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader .skeleton-loader{margin-bottom:0}.table-container .table-wrapper table.main-table ::ng-deep thead{background:#f6f6f6!important}.table-container .table-wrapper table.main-table .mat-mdc-table-sticky-border-elem-left{box-shadow:24px 8px 24px #00000014}.table-container .table-wrapper table.main-table .mat-mdc-table-sticky-border-elem-right{box-shadow:0 8px 24px 4px #00000014}.table-container .header-section{display:flex;gap:4px;align-items:center}.table-container .header-section .column-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;max-width:fit-content;font-weight:700}.table-container.without-title table{border:unset!important}.table-container.disable-border-radius{border-radius:0!important}.table-container ::ng-deep .mat-mdc-paginator-container{padding:0 24px}.table-container[theme=dark],.table-container[theme=light]{border-radius:10px}.table-container[theme=dark] tr.selected,.table-container[theme=light] tr.selected{background:#f4f4f4!important}.table-container[theme=dark] .table-header,.table-container[theme=light] .table-header{padding:8px 24px;text-transform:none}.table-container[theme=dark] .table-wrapper table th,.table-container[theme=light] .table-wrapper table th{text-transform:none}.table-container[theme=dark] .table-wrapper table td,.table-container[theme=light] .table-wrapper table td{transition:border .3s}.table-container[theme=dark] .table-wrapper table tr.last-row td,.table-container[theme=light] .table-wrapper table tr.last-row td{--mat-table-row-item-outline-color: rgb(0, 0, 0, 0)}.table-container[theme=dark] .table-wrapper table .mat-mdc-table-sticky-border-elem-right,.table-container[theme=light] .table-wrapper table .mat-mdc-table-sticky-border-elem-right{box-shadow:0 8px 24px 4px #24242414!important}.table-container[theme=dark] .table-wrapper table .mat-mdc-table-sticky-border-elem-left,.table-container[theme=light] .table-wrapper table .mat-mdc-table-sticky-border-elem-left{box-shadow:24px 8px 24px #24242414!important}.table-container[theme=dark] .table-wrapper table ::ng-deep thead,.table-container[theme=light] .table-wrapper table ::ng-deep thead{background-color:#fff!important}.table-container[theme=dark] .table-wrapper table ::ng-deep :not(thead) tr:hover,.table-container[theme=light] .table-wrapper table ::ng-deep :not(thead) tr:hover{background-color:#fff2fc}.table-container ::ng-deep tr.detail-row{height:0}.table-container ::ng-deep tr.detail-row td{border:unset!important}.table-container ::ng-deep .mat-column-expandedDetail{padding:0!important}.table-container ::ng-deep .element-detail{overflow:hidden!important;display:flex!important}.table-container ::ng-deep .element-detail table{background-color:#fff;border-bottom:1px solid #D3D3D3;transition:border .3s}.table-container ::ng-deep .element-detail table.hide-borders{border-bottom:unset}.table-container ::ng-deep .element-detail table .mat-mdc-header-row{visibility:collapse}.table-container ::ng-deep .element-detail table .mat-mdc-cell{border-width:0}.table-container ::ng-deep .element-detail table td:first-child{padding-left:64px!important}table th.th-right{text-align:right}table th.th-right ::ng-deep .header-section{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .header-section{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .header-section{justify-content:center}table td.td-right{text-align:right}table td.td-right div{justify-content:end}table td.td-left{text-align:left}table td.td-left div{justify-content:start}table td.td-center{text-align:center}table td.td-center div{justify-content:center}::ng-deep table:not(.main-table) thead{display:none!important}ui-paginator{width:100%;display:flex;justify-content:flex-end;border-top:1px solid #D3D3D3}ui-paginator ::ng-deep .mat-mdc-paginator{width:100%}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$6.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "applicationTheme"] }, { kind: "component", type: PaginatorComponent, selector: "ui-paginator", inputs: ["pageSizeOptions", "length", "pageSize", "disabled", "applicationTheme", "currentPage"], outputs: ["paginatorChange"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: i7$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "directive", type: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: ["dynamicComponent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: DataPropertyGetterPipe, name: "dataPropertyGetter" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }, { kind: "pipe", type: SentenceCasePipe, name: "sentencecase" }], animations: [
             trigger('expandDetail', [
                 state('collapsed, void', style({ height: '0px' })),
                 state('expanded', style({ height: '*' })),
@@ -13685,7 +13686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                             transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], template: "<div #tableContainer class=\"table-container\"\r\n     [ngClass]=\"{ 'without-title': !tableConfig?.title, 'disable-border-radius': disableBorderRadius }\"\r\n     [attr.theme]=\"applicationTheme\">\r\n  <div *ngIf=\"tableConfig?.title\" class=\"table-header\">\r\n    {{ tableConfig.title | sentencecase }}\r\n    <ng-content select=\"[title-actions]\"></ng-content>\r\n  </div>\r\n  <div\r\n    #table\r\n    *ngIf=\"scrollSettings$ | async as scrollSettings\"\r\n    class=\"table-wrapper\"\r\n    [class.sticky-header]=\"stickyHeader\"\r\n    [style.--table-max-height]=\"maxHeight\">\r\n    <table\r\n      [tabIndex]=\"0\"\r\n      class=\"main-table\"\r\n      [class.condensed]=\"isCondensed\"\r\n      mat-table\r\n      [dataSource]=\"tableData\"\r\n      matSort\r\n      [matSortStart]=\"tableConfig?.sort?.defaultSortStart ?? 'asc'\"\r\n      [matSortActive]=\"tableConfig?.sort?.active ?? ''\"\r\n      [matSortDirection]=\"tableConfig?.sort?.direction ?? ''\"\r\n      (matSortChange)=\"onSortChange($event)\"\r\n      multiTemplateDataRows\r\n    >\r\n\r\n      <ng-container\r\n        *ngFor=\"let column of tableConfig.columns; index as i, last as isLast; trackBy: trackColumnUniqueId\">\r\n        <ng-container *ngIf=\"isLast && column.isSticky && column.allowSort\">\r\n          <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\" [stickyEnd]=\"!scrollSettings?.scrollEnd\">\r\n            <th mat-header-cell\r\n                [start]=\"column.sortStart ?? 'asc'\"\r\n                [mat-sort-header]=\"column.sortHeader ?? column.key\"\r\n                *matHeaderCellDef\r\n                [attr.sortable]=\"column.allowSort ?? false\"\r\n                [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\r\n                [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\r\n                [style.font-weight]=\"'bold'\"\r\n            >\r\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title, column, colIndex: i}\"></ng-container>\r\n              </ng-container>\r\n              <ng-template #configValue>\r\n                <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\r\n              </ng-template>\r\n            </th>\r\n\r\n            <td mat-cell\r\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\r\n                [align]=\"column.styles?.alignment\"\r\n                [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\r\n                (click)=\"onRowClick(element); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\r\n            >\r\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\r\n                           *ngIf=\"loading; else value\"></ui-skeleton>\r\n              <ng-template #value>\r\n                <div class=\"row-value\">\r\n                  <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\r\n\r\n                  @if (column?.type) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element, rowIndex}\"></ng-container>\r\n                    </ng-container>\r\n                    <ng-template #configData>\r\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\r\n                        [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\r\n                    </ng-template>\r\n                  }\r\n                </div>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"isLast && column.isSticky && !column.allowSort\">\r\n          <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\"\r\n                        [stickyEnd]=\"scrollSettings.horizontalScroll ? !scrollSettings.scrollEnd : true\">\r\n            <th mat-header-cell\r\n                *matHeaderCellDef\r\n                [attr.sortable]=\"column.allowSort ?? false\"\r\n                [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\r\n                [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\r\n                [style.font-weight]=\"'bold'\"\r\n            >\r\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title, column, colIndex: i}\"></ng-container>\r\n              </ng-container>\r\n              <ng-template #configValue>\r\n                <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\r\n              </ng-template>\r\n            </th>\r\n\r\n            <td mat-cell\r\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\r\n                [align]=\"column.styles?.alignment\"\r\n                [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\r\n                (click)=\"onRowClick(element); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\r\n            >\r\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\"\r\n                           [appearance]=\"'line'\"\r\n                           *ngIf=\"loading; else value\"></ui-skeleton>\r\n              <ng-template #value>\r\n                <div class=\"row-value\">\r\n                  <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\r\n\r\n                  @if (column?.type) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"></ng-container>\r\n                    </ng-container>\r\n                    <ng-template #configData>\r\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\r\n                        [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\r\n                    </ng-template>\r\n                  }\r\n                </div>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container\r\n          *ngIf=\"!(isLast && column.isSticky) && column.allowSort\">\r\n          <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\"\r\n                        [sticky]=\"(isMobile$ | async) ? false : !scrollSettings.scrollStart  && !!column.isSticky\">\r\n            <th mat-header-cell\r\n                [start]=\"column.sortStart ?? 'asc'\"\r\n                [mat-sort-header]=\"column.sortHeader ?? column.key\"\r\n                [attr.sortable]=\"column.allowSort ?? false\"\r\n                *matHeaderCellDef\r\n                [style.font-weight]=\"'bold'\"\r\n                [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\r\n                [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\r\n            >\r\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: { $implicit: column.title, column, colIndex: i }\"></ng-container>\r\n              </ng-container>\r\n              <ng-template #configValue>\r\n                <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\r\n              </ng-template>\r\n            </th>\r\n\r\n            <td mat-cell\r\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\r\n                [align]=\"column.styles?.alignment\"\r\n                [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\r\n                (click)=\"onRowClick(element); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\r\n            >\r\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\"\r\n                           [appearance]=\"'line'\"\r\n                           *ngIf=\"loading; else value\"></ui-skeleton>\r\n              <ng-template #value>\r\n                <div class=\"row-value\">\r\n                  <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\r\n\r\n                  @if (column?.type) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"></ng-container>\r\n                    </ng-container>\r\n                    <ng-template #configData>\r\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\r\n                        [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\r\n                    </ng-template>\r\n                  }\r\n                </div>\r\n\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container\r\n          *ngIf=\"!(isLast && column.isSticky) && !column.allowSort\">\r\n          <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\"\r\n                        [sticky]=\"(isMobile$ | async) ? false : !scrollSettings.scrollStart && !!column.isSticky\">\r\n            <th mat-header-cell\r\n                [attr.sortable]=\"column.allowSort ?? false\"\r\n                *matHeaderCellDef\r\n                [style.font-weight]=\"'bold'\"\r\n                [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\r\n                [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\r\n            >\r\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: { $implicit: column.title, column, colIndex: i }\"></ng-container>\r\n              </ng-container>\r\n              <ng-template #configValue>\r\n                <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\r\n              </ng-template>\r\n            </th>\r\n\r\n            <td mat-cell\r\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\r\n                [align]=\"column.styles?.alignment\"\r\n                [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\r\n                (click)=\"onRowClick(element); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\r\n            >\r\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\"\r\n                           [appearance]=\"'line'\"\r\n                           *ngIf=\"loading; else value\"></ui-skeleton>\r\n              <ng-template #value>\r\n                <div class=\"row-value\">\r\n                  <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\r\n\r\n                  @if (column?.type) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit:  element, rowIndex }\"></ng-container>\r\n                    </ng-container>\r\n                    <ng-template #configData>\r\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\r\n                        [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\r\n                    </ng-template>\r\n                  }\r\n                </div>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n      </ng-container>\r\n\r\n\r\n      <ng-container matColumnDef=\"expandedDetail\">\r\n        <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\r\n          <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\r\n               [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\r\n            <table\r\n              mat-table\r\n              [dataSource]=\"dataSourceDetail\"\r\n              [ngClass]=\"{ 'hide-borders': element === tableData[tableData.length - 1] }\"\r\n            >\r\n              <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\r\n                            [matColumnDef]=\"tableColumn.title ?? ''\">\r\n                <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\r\n                    [ngStyle]=\"{width: tableColumn.styles?.width}\"\r\n                    [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\r\n                  {{ tableColumn.title | uppercase }}\r\n                </th>\r\n\r\n                <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\r\n                    [align]=\"tableColumn.styles?.alignment\"\r\n                    [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\r\n                    [ngStyle]=\"{width: tableColumn.styles?.width }\">\r\n                  <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\r\n                </td>\r\n              </ng-container>\r\n\r\n              <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\r\n              <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\r\n            </table>\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\r\n        <div class=\"align-wrapper\">\r\n          <ng-container [ngSwitch]=\"tableColumn.type\">\r\n            <ng-container *ngSwitchCase=\"DataType.FIELD\">\r\n              {{ element | dataPropertyGetter: tableColumn.key }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\r\n              {{ tableColumn.function?.(element) }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"DataType.RENDERER\">\r\n              <ng-template\r\n                [dynamicComponent]=\"[tableColumn.renderer, element] | memoizeFunc : callRenderer\">\r\n              </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n              {{ element | dataPropertyGetter: tableColumn.key }}\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: stickyHeader\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n          [ngClass]=\"{'expanded-row': elementDetail === row, 'row-clickable': tableDetails, 'selected': row?.selected, 'last-row': row === tableData[tableData.length - 1] && !elementDetail }\"\r\n          (click)=\"toggleRow(row)\">\r\n      </tr>\r\n      <ng-container *ngIf=\"tableDetails && tableDetailColumns?.columnDefs?.length\">\r\n        <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"tableConfig.noDataRowTpl\">\r\n        <tr *matNoDataRow>\r\n          <ng-container *ngTemplateOutlet=\"tableConfig.noDataRowTpl\"></ng-container>\r\n        </tr>\r\n      </ng-container>\r\n    </table>\r\n  </div>\r\n\r\n  <ui-paginator\r\n    *ngIf=\"!tableConfig?.hidePagination && tableConfig?.pagination\"\r\n    [disabled]=\"loading\"\r\n    [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\r\n    [pageSize]=\"tableConfig.pagination?.itemsPerPage ?? 25\"\r\n    [length]=\"tableConfig.pagination?.totalItems ?? 0\"\r\n    [currentPage]=\"tableConfig.pagination?.currentPage ?? 0\"\r\n    [pageSizeOptions]=\"tableConfig.pagination?.itemsPerPageOptions ?? [10, 25, 50]\"\r\n    (paginatorChange)=\"onPaginatorChange($event)\"\r\n  ></ui-paginator>\r\n</div>\r\n\r\n<ng-template #expandButton let-i=\"index\" let-element=\"element\">\r\n  <ui-button\r\n    [applicationTheme]=\"applicationTheme\"\r\n    *ngIf=\"!i && tableDetails\"\r\n    variant=\"icon-button\"\r\n    [ngClass]=\"{ opened: elementDetail && element == elementDetail }\"\r\n    [iconName]=\"elementDetail && element == elementDetail ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\r\n  ></ui-button>\r\n</ng-template>\r\n\r\n<ng-template #columnHeader let-column=\"column\" let-i=\"i\">\r\n  <div class=\"header-section\">\r\n                    <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\r\n                          class=\"column-title\">{{ column.title | sentencecase }}\r\n                 </span>\r\n    <ui-icon *ngIf=\"column?.showTooltip\" [name]=\"'Help-in-line'\"\r\n             [matTooltipClass]=\"applicationTheme\"\r\n             [matTooltip]=\"(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title ) : '') || ''\"\r\n    ></ui-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host-context(.without-table-border) .table-container{border:none}.flex-left,.table-container .table-header{display:flex;justify-content:flex-start;align-items:center}.table-container{--mat-table-background-color: #ffffff;overflow:hidden;border:1px #E0E0E0 solid;border-radius:8px}.table-container ::ng-deep .mat-sort-header-arrow{color:#000}.table-container .table-header{min-height:56px;padding:8px;background:#fff;line-height:24px;font-size:16px;font-weight:700;text-transform:uppercase;display:flex;justify-content:space-between}.table-container .table-wrapper{max-width:100%;overflow:auto}.table-container .table-wrapper.sticky-header{max-height:var(--table-max-height);overflow-y:auto}.table-container .table-wrapper table.main-table{width:100%;box-shadow:unset}.table-container .table-wrapper table.main-table ::ng-deep .mat-sort-header-arrow{margin-left:8px}.table-container .table-wrapper table.main-table .mdc-data-table__cell,.table-container .table-wrapper table.main-table .mdc-data-table__header-cell{padding:8px 24px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:not(:first-child):not(:last-child){padding:8px 12px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:first-child{padding:8px 12px 8px 24px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:last-child{padding:8px 24px 8px 12px}.table-container .table-wrapper table.main-table th{font-size:14px;line-height:16px;text-transform:uppercase}.table-container .table-wrapper table.main-table th.mat-mdc-header-cell.mdc-data-table__header-cell{border-top:1px solid #E0E0E0}.table-container .table-wrapper table.main-table td{font-size:14px;line-height:20px}.table-container .table-wrapper table.main-table td .row-value{display:flex;align-items:center;gap:16px}.table-container .table-wrapper table.main-table td .row-value ui-icon ::ng-deep mat-icon{transition:all .3s!important;font-size:24px}.table-container .table-wrapper table.main-table td .row-value ui-icon.opened ::ng-deep mat-icon{transform:rotate(180deg)}.table-container .table-wrapper table.main-table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader{display:flex;justify-content:center;align-items:center;line-height:unset}.table-container .table-wrapper table.main-table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader .skeleton-loader{margin-bottom:0}.table-container .table-wrapper table.main-table ::ng-deep thead{background:#f6f6f6!important}.table-container .table-wrapper table.main-table .mat-mdc-table-sticky-border-elem-left{box-shadow:24px 8px 24px #00000014}.table-container .table-wrapper table.main-table .mat-mdc-table-sticky-border-elem-right{box-shadow:0 8px 24px 4px #00000014}.table-container .header-section{display:flex;gap:4px;align-items:center}.table-container .header-section .column-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;max-width:fit-content;font-weight:700}.table-container.without-title table{border:unset!important}.table-container.disable-border-radius{border-radius:0!important}.table-container ::ng-deep .mat-mdc-paginator-container{padding:0 24px}.table-container[theme=dark],.table-container[theme=light]{border-radius:10px}.table-container[theme=dark] tr.selected,.table-container[theme=light] tr.selected{background:#f4f4f4!important}.table-container[theme=dark] .table-header,.table-container[theme=light] .table-header{padding:8px 24px;text-transform:none}.table-container[theme=dark] .table-wrapper table th,.table-container[theme=light] .table-wrapper table th{text-transform:none}.table-container[theme=dark] .table-wrapper table td,.table-container[theme=light] .table-wrapper table td{transition:border .3s}.table-container[theme=dark] .table-wrapper table tr.last-row td,.table-container[theme=light] .table-wrapper table tr.last-row td{--mat-table-row-item-outline-color: rgb(0, 0, 0, 0)}.table-container[theme=dark] .table-wrapper table .mat-mdc-table-sticky-border-elem-right,.table-container[theme=light] .table-wrapper table .mat-mdc-table-sticky-border-elem-right{box-shadow:0 8px 24px 4px #24242414!important}.table-container[theme=dark] .table-wrapper table .mat-mdc-table-sticky-border-elem-left,.table-container[theme=light] .table-wrapper table .mat-mdc-table-sticky-border-elem-left{box-shadow:24px 8px 24px #24242414!important}.table-container[theme=dark] .table-wrapper table ::ng-deep thead,.table-container[theme=light] .table-wrapper table ::ng-deep thead{background-color:#fff!important}.table-container[theme=dark] .table-wrapper table ::ng-deep :not(thead) tr:hover,.table-container[theme=light] .table-wrapper table ::ng-deep :not(thead) tr:hover{background-color:#fff2fc}.table-container ::ng-deep tr.detail-row{height:0}.table-container ::ng-deep tr.detail-row td{border:unset!important}.table-container ::ng-deep .mat-column-expandedDetail{padding:0!important}.table-container ::ng-deep .element-detail{overflow:hidden!important;display:flex!important}.table-container ::ng-deep .element-detail table{background-color:#fff;border-bottom:1px solid #D3D3D3;transition:border .3s}.table-container ::ng-deep .element-detail table.hide-borders{border-bottom:unset}.table-container ::ng-deep .element-detail table .mat-mdc-header-row{visibility:collapse}.table-container ::ng-deep .element-detail table .mat-mdc-cell{border-width:0}.table-container ::ng-deep .element-detail table td:first-child{padding-left:64px!important}table th.th-right{text-align:right}table th.th-right ::ng-deep .header-section{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .header-section{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .header-section{justify-content:center}table td.td-right{text-align:right}table td.td-right div{justify-content:end}table td.td-left{text-align:left}table td.td-left div{justify-content:start}table td.td-center{text-align:center}table td.td-center div{justify-content:center}::ng-deep table:not(.main-table) thead{display:none!important}ui-paginator{width:100%;display:flex;justify-content:flex-end;border-top:1px solid #D3D3D3}ui-paginator ::ng-deep .mat-mdc-paginator{width:100%}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
+                    ], template: "<div #tableContainer class=\"table-container\"\r\n     [ngClass]=\"{ 'without-title': !tableConfig?.title, 'disable-border-radius': disableBorderRadius }\"\r\n     [attr.theme]=\"applicationTheme\">\r\n  <div *ngIf=\"tableConfig?.title\" class=\"table-header\">\r\n    {{ tableConfig.title | sentencecase }}\r\n    <ng-content select=\"[title-actions]\"></ng-content>\r\n  </div>\r\n  <div\r\n    #table\r\n    *ngIf=\"scrollSettings$ | async as scrollSettings\"\r\n    class=\"table-wrapper\"\r\n    [class.sticky-header]=\"stickyHeader\"\r\n    [style.--table-max-height]=\"maxHeight\">\r\n    <table\r\n      [tabIndex]=\"0\"\r\n      class=\"main-table\"\r\n      [class.condensed]=\"isCondensed\"\r\n      mat-table\r\n      [dataSource]=\"tableData\"\r\n      matSort\r\n      [matSortStart]=\"tableConfig?.sort?.defaultSortStart ?? 'asc'\"\r\n      [matSortActive]=\"tableConfig?.sort?.active ?? ''\"\r\n      [matSortDirection]=\"tableConfig?.sort?.direction ?? ''\"\r\n      (matSortChange)=\"onSortChange($event)\"\r\n      multiTemplateDataRows\r\n    >\r\n\r\n      <ng-container\r\n        *ngFor=\"let column of tableConfig.columns; index as i, last as isLast; trackBy: trackColumnUniqueId\">\r\n        <ng-container *ngIf=\"isLast && column.isSticky && column.allowSort\">\r\n          <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\" [stickyEnd]=\"!scrollSettings?.scrollEnd\">\r\n            <th mat-header-cell\r\n                [start]=\"column.sortStart ?? 'asc'\"\r\n                [mat-sort-header]=\"column.sortHeader ?? column.key\"\r\n                *matHeaderCellDef\r\n                [attr.sortable]=\"column.allowSort ?? false\"\r\n                [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\r\n                [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\r\n                [style.font-weight]=\"'bold'\"\r\n            >\r\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title, column, colIndex: i}\"></ng-container>\r\n              </ng-container>\r\n              <ng-template #configValue>\r\n                <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\r\n              </ng-template>\r\n            </th>\r\n\r\n            <td mat-cell\r\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\r\n                [align]=\"column.styles?.alignment\"\r\n                [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\r\n                (click)=\"onRowClick(element); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\r\n            >\r\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\r\n                           *ngIf=\"loading; else value\"></ui-skeleton>\r\n              <ng-template #value>\r\n                <div class=\"row-value\">\r\n                  <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\r\n\r\n                  @if (column?.type) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element, rowIndex}\"></ng-container>\r\n                    </ng-container>\r\n                    <ng-template #configData>\r\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\r\n                        [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\r\n                    </ng-template>\r\n                  }\r\n                </div>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"isLast && column.isSticky && !column.allowSort\">\r\n          <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\"\r\n                        [stickyEnd]=\"scrollSettings.horizontalScroll ? !scrollSettings.scrollEnd : true\">\r\n            <th mat-header-cell\r\n                *matHeaderCellDef\r\n                [attr.sortable]=\"column.allowSort ?? false\"\r\n                [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\r\n                [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\r\n                [style.font-weight]=\"'bold'\"\r\n            >\r\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title, column, colIndex: i}\"></ng-container>\r\n              </ng-container>\r\n              <ng-template #configValue>\r\n                <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\r\n              </ng-template>\r\n            </th>\r\n\r\n            <td mat-cell\r\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\r\n                [align]=\"column.styles?.alignment\"\r\n                [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\r\n                (click)=\"onRowClick(element); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\r\n            >\r\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\"\r\n                           [appearance]=\"'line'\"\r\n                           *ngIf=\"loading; else value\"></ui-skeleton>\r\n              <ng-template #value>\r\n                <div class=\"row-value\">\r\n                  <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\r\n\r\n                  @if (column?.type) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"></ng-container>\r\n                    </ng-container>\r\n                    <ng-template #configData>\r\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\r\n                        [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\r\n                    </ng-template>\r\n                  }\r\n                </div>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container\r\n          *ngIf=\"!(isLast && column.isSticky) && column.allowSort\">\r\n          <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\"\r\n                        [sticky]=\"(isMobile$ | async) ? false : !scrollSettings.scrollStart  && !!column.isSticky\">\r\n            <th mat-header-cell\r\n                [start]=\"column.sortStart ?? 'asc'\"\r\n                [mat-sort-header]=\"column.sortHeader ?? column.key\"\r\n                [attr.sortable]=\"column.allowSort ?? false\"\r\n                *matHeaderCellDef\r\n                [style.font-weight]=\"'bold'\"\r\n                [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\r\n                [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\r\n            >\r\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: { $implicit: column.title, column, colIndex: i }\"></ng-container>\r\n              </ng-container>\r\n              <ng-template #configValue>\r\n                <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\r\n              </ng-template>\r\n            </th>\r\n\r\n            <td mat-cell\r\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\r\n                [align]=\"column.styles?.alignment\"\r\n                [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\r\n                (click)=\"onRowClick(element); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\r\n            >\r\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\"\r\n                           [appearance]=\"'line'\"\r\n                           *ngIf=\"loading; else value\"></ui-skeleton>\r\n              <ng-template #value>\r\n                <div class=\"row-value\">\r\n                  <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\r\n\r\n                  @if (column?.type) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"></ng-container>\r\n                    </ng-container>\r\n                    <ng-template #configData>\r\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\r\n                        [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\r\n                    </ng-template>\r\n                  }\r\n                </div>\r\n\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container\r\n          *ngIf=\"!(isLast && column.isSticky) && !column.allowSort\">\r\n          <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\"\r\n                        [sticky]=\"(isMobile$ | async) ? false : !scrollSettings.scrollStart && !!column.isSticky\">\r\n            <th mat-header-cell\r\n                [attr.sortable]=\"column.allowSort ?? false\"\r\n                *matHeaderCellDef\r\n                [style.font-weight]=\"'bold'\"\r\n                [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\r\n                [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\r\n            >\r\n              <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"column.headerCellTemplate; context: { $implicit: column.title, column, colIndex: i }\"></ng-container>\r\n              </ng-container>\r\n              <ng-template #configValue>\r\n                <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\r\n              </ng-template>\r\n            </th>\r\n\r\n            <td mat-cell\r\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\r\n                [align]=\"column.styles?.alignment\"\r\n                [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\r\n                (click)=\"onRowClick(element); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\r\n            >\r\n              <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\"\r\n                           [appearance]=\"'line'\"\r\n                           *ngIf=\"loading; else value\"></ui-skeleton>\r\n              <ng-template #value>\r\n                <div class=\"row-value\">\r\n                  <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\r\n\r\n                  @if (column?.type) {\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\r\n                  } @else {\r\n                    <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit:  element, rowIndex }\"></ng-container>\r\n                    </ng-container>\r\n                    <ng-template #configData>\r\n                  <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\r\n                        [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\r\n                    </ng-template>\r\n                  }\r\n                </div>\r\n              </ng-template>\r\n            </td>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n      </ng-container>\r\n\r\n\r\n      <ng-container matColumnDef=\"expandedDetail\">\r\n        <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\r\n          <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\r\n               [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\r\n            <table\r\n              mat-table\r\n              [dataSource]=\"dataSourceDetail\"\r\n              [ngClass]=\"{ 'hide-borders': element === tableData[tableData.length - 1] }\"\r\n            >\r\n              <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\r\n                            [matColumnDef]=\"tableColumn.title ?? ''\">\r\n                <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\r\n                    [ngStyle]=\"{width: tableColumn.styles?.width}\"\r\n                    [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\r\n                  {{ tableColumn.title | uppercase }}\r\n                </th>\r\n\r\n                <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\r\n                    [align]=\"tableColumn.styles?.alignment\"\r\n                    [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\r\n                    [ngStyle]=\"{width: tableColumn.styles?.width }\">\r\n                  <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\r\n                </td>\r\n              </ng-container>\r\n\r\n              <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\r\n              <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\r\n            </table>\r\n          </div>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\r\n        <div class=\"align-wrapper\">\r\n          <ng-container [ngSwitch]=\"tableColumn.type\">\r\n            <ng-container *ngSwitchCase=\"DataType.FIELD\">\r\n              {{ element | dataPropertyGetter: tableColumn.key }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\r\n              {{ tableColumn.function?.(element) }}\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"DataType.RENDERER\">\r\n              <ng-template\r\n                [dynamicComponent]=\"[tableColumn.renderer, element] | memoizeFunc : callRenderer\">\r\n              </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n              {{ element | dataPropertyGetter: tableColumn.key }}\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: stickyHeader\" [class.is-title-present]=\"tableConfig.title\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\r\n          [ngClass]=\"{'expanded-row': elementDetail === row, 'row-clickable': tableDetails, 'selected': row?.selected, 'last-row': row === tableData[tableData.length - 1] && !elementDetail }\"\r\n          (click)=\"toggleRow(row)\">\r\n      </tr>\r\n      <ng-container *ngIf=\"tableDetails && tableDetailColumns?.columnDefs?.length\">\r\n        <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"tableConfig.noDataRowTpl\">\r\n        <tr *matNoDataRow>\r\n          <ng-container *ngTemplateOutlet=\"tableConfig.noDataRowTpl\"></ng-container>\r\n        </tr>\r\n      </ng-container>\r\n    </table>\r\n  </div>\r\n\r\n  <ui-paginator\r\n    *ngIf=\"!tableConfig?.hidePagination && tableConfig?.pagination\"\r\n    [disabled]=\"loading\"\r\n    [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\r\n    [pageSize]=\"tableConfig.pagination?.itemsPerPage ?? 25\"\r\n    [length]=\"tableConfig.pagination?.totalItems ?? 0\"\r\n    [currentPage]=\"tableConfig.pagination?.currentPage ?? 0\"\r\n    [pageSizeOptions]=\"tableConfig.pagination?.itemsPerPageOptions ?? [10, 25, 50]\"\r\n    (paginatorChange)=\"onPaginatorChange($event)\"\r\n  ></ui-paginator>\r\n</div>\r\n\r\n<ng-template #expandButton let-i=\"index\" let-element=\"element\">\r\n  <ui-button\r\n    [applicationTheme]=\"applicationTheme\"\r\n    *ngIf=\"!i && tableDetails\"\r\n    variant=\"icon-button\"\r\n    [ngClass]=\"{ opened: elementDetail && element == elementDetail }\"\r\n    [iconName]=\"elementDetail && element == elementDetail ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\r\n  ></ui-button>\r\n</ng-template>\r\n\r\n<ng-template #columnHeader let-column=\"column\" let-i=\"i\">\r\n  <div class=\"header-section\">\r\n                    <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\r\n                          class=\"column-title\">{{ column.title | sentencecase }}\r\n                 </span>\r\n    <ui-icon *ngIf=\"column?.showTooltip\" [name]=\"'Help-in-line'\"\r\n             [matTooltipClass]=\"applicationTheme\"\r\n             [matTooltip]=\"(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title ) : '') || ''\"\r\n    ></ui-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host-context(.without-table-border) .table-container{border:none}.flex-left,.table-container .table-header{display:flex;justify-content:flex-start;align-items:center}.table-container{--mat-table-background-color: #ffffff;overflow:hidden;border:1px #E0E0E0 solid;border-radius:8px}.table-container ::ng-deep .mat-sort-header-arrow{color:#000}.table-container .table-header{min-height:56px;padding:8px;background:#fff;line-height:24px;font-size:16px;font-weight:700;text-transform:uppercase;display:flex;justify-content:space-between}.table-container .table-wrapper{max-width:100%;overflow:auto}.table-container .table-wrapper.sticky-header{max-height:var(--table-max-height);overflow-y:auto}.table-container .table-wrapper table.main-table{width:100%;box-shadow:unset}.table-container .table-wrapper table.main-table ::ng-deep .mat-sort-header-arrow{margin-left:8px}.table-container .table-wrapper table.main-table .mdc-data-table__cell,.table-container .table-wrapper table.main-table .mdc-data-table__header-cell{padding:8px 24px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:not(:first-child):not(:last-child){padding:8px 12px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:first-child{padding:8px 12px 8px 24px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:last-child{padding:8px 24px 8px 12px}.table-container .table-wrapper table.main-table th{font-size:14px;line-height:16px;text-transform:uppercase}.table-container .table-wrapper table.main-table tr.is-title-present th.mat-mdc-header-cell.mdc-data-table__header-cell{border-top:1px solid #E0E0E0}.table-container .table-wrapper table.main-table td{font-size:14px;line-height:20px}.table-container .table-wrapper table.main-table td .row-value{display:flex;align-items:center;gap:16px}.table-container .table-wrapper table.main-table td .row-value ui-icon ::ng-deep mat-icon{transition:all .3s!important;font-size:24px}.table-container .table-wrapper table.main-table td .row-value ui-icon.opened ::ng-deep mat-icon{transform:rotate(180deg)}.table-container .table-wrapper table.main-table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader{display:flex;justify-content:center;align-items:center;line-height:unset}.table-container .table-wrapper table.main-table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader .skeleton-loader{margin-bottom:0}.table-container .table-wrapper table.main-table ::ng-deep thead{background:#f6f6f6!important}.table-container .table-wrapper table.main-table .mat-mdc-table-sticky-border-elem-left{box-shadow:24px 8px 24px #00000014}.table-container .table-wrapper table.main-table .mat-mdc-table-sticky-border-elem-right{box-shadow:0 8px 24px 4px #00000014}.table-container .header-section{display:flex;gap:4px;align-items:center}.table-container .header-section .column-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;max-width:fit-content;font-weight:700}.table-container.without-title table{border:unset!important}.table-container.disable-border-radius{border-radius:0!important}.table-container ::ng-deep .mat-mdc-paginator-container{padding:0 24px}.table-container[theme=dark],.table-container[theme=light]{border-radius:10px}.table-container[theme=dark] tr.selected,.table-container[theme=light] tr.selected{background:#f4f4f4!important}.table-container[theme=dark] .table-header,.table-container[theme=light] .table-header{padding:8px 24px;text-transform:none}.table-container[theme=dark] .table-wrapper table th,.table-container[theme=light] .table-wrapper table th{text-transform:none}.table-container[theme=dark] .table-wrapper table td,.table-container[theme=light] .table-wrapper table td{transition:border .3s}.table-container[theme=dark] .table-wrapper table tr.last-row td,.table-container[theme=light] .table-wrapper table tr.last-row td{--mat-table-row-item-outline-color: rgb(0, 0, 0, 0)}.table-container[theme=dark] .table-wrapper table .mat-mdc-table-sticky-border-elem-right,.table-container[theme=light] .table-wrapper table .mat-mdc-table-sticky-border-elem-right{box-shadow:0 8px 24px 4px #24242414!important}.table-container[theme=dark] .table-wrapper table .mat-mdc-table-sticky-border-elem-left,.table-container[theme=light] .table-wrapper table .mat-mdc-table-sticky-border-elem-left{box-shadow:24px 8px 24px #24242414!important}.table-container[theme=dark] .table-wrapper table ::ng-deep thead,.table-container[theme=light] .table-wrapper table ::ng-deep thead{background-color:#fff!important}.table-container[theme=dark] .table-wrapper table ::ng-deep :not(thead) tr:hover,.table-container[theme=light] .table-wrapper table ::ng-deep :not(thead) tr:hover{background-color:#fff2fc}.table-container ::ng-deep tr.detail-row{height:0}.table-container ::ng-deep tr.detail-row td{border:unset!important}.table-container ::ng-deep .mat-column-expandedDetail{padding:0!important}.table-container ::ng-deep .element-detail{overflow:hidden!important;display:flex!important}.table-container ::ng-deep .element-detail table{background-color:#fff;border-bottom:1px solid #D3D3D3;transition:border .3s}.table-container ::ng-deep .element-detail table.hide-borders{border-bottom:unset}.table-container ::ng-deep .element-detail table .mat-mdc-header-row{visibility:collapse}.table-container ::ng-deep .element-detail table .mat-mdc-cell{border-width:0}.table-container ::ng-deep .element-detail table td:first-child{padding-left:64px!important}table th.th-right{text-align:right}table th.th-right ::ng-deep .header-section{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .header-section{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .header-section{justify-content:center}table td.td-right{text-align:right}table td.td-right div{justify-content:end}table td.td-left{text-align:left}table td.td-left div{justify-content:start}table td.td-center{text-align:center}table td.td-center div{justify-content:center}::ng-deep table:not(.main-table) thead{display:none!important}ui-paginator{width:100%;display:flex;justify-content:flex-end;border-top:1px solid #D3D3D3}ui-paginator ::ng-deep .mat-mdc-paginator{width:100%}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -13869,8 +13870,13 @@ class SliderComponent {
          * @memberof SliderComponent
          */
         this.variant = 'range';
+        this.useDecimal = input(false);
+        this.minLabel = input();
+        this.maxLabel = input();
+        this.inputWidth = input(80);
         this.sliderValueChange = new EventEmitter();
         this.cdr = inject(ChangeDetectorRef);
+        this.decimalPipe = inject(DecimalPipe);
         this.value = { start: 0, end: 100 };
         this.translationContext = 'SLIDER.';
         this.touchedControlName = '';
@@ -13880,6 +13886,7 @@ class SliderComponent {
             this.applicationTheme = defaultAppTheme;
             this.cdr.markForCheck();
         }
+        this.formatLabel = this.formatLabel.bind(this);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -13911,11 +13918,12 @@ class SliderComponent {
         this.onChange(value);
         this.sliderValueChange.emit(value);
         this.cdr.markForCheck();
+        this.onTouch();
     }
     onInputBlur(inputName) {
         this.touchedControlName = inputName;
         const value = { start: +this.sliderStart, end: +this.sliderEnd };
-        if (!this.hasError && this.isValueChanged(value)) {
+        if (this.isValueChanged(value)) {
             this.onValueChange();
         }
     }
@@ -13936,14 +13944,27 @@ class SliderComponent {
     get isBasicSlider() {
         return this.variant === 'basic';
     }
+    formatLabel(value) {
+        return this.useDecimal() ? this.decimalPipe.transform(value, '1.0-0') || value.toString() : value.toString();
+    }
+    validate(control) {
+        return this.hasError && this.touchedControlName ? { invalidSlider: true } : null;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SliderComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SliderComponent, isStandalone: true, selector: "ui-slider", inputs: { max: "max", min: "min", percentage: "percentage", disabled: "disabled", sliderStart: "sliderStart", sliderEnd: "sliderEnd", label: "label", showInputs: "showInputs", step: "step", applicationTheme: "applicationTheme", variant: "variant" }, outputs: { sliderValueChange: "sliderValueChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SliderComponent, isStandalone: true, selector: "ui-slider", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, percentage: { classPropertyName: "percentage", publicName: "percentage", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, sliderStart: { classPropertyName: "sliderStart", publicName: "sliderStart", isSignal: false, isRequired: false, transformFunction: null }, sliderEnd: { classPropertyName: "sliderEnd", publicName: "sliderEnd", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, showInputs: { classPropertyName: "showInputs", publicName: "showInputs", isSignal: false, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, useDecimal: { classPropertyName: "useDecimal", publicName: "useDecimal", isSignal: true, isRequired: false, transformFunction: null }, minLabel: { classPropertyName: "minLabel", publicName: "minLabel", isSignal: true, isRequired: false, transformFunction: null }, maxLabel: { classPropertyName: "maxLabel", publicName: "maxLabel", isSignal: true, isRequired: false, transformFunction: null }, inputWidth: { classPropertyName: "inputWidth", publicName: "inputWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sliderValueChange: "sliderValueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SliderComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<ng-container>\r\n  <div\r\n    class=\"slider-container\"\r\n    [attr.theme]=\"applicationTheme\"\r\n    [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\r\n  >\r\n    <div class=\"slider-label\" *ngIf=\"label\">{{ label }}</div>\r\n\r\n    <div class=\"slider\">\r\n      <div class=\"min-value\" *ngIf=\"!isBasicSlider\">{{ percentage ? min + '%' : min }}</div>\r\n      <mat-slider\r\n        [disableRipple]=\"applicationTheme !== 'classic'\"\r\n        #sliderElement\r\n        discrete\r\n        [disabled]=\"disabled\"\r\n        [max]=\"max\"\r\n        [min]=\"min\"\r\n        [step]=\"step\"\r\n        (mouseenter)=\"sliderElement.discrete = true\"\r\n        (mouseleave)=\"sliderElement.discrete = false\"\r\n      >\r\n        <ng-container *ngIf=\"isBasicSlider; else rangeTemplate\">\r\n          <input [disabled]=\"disabled\" (valueChange)=\"onValueChange($event)\" [(ngModel)]=\"sliderStart\" matSliderThumb />\r\n        </ng-container>\r\n\r\n        <ng-template #rangeTemplate>\r\n          <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderStart\" matSliderStartThumb />\r\n          <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderEnd\" matSliderEndThumb />\r\n        </ng-template>\r\n      </mat-slider>\r\n      <div class=\"max-value\" *ngIf=\"!isBasicSlider\">{{ percentage ? max + '%' : max }}</div>\r\n    </div>\r\n\r\n    <div class=\"slider-input\" *ngIf=\"showInputs && !this.isBasicSlider\">\r\n      <mat-form-field [appearance]=\"'outline'\">\r\n        <mat-label>{{ 'COMMON.MIN' | uiTranslate | async }} <span *ngIf=\"percentage\">%</span></mat-label>\r\n        <input\r\n          matInput\r\n          [type]=\"'number'\"\r\n          [(ngModel)]=\"sliderStart\"\r\n          [disabled]=\"disabled\"\r\n          (focus)=\"onInputFocus()\"\r\n          (blur)=\"onInputBlur('start')\"\r\n          (keydown.enter)=\"onInputBlur('start')\"\r\n          [allowOnlyDigits]=\"true\"\r\n          digitsOnly\r\n        />\r\n      </mat-form-field>\r\n\r\n      <mat-form-field [appearance]=\"'outline'\">\r\n        <mat-label>{{ 'COMMON.MAX' | uiTranslate | async }} <span *ngIf=\"percentage\">%</span></mat-label>\r\n        <input\r\n          matInput\r\n          [disabled]=\"disabled\"\r\n          [type]=\"'number'\"\r\n          [(ngModel)]=\"sliderEnd\"\r\n          (focus)=\"onInputFocus()\"\r\n          (blur)=\"onInputBlur('end')\"\r\n          (keydown.enter)=\"onInputBlur('end')\"\r\n          [allowOnlyDigits]=\"true\"\r\n          digitsOnly\r\n          data-testid=\"slider.input-end\"\r\n        />\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <mat-error class=\"slider-errors\" *ngIf=\"hasError && touchedControlName\">\r\n      <div class=\"validation-error\" *ngIf=\"touchedControlName === 'start' && sliderStart > sliderEnd\">\r\n        <ui-icon [name]=\"'Info'\"></ui-icon>\r\n        <span>{{\r\n          translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\r\n        }}</span>\r\n      </div>\r\n\r\n      <div class=\"validation-error\" *ngIf=\"touchedControlName === 'end' && sliderStart > sliderEnd\">\r\n        <ui-icon [name]=\"'Info'\"></ui-icon>\r\n        <span>{{\r\n          translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\r\n        }}</span>\r\n      </div>\r\n\r\n      <div class=\"validation-error\" *ngIf=\"sliderStart < min\">\r\n        <ui-icon [name]=\"'Info'\"></ui-icon>\r\n        <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\r\n      </div>\r\n      <div class=\"validation-error\" *ngIf=\"sliderEnd > max\">\r\n        <ui-icon [name]=\"'Info'\"></ui-icon>\r\n        <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\r\n      </div>\r\n    </mat-error>\r\n  </div>\r\n</ng-container>\r\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#cb7b7a!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#cb7b7a!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled *{pointer-events:none;cursor:initial}::ng-deep .slider-container.disabled .mat-mdc-slider *{border-color:#919191!important}::ng-deep .slider-container.disabled .mat-mdc-slider .mdc-slider__thumb:after{display:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#a9c2c9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:30px;margin-right:8px}::ng-deep .slider-container .slider .max-value{width:auto;margin-left:8px}::ng-deep .slider-container .slider-errors{margin-top:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between}::ng-deep .slider-container .slider-input mat-form-field{width:80px;min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#cb7b7a}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .slider-container[theme=light],::ng-deep .slider-container[theme=dark]{color:#242424}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary{--mdc-slider-active-track-color: #D410AA;--mdc-slider-handle-color: #D410AA;--mdc-slider-focus-handle-color: #D410AA;--mdc-slider-hover-handle-color: #D410AA;--mdc-slider-inactive-track-color: #D3D3D3;--mdc-slider-with-tick-marks-inactive-container-color: #D410AA;--mat-mdc-slider-ripple-color: #D410AA;--mat-mdc-slider-hover-ripple-color: rgba(255, 179, 238, .56);--mat-mdc-slider-focus-ripple-color: rgba(255, 179, 238, .56);height:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive{opacity:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb{z-index:1;height:40px;width:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill{z-index:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container{bottom:60px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator{background:#242424;opacity:1;color:#fff;position:relative;width:100%;display:flex;justify-content:center;align-items:center}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before{content:\"\";display:flex;position:absolute;left:calc(50% - 7px);bottom:-8px;height:15px;width:15px;border-top:1px solid #ffffff;border-right:1px solid #ffffff;background:#242424;z-index:10;border-top-right-radius:4px;transform:rotate(135deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i2$7.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$7.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i2$7.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "directive", type: DigitsOnlyDirective, selector: "[digitsOnly]", inputs: ["allowNegative", "allowDecimal", "allowOnlyDigits"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => SliderComponent),
+                multi: true,
+            },
+            provideNgxMask(),
+            DecimalPipe,
+        ], ngImport: i0, template: "<ng-container>\r\n  <div\r\n    class=\"slider-container\"\r\n    [attr.theme]=\"applicationTheme\"\r\n    [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\r\n  >\r\n    @if (label) {\r\n      <div class=\"slider-label\">{{ label }}</div>\r\n    }\r\n\r\n    <div class=\"slider\">\r\n      @if (!isBasicSlider) {\r\n        <div class=\"min-value\">\r\n          <span>\r\n            @if (useDecimal()) {\r\n              {{ min | number }}\r\n            } @else {\r\n              {{ min }}\r\n            }\r\n            @if (percentage) {\r\n              %\r\n            }\r\n          </span>\r\n        </div>\r\n      }\r\n      <mat-slider\r\n        [disableRipple]=\"applicationTheme !== 'classic'\"\r\n        #sliderElement\r\n        discrete\r\n        [disabled]=\"disabled\"\r\n        [max]=\"max\"\r\n        [min]=\"min\"\r\n        [step]=\"step\"\r\n        (mouseenter)=\"sliderElement.discrete = true\"\r\n        (mouseleave)=\"sliderElement.discrete = false\"\r\n        [displayWith]=\"formatLabel\"\r\n      >\r\n        @if (isBasicSlider) {\r\n          <input [disabled]=\"disabled\" (valueChange)=\"onValueChange($event)\" [(ngModel)]=\"sliderStart\" matSliderThumb />\r\n        } @else {\r\n          <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderStart\" matSliderStartThumb />\r\n          <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderEnd\" matSliderEndThumb />\r\n        }\r\n      </mat-slider>\r\n      @if (!isBasicSlider) {\r\n        <div class=\"max-value\">\r\n          <span>\r\n            @if (useDecimal()) {\r\n              {{ max | number }}\r\n            } @else {\r\n              {{ max }}\r\n            }\r\n            @if (percentage) {\r\n              %\r\n            }\r\n          </span>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (showInputs && !this.isBasicSlider) {\r\n      <div class=\"slider-input\">\r\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\r\n          @if (minLabel()) {\r\n            <mat-label>\r\n              {{ minLabel() }}\r\n              @if (percentage) {\r\n                <span>%</span>\r\n              }\r\n            </mat-label>\r\n          } @else {\r\n            <mat-label>\r\n              {{ 'COMMON.MIN' | uiTranslate | async }}\r\n              @if (percentage) {\r\n                <span>%</span>\r\n              }\r\n            </mat-label>\r\n          }\r\n          @if (useDecimal()) {\r\n            <input\r\n              matInput\r\n              [type]=\"'text'\"\r\n              [(ngModel)]=\"sliderStart\"\r\n              [disabled]=\"disabled\"\r\n              (focus)=\"onInputFocus()\"\r\n              (blur)=\"onInputBlur('start')\"\r\n              (keydown.enter)=\"onInputBlur('start')\"\r\n              mask=\"separator.2\"\r\n              thousandSeparator=\",\"\r\n            />\r\n          } @else {\r\n            <input\r\n              matInput\r\n              [type]=\"'number'\"\r\n              [(ngModel)]=\"sliderStart\"\r\n              [disabled]=\"disabled\"\r\n              (focus)=\"onInputFocus()\"\r\n              (blur)=\"onInputBlur('start')\"\r\n              (keydown.enter)=\"onInputBlur('start')\"\r\n              [allowOnlyDigits]=\"true\"\r\n              digitsOnly\r\n            />\r\n          }\r\n        </mat-form-field>\r\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\r\n          @if (maxLabel()) {\r\n            <mat-label>\r\n              {{ maxLabel() }}\r\n              @if (percentage) {\r\n                <span>%</span>\r\n              }\r\n            </mat-label>\r\n          } @else {\r\n            <mat-label>\r\n              {{ 'COMMON.MAX' | uiTranslate | async }}\r\n              @if (percentage) {\r\n                <span>%</span>\r\n              }\r\n            </mat-label>\r\n          }\r\n          @if (useDecimal()) {\r\n            <input\r\n              matInput\r\n              [disabled]=\"disabled\"\r\n              [type]=\"'text'\"\r\n              [(ngModel)]=\"sliderEnd\"\r\n              (focus)=\"onInputFocus()\"\r\n              (blur)=\"onInputBlur('end')\"\r\n              (keydown.enter)=\"onInputBlur('end')\"\r\n              data-testid=\"slider.input-end\"\r\n              mask=\"separator.2\"\r\n              thousandSeparator=\",\"\r\n            />\r\n          } @else {\r\n            <input\r\n              matInput\r\n              [disabled]=\"disabled\"\r\n              [type]=\"'number'\"\r\n              [(ngModel)]=\"sliderEnd\"\r\n              (focus)=\"onInputFocus()\"\r\n              (blur)=\"onInputBlur('end')\"\r\n              (keydown.enter)=\"onInputBlur('end')\"\r\n              [allowOnlyDigits]=\"true\"\r\n              digitsOnly\r\n              data-testid=\"slider.input-end\"\r\n            />\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @if (hasError && touchedControlName) {\r\n      <mat-error class=\"slider-errors\">\r\n        @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\r\n          <div class=\"validation-error\">\r\n            <ui-icon [name]=\"'Info'\"></ui-icon>\r\n            <span>{{\r\n              translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\r\n            }}</span>\r\n          </div>\r\n        }\r\n        @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\r\n          <div class=\"validation-error\">\r\n            <ui-icon [name]=\"'Info'\"></ui-icon>\r\n            <span>{{\r\n              translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\r\n            }}</span>\r\n          </div>\r\n        }\r\n        @if (sliderStart < min) {\r\n          <div class=\"validation-error\">\r\n            <ui-icon [name]=\"'Info'\"></ui-icon>\r\n            <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\r\n          </div>\r\n        }\r\n        @if (sliderEnd > max) {\r\n          <div class=\"validation-error\">\r\n            <ui-icon [name]=\"'Info'\"></ui-icon>\r\n            <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\r\n          </div>\r\n        }\r\n      </mat-error>\r\n    }\r\n  </div>\r\n</ng-container>\r\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep mat-form-field .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}:host ::ng-deep mat-form-field .mdc-floating-label--float-above{transform:translateY(-28px) scale(.75)!important}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#cb7b7a!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#cb7b7a!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled *{pointer-events:none;cursor:initial}::ng-deep .slider-container.disabled .mat-mdc-slider *{border-color:#919191!important}::ng-deep .slider-container.disabled .mat-mdc-slider .mdc-slider__thumb:after{display:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#a9c2c9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:auto;margin-right:8px;white-space:nowrap}::ng-deep .slider-container .slider .max-value{width:auto;margin-left:8px;white-space:nowrap}::ng-deep .slider-container .slider-errors{margin-top:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between}::ng-deep .slider-container .slider-input mat-form-field{min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#cb7b7a}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .slider-container[theme=light],::ng-deep .slider-container[theme=dark]{color:#242424}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary{--mdc-slider-active-track-color: #D410AA;--mdc-slider-handle-color: #D410AA;--mdc-slider-focus-handle-color: #D410AA;--mdc-slider-hover-handle-color: #D410AA;--mdc-slider-inactive-track-color: #D3D3D3;--mdc-slider-with-tick-marks-inactive-container-color: #D410AA;--mat-mdc-slider-ripple-color: #D410AA;--mat-mdc-slider-hover-ripple-color: rgba(255, 179, 238, .56);--mat-mdc-slider-focus-ripple-color: rgba(255, 179, 238, .56);height:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive{opacity:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb{z-index:1;height:40px;width:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill{z-index:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container{bottom:60px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator{background:#242424;opacity:1;color:#fff;position:relative;width:100%;display:flex;justify-content:center;align-items:center}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before{content:\"\";display:flex;position:absolute;left:calc(50% - 7px);bottom:-8px;height:15px;width:15px;border-top:1px solid #ffffff;border-right:1px solid #ffffff;background:#242424;z-index:10;border-top-right-radius:4px;transform:rotate(135deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i2$7.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$7.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i2$7.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "directive", type: DigitsOnlyDirective, selector: "[digitsOnly]", inputs: ["allowNegative", "allowDecimal", "allowOnlyDigits"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
@@ -13953,6 +13974,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                             useExisting: forwardRef(() => SliderComponent),
                             multi: true,
                         },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => SliderComponent),
+                            multi: true,
+                        },
+                        provideNgxMask(),
+                        DecimalPipe,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         CommonModule,
                         MatSliderModule,
@@ -13962,7 +13990,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         IconComponentModule,
                         UiTranslatePipe,
                         DigitsOnlyDirective,
-                    ], template: "<ng-container>\r\n  <div\r\n    class=\"slider-container\"\r\n    [attr.theme]=\"applicationTheme\"\r\n    [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\r\n  >\r\n    <div class=\"slider-label\" *ngIf=\"label\">{{ label }}</div>\r\n\r\n    <div class=\"slider\">\r\n      <div class=\"min-value\" *ngIf=\"!isBasicSlider\">{{ percentage ? min + '%' : min }}</div>\r\n      <mat-slider\r\n        [disableRipple]=\"applicationTheme !== 'classic'\"\r\n        #sliderElement\r\n        discrete\r\n        [disabled]=\"disabled\"\r\n        [max]=\"max\"\r\n        [min]=\"min\"\r\n        [step]=\"step\"\r\n        (mouseenter)=\"sliderElement.discrete = true\"\r\n        (mouseleave)=\"sliderElement.discrete = false\"\r\n      >\r\n        <ng-container *ngIf=\"isBasicSlider; else rangeTemplate\">\r\n          <input [disabled]=\"disabled\" (valueChange)=\"onValueChange($event)\" [(ngModel)]=\"sliderStart\" matSliderThumb />\r\n        </ng-container>\r\n\r\n        <ng-template #rangeTemplate>\r\n          <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderStart\" matSliderStartThumb />\r\n          <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderEnd\" matSliderEndThumb />\r\n        </ng-template>\r\n      </mat-slider>\r\n      <div class=\"max-value\" *ngIf=\"!isBasicSlider\">{{ percentage ? max + '%' : max }}</div>\r\n    </div>\r\n\r\n    <div class=\"slider-input\" *ngIf=\"showInputs && !this.isBasicSlider\">\r\n      <mat-form-field [appearance]=\"'outline'\">\r\n        <mat-label>{{ 'COMMON.MIN' | uiTranslate | async }} <span *ngIf=\"percentage\">%</span></mat-label>\r\n        <input\r\n          matInput\r\n          [type]=\"'number'\"\r\n          [(ngModel)]=\"sliderStart\"\r\n          [disabled]=\"disabled\"\r\n          (focus)=\"onInputFocus()\"\r\n          (blur)=\"onInputBlur('start')\"\r\n          (keydown.enter)=\"onInputBlur('start')\"\r\n          [allowOnlyDigits]=\"true\"\r\n          digitsOnly\r\n        />\r\n      </mat-form-field>\r\n\r\n      <mat-form-field [appearance]=\"'outline'\">\r\n        <mat-label>{{ 'COMMON.MAX' | uiTranslate | async }} <span *ngIf=\"percentage\">%</span></mat-label>\r\n        <input\r\n          matInput\r\n          [disabled]=\"disabled\"\r\n          [type]=\"'number'\"\r\n          [(ngModel)]=\"sliderEnd\"\r\n          (focus)=\"onInputFocus()\"\r\n          (blur)=\"onInputBlur('end')\"\r\n          (keydown.enter)=\"onInputBlur('end')\"\r\n          [allowOnlyDigits]=\"true\"\r\n          digitsOnly\r\n          data-testid=\"slider.input-end\"\r\n        />\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <mat-error class=\"slider-errors\" *ngIf=\"hasError && touchedControlName\">\r\n      <div class=\"validation-error\" *ngIf=\"touchedControlName === 'start' && sliderStart > sliderEnd\">\r\n        <ui-icon [name]=\"'Info'\"></ui-icon>\r\n        <span>{{\r\n          translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\r\n        }}</span>\r\n      </div>\r\n\r\n      <div class=\"validation-error\" *ngIf=\"touchedControlName === 'end' && sliderStart > sliderEnd\">\r\n        <ui-icon [name]=\"'Info'\"></ui-icon>\r\n        <span>{{\r\n          translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\r\n        }}</span>\r\n      </div>\r\n\r\n      <div class=\"validation-error\" *ngIf=\"sliderStart < min\">\r\n        <ui-icon [name]=\"'Info'\"></ui-icon>\r\n        <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\r\n      </div>\r\n      <div class=\"validation-error\" *ngIf=\"sliderEnd > max\">\r\n        <ui-icon [name]=\"'Info'\"></ui-icon>\r\n        <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\r\n      </div>\r\n    </mat-error>\r\n  </div>\r\n</ng-container>\r\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#cb7b7a!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#cb7b7a!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled *{pointer-events:none;cursor:initial}::ng-deep .slider-container.disabled .mat-mdc-slider *{border-color:#919191!important}::ng-deep .slider-container.disabled .mat-mdc-slider .mdc-slider__thumb:after{display:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#a9c2c9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:30px;margin-right:8px}::ng-deep .slider-container .slider .max-value{width:auto;margin-left:8px}::ng-deep .slider-container .slider-errors{margin-top:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between}::ng-deep .slider-container .slider-input mat-form-field{width:80px;min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#cb7b7a}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .slider-container[theme=light],::ng-deep .slider-container[theme=dark]{color:#242424}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary{--mdc-slider-active-track-color: #D410AA;--mdc-slider-handle-color: #D410AA;--mdc-slider-focus-handle-color: #D410AA;--mdc-slider-hover-handle-color: #D410AA;--mdc-slider-inactive-track-color: #D3D3D3;--mdc-slider-with-tick-marks-inactive-container-color: #D410AA;--mat-mdc-slider-ripple-color: #D410AA;--mat-mdc-slider-hover-ripple-color: rgba(255, 179, 238, .56);--mat-mdc-slider-focus-ripple-color: rgba(255, 179, 238, .56);height:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive{opacity:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb{z-index:1;height:40px;width:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill{z-index:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container{bottom:60px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator{background:#242424;opacity:1;color:#fff;position:relative;width:100%;display:flex;justify-content:center;align-items:center}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before{content:\"\";display:flex;position:absolute;left:calc(50% - 7px);bottom:-8px;height:15px;width:15px;border-top:1px solid #ffffff;border-right:1px solid #ffffff;background:#242424;z-index:10;border-top-right-radius:4px;transform:rotate(135deg)}\n"] }]
+                        NgxMaskDirective,
+                    ], template: "<ng-container>\r\n  <div\r\n    class=\"slider-container\"\r\n    [attr.theme]=\"applicationTheme\"\r\n    [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\r\n  >\r\n    @if (label) {\r\n      <div class=\"slider-label\">{{ label }}</div>\r\n    }\r\n\r\n    <div class=\"slider\">\r\n      @if (!isBasicSlider) {\r\n        <div class=\"min-value\">\r\n          <span>\r\n            @if (useDecimal()) {\r\n              {{ min | number }}\r\n            } @else {\r\n              {{ min }}\r\n            }\r\n            @if (percentage) {\r\n              %\r\n            }\r\n          </span>\r\n        </div>\r\n      }\r\n      <mat-slider\r\n        [disableRipple]=\"applicationTheme !== 'classic'\"\r\n        #sliderElement\r\n        discrete\r\n        [disabled]=\"disabled\"\r\n        [max]=\"max\"\r\n        [min]=\"min\"\r\n        [step]=\"step\"\r\n        (mouseenter)=\"sliderElement.discrete = true\"\r\n        (mouseleave)=\"sliderElement.discrete = false\"\r\n        [displayWith]=\"formatLabel\"\r\n      >\r\n        @if (isBasicSlider) {\r\n          <input [disabled]=\"disabled\" (valueChange)=\"onValueChange($event)\" [(ngModel)]=\"sliderStart\" matSliderThumb />\r\n        } @else {\r\n          <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderStart\" matSliderStartThumb />\r\n          <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderEnd\" matSliderEndThumb />\r\n        }\r\n      </mat-slider>\r\n      @if (!isBasicSlider) {\r\n        <div class=\"max-value\">\r\n          <span>\r\n            @if (useDecimal()) {\r\n              {{ max | number }}\r\n            } @else {\r\n              {{ max }}\r\n            }\r\n            @if (percentage) {\r\n              %\r\n            }\r\n          </span>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (showInputs && !this.isBasicSlider) {\r\n      <div class=\"slider-input\">\r\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\r\n          @if (minLabel()) {\r\n            <mat-label>\r\n              {{ minLabel() }}\r\n              @if (percentage) {\r\n                <span>%</span>\r\n              }\r\n            </mat-label>\r\n          } @else {\r\n            <mat-label>\r\n              {{ 'COMMON.MIN' | uiTranslate | async }}\r\n              @if (percentage) {\r\n                <span>%</span>\r\n              }\r\n            </mat-label>\r\n          }\r\n          @if (useDecimal()) {\r\n            <input\r\n              matInput\r\n              [type]=\"'text'\"\r\n              [(ngModel)]=\"sliderStart\"\r\n              [disabled]=\"disabled\"\r\n              (focus)=\"onInputFocus()\"\r\n              (blur)=\"onInputBlur('start')\"\r\n              (keydown.enter)=\"onInputBlur('start')\"\r\n              mask=\"separator.2\"\r\n              thousandSeparator=\",\"\r\n            />\r\n          } @else {\r\n            <input\r\n              matInput\r\n              [type]=\"'number'\"\r\n              [(ngModel)]=\"sliderStart\"\r\n              [disabled]=\"disabled\"\r\n              (focus)=\"onInputFocus()\"\r\n              (blur)=\"onInputBlur('start')\"\r\n              (keydown.enter)=\"onInputBlur('start')\"\r\n              [allowOnlyDigits]=\"true\"\r\n              digitsOnly\r\n            />\r\n          }\r\n        </mat-form-field>\r\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\r\n          @if (maxLabel()) {\r\n            <mat-label>\r\n              {{ maxLabel() }}\r\n              @if (percentage) {\r\n                <span>%</span>\r\n              }\r\n            </mat-label>\r\n          } @else {\r\n            <mat-label>\r\n              {{ 'COMMON.MAX' | uiTranslate | async }}\r\n              @if (percentage) {\r\n                <span>%</span>\r\n              }\r\n            </mat-label>\r\n          }\r\n          @if (useDecimal()) {\r\n            <input\r\n              matInput\r\n              [disabled]=\"disabled\"\r\n              [type]=\"'text'\"\r\n              [(ngModel)]=\"sliderEnd\"\r\n              (focus)=\"onInputFocus()\"\r\n              (blur)=\"onInputBlur('end')\"\r\n              (keydown.enter)=\"onInputBlur('end')\"\r\n              data-testid=\"slider.input-end\"\r\n              mask=\"separator.2\"\r\n              thousandSeparator=\",\"\r\n            />\r\n          } @else {\r\n            <input\r\n              matInput\r\n              [disabled]=\"disabled\"\r\n              [type]=\"'number'\"\r\n              [(ngModel)]=\"sliderEnd\"\r\n              (focus)=\"onInputFocus()\"\r\n              (blur)=\"onInputBlur('end')\"\r\n              (keydown.enter)=\"onInputBlur('end')\"\r\n              [allowOnlyDigits]=\"true\"\r\n              digitsOnly\r\n              data-testid=\"slider.input-end\"\r\n            />\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n    }\r\n\r\n    @if (hasError && touchedControlName) {\r\n      <mat-error class=\"slider-errors\">\r\n        @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\r\n          <div class=\"validation-error\">\r\n            <ui-icon [name]=\"'Info'\"></ui-icon>\r\n            <span>{{\r\n              translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\r\n            }}</span>\r\n          </div>\r\n        }\r\n        @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\r\n          <div class=\"validation-error\">\r\n            <ui-icon [name]=\"'Info'\"></ui-icon>\r\n            <span>{{\r\n              translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\r\n            }}</span>\r\n          </div>\r\n        }\r\n        @if (sliderStart < min) {\r\n          <div class=\"validation-error\">\r\n            <ui-icon [name]=\"'Info'\"></ui-icon>\r\n            <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\r\n          </div>\r\n        }\r\n        @if (sliderEnd > max) {\r\n          <div class=\"validation-error\">\r\n            <ui-icon [name]=\"'Info'\"></ui-icon>\r\n            <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\r\n          </div>\r\n        }\r\n      </mat-error>\r\n    }\r\n  </div>\r\n</ng-container>\r\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep mat-form-field .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}:host ::ng-deep mat-form-field .mdc-floating-label--float-above{transform:translateY(-28px) scale(.75)!important}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#cb7b7a!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#cb7b7a!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled *{pointer-events:none;cursor:initial}::ng-deep .slider-container.disabled .mat-mdc-slider *{border-color:#919191!important}::ng-deep .slider-container.disabled .mat-mdc-slider .mdc-slider__thumb:after{display:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#a9c2c9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:auto;margin-right:8px;white-space:nowrap}::ng-deep .slider-container .slider .max-value{width:auto;margin-left:8px;white-space:nowrap}::ng-deep .slider-container .slider-errors{margin-top:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between}::ng-deep .slider-container .slider-input mat-form-field{min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#cb7b7a}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .slider-container[theme=light],::ng-deep .slider-container[theme=dark]{color:#242424}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary{--mdc-slider-active-track-color: #D410AA;--mdc-slider-handle-color: #D410AA;--mdc-slider-focus-handle-color: #D410AA;--mdc-slider-hover-handle-color: #D410AA;--mdc-slider-inactive-track-color: #D3D3D3;--mdc-slider-with-tick-marks-inactive-container-color: #D410AA;--mat-mdc-slider-ripple-color: #D410AA;--mat-mdc-slider-hover-ripple-color: rgba(255, 179, 238, .56);--mat-mdc-slider-focus-ripple-color: rgba(255, 179, 238, .56);height:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive{opacity:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb{z-index:1;height:40px;width:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill{z-index:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container{bottom:60px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator{background:#242424;opacity:1;color:#fff;position:relative;width:100%;display:flex;justify-content:center;align-items:center}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before{content:\"\";display:flex;position:absolute;left:calc(50% - 7px);bottom:-8px;height:15px;width:15px;border-top:1px solid #ffffff;border-right:1px solid #ffffff;background:#242424;z-index:10;border-top-right-radius:4px;transform:rotate(135deg)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {