@testgorilla/tgo-ui 1.11.6 → 1.11.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/components/avatar/avatar.component.mjs +2 -2
- package/esm2022/components/button/button.component.mjs +2 -2
- package/esm2022/components/slider/slider.component.mjs +2 -2
- package/esm2022/components/table/table.component.mjs +2 -2
- package/esm2022/components/tag/tag.component.mjs +2 -2
- package/esm2022/components/toggle/toggle.component.mjs +2 -2
- package/fesm2022/testgorilla-tgo-ui.mjs +12 -12
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/src/theme/_tooltip.scss +11 -11
|
@@ -78,11 +78,11 @@ export class TableComponent {
|
|
|
78
78
|
this.sortChange.emit(sortState);
|
|
79
79
|
}
|
|
80
80
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
81
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableComponent, selector: "ui-table", inputs: { config: "config", data: "data", loading: "loading" }, outputs: { paginatorChange: "paginatorChange", sortChange: "sortChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container\" [ngClass]=\"{ 'without-title': !tableConfig?.title }\">\n <div *ngIf=\"tableConfig?.title\" class=\"table-header\">{{ tableConfig.title }}</div>\n <div class=\"table-wrapper\">\n <table\n mat-table\n [dataSource]=\"tableData\"\n matSort\n [matSortActive]=\"tableConfig?.sort?.active ?? ''\"\n [matSortDirection]=\"tableConfig?.sort?.direction ?? ''\"\n (matSortChange)=\"onSortChange($event)\"\n >\n\n <ng-container *ngFor=\"let column of tableConfig?.columns; index as i, last as isLast, first as isFirst\">\n <ng-container *ngIf=\"isFirst && tableConfig?.stickyFirstColumn && column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\" [sticky]=\"true\">\n <th mat-header-cell\n mat-sort-header\n *matHeaderCellDef\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [style.font-weight]=\"'bold'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isFirst && tableConfig?.stickyFirstColumn && !column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\" [sticky]=\"true\">\n <th mat-header-cell\n *matHeaderCellDef\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [style.font-weight]=\"'bold'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isLast && tableConfig?.stickyLastColumn && column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\" stickyEnd>\n <th mat-header-cell\n mat-sort-header\n *matHeaderCellDef\n [attr.sortable]=\"column.allowSort ?? false\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [style.font-weight]=\"'bold'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isLast && tableConfig?.stickyLastColumn && !column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\" stickyEnd>\n <th mat-header-cell\n *matHeaderCellDef\n [attr.sortable]=\"column.allowSort ?? false\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [style.font-weight]=\"'bold'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"!(isFirst && tableConfig?.stickyFirstColumn) && !(isLast && tableConfig?.stickyLastColumn) && column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\">\n <th mat-header-cell\n mat-sort-header\n [attr.sortable]=\"column.allowSort ?? false\"\n *matHeaderCellDef\n [style.font-weight]=\"'bold'\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"!(isFirst && tableConfig?.stickyFirstColumn) && !(isLast && tableConfig?.stickyLastColumn) && !column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\">\n <th mat-header-cell\n [attr.sortable]=\"column.allowSort ?? false\"\n *matHeaderCellDef\n [style.font-weight]=\"'bold'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n </div>\n\n <ui-paginator\n [disabled]=\"loading\"\n [pageSize]=\"tableConfig.pagination.itemsPerPage\"\n [length]=\"tableConfig.pagination.totalItems\"\n [pageSizeOptions]=\"tableConfig.pagination.itemsPerPageOptions\"\n (paginatorChange)=\"onPaginatorChange($event)\"\n ></ui-paginator>\n</div>\n\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:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.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}.flex-left,.table-container .table-header{display:flex;justify-content:flex-start;align-items:center}.table-container{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:#ffffff;line-height:24px;font-size:16px;font-weight:700;text-transform:uppercase}.table-container .table-wrapper{max-width:100%;overflow:auto}.table-container .table-wrapper table{width:100%;box-shadow:unset;border-top:1px #E0E0E0 solid;border-bottom:1px #E0E0E0 solid}.table-container .table-wrapper table ::ng-deep .mat-sort-header-arrow{margin-left:8px}.table-container .table-wrapper table .mdc-data-table__cell,.table-container .table-wrapper table .mdc-data-table__header-cell{padding:8px 24px}.table-container .table-wrapper table th{font-size:12px;line-height:16px;text-transform:uppercase}.table-container .table-wrapper table td{font-size:14px;line-height:20px}.table-container .table-wrapper 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 td ::ng-deep .table-skeleton-loader ngx-skeleton-loader .skeleton-loader{margin-bottom:0}.table-container .table-wrapper table ::ng-deep thead{background:#f6f6f6!important}.table-container .table-wrapper table .mat-mdc-table-sticky-border-elem-right,.table-container .table-wrapper table .mat-mdc-table-sticky-border-elem-left{box-shadow:0 8px 24px 4px #00000014}.table-container .column-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-container.without-title table{border:unset!important}.table-container ::ng-deep .mat-mdc-paginator-container{padding:0 24px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4.SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance"] }, { kind: "component", type: i5.PaginatorComponent, selector: "ui-paginator", inputs: ["pageSizeOptions", "length", "pageSize", "disabled"], outputs: ["paginatorChange"] }, { kind: "directive", type: i6.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i7.EllipseTextDirective, selector: "[uiEllipseText]", outputs: ["onChangeTextState"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
81
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableComponent, selector: "ui-table", inputs: { config: "config", data: "data", loading: "loading" }, outputs: { paginatorChange: "paginatorChange", sortChange: "sortChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container\" [ngClass]=\"{ 'without-title': !tableConfig?.title }\">\n <div *ngIf=\"tableConfig?.title\" class=\"table-header\">{{ tableConfig.title }}</div>\n <div class=\"table-wrapper\">\n <table\n mat-table\n [dataSource]=\"tableData\"\n matSort\n [matSortActive]=\"tableConfig?.sort?.active ?? ''\"\n [matSortDirection]=\"tableConfig?.sort?.direction ?? ''\"\n (matSortChange)=\"onSortChange($event)\"\n >\n\n <ng-container *ngFor=\"let column of tableConfig?.columns; index as i, last as isLast, first as isFirst\">\n <ng-container *ngIf=\"isFirst && tableConfig?.stickyFirstColumn && column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\" [sticky]=\"true\">\n <th mat-header-cell\n mat-sort-header\n *matHeaderCellDef\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [style.font-weight]=\"'bold'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isFirst && tableConfig?.stickyFirstColumn && !column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\" [sticky]=\"true\">\n <th mat-header-cell\n *matHeaderCellDef\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [style.font-weight]=\"'bold'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isLast && tableConfig?.stickyLastColumn && column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\" stickyEnd>\n <th mat-header-cell\n mat-sort-header\n *matHeaderCellDef\n [attr.sortable]=\"column.allowSort ?? false\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [style.font-weight]=\"'bold'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isLast && tableConfig?.stickyLastColumn && !column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\" stickyEnd>\n <th mat-header-cell\n *matHeaderCellDef\n [attr.sortable]=\"column.allowSort ?? false\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [style.font-weight]=\"'bold'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"!(isFirst && tableConfig?.stickyFirstColumn) && !(isLast && tableConfig?.stickyLastColumn) && column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\">\n <th mat-header-cell\n mat-sort-header\n [attr.sortable]=\"column.allowSort ?? false\"\n *matHeaderCellDef\n [style.font-weight]=\"'bold'\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"!(isFirst && tableConfig?.stickyFirstColumn) && !(isLast && tableConfig?.stickyLastColumn) && !column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\">\n <th mat-header-cell\n [attr.sortable]=\"column.allowSort ?? false\"\n *matHeaderCellDef\n [style.font-weight]=\"'bold'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n </div>\n\n <ui-paginator\n [disabled]=\"loading\"\n [pageSize]=\"tableConfig.pagination.itemsPerPage\"\n [length]=\"tableConfig.pagination.totalItems\"\n [pageSizeOptions]=\"tableConfig.pagination.itemsPerPageOptions\"\n (paginatorChange)=\"onPaginatorChange($event)\"\n ></ui-paginator>\n</div>\n\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:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.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}.flex-left,.table-container .table-header{display:flex;justify-content:flex-start;align-items:center}.table-container{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:#ffffff;line-height:24px;font-size:16px;font-weight:700;text-transform:uppercase}.table-container .table-wrapper{max-width:100%;overflow:auto}.table-container .table-wrapper table{width:100%;box-shadow:unset;border-top:1px #E0E0E0 solid;border-bottom:1px #E0E0E0 solid}.table-container .table-wrapper table ::ng-deep .mat-sort-header-arrow{margin-left:8px}.table-container .table-wrapper table .mdc-data-table__cell,.table-container .table-wrapper table .mdc-data-table__header-cell{padding:8px 24px}.table-container .table-wrapper table th{font-size:12px;line-height:16px;text-transform:uppercase}.table-container .table-wrapper table td{font-size:14px;line-height:20px}.table-container .table-wrapper 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 td ::ng-deep .table-skeleton-loader ngx-skeleton-loader .skeleton-loader{margin-bottom:0}.table-container .table-wrapper table ::ng-deep thead{background:#f6f6f6!important}.table-container .table-wrapper table .mat-mdc-table-sticky-border-elem-right,.table-container .table-wrapper table .mat-mdc-table-sticky-border-elem-left{box-shadow:0 8px 24px 4px #00000014}.table-container .column-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-container.without-title table{border:unset!important}.table-container ::ng-deep .mat-mdc-paginator-container{padding:0 24px}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-weight:600;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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4.SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance"] }, { kind: "component", type: i5.PaginatorComponent, selector: "ui-paginator", inputs: ["pageSizeOptions", "length", "pageSize", "disabled"], outputs: ["paginatorChange"] }, { kind: "directive", type: i6.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i7.EllipseTextDirective, selector: "[uiEllipseText]", outputs: ["onChangeTextState"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
82
82
|
}
|
|
83
83
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, decorators: [{
|
|
84
84
|
type: Component,
|
|
85
|
-
args: [{ selector: 'ui-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-container\" [ngClass]=\"{ 'without-title': !tableConfig?.title }\">\n <div *ngIf=\"tableConfig?.title\" class=\"table-header\">{{ tableConfig.title }}</div>\n <div class=\"table-wrapper\">\n <table\n mat-table\n [dataSource]=\"tableData\"\n matSort\n [matSortActive]=\"tableConfig?.sort?.active ?? ''\"\n [matSortDirection]=\"tableConfig?.sort?.direction ?? ''\"\n (matSortChange)=\"onSortChange($event)\"\n >\n\n <ng-container *ngFor=\"let column of tableConfig?.columns; index as i, last as isLast, first as isFirst\">\n <ng-container *ngIf=\"isFirst && tableConfig?.stickyFirstColumn && column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\" [sticky]=\"true\">\n <th mat-header-cell\n mat-sort-header\n *matHeaderCellDef\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [style.font-weight]=\"'bold'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isFirst && tableConfig?.stickyFirstColumn && !column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\" [sticky]=\"true\">\n <th mat-header-cell\n *matHeaderCellDef\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [style.font-weight]=\"'bold'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isLast && tableConfig?.stickyLastColumn && column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\" stickyEnd>\n <th mat-header-cell\n mat-sort-header\n *matHeaderCellDef\n [attr.sortable]=\"column.allowSort ?? false\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [style.font-weight]=\"'bold'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isLast && tableConfig?.stickyLastColumn && !column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\" stickyEnd>\n <th mat-header-cell\n *matHeaderCellDef\n [attr.sortable]=\"column.allowSort ?? false\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [style.font-weight]=\"'bold'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"!(isFirst && tableConfig?.stickyFirstColumn) && !(isLast && tableConfig?.stickyLastColumn) && column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\">\n <th mat-header-cell\n mat-sort-header\n [attr.sortable]=\"column.allowSort ?? false\"\n *matHeaderCellDef\n [style.font-weight]=\"'bold'\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"!(isFirst && tableConfig?.stickyFirstColumn) && !(isLast && tableConfig?.stickyLastColumn) && !column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\">\n <th mat-header-cell\n [attr.sortable]=\"column.allowSort ?? false\"\n *matHeaderCellDef\n [style.font-weight]=\"'bold'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n </div>\n\n <ui-paginator\n [disabled]=\"loading\"\n [pageSize]=\"tableConfig.pagination.itemsPerPage\"\n [length]=\"tableConfig.pagination.totalItems\"\n [pageSizeOptions]=\"tableConfig.pagination.itemsPerPageOptions\"\n (paginatorChange)=\"onPaginatorChange($event)\"\n ></ui-paginator>\n</div>\n\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:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.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}.flex-left,.table-container .table-header{display:flex;justify-content:flex-start;align-items:center}.table-container{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:#ffffff;line-height:24px;font-size:16px;font-weight:700;text-transform:uppercase}.table-container .table-wrapper{max-width:100%;overflow:auto}.table-container .table-wrapper table{width:100%;box-shadow:unset;border-top:1px #E0E0E0 solid;border-bottom:1px #E0E0E0 solid}.table-container .table-wrapper table ::ng-deep .mat-sort-header-arrow{margin-left:8px}.table-container .table-wrapper table .mdc-data-table__cell,.table-container .table-wrapper table .mdc-data-table__header-cell{padding:8px 24px}.table-container .table-wrapper table th{font-size:12px;line-height:16px;text-transform:uppercase}.table-container .table-wrapper table td{font-size:14px;line-height:20px}.table-container .table-wrapper 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 td ::ng-deep .table-skeleton-loader ngx-skeleton-loader .skeleton-loader{margin-bottom:0}.table-container .table-wrapper table ::ng-deep thead{background:#f6f6f6!important}.table-container .table-wrapper table .mat-mdc-table-sticky-border-elem-right,.table-container .table-wrapper table .mat-mdc-table-sticky-border-elem-left{box-shadow:0 8px 24px 4px #00000014}.table-container .column-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-container.without-title table{border:unset!important}.table-container ::ng-deep .mat-mdc-paginator-container{padding:0 24px}\n"] }]
|
|
85
|
+
args: [{ selector: 'ui-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-container\" [ngClass]=\"{ 'without-title': !tableConfig?.title }\">\n <div *ngIf=\"tableConfig?.title\" class=\"table-header\">{{ tableConfig.title }}</div>\n <div class=\"table-wrapper\">\n <table\n mat-table\n [dataSource]=\"tableData\"\n matSort\n [matSortActive]=\"tableConfig?.sort?.active ?? ''\"\n [matSortDirection]=\"tableConfig?.sort?.direction ?? ''\"\n (matSortChange)=\"onSortChange($event)\"\n >\n\n <ng-container *ngFor=\"let column of tableConfig?.columns; index as i, last as isLast, first as isFirst\">\n <ng-container *ngIf=\"isFirst && tableConfig?.stickyFirstColumn && column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\" [sticky]=\"true\">\n <th mat-header-cell\n mat-sort-header\n *matHeaderCellDef\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [style.font-weight]=\"'bold'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isFirst && tableConfig?.stickyFirstColumn && !column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\" [sticky]=\"true\">\n <th mat-header-cell\n *matHeaderCellDef\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [style.font-weight]=\"'bold'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isLast && tableConfig?.stickyLastColumn && column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\" stickyEnd>\n <th mat-header-cell\n mat-sort-header\n *matHeaderCellDef\n [attr.sortable]=\"column.allowSort ?? false\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [style.font-weight]=\"'bold'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isLast && tableConfig?.stickyLastColumn && !column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\" stickyEnd>\n <th mat-header-cell\n *matHeaderCellDef\n [attr.sortable]=\"column.allowSort ?? false\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [style.font-weight]=\"'bold'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"!(isFirst && tableConfig?.stickyFirstColumn) && !(isLast && tableConfig?.stickyLastColumn) && column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\">\n <th mat-header-cell\n mat-sort-header\n [attr.sortable]=\"column.allowSort ?? false\"\n *matHeaderCellDef\n [style.font-weight]=\"'bold'\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"!(isFirst && tableConfig?.stickyFirstColumn) && !(isLast && tableConfig?.stickyLastColumn) && !column.allowSort\">\n <ng-container [matColumnDef]=\"column.key\">\n <th mat-header-cell\n [attr.sortable]=\"column.allowSort ?? false\"\n *matHeaderCellDef\n [style.font-weight]=\"'bold'\"\n [matTooltip]=\"columnsTooltipState[i].showTooltip ? column.title : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\" [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element[column.key]}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\">{{ element[column.key] }}</span>\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n </div>\n\n <ui-paginator\n [disabled]=\"loading\"\n [pageSize]=\"tableConfig.pagination.itemsPerPage\"\n [length]=\"tableConfig.pagination.totalItems\"\n [pageSizeOptions]=\"tableConfig.pagination.itemsPerPageOptions\"\n (paginatorChange)=\"onPaginatorChange($event)\"\n ></ui-paginator>\n</div>\n\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:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.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}.flex-left,.table-container .table-header{display:flex;justify-content:flex-start;align-items:center}.table-container{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:#ffffff;line-height:24px;font-size:16px;font-weight:700;text-transform:uppercase}.table-container .table-wrapper{max-width:100%;overflow:auto}.table-container .table-wrapper table{width:100%;box-shadow:unset;border-top:1px #E0E0E0 solid;border-bottom:1px #E0E0E0 solid}.table-container .table-wrapper table ::ng-deep .mat-sort-header-arrow{margin-left:8px}.table-container .table-wrapper table .mdc-data-table__cell,.table-container .table-wrapper table .mdc-data-table__header-cell{padding:8px 24px}.table-container .table-wrapper table th{font-size:12px;line-height:16px;text-transform:uppercase}.table-container .table-wrapper table td{font-size:14px;line-height:20px}.table-container .table-wrapper 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 td ::ng-deep .table-skeleton-loader ngx-skeleton-loader .skeleton-loader{margin-bottom:0}.table-container .table-wrapper table ::ng-deep thead{background:#f6f6f6!important}.table-container .table-wrapper table .mat-mdc-table-sticky-border-elem-right,.table-container .table-wrapper table .mat-mdc-table-sticky-border-elem-left{box-shadow:0 8px 24px 4px #00000014}.table-container .column-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-container.without-title table{border:unset!important}.table-container ::ng-deep .mat-mdc-paginator-container{padding:0 24px}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-weight:600;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"] }]
|
|
86
86
|
}], propDecorators: { config: [{
|
|
87
87
|
type: Input,
|
|
88
88
|
args: [{ required: true }]
|
|
@@ -120,11 +120,11 @@ export class TagComponent {
|
|
|
120
120
|
return this.readOnly || this.allowClose || this.isSelected;
|
|
121
121
|
}
|
|
122
122
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
123
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TagComponent, selector: "ui-tag", inputs: { label: "label", icon: "icon", allowClose: "allowClose", readOnly: "readOnly", isSelected: "isSelected", showIconWhenSelected: "showIconWhenSelected", isDisabled: "isDisabled" }, outputs: { close: "close", press: "press" }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["labelElement"], descendants: true }], ngImport: i0, template: "<div class=\"tag-wrapper\" [matTooltip]=\"(isEllipseActiveObs$ | async) ? labelText : ''\">\n <div\n [tabindex]=\"tabIndex\"\n class=\"tag-container\"\n [attr.data-testid]=\"'tag--container'\"\n [ngClass]=\"{\n filled: filled,\n readonly: readOnly,\n disabled: isDisabled,\n outlined: !isSelected,\n }\"\n (click)=\"onPress()\"\n >\n <ui-icon *ngIf=\"icon\" class=\"icon\" [name]=\"icon\"></ui-icon>\n <ui-icon *ngIf=\"isSelected && showIconWhenSelected\" class=\"icon\" [name]=\"'Check'\"></ui-icon>\n <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n <ui-icon [tabindex]=\"tabIndex\" *ngIf=\"allowClose\" class=\"delete-icon\" (click)=\"onClose()\" [name]=\"'Close'\"></ui-icon>\n </div>\n</div>\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:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.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 .tag-wrapper{max-width:264px}:host .tag-container{height:32px;max-width:264px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:-moz-fit-content;width:fit-content;cursor:pointer;margin:4px}:host .tag-container.outlined{border:1px solid #6894A0}:host .tag-container:focus{outline:1px dashed #888888;outline-offset:4px;background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:focus.filled{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled{background:#E9F0F1;border:1px solid #E9F0F1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#A9C2C9;border:1px solid #1B4754}:host .tag-container:hover{background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:active{background:#E9F0F1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#E9F0F1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border:1px solid transparent}:host .tag-container .delete-icon:focus{border:1px dashed #1B4754;border-radius:4px}:host .tag-container .delete-icon:focus-visible{outline:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
123
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TagComponent, selector: "ui-tag", inputs: { label: "label", icon: "icon", allowClose: "allowClose", readOnly: "readOnly", isSelected: "isSelected", showIconWhenSelected: "showIconWhenSelected", isDisabled: "isDisabled" }, outputs: { close: "close", press: "press" }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["labelElement"], descendants: true }], ngImport: i0, template: "<div class=\"tag-wrapper\" [matTooltip]=\"(isEllipseActiveObs$ | async) ? labelText : ''\">\n <div\n [tabindex]=\"tabIndex\"\n class=\"tag-container\"\n [attr.data-testid]=\"'tag--container'\"\n [ngClass]=\"{\n filled: filled,\n readonly: readOnly,\n disabled: isDisabled,\n outlined: !isSelected,\n }\"\n (click)=\"onPress()\"\n >\n <ui-icon *ngIf=\"icon\" class=\"icon\" [name]=\"icon\"></ui-icon>\n <ui-icon *ngIf=\"isSelected && showIconWhenSelected\" class=\"icon\" [name]=\"'Check'\"></ui-icon>\n <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n <ui-icon [tabindex]=\"tabIndex\" *ngIf=\"allowClose\" class=\"delete-icon\" (click)=\"onClose()\" [name]=\"'Close'\"></ui-icon>\n </div>\n</div>\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:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.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 .tag-wrapper{max-width:264px}:host .tag-container{height:32px;max-width:264px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:-moz-fit-content;width:fit-content;cursor:pointer;margin:4px}:host .tag-container.outlined{border:1px solid #6894A0}:host .tag-container:focus{outline:1px dashed #888888;outline-offset:4px;background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:focus.filled{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled{background:#E9F0F1;border:1px solid #E9F0F1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#A9C2C9;border:1px solid #1B4754}:host .tag-container:hover{background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:active{background:#E9F0F1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#E9F0F1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border:1px solid transparent}:host .tag-container .delete-icon:focus{border:1px dashed #1B4754;border-radius:4px}:host .tag-container .delete-icon:focus-visible{outline:none}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-weight:600;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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
124
124
|
}
|
|
125
125
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagComponent, decorators: [{
|
|
126
126
|
type: Component,
|
|
127
|
-
args: [{ selector: 'ui-tag', template: "<div class=\"tag-wrapper\" [matTooltip]=\"(isEllipseActiveObs$ | async) ? labelText : ''\">\n <div\n [tabindex]=\"tabIndex\"\n class=\"tag-container\"\n [attr.data-testid]=\"'tag--container'\"\n [ngClass]=\"{\n filled: filled,\n readonly: readOnly,\n disabled: isDisabled,\n outlined: !isSelected,\n }\"\n (click)=\"onPress()\"\n >\n <ui-icon *ngIf=\"icon\" class=\"icon\" [name]=\"icon\"></ui-icon>\n <ui-icon *ngIf=\"isSelected && showIconWhenSelected\" class=\"icon\" [name]=\"'Check'\"></ui-icon>\n <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n <ui-icon [tabindex]=\"tabIndex\" *ngIf=\"allowClose\" class=\"delete-icon\" (click)=\"onClose()\" [name]=\"'Close'\"></ui-icon>\n </div>\n</div>\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:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.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 .tag-wrapper{max-width:264px}:host .tag-container{height:32px;max-width:264px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:-moz-fit-content;width:fit-content;cursor:pointer;margin:4px}:host .tag-container.outlined{border:1px solid #6894A0}:host .tag-container:focus{outline:1px dashed #888888;outline-offset:4px;background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:focus.filled{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled{background:#E9F0F1;border:1px solid #E9F0F1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#A9C2C9;border:1px solid #1B4754}:host .tag-container:hover{background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:active{background:#E9F0F1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#E9F0F1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border:1px solid transparent}:host .tag-container .delete-icon:focus{border:1px dashed #1B4754;border-radius:4px}:host .tag-container .delete-icon:focus-visible{outline:none}\n"] }]
|
|
127
|
+
args: [{ selector: 'ui-tag', template: "<div class=\"tag-wrapper\" [matTooltip]=\"(isEllipseActiveObs$ | async) ? labelText : ''\">\n <div\n [tabindex]=\"tabIndex\"\n class=\"tag-container\"\n [attr.data-testid]=\"'tag--container'\"\n [ngClass]=\"{\n filled: filled,\n readonly: readOnly,\n disabled: isDisabled,\n outlined: !isSelected,\n }\"\n (click)=\"onPress()\"\n >\n <ui-icon *ngIf=\"icon\" class=\"icon\" [name]=\"icon\"></ui-icon>\n <ui-icon *ngIf=\"isSelected && showIconWhenSelected\" class=\"icon\" [name]=\"'Check'\"></ui-icon>\n <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n <ui-icon [tabindex]=\"tabIndex\" *ngIf=\"allowClose\" class=\"delete-icon\" (click)=\"onClose()\" [name]=\"'Close'\"></ui-icon>\n </div>\n</div>\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:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.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 .tag-wrapper{max-width:264px}:host .tag-container{height:32px;max-width:264px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:-moz-fit-content;width:fit-content;cursor:pointer;margin:4px}:host .tag-container.outlined{border:1px solid #6894A0}:host .tag-container:focus{outline:1px dashed #888888;outline-offset:4px;background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:focus.filled{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled{background:#E9F0F1;border:1px solid #E9F0F1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#A9C2C9;border:1px solid #1B4754}:host .tag-container:hover{background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:active{background:#E9F0F1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#E9F0F1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border:1px solid transparent}:host .tag-container .delete-icon:focus{border:1px dashed #1B4754;border-radius:4px}:host .tag-container .delete-icon:focus-visible{outline:none}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-weight:600;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"] }]
|
|
128
128
|
}], propDecorators: { label: [{
|
|
129
129
|
type: Input
|
|
130
130
|
}], icon: [{
|
|
@@ -79,7 +79,7 @@ export class ToggleComponent {
|
|
|
79
79
|
useExisting: forwardRef(() => ToggleComponent),
|
|
80
80
|
multi: true,
|
|
81
81
|
},
|
|
82
|
-
], ngImport: i0, template: "<div class=\"toggle\" [ngClass]=\"{ 'disabled': disabled }\">\n <div\n [style.--max-width]=\"maxWidth + 'px'\"\n [tabIndex]=\"0\"\n class=\"toggle-container\"\n [ngClass]=\"{ 'active': selected }\"\n (click)=\"onToggle()\"\n >\n <div class=\"label\" uiEllipseText [matTooltipShowDelay]=\"800\" [matTooltip]=\"showLabelTooltip ? label : ''\"\n (onChangeTextState)=\"changeTextState($event)\">{{ label }}\n </div>\n <div class=\"knob\"></div>\n </div>\n <div *ngIf=\"message && selected\" class=\"message\">{{ message }}</div>\n</div>\n\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:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.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{width:-moz-fit-content;width:fit-content;display:block}:host .toggle{height:16px;width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column;align-items:center}:host .toggle.disabled{opacity:.5}:host .toggle.disabled .toggle-container{background:#E0E0E0;pointer-events:none}:host .toggle.disabled .toggle-container:focus{outline:none}:host .toggle .toggle-container{min-height:22px;max-width:var(--max-width);padding:3px 12px 3px 30px;width:-moz-fit-content;width:fit-content;min-width:32px;border-radius:16px;background:#888888;display:flex;align-items:center;cursor:pointer;position:relative;transition:transform .3s,padding .3s}:host .toggle .toggle-container:focus{outline:1px dashed #888888;outline-offset:4px}:host .toggle .toggle-container .knob{height:100%;width:100%;position:absolute;left:0;top:0;display:flex;align-items:center;padding:3px;transition:transform .3s}:host .toggle .toggle-container .knob:after{content:\"\";display:block;border-radius:16px;width:18px;height:18px;background:#ffffff}:host .toggle .toggle-container .label{z-index:1;font-size:12px;font-weight:700;color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .toggle .toggle-container.active{background:#276678;padding:3px 30px 3px 12px}:host .toggle .toggle-container.active .knob{transform:translate(calc(100% - 24px))}:host .toggle .message{margin-top:4px;font-weight:700;font-size:12px;line-height:16px;color:#276678;text-align:justify}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i3.EllipseTextDirective, selector: "[uiEllipseText]", outputs: ["onChangeTextState"] }] }); }
|
|
82
|
+
], ngImport: i0, template: "<div class=\"toggle\" [ngClass]=\"{ 'disabled': disabled }\">\n <div\n [style.--max-width]=\"maxWidth + 'px'\"\n [tabIndex]=\"0\"\n class=\"toggle-container\"\n [ngClass]=\"{ 'active': selected }\"\n (click)=\"onToggle()\"\n >\n <div class=\"label\" uiEllipseText [matTooltipShowDelay]=\"800\" [matTooltip]=\"showLabelTooltip ? label : ''\"\n (onChangeTextState)=\"changeTextState($event)\">{{ label }}\n </div>\n <div class=\"knob\"></div>\n </div>\n <div *ngIf=\"message && selected\" class=\"message\">{{ message }}</div>\n</div>\n\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:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.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{width:-moz-fit-content;width:fit-content;display:block}:host .toggle{height:16px;width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column;align-items:center}:host .toggle.disabled{opacity:.5}:host .toggle.disabled .toggle-container{background:#E0E0E0;pointer-events:none}:host .toggle.disabled .toggle-container:focus{outline:none}:host .toggle .toggle-container{min-height:22px;max-width:var(--max-width);padding:3px 12px 3px 30px;width:-moz-fit-content;width:fit-content;min-width:32px;border-radius:16px;background:#888888;display:flex;align-items:center;cursor:pointer;position:relative;transition:transform .3s,padding .3s}:host .toggle .toggle-container:focus{outline:1px dashed #888888;outline-offset:4px}:host .toggle .toggle-container .knob{height:100%;width:100%;position:absolute;left:0;top:0;display:flex;align-items:center;padding:3px;transition:transform .3s}:host .toggle .toggle-container .knob:after{content:\"\";display:block;border-radius:16px;width:18px;height:18px;background:#ffffff}:host .toggle .toggle-container .label{z-index:1;font-size:12px;font-weight:700;color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .toggle .toggle-container.active{background:#276678;padding:3px 30px 3px 12px}:host .toggle .toggle-container.active .knob{transform:translate(calc(100% - 24px))}:host .toggle .message{margin-top:4px;font-weight:700;font-size:12px;line-height:16px;color:#276678;text-align:justify}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-weight:600;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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i3.EllipseTextDirective, selector: "[uiEllipseText]", outputs: ["onChangeTextState"] }] }); }
|
|
83
83
|
}
|
|
84
84
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
85
85
|
type: Component,
|
|
@@ -89,7 +89,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
89
89
|
useExisting: forwardRef(() => ToggleComponent),
|
|
90
90
|
multi: true,
|
|
91
91
|
},
|
|
92
|
-
], template: "<div class=\"toggle\" [ngClass]=\"{ 'disabled': disabled }\">\n <div\n [style.--max-width]=\"maxWidth + 'px'\"\n [tabIndex]=\"0\"\n class=\"toggle-container\"\n [ngClass]=\"{ 'active': selected }\"\n (click)=\"onToggle()\"\n >\n <div class=\"label\" uiEllipseText [matTooltipShowDelay]=\"800\" [matTooltip]=\"showLabelTooltip ? label : ''\"\n (onChangeTextState)=\"changeTextState($event)\">{{ label }}\n </div>\n <div class=\"knob\"></div>\n </div>\n <div *ngIf=\"message && selected\" class=\"message\">{{ message }}</div>\n</div>\n\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:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.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{width:-moz-fit-content;width:fit-content;display:block}:host .toggle{height:16px;width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column;align-items:center}:host .toggle.disabled{opacity:.5}:host .toggle.disabled .toggle-container{background:#E0E0E0;pointer-events:none}:host .toggle.disabled .toggle-container:focus{outline:none}:host .toggle .toggle-container{min-height:22px;max-width:var(--max-width);padding:3px 12px 3px 30px;width:-moz-fit-content;width:fit-content;min-width:32px;border-radius:16px;background:#888888;display:flex;align-items:center;cursor:pointer;position:relative;transition:transform .3s,padding .3s}:host .toggle .toggle-container:focus{outline:1px dashed #888888;outline-offset:4px}:host .toggle .toggle-container .knob{height:100%;width:100%;position:absolute;left:0;top:0;display:flex;align-items:center;padding:3px;transition:transform .3s}:host .toggle .toggle-container .knob:after{content:\"\";display:block;border-radius:16px;width:18px;height:18px;background:#ffffff}:host .toggle .toggle-container .label{z-index:1;font-size:12px;font-weight:700;color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .toggle .toggle-container.active{background:#276678;padding:3px 30px 3px 12px}:host .toggle .toggle-container.active .knob{transform:translate(calc(100% - 24px))}:host .toggle .message{margin-top:4px;font-weight:700;font-size:12px;line-height:16px;color:#276678;text-align:justify}\n"] }]
|
|
92
|
+
], template: "<div class=\"toggle\" [ngClass]=\"{ 'disabled': disabled }\">\n <div\n [style.--max-width]=\"maxWidth + 'px'\"\n [tabIndex]=\"0\"\n class=\"toggle-container\"\n [ngClass]=\"{ 'active': selected }\"\n (click)=\"onToggle()\"\n >\n <div class=\"label\" uiEllipseText [matTooltipShowDelay]=\"800\" [matTooltip]=\"showLabelTooltip ? label : ''\"\n (onChangeTextState)=\"changeTextState($event)\">{{ label }}\n </div>\n <div class=\"knob\"></div>\n </div>\n <div *ngIf=\"message && selected\" class=\"message\">{{ message }}</div>\n</div>\n\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:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.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{width:-moz-fit-content;width:fit-content;display:block}:host .toggle{height:16px;width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column;align-items:center}:host .toggle.disabled{opacity:.5}:host .toggle.disabled .toggle-container{background:#E0E0E0;pointer-events:none}:host .toggle.disabled .toggle-container:focus{outline:none}:host .toggle .toggle-container{min-height:22px;max-width:var(--max-width);padding:3px 12px 3px 30px;width:-moz-fit-content;width:fit-content;min-width:32px;border-radius:16px;background:#888888;display:flex;align-items:center;cursor:pointer;position:relative;transition:transform .3s,padding .3s}:host .toggle .toggle-container:focus{outline:1px dashed #888888;outline-offset:4px}:host .toggle .toggle-container .knob{height:100%;width:100%;position:absolute;left:0;top:0;display:flex;align-items:center;padding:3px;transition:transform .3s}:host .toggle .toggle-container .knob:after{content:\"\";display:block;border-radius:16px;width:18px;height:18px;background:#ffffff}:host .toggle .toggle-container .label{z-index:1;font-size:12px;font-weight:700;color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host .toggle .toggle-container.active{background:#276678;padding:3px 30px 3px 12px}:host .toggle .toggle-container.active .knob{transform:translate(calc(100% - 24px))}:host .toggle .message{margin-top:4px;font-weight:700;font-size:12px;line-height:16px;color:#276678;text-align:justify}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-weight:600;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"] }]
|
|
93
93
|
}], propDecorators: { selected: [{
|
|
94
94
|
type: Input
|
|
95
95
|
}], disabled: [{
|