@testgorilla/tgo-ui 3.10.5 → 3.10.7
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/components/gaussian-chart/gaussian-chart.component.d.ts +8 -1
- package/components/skeleton/skeleton.component.d.ts +1 -1
- package/esm2022/components/file-upload/file-upload.component.mjs +5 -2
- package/esm2022/components/gaussian-chart/gaussian-chart.component.mjs +14 -6
- package/fesm2022/testgorilla-tgo-ui.mjs +50 -39
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -36,26 +36,26 @@ import { MatInputModule, MatInput } from '@angular/material/input';
|
|
|
36
36
|
import * as i1$3 from '@angular/material/dialog';
|
|
37
37
|
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
|
38
38
|
import DataLabelsPlugin from 'chartjs-plugin-datalabels';
|
|
39
|
-
import * as
|
|
39
|
+
import * as i2$4 from 'ng2-charts';
|
|
40
40
|
import { NgChartsModule, BaseChartDirective } from 'ng2-charts';
|
|
41
41
|
import { Chart, registerables } from 'chart.js';
|
|
42
42
|
import * as i8$1 from '@angular/cdk/text-field';
|
|
43
43
|
import * as i7 from '@angular/material/menu';
|
|
44
44
|
import { MatMenuModule, MatMenu, MatMenuTrigger } from '@angular/material/menu';
|
|
45
|
-
import * as i1$
|
|
45
|
+
import * as i1$4 from '@angular/cdk/layout';
|
|
46
46
|
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
47
47
|
import * as i4$3 from '@angular/material/toolbar';
|
|
48
48
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
49
49
|
import * as i5$1 from '@angular/material/sidenav';
|
|
50
50
|
import { MatSidenavModule } from '@angular/material/sidenav';
|
|
51
|
-
import * as i2$
|
|
51
|
+
import * as i2$5 from '@angular/material/core';
|
|
52
52
|
import { MatRippleModule, NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
|
|
53
|
-
import * as i1$
|
|
53
|
+
import * as i1$5 from '@angular/material/paginator';
|
|
54
54
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
55
|
-
import * as i1$
|
|
55
|
+
import * as i1$6 from '@angular/material/snack-bar';
|
|
56
56
|
import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
|
|
57
57
|
import { ComponentPortal } from '@angular/cdk/portal';
|
|
58
|
-
import * as i1$
|
|
58
|
+
import * as i1$7 from '@angular/cdk/overlay';
|
|
59
59
|
import { OverlayModule } from '@angular/cdk/overlay';
|
|
60
60
|
import * as i7$1 from '@angular/material/select';
|
|
61
61
|
import { MatSelectModule, MatSelect } from '@angular/material/select';
|
|
@@ -66,21 +66,21 @@ import { CdkVirtualScrollViewport, CdkVirtualForOf, CdkFixedSizeVirtualScroll }
|
|
|
66
66
|
import * as i6 from '@angular/material/autocomplete';
|
|
67
67
|
import { MatAutocompleteModule, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from '@angular/material/autocomplete';
|
|
68
68
|
import { MatChipsModule } from '@angular/material/chips';
|
|
69
|
-
import * as i2$
|
|
69
|
+
import * as i2$7 from '@angular/material/table';
|
|
70
70
|
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
|
|
71
|
-
import * as i2$
|
|
71
|
+
import * as i2$6 from 'ngx-skeleton-loader';
|
|
72
72
|
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
|
|
73
73
|
import * as i7$2 from '@angular/material/sort';
|
|
74
74
|
import { MatSortModule } from '@angular/material/sort';
|
|
75
|
-
import * as i2$
|
|
75
|
+
import * as i2$8 from '@angular/material/slider';
|
|
76
76
|
import { MatSliderModule } from '@angular/material/slider';
|
|
77
77
|
import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
|
|
78
|
-
import * as i2$
|
|
78
|
+
import * as i2$9 from '@angular/material/divider';
|
|
79
79
|
import { MatDividerModule } from '@angular/material/divider';
|
|
80
80
|
import { hasModifierKey, SPACE, ENTER } from '@angular/cdk/keycodes';
|
|
81
|
-
import * as i2$
|
|
81
|
+
import * as i2$a from '@angular/material/tabs';
|
|
82
82
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
83
|
-
import * as i2$
|
|
83
|
+
import * as i2$b from '@angular/material/button-toggle';
|
|
84
84
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
85
85
|
import { parsePhoneNumber } from 'libphonenumber-js';
|
|
86
86
|
import { takeUntil } from 'rxjs/operators';
|
|
@@ -7177,7 +7177,7 @@ class DonutChartComponent {
|
|
|
7177
7177
|
};
|
|
7178
7178
|
}
|
|
7179
7179
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7180
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: DonutChartComponent, selector: "ui-donut-chart", inputs: { donutChartData: { classPropertyName: "donutChartData", publicName: "donutChartData", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div style=\"height: 200px;\">\n <canvas\n baseChart\n [data]=\"chartData()\"\n type=\"doughnut\"\n [options]=\"donutChartOptions\"\n [plugins]=\"donutChartPlugins\"\n >\n </canvas>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type:
|
|
7180
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: DonutChartComponent, selector: "ui-donut-chart", inputs: { donutChartData: { classPropertyName: "donutChartData", publicName: "donutChartData", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div style=\"height: 200px;\">\n <canvas\n baseChart\n [data]=\"chartData()\"\n type=\"doughnut\"\n [options]=\"donutChartOptions\"\n [plugins]=\"donutChartPlugins\"\n >\n </canvas>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$4.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }] }); }
|
|
7181
7181
|
}
|
|
7182
7182
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DonutChartComponent, decorators: [{
|
|
7183
7183
|
type: Component,
|
|
@@ -8125,7 +8125,10 @@ class FileUploadComponent {
|
|
|
8125
8125
|
onChangeUpload(event) {
|
|
8126
8126
|
this.isCanceled = false;
|
|
8127
8127
|
const element = event.currentTarget;
|
|
8128
|
-
|
|
8128
|
+
// Prevents clearing items when user selects cancel in the dialog. Cancel event can emit empty file list.
|
|
8129
|
+
if (element.files?.length) {
|
|
8130
|
+
this.emitFile(element.files || new FileList());
|
|
8131
|
+
}
|
|
8129
8132
|
}
|
|
8130
8133
|
//Emit drop file
|
|
8131
8134
|
emitFile(files) {
|
|
@@ -9157,13 +9160,13 @@ class NavbarComponent {
|
|
|
9157
9160
|
this.isOpened = isOpened;
|
|
9158
9161
|
this.menuState.emit({ isOpened, screenSize });
|
|
9159
9162
|
}
|
|
9160
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavbarComponent, deps: [{ token: i1$
|
|
9163
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavbarComponent, deps: [{ token: i1$4.BreakpointObserver }, { token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: SideSheetService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9161
9164
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: { classPropertyName: "routes", publicName: "routes", isSignal: false, isRequired: false, transformFunction: null }, activedRoute: { classPropertyName: "activedRoute", publicName: "activedRoute", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: false, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: false, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, contentTemplateRef: { classPropertyName: "contentTemplateRef", publicName: "contentTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, userInfoExtraTemplateRef: { classPropertyName: "userInfoExtraTemplateRef", publicName: "userInfoExtraTemplateRef", isSignal: false, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: false, isRequired: false, transformFunction: null }, isAvatar: { classPropertyName: "isAvatar", publicName: "isAvatar", isSignal: false, isRequired: false, transformFunction: null }, menuClass: { classPropertyName: "menuClass", publicName: "menuClass", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent", menuState: "menuState" }, ngImport: i0, template: "<ui-side-sheet\n [applicationTheme]=\"applicationTheme\"\n (openChange)=\"onChangeMenuState($event, screenSize)\"\n [position]=\"(isMobile$ | async) ? 'start' : 'end'\"\n>\n <mat-toolbar [attr.theme]=\"applicationTheme\">\n <div class=\"custom-toolbar row\">\n <ui-logo\n [applicationTheme]=\"applicationTheme\"\n class=\"logo\"\n (click)=\"navigate('')\"\n [allowResizing]=\"true\"\n [width]=\"(isMobile$ | async) ? 160 : (isTablet$ | async) ? 30 : 160\"\n [type]=\"\n (isMobile$ | async)\n ? logoType.DEFAULT\n : (isTablet$ | async)\n ? logoType.PRIMARY_BRANDMARK_PINK\n : logoType.DEFAULT\n \"\n ></ui-logo>\n\n <ui-button\n (click)=\"openMobileMenu()\"\n *ngIf=\"isMobile$ | async\"\n [variant]=\"'text'\"\n [companyColor]=\"'#242424'\"\n [applicationTheme]=\"'light'\"\n [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n [justIcon]=\"true\"\n ></ui-button>\n\n <div class=\"navigation row\">\n <a\n *ngFor=\"let route of routes\"\n (click)=\"navigate(route.id); $event.preventDefault()\"\n [href]=\"route.id\"\n [attr.data-testid]=\"route.id\"\n data-test-role=\"nav-route\"\n [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n >\n <ui-badge\n *ngIf=\"route?.badgeOptions\"\n [label]=\"route.badgeOptions!.text\"\n [rebrandColor]=\"route.badgeOptions!.color\"\n ></ui-badge>\n <span>{{ route.title }}</span>\n </a>\n </div>\n\n <div class=\"actions\">\n <div class=\"custom-actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n\n <button mat-button class=\"profile-menu\" *ngIf=\"isTablet$ | async; else pc\" (click)=\"openMobileMenu()\">\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n\n <ng-template #pc>\n <button\n mat-button\n class=\"profile-menu\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n [matMenuTriggerFor]=\"menu\"\n >\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n </ng-template>\n\n <ng-template #buttonContent>\n <div class=\"profile-button-content\">\n <ng-container *ngIf=\"isAvatar; else onlyName\">\n <ui-avatar\n data-testid=\"profile-button\"\n [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"userName\"\n [size]=\"AvatarSize.SMALL_MEDIUM\"\n ></ui-avatar>\n </ng-container>\n\n <ng-template #onlyName>\n {{ userName }}\n </ng-template>\n\n <mat-icon *ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n <ng-template #newThemeIcon>\n <ui-icon\n [size]=\"'24'\"\n *ngIf=\"!isAvatar\"\n [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </mat-toolbar>\n\n <ng-content></ng-content>\n\n <mat-menu [class]=\"menuClass\" #menu=\"matMenu\">\n <ng-container *ngIf=\"applicationTheme === 'classic'; else newTheme\">\n <button\n *ngFor=\"let e of menuItems\"\n mat-menu-item\n (click)=\"clickMenuItem(e.id)\"\n [attr.data-testid]=\"e.id\"\n data-test-role=\"profile-menu-item\"\n >\n <div class=\"menu-item\">\n <ui-icon *ngIf=\"e?.icon\" [name]=\"e.icon\" size=\"24\"></ui-icon>\n {{ e.text }}\n </div>\n </button>\n\n <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n <mat-icon>power_settings_new</mat-icon>\n {{ translationContext + 'LOG_OUT' | uiTranslate | async }}\n </button>\n </ng-container>\n\n <ng-template #newTheme>\n <ui-mobile-navbar-side-sheet\n [isDesktop]=\"true\"\n [menuItems]=\"menuItems\"\n [userName]=\"userName\"\n [routes]=\"routes\"\n [activedRoute]=\"activedRoute()\"\n [email]=\"email\"\n [applicationTheme]=\"applicationTheme\"\n [contentTemplateRef]=\"contentTemplateRef\"\n [userInfoExtraTemplateRef]=\"userInfoExtraTemplateRef\"\n (menuItemClicked)=\"clickMenuItem($event)\"\n (logoutEvent)=\"logout()\"\n >\n </ui-mobile-navbar-side-sheet>\n </ng-template>\n </mat-menu>\n</ui-side-sheet>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{height:100%}:host ::ng-deep .side-sheet-container{display:block;height:100%;position:unset!important}:host ::ng-deep .mat-drawer-container{height:100%}:host ::ng-deep .mat-drawer{padding:0!important;background:#fff!important}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header{padding:16px 16px 16px 24px!important;border-bottom:1px solid #D3D3D3;height:64px}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo{width:100%;margin:0!important;display:flex;justify-content:flex-start}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo img{width:fit-content;height:32px}@media (max-width: 1024px) and (min-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px);max-width:375px}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}@media (max-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px)}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff;max-width:1440px;padding:0}@media (max-width: 600px){.mat-toolbar .custom-toolbar{padding:0 16px}}@media (min-width: 1024px) and (max-width: 1280px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (min-width: 960px) and (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (max-width: 960px){.mat-toolbar .custom-toolbar{padding:0 20px!important}}@media (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 64px}}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;height:43px;align-self:center;display:flex;margin-left:0!important}@media (max-width: 1024px){.mat-toolbar .custom-toolbar ui-logo.logo{min-width:22px}}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none}.mat-toolbar .custom-toolbar .navigation a:hover{text-decoration:none}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:7px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar .custom-toolbar .actions .profile-button-content{display:flex;align-items:center;flex-wrap:nowrap}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar{position:relative}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar.opened:after{position:absolute;content:\"\";width:40px;height:40px;left:-2px;top:-2px;z-index:-1;border-radius:100%;background:#f4f4f4}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0;border-bottom:1px solid #D3D3D3}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{justify-content:space-between}@media (min-width: 1280px){.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{padding:0 64px!important}}.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{justify-content:flex-start;margin-left:40px}@media (min-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{min-width:160px}}@media (max-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{margin-left:20px!important}}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] .actions .profile-menu,.mat-toolbar[theme=light] .actions .profile-menu{margin-right:0}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation,.mat-toolbar[theme=light] .navigation{gap:2px}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px;border-bottom:2px solid transparent;position:relative;transition:border-bottom-color .15s ease-in}.mat-toolbar[theme=dark] .navigation a ui-badge,.mat-toolbar[theme=light] .navigation a ui-badge{position:absolute;right:-12px;top:4px;z-index:1}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #D410AA}.mat-toolbar[theme=dark] .navigation a:hover,.mat-toolbar[theme=light] .navigation a:hover{border-top:unset!important;border-bottom:2px solid #242424}@media (max-width: 600px){.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center;margin:0!important}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.custom-actions{display:flex;align-items:center;height:64px}@media (max-width: 1024px){.custom-actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width", "allowResizing"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "component", type: SideSheetComponent, selector: "ui-side-sheet", inputs: ["position", "applicationTheme"], outputs: ["openChange"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: MobileNavbarSideSheetComponent, selector: "ui-mobile-navbar-side-sheet", inputs: ["routes", "activedRoute", "email", "userName", "menuItems", "contentTemplateRef", "userInfoExtraTemplateRef", "isDesktop", "applicationTheme"], outputs: ["navigateEvent", "menuItemClicked", "logoutEvent"] }, { kind: "component", type: BadgeComponent, selector: "ui-badge", inputs: ["label", "icon", "color", "variant", "notificationsAmount", "applicationTheme", "rebrandColor", "truncateLabel"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9162
9165
|
}
|
|
9163
9166
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
9164
9167
|
type: Component,
|
|
9165
9168
|
args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ui-side-sheet\n [applicationTheme]=\"applicationTheme\"\n (openChange)=\"onChangeMenuState($event, screenSize)\"\n [position]=\"(isMobile$ | async) ? 'start' : 'end'\"\n>\n <mat-toolbar [attr.theme]=\"applicationTheme\">\n <div class=\"custom-toolbar row\">\n <ui-logo\n [applicationTheme]=\"applicationTheme\"\n class=\"logo\"\n (click)=\"navigate('')\"\n [allowResizing]=\"true\"\n [width]=\"(isMobile$ | async) ? 160 : (isTablet$ | async) ? 30 : 160\"\n [type]=\"\n (isMobile$ | async)\n ? logoType.DEFAULT\n : (isTablet$ | async)\n ? logoType.PRIMARY_BRANDMARK_PINK\n : logoType.DEFAULT\n \"\n ></ui-logo>\n\n <ui-button\n (click)=\"openMobileMenu()\"\n *ngIf=\"isMobile$ | async\"\n [variant]=\"'text'\"\n [companyColor]=\"'#242424'\"\n [applicationTheme]=\"'light'\"\n [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n [justIcon]=\"true\"\n ></ui-button>\n\n <div class=\"navigation row\">\n <a\n *ngFor=\"let route of routes\"\n (click)=\"navigate(route.id); $event.preventDefault()\"\n [href]=\"route.id\"\n [attr.data-testid]=\"route.id\"\n data-test-role=\"nav-route\"\n [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n >\n <ui-badge\n *ngIf=\"route?.badgeOptions\"\n [label]=\"route.badgeOptions!.text\"\n [rebrandColor]=\"route.badgeOptions!.color\"\n ></ui-badge>\n <span>{{ route.title }}</span>\n </a>\n </div>\n\n <div class=\"actions\">\n <div class=\"custom-actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n\n <button mat-button class=\"profile-menu\" *ngIf=\"isTablet$ | async; else pc\" (click)=\"openMobileMenu()\">\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n\n <ng-template #pc>\n <button\n mat-button\n class=\"profile-menu\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n [matMenuTriggerFor]=\"menu\"\n >\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n </ng-template>\n\n <ng-template #buttonContent>\n <div class=\"profile-button-content\">\n <ng-container *ngIf=\"isAvatar; else onlyName\">\n <ui-avatar\n data-testid=\"profile-button\"\n [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"userName\"\n [size]=\"AvatarSize.SMALL_MEDIUM\"\n ></ui-avatar>\n </ng-container>\n\n <ng-template #onlyName>\n {{ userName }}\n </ng-template>\n\n <mat-icon *ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n <ng-template #newThemeIcon>\n <ui-icon\n [size]=\"'24'\"\n *ngIf=\"!isAvatar\"\n [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </mat-toolbar>\n\n <ng-content></ng-content>\n\n <mat-menu [class]=\"menuClass\" #menu=\"matMenu\">\n <ng-container *ngIf=\"applicationTheme === 'classic'; else newTheme\">\n <button\n *ngFor=\"let e of menuItems\"\n mat-menu-item\n (click)=\"clickMenuItem(e.id)\"\n [attr.data-testid]=\"e.id\"\n data-test-role=\"profile-menu-item\"\n >\n <div class=\"menu-item\">\n <ui-icon *ngIf=\"e?.icon\" [name]=\"e.icon\" size=\"24\"></ui-icon>\n {{ e.text }}\n </div>\n </button>\n\n <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n <mat-icon>power_settings_new</mat-icon>\n {{ translationContext + 'LOG_OUT' | uiTranslate | async }}\n </button>\n </ng-container>\n\n <ng-template #newTheme>\n <ui-mobile-navbar-side-sheet\n [isDesktop]=\"true\"\n [menuItems]=\"menuItems\"\n [userName]=\"userName\"\n [routes]=\"routes\"\n [activedRoute]=\"activedRoute()\"\n [email]=\"email\"\n [applicationTheme]=\"applicationTheme\"\n [contentTemplateRef]=\"contentTemplateRef\"\n [userInfoExtraTemplateRef]=\"userInfoExtraTemplateRef\"\n (menuItemClicked)=\"clickMenuItem($event)\"\n (logoutEvent)=\"logout()\"\n >\n </ui-mobile-navbar-side-sheet>\n </ng-template>\n </mat-menu>\n</ui-side-sheet>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{height:100%}:host ::ng-deep .side-sheet-container{display:block;height:100%;position:unset!important}:host ::ng-deep .mat-drawer-container{height:100%}:host ::ng-deep .mat-drawer{padding:0!important;background:#fff!important}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header{padding:16px 16px 16px 24px!important;border-bottom:1px solid #D3D3D3;height:64px}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo{width:100%;margin:0!important;display:flex;justify-content:flex-start}:host ::ng-deep .mat-drawer .mat-drawer-inner-container .header ui-logo img{width:fit-content;height:32px}@media (max-width: 1024px) and (min-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px);max-width:375px}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}@media (max-width: 600px){:host ::ng-deep .mat-drawer{margin-top:64px;height:calc(100% - 64px)}:host ::ng-deep .mat-drawer .header{display:none!important}:host ::ng-deep .mat-drawer-backdrop{background:transparent!important;opacity:0!important}}.mat-toolbar{height:80px;background-color:#fff!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff;max-width:1440px;padding:0}@media (max-width: 600px){.mat-toolbar .custom-toolbar{padding:0 16px}}@media (min-width: 1024px) and (max-width: 1280px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (min-width: 960px) and (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 40px!important}}@media (max-width: 960px){.mat-toolbar .custom-toolbar{padding:0 20px!important}}@media (max-width: 1024px){.mat-toolbar .custom-toolbar{padding:0 64px}}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;height:43px;align-self:center;display:flex;margin-left:0!important}@media (max-width: 1024px){.mat-toolbar .custom-toolbar ui-logo.logo{min-width:22px}}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:40px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer;color:#000;text-decoration:none}.mat-toolbar .custom-toolbar .navigation a:hover{text-decoration:none}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end;margin-right:7px}@media (max-width: 600px){.mat-toolbar .custom-toolbar .actions{margin-right:0}}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:600;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.mat-toolbar .custom-toolbar .actions .profile-button-content{display:flex;align-items:center;flex-wrap:nowrap}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar{position:relative}.mat-toolbar .custom-toolbar .actions .profile-button-content ui-avatar.opened:after{position:absolute;content:\"\";width:40px;height:40px;left:-2px;top:-2px;z-index:-1;border-radius:100%;background:#f4f4f4}.mat-toolbar[theme=dark],.mat-toolbar[theme=light]{display:flex;justify-content:center;width:100%;height:64px;padding:0;border-bottom:1px solid #D3D3D3}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{justify-content:space-between}@media (min-width: 1280px){.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{padding:0 64px!important}}.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{justify-content:flex-start;margin-left:40px}@media (min-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{min-width:160px}}@media (max-width: 1024px){.mat-toolbar[theme=dark] ui-logo.logo,.mat-toolbar[theme=light] ui-logo.logo{margin-left:20px!important}}.mat-toolbar[theme=dark] .actions,.mat-toolbar[theme=light] .actions{color:#242424}.mat-toolbar[theme=dark] .actions ::ng-deep .mat-mdc-button .mdc-button__label,.mat-toolbar[theme=light] .actions ::ng-deep .mat-mdc-button .mdc-button__label{font-weight:400}.mat-toolbar[theme=dark] .actions .profile-menu,.mat-toolbar[theme=light] .actions .profile-menu{margin-right:0}.mat-toolbar[theme=dark] ui-icon,.mat-toolbar[theme=light] ui-icon{margin-left:8px}.mat-toolbar[theme=dark] ui-icon.open,.mat-toolbar[theme=light] ui-icon.open{transform:rotate(180deg)}.mat-toolbar[theme=dark] .navigation,.mat-toolbar[theme=light] .navigation{gap:2px}.mat-toolbar[theme=dark] .navigation a,.mat-toolbar[theme=light] .navigation a{padding:16px 24px;border-bottom:2px solid transparent;position:relative;transition:border-bottom-color .15s ease-in}.mat-toolbar[theme=dark] .navigation a ui-badge,.mat-toolbar[theme=light] .navigation a ui-badge{position:absolute;right:-12px;top:4px;z-index:1}.mat-toolbar[theme=dark] .navigation a.active,.mat-toolbar[theme=light] .navigation a.active{border-top:unset!important;border-bottom:2px solid #D410AA}.mat-toolbar[theme=dark] .navigation a:hover,.mat-toolbar[theme=light] .navigation a:hover{border-top:unset!important;border-bottom:2px solid #242424}@media (max-width: 600px){.mat-toolbar[theme=dark] ui-button,.mat-toolbar[theme=light] ui-button{height:48px}.mat-toolbar[theme=dark] ui-logo,.mat-toolbar[theme=light] ui-logo{width:100%;display:flex;justify-content:center;align-items:center;margin:0!important}.mat-toolbar[theme=dark] ui-logo ::ng-deep img,.mat-toolbar[theme=light] ui-logo ::ng-deep img{height:32px}.mat-toolbar[theme=dark] .custom-toolbar,.mat-toolbar[theme=light] .custom-toolbar{align-items:center}.mat-toolbar[theme=dark] .custom-toolbar .navigation,.mat-toolbar[theme=dark] .custom-toolbar .actions,.mat-toolbar[theme=light] .custom-toolbar .navigation,.mat-toolbar[theme=light] .custom-toolbar .actions{display:none}}.custom-actions{display:flex;align-items:center;height:64px}@media (max-width: 1024px){.custom-actions{display:none}}.row{display:flex;flex-direction:row}.menu-item{display:flex;align-items:center}.menu-item ui-icon{margin-right:16px}\n"] }]
|
|
9166
|
-
}], ctorParameters: () => [{ type: i1$
|
|
9169
|
+
}], ctorParameters: () => [{ type: i1$4.BreakpointObserver }, { type: undefined, decorators: [{
|
|
9167
9170
|
type: Optional
|
|
9168
9171
|
}, {
|
|
9169
9172
|
type: Inject,
|
|
@@ -9324,7 +9327,7 @@ class DeprecatedPaginatorComponent {
|
|
|
9324
9327
|
this.paginatorChangedEvent.emit(paginator);
|
|
9325
9328
|
}
|
|
9326
9329
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeprecatedPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9327
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DeprecatedPaginatorComponent, selector: "ui-paginator", inputs: { length: "length", defaultPageSize: "defaultPageSize" }, outputs: { paginatorChangedEvent: "paginatorChangedEvent" }, ngImport: i0, template: "<mat-paginator [length]=\"length\"\n [pageSize]=\"defaultPageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-paginator{border-radius:0 0 8px 8px}.mat-mdc-paginator .mat-mdc-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container{padding:0}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-select-value-text{font-size:14px}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions{height:100%}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"], dependencies: [{ kind: "component", type: i1$
|
|
9330
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DeprecatedPaginatorComponent, selector: "ui-paginator", inputs: { length: "length", defaultPageSize: "defaultPageSize" }, outputs: { paginatorChangedEvent: "paginatorChangedEvent" }, ngImport: i0, template: "<mat-paginator [length]=\"length\"\n [pageSize]=\"defaultPageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-paginator{border-radius:0 0 8px 8px}.mat-mdc-paginator .mat-mdc-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container{padding:0}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-select-value-text{font-size:14px}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions{height:100%}.mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"], dependencies: [{ kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9328
9331
|
}
|
|
9329
9332
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeprecatedPaginatorComponent, decorators: [{
|
|
9330
9333
|
type: Component,
|
|
@@ -9828,7 +9831,7 @@ class SnackbarComponent {
|
|
|
9828
9831
|
this.visible = false;
|
|
9829
9832
|
this.snackbarRef.dismiss();
|
|
9830
9833
|
}
|
|
9831
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SnackbarComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: MAT_SNACK_BAR_DATA }, { token: i1$
|
|
9834
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SnackbarComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: MAT_SNACK_BAR_DATA }, { token: i1$6.MatSnackBarRef }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9832
9835
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SnackbarComponent, selector: "ui-snackbar", inputs: { snackbarType: "snackbarType", message: "message", html: "html", seconds: "seconds", includeDismissButton: "includeDismissButton", fixed: "fixed", linkText: "linkText", linkUrl: "linkUrl", linkTarget: "linkTarget", variant: "variant", applicationTheme: "applicationTheme", closeButtonTooltip: "closeButtonTooltip", ariaDescribedby: "ariaDescribedby" }, ngImport: i0, template: "<ng-container>\n <div\n [ngClass]=\"snackbarType + ' ' + position\"\n [@openClose]\n *ngIf=\"visible\"\n class=\"snackbar-container\"\n [attr.theme]=\"applicationTheme\"\n [class.mobile]=\"variant === 'mobile'\"\n [class.desktop]=\"variant === 'desktop'\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n data-testid=\"snackbar-wrapper\"\n [attr.data-test-snackbar-type]=\"snackbarType\"\n [attr.aria-describedby]=\"'describedby'\"\n role=\"alert\"\n [attr.aria-labelledby]=\"'labelledby'\"\n >\n <span style=\"position: absolute; left: -9999px\" id=\"labelledby\">{{ ('ALERT_BANNER.' + (snackbarType | uppercase)) | uiTranslate | async }}</span>\n <span style=\"position: absolute; left: -9999px\">{{ message }}\n <a *ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n </span>\n <span [style.display]=\"'none'\" id=\"describedby\">{{ ariaDescribedby }}</span>\n <div\n aria-hidden=\"true\"\n class=\"snackbar-text\"\n [matTooltip]=\"message.length > maxCharacters ? message : ''\"\n data-testid=\"snackbar-content\"\n >\n <ui-icon *ngIf=\"applicationTheme === 'classic'\" [name]=\"iconName\" size=\"24\"></ui-icon>\n {{ message.length > maxCharacters ? (message | slice: 0:maxCharacters) + '..' : message }}\n <div *ngIf=\"safeHtml\" [innerHTML]=\"safeHtml\"></div>\n <a *ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n </div>\n <ui-button\n *ngIf=\"includeDismissButton && applicationTheme === 'classic'\"\n variant=\"text\"\n [label]=\"(translationContext + 'DISMISS' | uiTranslate | async)!\"\n [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\n (buttonClickEvent)=\"dismissClick()\"\n data-testid=\"snackbar-dismiss-button\"\n ></ui-button>\n <ui-button\n *ngIf=\"includeDismissButton && applicationTheme !== 'classic'\"\n [variant]=\"'icon-button'\"\n [applicationTheme]=\"'light'\"\n [iconName]=\"'Close-in-line'\"\n [size]=\"'small'\"\n [tooltip]=\"(closeButtonTooltip || ('COMMON.CLOSE' | uiTranslate | async))!\"\n (click)=\"dismissClick()\"\n data-testid=\"snackbar-dismiss-button\"\n ></ui-button>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center;color:#000}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}:host .alert-container[theme=dark].success,:host .alert-container[theme=light].success,:host .snackbar-container[theme=dark].success,:host .snackbar-container[theme=light].success{background-color:#aae47a}:host .alert-container[theme=dark].info,:host .alert-container[theme=light].info,:host .snackbar-container[theme=dark].info,:host .snackbar-container[theme=light].info{background-color:#d9e8ff}:host .alert-container[theme=dark].warning,:host .alert-container[theme=light].warning,:host .snackbar-container[theme=dark].warning,:host .snackbar-container[theme=light].warning{background-color:#ffe1b3}:host .alert-container[theme=dark].error,:host .alert-container[theme=light].error,:host .snackbar-container[theme=dark].error,:host .snackbar-container[theme=light].error{background-color:#ffac9a}::ng-deep .display-none{display:none!important}@media (max-width: 600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .snackbar-container{bottom:0;z-index:98}:host .snackbar-container[theme=dark] ui-icon,:host .snackbar-container[theme=light] ui-icon{margin-right:10px;cursor:pointer}:host .snackbar-container[theme=dark] .snackbar-text,:host .snackbar-container[theme=light] .snackbar-text{padding-left:10px;margin-right:8px}:host .snackbar-container[theme=dark] .snackbar-text a,:host .snackbar-container[theme=light] .snackbar-text a{margin-left:4px}:host .snackbar-container[theme=dark].desktop,:host .snackbar-container[theme=light].desktop{border-radius:24px;box-shadow:0 4px 16px #2424240a;width:fit-content;max-width:600px;min-height:48px;line-height:1.4;font-size:14px;padding:16px 24px}:host .snackbar-container[theme=dark].mobile,:host .snackbar-container[theme=light].mobile{width:100%;min-width:100%;word-break:break-word}:host .mat-mdc-snack-bar-container{margin:16px 8px}::ng-deep .mdc-snackbar__surface{height:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
|
|
9833
9836
|
trigger('openClose', [
|
|
9834
9837
|
transition(':enter', [
|
|
@@ -9864,7 +9867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
9864
9867
|
}] }, { type: undefined, decorators: [{
|
|
9865
9868
|
type: Inject,
|
|
9866
9869
|
args: [MAT_SNACK_BAR_DATA]
|
|
9867
|
-
}] }, { type: i1$
|
|
9870
|
+
}] }, { type: i1$6.MatSnackBarRef }, { type: i2.DomSanitizer }], propDecorators: { snackbarType: [{
|
|
9868
9871
|
type: Input
|
|
9869
9872
|
}], message: [{
|
|
9870
9873
|
type: Input
|
|
@@ -9921,12 +9924,12 @@ class SnackbarService {
|
|
|
9921
9924
|
}
|
|
9922
9925
|
return componentRef;
|
|
9923
9926
|
}
|
|
9924
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SnackbarService, deps: [{ token: i1$
|
|
9927
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SnackbarService, deps: [{ token: i1$6.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
9925
9928
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SnackbarService }); }
|
|
9926
9929
|
}
|
|
9927
9930
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SnackbarService, decorators: [{
|
|
9928
9931
|
type: Injectable
|
|
9929
|
-
}], ctorParameters: () => [{ type: i1$
|
|
9932
|
+
}], ctorParameters: () => [{ type: i1$6.MatSnackBar }] });
|
|
9930
9933
|
|
|
9931
9934
|
class SnackbarComponentModule {
|
|
9932
9935
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SnackbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
@@ -10298,7 +10301,7 @@ class TooltipTemplateDirective {
|
|
|
10298
10301
|
.withPush(true);
|
|
10299
10302
|
this._overlayRef = this._overlay.create({ positionStrategy });
|
|
10300
10303
|
}
|
|
10301
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TooltipTemplateDirective, deps: [{ token: i1$
|
|
10304
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TooltipTemplateDirective, deps: [{ token: i1$7.Overlay }, { token: i1$7.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i2$3.FocusMonitor }, { token: i0.NgZone }, { token: i0.Injector }, { token: 'TooltipComponentToken' }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
10302
10305
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: TooltipTemplateDirective, isStandalone: true, selector: "[uiTooltipTemplate]", inputs: { tooltipPosition: "tooltipPosition", showTooltip: "showTooltip", templateRef: ["uiTooltipTemplate", "templateRef"] }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()" } }, usesOnChanges: true, ngImport: i0 }); }
|
|
10303
10306
|
}
|
|
10304
10307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TooltipTemplateDirective, decorators: [{
|
|
@@ -10307,7 +10310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
10307
10310
|
selector: '[uiTooltipTemplate]',
|
|
10308
10311
|
standalone: true,
|
|
10309
10312
|
}]
|
|
10310
|
-
}], ctorParameters: () => [{ type: i1$
|
|
10313
|
+
}], ctorParameters: () => [{ type: i1$7.Overlay }, { type: i1$7.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i2$3.FocusMonitor }, { type: i0.NgZone }, { type: i0.Injector }, { type: undefined, decorators: [{
|
|
10311
10314
|
type: Inject,
|
|
10312
10315
|
args: ['TooltipComponentToken']
|
|
10313
10316
|
}] }], propDecorators: { tooltipPosition: [{
|
|
@@ -10740,7 +10743,7 @@ class DropdownComponent {
|
|
|
10740
10743
|
}
|
|
10741
10744
|
}
|
|
10742
10745
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i1$2.NgControl, optional: true, self: true }, { token: i0.Renderer2 }, { token: i2$3.FocusMonitor }, { token: i0.DestroyRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10743
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DropdownComponent, selector: "ui-dropdown", inputs: { label: "label", labelIcon: "labelIcon", isAIVariant: "isAIVariant", name: "name", placeholder: "placeholder", id: "id", value: "value", errors: "errors", disabled: "disabled", valueList: "valueList", allowClear: "allowClear", allowMultipleSelection: "allowMultipleSelection", required: "required", showBottomContent: "showBottomContent", applicationTheme: "applicationTheme", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", textField: "textField", valueField: "valueField", hasError: "hasError", companyColor: "companyColor", panelClass: "panelClass" }, outputs: { closed: "closed", opened: "opened" }, host: { listeners: { "keydown.tab": "onTabPress($event)" }, properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, queries: [{ propertyName: "customOptionTemplate", first: true, predicate: ["customOptionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "customSelectedOptionTemplate", first: true, predicate: ["customSelectedOptionTemplate"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <mat-form-field\n appearance=\"outline\"\n [attr.theme]=\"applicationTheme\"\n [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched ) || hasError) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'without-label': !label, 'keyboard-focused': keyboardFocused(), 'has-label': !!label }\"\n >\n <mat-label class=\"label-with-icon\">\n @if(isAIVariant || labelIcon) {\n <ui-icon\n [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\"\n [size]=\"'16'\"\n class=\"label-icon\"\n ></ui-icon>\n }\n {{ label }}@if(required) {<span>*</span>}\n </mat-label>\n <mat-select\n (closed)=\"onClosed()\"\n (opened)=\"onOpened()\"\n #matSelect\n [id]=\"id!\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [panelClass]=\"'ui-dropdown-list' + ' ' + applicationTheme + (panelClass ? ' ' + panelClass : '')\"\n [disabled]=\"disabled\"\n [multiple]=\"!!allowMultipleSelection\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n (selectionChange)=\"onChangeOption($event)\"\n [attr.name]=\"name\">\n @if(customSelectedOptionTemplate && this.valueField) {\n <mat-select-trigger>\n <ng-container\n [ngTemplateOutlet]=\"customSelectedOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: valueList.find(this.findValueByValueField) }\"\n ></ng-container>\n </mat-select-trigger>\n }\n\n @if(customOptionTemplate && this.valueField) {\n @for (item of valueList; track item[valueField]) {\n <mat-option [value]=\"item[valueField]\">\n <ng-container\n [ngTemplateOutlet]=\"customOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n ></ng-container>\n </mat-option>\n }\n } @else {\n <div class=\"mat-option-section\" *ngFor=\"let section of valueList\">\n <span *ngIf=\"section.sectionTitle\" class=\"section-title\">{{ section.sectionTitle }}</span>\n <mat-option *ngIf=\"section\" #matOption [value]=\"valueField ? section[valueField] : textField && !valueField ? section : section.value\">\n <div class=\"option-content\">\n <span class=\"option-text\">{{ textField ? section[textField] : section.displayValue ?? section.value }}</span>\n @if(section.isAISuggested) {\n <ui-icon\n [name]=\"'Sparkle-in-line'\"\n [size]=\"'16'\">\n </ui-icon>\n }\n </div>\n </mat-option>\n </div>\n }\n\n </mat-select>\n <ui-button [ariaLabel]=\"(('COMMON.CLEAR') | uiTranslate | async)!\" *ngIf=\"allowClear && !matSelect.empty\" variant=\"secondary\" [justIcon]=\"true\" class=\"clear\" [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\" [label]=\"(('COMMON.CLEAR') | uiTranslate | async)!\" (click)=\"clearValue($event)\"></ui-button>\n <ui-icon class=\"chevron-icon\" *ngIf=\"!matSelect.panelOpen\" size=\"24\" [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"></ui-icon>\n <ui-icon class=\"chevron-icon\" *ngIf=\"matSelect.panelOpen\" size=\"24\" [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"></ui-icon>\n <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n <ng-container *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"></ui-icon>{{ error }}\n </div>\n </ng-container>\n\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n </mat-hint>\n </mat-form-field>\n</ng-container>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon{gap:4px}.mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .label-with-icon .label-icon mat-icon svg{color:#e02800!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn):hover .mat-mdc-floating-label:not(.mdc-floating-label--float-above) .label-with-icon .label-icon mat-icon svg{color:#919191!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon .label-icon mat-icon svg{color:#000!important}ui-dropdown{display:flex}ui-dropdown .option-content{display:flex;align-items:center;gap:8px}ui-dropdown .label-with-icon{display:flex;align-items:center;gap:8px}ui-dropdown .mat-mdc-form-field{margin-top:0;width:100%}ui-dropdown .mat-mdc-form-field.without-label .mdc-notched-outline__notch{padding:0}ui-dropdown .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px;flex:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix{margin-right:16px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-floating-label{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused ui-icon:not(.clear) svg{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon{padding:0;height:auto;background:transparent}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:hover,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon.focus.cdk-focused.cdk-mouse-focused{background-color:transparent!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear{position:absolute;right:24px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear mat-icon.black svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused ui-icon svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0;margin-top:9px;font-size:12px;line-height:16px;position:relative}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-spacer{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error .errors{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-value{line-height:18px;width:74%!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-button svg,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}ui-dropdown[theme=light] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper,ui-dropdown[theme=dark] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{margin-top:4px}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#fff!important}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#919191!important}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg{color:#919191!important}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list{margin-top:4px;box-shadow:0 8px 24px 4px #00000014}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option{display:flex;height:48px;color:#000}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center;justify-content:space-between}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:hover,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:hover,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:hover{background:var(--dropdown-color-option-hover)!important}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:active{background:var(--dropdown-color-option-active)!important}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-option-section .section-title{font-size:12px;text-transform:uppercase;display:flex;height:48px;align-items:center;font-weight:700;padding:0 16px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error .errors{display:flex}.chevron-icon{position:absolute;right:-2px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
10746
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DropdownComponent, selector: "ui-dropdown", inputs: { label: "label", labelIcon: "labelIcon", isAIVariant: "isAIVariant", name: "name", placeholder: "placeholder", id: "id", value: "value", errors: "errors", disabled: "disabled", valueList: "valueList", allowClear: "allowClear", allowMultipleSelection: "allowMultipleSelection", required: "required", showBottomContent: "showBottomContent", applicationTheme: "applicationTheme", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", textField: "textField", valueField: "valueField", hasError: "hasError", companyColor: "companyColor", panelClass: "panelClass" }, outputs: { closed: "closed", opened: "opened" }, host: { listeners: { "keydown.tab": "onTabPress($event)" }, properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, queries: [{ propertyName: "customOptionTemplate", first: true, predicate: ["customOptionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "customSelectedOptionTemplate", first: true, predicate: ["customSelectedOptionTemplate"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <mat-form-field\n appearance=\"outline\"\n [attr.theme]=\"applicationTheme\"\n [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched ) || hasError) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'without-label': !label, 'keyboard-focused': keyboardFocused(), 'has-label': !!label }\"\n >\n <mat-label class=\"label-with-icon\">\n @if(isAIVariant || labelIcon) {\n <ui-icon\n [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\"\n [size]=\"'16'\"\n class=\"label-icon\"\n ></ui-icon>\n }\n {{ label }}@if(required) {<span>*</span>}\n </mat-label>\n <mat-select\n (closed)=\"onClosed()\"\n (opened)=\"onOpened()\"\n #matSelect\n [id]=\"id!\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [panelClass]=\"'ui-dropdown-list' + ' ' + applicationTheme + (panelClass ? ' ' + panelClass : '')\"\n [disabled]=\"disabled\"\n [multiple]=\"!!allowMultipleSelection\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n (selectionChange)=\"onChangeOption($event)\"\n [attr.name]=\"name\">\n @if(customSelectedOptionTemplate && this.valueField) {\n <mat-select-trigger>\n <ng-container\n [ngTemplateOutlet]=\"customSelectedOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: valueList.find(this.findValueByValueField) }\"\n ></ng-container>\n </mat-select-trigger>\n }\n\n @if(customOptionTemplate && this.valueField) {\n @for (item of valueList; track item[valueField]) {\n <mat-option [value]=\"item[valueField]\">\n <ng-container\n [ngTemplateOutlet]=\"customOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n ></ng-container>\n </mat-option>\n }\n } @else {\n <div class=\"mat-option-section\" *ngFor=\"let section of valueList\">\n <span *ngIf=\"section.sectionTitle\" class=\"section-title\">{{ section.sectionTitle }}</span>\n <mat-option *ngIf=\"section\" #matOption [value]=\"valueField ? section[valueField] : textField && !valueField ? section : section.value\">\n <div class=\"option-content\">\n <span class=\"option-text\">{{ textField ? section[textField] : section.displayValue ?? section.value }}</span>\n @if(section.isAISuggested) {\n <ui-icon\n [name]=\"'Sparkle-in-line'\"\n [size]=\"'16'\">\n </ui-icon>\n }\n </div>\n </mat-option>\n </div>\n }\n\n </mat-select>\n <ui-button [ariaLabel]=\"(('COMMON.CLEAR') | uiTranslate | async)!\" *ngIf=\"allowClear && !matSelect.empty\" variant=\"secondary\" [justIcon]=\"true\" class=\"clear\" [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\" [label]=\"(('COMMON.CLEAR') | uiTranslate | async)!\" (click)=\"clearValue($event)\"></ui-button>\n <ui-icon class=\"chevron-icon\" *ngIf=\"!matSelect.panelOpen\" size=\"24\" [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"></ui-icon>\n <ui-icon class=\"chevron-icon\" *ngIf=\"matSelect.panelOpen\" size=\"24\" [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"></ui-icon>\n <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n <ng-container *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"></ui-icon>{{ error }}\n </div>\n </ng-container>\n\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n </mat-hint>\n </mat-form-field>\n</ng-container>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon{gap:4px}.mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .label-with-icon .label-icon mat-icon svg{color:#e02800!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn):hover .mat-mdc-floating-label:not(.mdc-floating-label--float-above) .label-with-icon .label-icon mat-icon svg{color:#919191!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon .label-icon mat-icon svg{color:#000!important}ui-dropdown{display:flex}ui-dropdown .option-content{display:flex;align-items:center;gap:8px}ui-dropdown .label-with-icon{display:flex;align-items:center;gap:8px}ui-dropdown .mat-mdc-form-field{margin-top:0;width:100%}ui-dropdown .mat-mdc-form-field.without-label .mdc-notched-outline__notch{padding:0}ui-dropdown .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px;flex:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix{margin-right:16px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-floating-label{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused ui-icon:not(.clear) svg{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon{padding:0;height:auto;background:transparent}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:hover,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon.focus.cdk-focused.cdk-mouse-focused{background-color:transparent!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear{position:absolute;right:24px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear mat-icon.black svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused ui-icon svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0;margin-top:9px;font-size:12px;line-height:16px;position:relative}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-spacer{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error .errors{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-value{line-height:18px;width:74%!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-button svg,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}ui-dropdown[theme=light] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper,ui-dropdown[theme=dark] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{margin-top:4px}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#fff!important}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#919191!important}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg{color:#919191!important}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list{margin-top:4px;box-shadow:0 8px 24px 4px #00000014}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option{display:flex;height:48px;color:#000}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center;justify-content:space-between}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:hover,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:hover,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:hover{background:var(--dropdown-color-option-hover)!important}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:active{background:var(--dropdown-color-option-active)!important}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-option-section .section-title{font-size:12px;text-transform:uppercase;display:flex;height:48px;align-items:center;font-weight:700;padding:0 16px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error .errors{display:flex}.chevron-icon{position:absolute;right:-2px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
10744
10747
|
}
|
|
10745
10748
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
10746
10749
|
type: Component,
|
|
@@ -13548,7 +13551,7 @@ class AutocompleteComponent {
|
|
|
13548
13551
|
this.matAutocomplete._setScrollTop(this.matAutocomplete._keyManager.activeItemIndex * optionHeight);
|
|
13549
13552
|
}
|
|
13550
13553
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i2.DomSanitizer }, { token: i1$2.NgControl, optional: true, self: true }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i2$3.FocusMonitor }, { token: i0.DestroyRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13551
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompleteComponent, selector: "ui-autocomplete", inputs: { itemsList: "itemsList", suggestionsList: "suggestionsList", disabled: "disabled", allowAdd: "allowAdd", textField: "textField", valueField: "valueField", label: "label", placeholder: "placeholder", itemValue: "itemValue", type: "type", minCharactersSearch: "minCharactersSearch", variant: "variant", showBottomContent: "showBottomContent", valuePrimitive: "valuePrimitive", fullWidth: "fullWidth", applicationTheme: "applicationTheme", required: "required", errors: "errors", companyColor: "companyColor", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], compareWith: "compareWith", dropdownPanelClass: "dropdownPanelClass", closeOnScroll: "closeOnScroll", size: "size", allowUserInput: "allowUserInput", clearable: "clearable", exactMatchSelect: "exactMatchSelect", maxItemSelected: "maxItemSelected", maxLength: "maxLength", isDynamicFilteringEnabled: "isDynamicFilteringEnabled", dynamicFilterLoading: "dynamicFilterLoading", dynamicFilteredList: "dynamicFilteredList", infiniteScroll: "infiniteScroll", hasMoreOptionsForInfiniteScroll: "hasMoreOptionsForInfiniteScroll" }, outputs: { selectionChange: "selectionChange", searchTextChange: "searchTextChange", blur: "blur", focus: "focus", scrollViewportBottomReached: "scrollViewportBottomReached" }, host: { properties: { "class.full-width": "this.fullWidth", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "formFieldElement", first: true, predicate: ["formField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "matInput", first: true, predicate: ["matInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n <mat-form-field\n [color]=\"(safeErrors.length || (ngControl?.errors && ngControl?.touched ) || (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' ')) ) ? 'warn' : 'accent'\"\n [appearance]=\"'outline'\"\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent, 'keyboard-focused': keyboardFocused(), 'has-label': !!label }\"\n >\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <div #formField class=\"input-container\">\n <span style=\"position: absolute; left: -9999px\" *ngIf=\"textField ? value?.[textField] : value === inputValue\"\n aria-live=\"polite\">{{ (('SELECTED') | uiTranslate | async) + ' ' + inputValue }}</span>\n\n <input\n #trigger=\"matAutocompleteTrigger\"\n #matInput\n [attr.maxlength]=\"maxLength !== null && maxLength !== undefined ? maxLength : null\"\n [uiPreventInput]=\"!allowUserInput\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n [attr.aria-label]=\"((translationContext + 'SELECTED') | uiTranslate | async) + ' ' + (value | transformItem: textField : true)\"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n matInput\n [placeholder]=\"value && value.length ? '': placeholder\"\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n />\n <div\n class=\"selected-items\"\n #tagContainer\n *ngIf=\"\n (type === autocompleteType.LARGE && this.value) ||\n (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n \"\n >\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n *ngFor=\"let valueItem of value; let i = index\"\n [label]=\"valueItem | transformItem: textField\"\n [allowClose]=\"true\"\n [applicationTheme]=\"applicationTheme\"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n [style.display]=\"(isOverLapping && i > 0 && i >= overlapIndex) || (size === 'small' && value.length > 1) ? 'none' : 'block'\"\n [ngStyle]=\"{ '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px' }\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n @if (size === 'small') {\n <div class=\"selected-count\" *ngIf=\"value.length > 1\">\n {{ (translationContext + 'SELECTED_AMOUNT' | uiTranslate : { numberSelected: (value | slice: overlapIndex).length }) | async }}\n </div>\n } @else {\n <div *ngIf=\"value.length > 1 && isOverLapping\" class=\"overlap-count\">\n <ui-tag [applicationTheme]=\"applicationTheme\"\n [label]=\"'+' + (value.length - overlapIndex)\"></ui-tag>\n </div>\n }\n </div>\n </div>\n\n <ui-icon\n *ngIf=\"clearable && (type === autocompleteType.SINGLE && (value?.length || hasObjectValue)) || (type !== autocompleteType.SINGLE && value && value.length > 1 && ((AutocompleteUtils.isPrimitive(value) && value.length) || (!AutocompleteUtils.isPrimitive(value) && (AutocompleteUtils.isArray(value) && value.length || !AutocompleteUtils.isArray(value) && !value.length))))\"\n class=\"remove-selected\"\n [tabIndex]=\"disabled ? -1 : 0\"\n (keydown.enter)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n (keydown.space)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [attr.aria-label]=\"('COMMON.CLEAR') | uiTranslate | async\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n *ngIf=\"isDropdown\"\n [size]=\"'24'\"\n [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme + ' ' + dropdownPanelClass\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n (opened)=\"gotoUp()\"\n >\n @if (type !== autocompleteType.MULTI || value?.length < maxItemSelected) {\n <ng-container *ngIf=\"!(searchResult$ | async)\">\n <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n <mat-optgroup [label]=\"((translationContext + 'SUGGESTED') | uiTranslate | async)! | uppercase\"\n *ngIf=\"suggestionsList.length\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': suggested | includes: value : valueField }\"\n *ngFor=\"let suggested of suggestionsList\"\n [value]=\"suggested\"\n >\n <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"((translationContext + 'SELECTED') | uiTranslate | async)! | uppercase\"\n *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of value\"\n [value]=\"item\"\n >\n <span>{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n\n @if (isGrouped) {\n @for (group of itemsList; track group) {\n\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n }\n }\n }\n\n <mat-optgroup [label]=\"((translationContext + 'SELECTED') | uiTranslate | async)! | uppercase\"\n *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [class]=\"'selected-option'\"\n [value]=\"value\"\n >\n <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-template #dropdownList>\n <cdk-virtual-scroll-viewport *ngIf=\"virtualScroll || infiniteScroll; else defaultViewPort\" [itemSize]=\"48\"\n [style.height]=\"'200px'\" class=\"virtual-scroll\">\n @if (!isGrouped) {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n\n @if(infiniteScroll && hasMoreOptionsForInfiniteScroll) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n } @else {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n } }\n }\n\n </cdk-virtual-scroll-viewport>\n\n <ng-template #defaultViewPort>\n @if (!isGrouped) {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n } @else {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n }\n }\n }\n </ng-template>\n\n </ng-template>\n\n </ng-container>\n\n <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n }\n }\n }\n\n <mat-optgroup [label]=\"((translationContext + 'SUGGESTED') | uiTranslate | async)! | uppercase\"\n *ngIf=\"filteredSuggestionList.length\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container *ngIf=\"!filteredSuggestionList.length && !isGrouped; else showItemListWithGroup\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </ng-container>\n\n <ng-template #showItemListWithGroup>\n <mat-optgroup [label]=\"((translationContext + 'ALL_ITEMS') | uiTranslate | async)! | uppercase\"\n *ngIf=\"filteredItemsList.length && !isGrouped\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-template>\n\n @if(isDynamicFilteringEnabled && dynamicFilterLoading) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if(inputValue) {\n @if (allowAdd && !isAlreadyAdded) {\n <mat-option (mousedown)=$event.preventDefault() [value]=\"inputValue\">\n <span>{{ ('COMMON.ADD') | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n </ng-container>\n </ng-container>\n }\n </mat-autocomplete>\n <mat-hint class=\"error\"\n *ngIf=\"safeErrors.length || (ngControl?.errors | hasValidationError) || (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' '))\">\n <div class=\"errors\"\n *ngIf=\"(AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' '))\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ (translationContext + 'MAX_SELECTED_ERROR') | uiTranslate : { max: maxItemSelected } | async }}</span>\n </div>\n <ng-container *ngIf=\"safeErrors.length\">\n <div class=\"errors\" *ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n\n </mat-hint>\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}:host ui-tag ::ng-deep .tag-wrapper{max-width:fit-content}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:flex;flex-direction:column-reverse}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex;flex-direction:row-reverse}.input-container .selected-items{display:flex;padding-left:4px}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items .value-tag{max-width:var(--tag-max-width)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width)}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px}.input-container .selected-items .overlap-count ui-tag{display:block}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:6px}.input-container input.unset-margin{margin-top:unset}.input-container input.no-caret{cursor:pointer;caret-color:transparent!important}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer;margin-right:2px;border-radius:50px;height:fit-content}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.loading-option{display:flex}.loading-option .loading-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;top:0;left:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2$4.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "isDisabled", "applicationTheme", "ariaLabel", "ariaRequired"], outputs: ["close", "press"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "directive", type: i12.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i12.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i12.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: PreventInputDirective, selector: "[uiPreventInput]", inputs: ["uiPreventInput"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }, { kind: "directive", type: SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }, { kind: "pipe", type: TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13554
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompleteComponent, selector: "ui-autocomplete", inputs: { itemsList: "itemsList", suggestionsList: "suggestionsList", disabled: "disabled", allowAdd: "allowAdd", textField: "textField", valueField: "valueField", label: "label", placeholder: "placeholder", itemValue: "itemValue", type: "type", minCharactersSearch: "minCharactersSearch", variant: "variant", showBottomContent: "showBottomContent", valuePrimitive: "valuePrimitive", fullWidth: "fullWidth", applicationTheme: "applicationTheme", required: "required", errors: "errors", companyColor: "companyColor", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], compareWith: "compareWith", dropdownPanelClass: "dropdownPanelClass", closeOnScroll: "closeOnScroll", size: "size", allowUserInput: "allowUserInput", clearable: "clearable", exactMatchSelect: "exactMatchSelect", maxItemSelected: "maxItemSelected", maxLength: "maxLength", isDynamicFilteringEnabled: "isDynamicFilteringEnabled", dynamicFilterLoading: "dynamicFilterLoading", dynamicFilteredList: "dynamicFilteredList", infiniteScroll: "infiniteScroll", hasMoreOptionsForInfiniteScroll: "hasMoreOptionsForInfiniteScroll" }, outputs: { selectionChange: "selectionChange", searchTextChange: "searchTextChange", blur: "blur", focus: "focus", scrollViewportBottomReached: "scrollViewportBottomReached" }, host: { properties: { "class.full-width": "this.fullWidth", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "formFieldElement", first: true, predicate: ["formField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "matInput", first: true, predicate: ["matInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n <mat-form-field\n [color]=\"(safeErrors.length || (ngControl?.errors && ngControl?.touched ) || (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' ')) ) ? 'warn' : 'accent'\"\n [appearance]=\"'outline'\"\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent, 'keyboard-focused': keyboardFocused(), 'has-label': !!label }\"\n >\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <div #formField class=\"input-container\">\n <span style=\"position: absolute; left: -9999px\" *ngIf=\"textField ? value?.[textField] : value === inputValue\"\n aria-live=\"polite\">{{ (('SELECTED') | uiTranslate | async) + ' ' + inputValue }}</span>\n\n <input\n #trigger=\"matAutocompleteTrigger\"\n #matInput\n [attr.maxlength]=\"maxLength !== null && maxLength !== undefined ? maxLength : null\"\n [uiPreventInput]=\"!allowUserInput\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n [attr.aria-label]=\"((translationContext + 'SELECTED') | uiTranslate | async) + ' ' + (value | transformItem: textField : true)\"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n matInput\n [placeholder]=\"value && value.length ? '': placeholder\"\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n />\n <div\n class=\"selected-items\"\n #tagContainer\n *ngIf=\"\n (type === autocompleteType.LARGE && this.value) ||\n (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n \"\n >\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n *ngFor=\"let valueItem of value; let i = index\"\n [label]=\"valueItem | transformItem: textField\"\n [allowClose]=\"true\"\n [applicationTheme]=\"applicationTheme\"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n [style.display]=\"(isOverLapping && i > 0 && i >= overlapIndex) || (size === 'small' && value.length > 1) ? 'none' : 'block'\"\n [ngStyle]=\"{ '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px' }\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n @if (size === 'small') {\n <div class=\"selected-count\" *ngIf=\"value.length > 1\">\n {{ (translationContext + 'SELECTED_AMOUNT' | uiTranslate : { numberSelected: (value | slice: overlapIndex).length }) | async }}\n </div>\n } @else {\n <div *ngIf=\"value.length > 1 && isOverLapping\" class=\"overlap-count\">\n <ui-tag [applicationTheme]=\"applicationTheme\"\n [label]=\"'+' + (value.length - overlapIndex)\"></ui-tag>\n </div>\n }\n </div>\n </div>\n\n <ui-icon\n *ngIf=\"clearable && (type === autocompleteType.SINGLE && (value?.length || hasObjectValue)) || (type !== autocompleteType.SINGLE && value && value.length > 1 && ((AutocompleteUtils.isPrimitive(value) && value.length) || (!AutocompleteUtils.isPrimitive(value) && (AutocompleteUtils.isArray(value) && value.length || !AutocompleteUtils.isArray(value) && !value.length))))\"\n class=\"remove-selected\"\n [tabIndex]=\"disabled ? -1 : 0\"\n (keydown.enter)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n (keydown.space)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [attr.aria-label]=\"('COMMON.CLEAR') | uiTranslate | async\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n *ngIf=\"isDropdown\"\n [size]=\"'24'\"\n [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme + ' ' + dropdownPanelClass\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n (opened)=\"gotoUp()\"\n >\n @if (type !== autocompleteType.MULTI || value?.length < maxItemSelected) {\n <ng-container *ngIf=\"!(searchResult$ | async)\">\n <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n <mat-optgroup [label]=\"((translationContext + 'SUGGESTED') | uiTranslate | async)! | uppercase\"\n *ngIf=\"suggestionsList.length\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': suggested | includes: value : valueField }\"\n *ngFor=\"let suggested of suggestionsList\"\n [value]=\"suggested\"\n >\n <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"((translationContext + 'SELECTED') | uiTranslate | async)! | uppercase\"\n *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of value\"\n [value]=\"item\"\n >\n <span>{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n\n @if (isGrouped) {\n @for (group of itemsList; track group) {\n\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n }\n }\n }\n\n <mat-optgroup [label]=\"((translationContext + 'SELECTED') | uiTranslate | async)! | uppercase\"\n *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [class]=\"'selected-option'\"\n [value]=\"value\"\n >\n <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-template #dropdownList>\n <cdk-virtual-scroll-viewport *ngIf=\"virtualScroll || infiniteScroll; else defaultViewPort\" [itemSize]=\"48\"\n [style.height]=\"'200px'\" class=\"virtual-scroll\">\n @if (!isGrouped) {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n\n @if(infiniteScroll && hasMoreOptionsForInfiniteScroll) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n } @else {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n } }\n }\n\n </cdk-virtual-scroll-viewport>\n\n <ng-template #defaultViewPort>\n @if (!isGrouped) {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n } @else {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n }\n }\n }\n </ng-template>\n\n </ng-template>\n\n </ng-container>\n\n <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n }\n }\n }\n\n <mat-optgroup [label]=\"((translationContext + 'SUGGESTED') | uiTranslate | async)! | uppercase\"\n *ngIf=\"filteredSuggestionList.length\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container *ngIf=\"!filteredSuggestionList.length && !isGrouped; else showItemListWithGroup\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </ng-container>\n\n <ng-template #showItemListWithGroup>\n <mat-optgroup [label]=\"((translationContext + 'ALL_ITEMS') | uiTranslate | async)! | uppercase\"\n *ngIf=\"filteredItemsList.length && !isGrouped\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-template>\n\n @if(isDynamicFilteringEnabled && dynamicFilterLoading) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if(inputValue) {\n @if (allowAdd && !isAlreadyAdded) {\n <mat-option (mousedown)=$event.preventDefault() [value]=\"inputValue\">\n <span>{{ ('COMMON.ADD') | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n </ng-container>\n </ng-container>\n }\n </mat-autocomplete>\n <mat-hint class=\"error\"\n *ngIf=\"safeErrors.length || (ngControl?.errors | hasValidationError) || (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' '))\">\n <div class=\"errors\"\n *ngIf=\"(AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' '))\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ (translationContext + 'MAX_SELECTED_ERROR') | uiTranslate : { max: maxItemSelected } | async }}</span>\n </div>\n <ng-container *ngIf=\"safeErrors.length\">\n <div class=\"errors\" *ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n\n </mat-hint>\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}:host ui-tag ::ng-deep .tag-wrapper{max-width:fit-content}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:flex;flex-direction:column-reverse}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex;flex-direction:row-reverse}.input-container .selected-items{display:flex;padding-left:4px}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items .value-tag{max-width:var(--tag-max-width)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width)}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px}.input-container .selected-items .overlap-count ui-tag{display:block}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:6px}.input-container input.unset-margin{margin-top:unset}.input-container input.no-caret{cursor:pointer;caret-color:transparent!important}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer;margin-right:2px;border-radius:50px;height:fit-content}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.loading-option{display:flex}.loading-option .loading-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;top:0;left:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2$5.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "isDisabled", "applicationTheme", "ariaLabel", "ariaRequired"], outputs: ["close", "press"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "directive", type: i12.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i12.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i12.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: PreventInputDirective, selector: "[uiPreventInput]", inputs: ["uiPreventInput"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }, { kind: "directive", type: SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }, { kind: "pipe", type: TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13552
13555
|
}
|
|
13553
13556
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
13554
13557
|
type: Component,
|
|
@@ -14135,7 +14138,7 @@ class SkeletonComponent {
|
|
|
14135
14138
|
}
|
|
14136
14139
|
}
|
|
14137
14140
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkeletonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14138
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SkeletonComponent, isStandalone: true, selector: "ui-skeleton", inputs: { count: "count", theme: "theme", appearance: "appearance", isAiTheme: "isAiTheme", applicationTheme: "applicationTheme" }, ngImport: i0, template: "<ngx-skeleton-loader\n [class.skeleton-ai]=\"isAiTheme\"\n [count]=\"count\"\n [theme]=\"currentTheme$ | async\"\n [appearance]=\"(appearance$ | async) || 'line'\"\n></ngx-skeleton-loader>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.skeleton-ai ::ng-deep .skeleton-loader{background:linear-gradient(to right,#d410aa 25%,#0165fc);opacity:.2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i2$
|
|
14141
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SkeletonComponent, isStandalone: true, selector: "ui-skeleton", inputs: { count: "count", theme: "theme", appearance: "appearance", isAiTheme: "isAiTheme", applicationTheme: "applicationTheme" }, ngImport: i0, template: "<ngx-skeleton-loader\n [class.skeleton-ai]=\"isAiTheme\"\n [count]=\"count\"\n [theme]=\"currentTheme$ | async\"\n [appearance]=\"(appearance$ | async) || 'line'\"\n></ngx-skeleton-loader>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.skeleton-ai ::ng-deep .skeleton-loader{background:linear-gradient(to right,#d410aa 25%,#0165fc);opacity:.2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i2$6.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
|
|
14139
14142
|
}
|
|
14140
14143
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkeletonComponent, decorators: [{
|
|
14141
14144
|
type: Component,
|
|
@@ -14215,7 +14218,7 @@ class PaginatorComponent {
|
|
|
14215
14218
|
this.paginatorChange.emit(paginator);
|
|
14216
14219
|
}
|
|
14217
14220
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginatorComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14218
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PaginatorComponent, selector: "ui-paginator", inputs: { pageSizeOptions: "pageSizeOptions", length: "length", pageSize: "pageSize", disabled: "disabled", applicationTheme: "applicationTheme", currentPage: "currentPage" }, outputs: { paginatorChange: "paginatorChange" }, ngImport: i0, template: "<mat-paginator\n [disabled]=\"disabled\"\n [length]=\"length\"\n [pageIndex]=\"currentPage ? currentPage : 0\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [attr.theme]=\"applicationTheme\"\n [selectConfig]=\"selectConfig\"\n [color]=\"'accent'\"\n (page)=\"onPaginatorChange($event)\"\n></mat-paginator>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-center,::ng-deep .mat-mdc-paginator .mat-mdc-select-arrow-wrapper,::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button{display:flex;justify-content:center;align-items:center}::ng-deep .mat-mdc-paginator{border-radius:0 0 8px 8px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions{height:40px!important;margin-left:16px!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button{width:40px!important;padding:0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button[disabled=true] svg{fill:#ededed!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button svg{height:24px!important;width:24px!important;fill:#888!important}::ng-deep .mat-mdc-paginator .mat-mdc-select-arrow-wrapper{width:24px}::ng-deep .mat-mdc-paginator .mat-mdc-form-field-infix{padding:4px 0!important;min-height:28px!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-page-size-select{width:64px}::ng-deep .mat-mdc-paginator .mat-mdc-text-field-wrapper{height:32px!important;padding:0 8px;width:64px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;padding:8px 24px;line-height:20px;color:#000}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container{padding:0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-select-value-text{font-size:14px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions{height:100%}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions button{height:100%;width:70px;border-radius:0}::ng-deep .mat-mdc-paginator[theme=dark] .mdc-icon-button__ripple,::ng-deep .mat-mdc-paginator[theme=light] .mdc-icon-button__ripple{display:none}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button{border-radius:50%!important}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:disabled svg,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:disabled svg{fill:#919191!important}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused{padding:1px;border:1px dashed #888888;outline:0}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:active,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:active{transform:scale(.98)}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button .mat-mdc-button-touch-target,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button .mat-mdc-button-touch-target{width:40px;height:40px}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button{color:#242424!important}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button svg{fill:#242424!important}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:hover{background-color:#e9e9e9}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused{border-color:#666}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button{color:#fff!important}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button svg{fill:#fff!important}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:hover{background-color:#666}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused{border-color:#e9e9e9}\n"], dependencies: [{ kind: "component", type: i1$
|
|
14221
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PaginatorComponent, selector: "ui-paginator", inputs: { pageSizeOptions: "pageSizeOptions", length: "length", pageSize: "pageSize", disabled: "disabled", applicationTheme: "applicationTheme", currentPage: "currentPage" }, outputs: { paginatorChange: "paginatorChange" }, ngImport: i0, template: "<mat-paginator\n [disabled]=\"disabled\"\n [length]=\"length\"\n [pageIndex]=\"currentPage ? currentPage : 0\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [attr.theme]=\"applicationTheme\"\n [selectConfig]=\"selectConfig\"\n [color]=\"'accent'\"\n (page)=\"onPaginatorChange($event)\"\n></mat-paginator>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-center,::ng-deep .mat-mdc-paginator .mat-mdc-select-arrow-wrapper,::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button{display:flex;justify-content:center;align-items:center}::ng-deep .mat-mdc-paginator{border-radius:0 0 8px 8px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions{height:40px!important;margin-left:16px!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button{width:40px!important;padding:0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button[disabled=true] svg{fill:#ededed!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button svg{height:24px!important;width:24px!important;fill:#888!important}::ng-deep .mat-mdc-paginator .mat-mdc-select-arrow-wrapper{width:24px}::ng-deep .mat-mdc-paginator .mat-mdc-form-field-infix{padding:4px 0!important;min-height:28px!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-page-size-select{width:64px}::ng-deep .mat-mdc-paginator .mat-mdc-text-field-wrapper{height:32px!important;padding:0 8px;width:64px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;padding:8px 24px;line-height:20px;color:#000}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container{padding:0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-select-value-text{font-size:14px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions{height:100%}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions button{height:100%;width:70px;border-radius:0}::ng-deep .mat-mdc-paginator[theme=dark] .mdc-icon-button__ripple,::ng-deep .mat-mdc-paginator[theme=light] .mdc-icon-button__ripple{display:none}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button{border-radius:50%!important}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:disabled svg,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:disabled svg{fill:#919191!important}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused{padding:1px;border:1px dashed #888888;outline:0}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:active,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:active{transform:scale(.98)}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button .mat-mdc-button-touch-target,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button .mat-mdc-button-touch-target{width:40px;height:40px}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button{color:#242424!important}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button svg{fill:#242424!important}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:hover{background-color:#e9e9e9}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused{border-color:#666}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button{color:#fff!important}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button svg{fill:#fff!important}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:hover{background-color:#666}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused{border-color:#e9e9e9}\n"], dependencies: [{ kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
|
|
14219
14222
|
}
|
|
14220
14223
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
14221
14224
|
type: Component,
|
|
@@ -14484,7 +14487,7 @@ class TableComponent {
|
|
|
14484
14487
|
this.tableData = data;
|
|
14485
14488
|
}
|
|
14486
14489
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.DestroyRef }, { token: IS_MOBILE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14487
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TableComponent, selector: "ui-table", inputs: { config: "config", data: "data", loading: "loading", applicationTheme: "applicationTheme", tableDetailColumns: "tableDetailColumns", tableDetails: "tableDetails", disableBorderRadius: "disableBorderRadius", isCondensed: "isCondensed", stickyHeader: "stickyHeader", maxHeight: "maxHeight" }, outputs: { onRowClickEvent: "onRowClickEvent", onDetailRowClickEvent: "onDetailRowClickEvent", paginatorChange: "paginatorChange", sortChange: "sortChange" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #tableContainer class=\"table-container\"\n [ngClass]=\"{ 'without-title': !tableConfig?.title, 'disable-border-radius': disableBorderRadius }\"\n [attr.theme]=\"applicationTheme\">\n <div *ngIf=\"tableConfig?.title\" class=\"table-header\">\n {{ tableConfig.title | sentencecase }}\n <ng-content select=\"[title-actions]\"></ng-content>\n </div>\n <div\n #table\n *ngIf=\"scrollSettings$ | async as scrollSettings\"\n class=\"table-wrapper\"\n [class.sticky-header]=\"stickyHeader\"\n [style.--table-max-height]=\"maxHeight\">\n <table\n [tabIndex]=\"0\"\n class=\"main-table\"\n [class.condensed]=\"isCondensed\"\n mat-table\n [dataSource]=\"tableData\"\n matSort\n [matSortStart]=\"tableConfig?.sort?.defaultSortStart ?? 'asc'\"\n [matSortActive]=\"tableConfig?.sort?.active ?? ''\"\n [matSortDirection]=\"tableConfig?.sort?.direction ?? ''\"\n (matSortChange)=\"onSortChange($event)\"\n multiTemplateDataRows\n >\n\n <ng-container\n *ngFor=\"let column of tableConfig.columns; index as i, last as isLast; trackBy: trackColumnUniqueId\">\n <ng-container *ngIf=\"isLast && column.isSticky && column.allowSort\">\n <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\" [stickyEnd]=\"!scrollSettings?.scrollEnd\">\n <th mat-header-cell\n [start]=\"column.sortStart ?? 'asc'\"\n [mat-sort-header]=\"column.sortHeader ?? column.key\"\n *matHeaderCellDef\n [attr.sortable]=\"column.allowSort ?? false\"\n [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\n [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\n [style.font-weight]=\"'bold'\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title, column, colIndex: i}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element; let rowIndex = dataIndex\"\n [align]=\"column.styles?.alignment\"\n [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\n (click)=\"onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\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 <div class=\"row-value\">\n <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\n\n @if (column?.type) {\n <ng-container\n *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\n } @else {\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element, rowIndex}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\n </ng-template>\n }\n </div>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isLast && column.isSticky && !column.allowSort\">\n <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\"\n [stickyEnd]=\"scrollSettings.horizontalScroll ? !scrollSettings.scrollEnd : true\">\n <th mat-header-cell\n *matHeaderCellDef\n [attr.sortable]=\"column.allowSort ?? false\"\n [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\n [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\n [style.font-weight]=\"'bold'\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title, column, colIndex: i}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element; let rowIndex = dataIndex\"\n [align]=\"column.styles?.alignment\"\n [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\n (click)=\"onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\"\n [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <div class=\"row-value\">\n <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\n\n @if (column?.type) {\n <ng-container\n *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\n } @else {\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\n </ng-template>\n }\n </div>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"!(isLast && column.isSticky) && column.allowSort\">\n <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\"\n [sticky]=\"(isMobile$ | async) ? false : !scrollSettings.scrollStart && !!column.isSticky\">\n <th mat-header-cell\n [start]=\"column.sortStart ?? 'asc'\"\n [mat-sort-header]=\"column.sortHeader ?? column.key\"\n [attr.sortable]=\"column.allowSort ?? false\"\n *matHeaderCellDef\n [style.font-weight]=\"'bold'\"\n [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\n [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: { $implicit: column.title, column, colIndex: i }\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element; let rowIndex = dataIndex\"\n [align]=\"column.styles?.alignment\"\n [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\n (click)=\"onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\"\n [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <div class=\"row-value\">\n <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\n\n @if (column?.type) {\n <ng-container\n *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\n } @else {\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\n </ng-template>\n }\n </div>\n\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"!(isLast && column.isSticky) && !column.allowSort\">\n <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\"\n [sticky]=\"(isMobile$ | async) ? false : !scrollSettings.scrollStart && !!column.isSticky\">\n <th mat-header-cell\n [attr.sortable]=\"column.allowSort ?? false\"\n *matHeaderCellDef\n [style.font-weight]=\"'bold'\"\n [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\n [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: { $implicit: column.title, column, colIndex: i }\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element; let rowIndex = dataIndex\"\n [align]=\"column.styles?.alignment\"\n [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\n (click)=\"onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\"\n [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <div class=\"row-value\">\n <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\n\n @if (column?.type) {\n <ng-container\n *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\n } @else {\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\n </ng-template>\n }\n </div>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n </ng-container>\n\n\n <ng-container matColumnDef=\"expandedDetail\">\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\n <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\n [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n <table\n mat-table\n [dataSource]=\"dataSourceDetail\"\n [ngClass]=\"{ 'hide-borders': element === tableData[tableData.length - 1] }\"\n >\n <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n [matColumnDef]=\"tableColumn.title ?? ''\">\n <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\n [ngStyle]=\"{width: tableColumn.styles?.width}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n {{ tableColumn.title | uppercase }}\n </th>\n\n <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\n [ngStyle]=\"{width: tableColumn.styles?.width }\">\n <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\n </table>\n </div>\n </td>\n </ng-container>\n\n <ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n <div class=\"align-wrapper\">\n <ng-container [ngSwitch]=\"tableColumn.type\">\n <ng-container *ngSwitchCase=\"DataType.FIELD\">\n {{ element | dataPropertyGetter: tableColumn.key }}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n {{ tableColumn.function?.(element) }}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n <ng-template\n [dynamicComponent]=\"[tableColumn.renderer, element] | memoizeFunc : callRenderer\">\n </ng-template>\n </ng-container>\n <ng-container *ngSwitchDefault>\n {{ element | dataPropertyGetter: tableColumn.key }}\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: stickyHeader\" [class.is-title-present]=\"tableConfig.title\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n [ngClass]=\"{'expanded-row': elementDetail === row, 'row-clickable': tableDetails, 'selected': row?.selected, 'last-row': row === tableData[tableData.length - 1] && !elementDetail }\"\n (click)=\"toggleRow(row)\">\n </tr>\n <ng-container *ngIf=\"tableDetails && tableDetailColumns?.columnDefs?.length\">\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n </ng-container>\n\n <ng-container *ngIf=\"tableConfig.noDataRowTpl\">\n <tr *matNoDataRow>\n <ng-container *ngTemplateOutlet=\"tableConfig.noDataRowTpl\"></ng-container>\n </tr>\n </ng-container>\n </table>\n </div>\n\n <ui-paginator\n *ngIf=\"!tableConfig?.hidePagination && tableConfig?.pagination\"\n [disabled]=\"loading\"\n [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\n [pageSize]=\"tableConfig.pagination?.itemsPerPage ?? 25\"\n [length]=\"tableConfig.pagination?.totalItems ?? 0\"\n [currentPage]=\"tableConfig.pagination?.currentPage ?? 0\"\n [pageSizeOptions]=\"tableConfig.pagination?.itemsPerPageOptions ?? [10, 25, 50]\"\n (paginatorChange)=\"onPaginatorChange($event)\"\n ></ui-paginator>\n</div>\n\n<ng-template #expandButton let-i=\"index\" let-element=\"element\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"!i && tableDetails\"\n variant=\"icon-button\"\n [ngClass]=\"{ opened: elementDetail && element == elementDetail }\"\n [iconName]=\"elementDetail && element == elementDetail ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\n ></ui-button>\n</ng-template>\n\n<ng-template #columnHeader let-column=\"column\" let-i=\"i\">\n <div class=\"header-section\">\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title | sentencecase }}\n </span>\n <ui-icon *ngIf=\"column?.showTooltip\" [name]=\"'Help-in-line'\"\n [matTooltipClass]=\"applicationTheme\"\n [matTooltip]=\"(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title ) : '') || ''\"\n ></ui-icon>\n </div>\n</ng-template>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host-context(.without-table-border) .table-container{border:none}.flex-left,.table-container .table-header{display:flex;justify-content:flex-start;align-items:center}.table-container{--mat-table-background-color: #ffffff;overflow:hidden;border:1px #E0E0E0 solid;border-radius:8px}.table-container ::ng-deep .mat-sort-header-arrow{color:#000}.table-container .table-header{min-height:56px;padding:8px;background:#fff;line-height:24px;font-size:16px;font-weight:700;text-transform:uppercase;display:flex;justify-content:space-between}.table-container .table-wrapper{max-width:100%;overflow:auto}.table-container .table-wrapper.sticky-header{max-height:var(--table-max-height);overflow-y:auto}.table-container .table-wrapper table.main-table{width:100%;box-shadow:unset}.table-container .table-wrapper table.main-table ::ng-deep .mat-sort-header-arrow{margin-left:8px}.table-container .table-wrapper table.main-table .mdc-data-table__cell,.table-container .table-wrapper table.main-table .mdc-data-table__header-cell{padding:8px 24px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:not(:first-child):not(:last-child){padding:8px 12px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:first-child{padding:8px 12px 8px 24px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:last-child{padding:8px 24px 8px 12px}.table-container .table-wrapper table.main-table th{font-size:14px;line-height:16px;text-transform:uppercase}.table-container .table-wrapper table.main-table tr.is-title-present th.mat-mdc-header-cell.mdc-data-table__header-cell{border-top:1px solid #E0E0E0}.table-container .table-wrapper table.main-table td{font-size:14px;line-height:20px}.table-container .table-wrapper table.main-table td .row-value{display:flex;align-items:center;gap:16px}.table-container .table-wrapper table.main-table td .row-value ui-icon ::ng-deep mat-icon{transition:all .3s!important;font-size:24px}.table-container .table-wrapper table.main-table td .row-value ui-icon.opened ::ng-deep mat-icon{transform:rotate(180deg)}.table-container .table-wrapper table.main-table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader{display:flex;justify-content:center;align-items:center;line-height:unset}.table-container .table-wrapper table.main-table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader .skeleton-loader{margin-bottom:0}.table-container .table-wrapper table.main-table ::ng-deep thead{background:#f6f6f6!important}.table-container .table-wrapper table.main-table .mat-mdc-table-sticky-border-elem-left{box-shadow:24px 8px 24px #00000014}.table-container .table-wrapper table.main-table .mat-mdc-table-sticky-border-elem-right{box-shadow:0 8px 24px 4px #00000014}.table-container .header-section{display:flex;gap:4px;align-items:center}.table-container .header-section .column-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;max-width:fit-content;font-weight:700}.table-container.without-title table{border:unset!important}.table-container.disable-border-radius{border-radius:0!important}.table-container ::ng-deep .mat-mdc-paginator-container{padding:0 24px}.table-container[theme=dark],.table-container[theme=light]{border-radius:10px}.table-container[theme=dark] tr.selected,.table-container[theme=light] tr.selected{background:#f4f4f4!important}.table-container[theme=dark] .table-header,.table-container[theme=light] .table-header{padding:8px 24px;text-transform:none}.table-container[theme=dark] .table-wrapper table th,.table-container[theme=light] .table-wrapper table th{text-transform:none}.table-container[theme=dark] .table-wrapper table td,.table-container[theme=light] .table-wrapper table td{transition:border .3s}.table-container[theme=dark] .table-wrapper table tr.last-row td,.table-container[theme=light] .table-wrapper table tr.last-row td{--mat-table-row-item-outline-color: rgb(0, 0, 0, 0)}.table-container[theme=dark] .table-wrapper table .mat-mdc-table-sticky-border-elem-right,.table-container[theme=light] .table-wrapper table .mat-mdc-table-sticky-border-elem-right{box-shadow:0 8px 24px 4px #24242414!important}.table-container[theme=dark] .table-wrapper table .mat-mdc-table-sticky-border-elem-left,.table-container[theme=light] .table-wrapper table .mat-mdc-table-sticky-border-elem-left{box-shadow:24px 8px 24px #24242414!important}.table-container[theme=dark] .table-wrapper table ::ng-deep thead,.table-container[theme=light] .table-wrapper table ::ng-deep thead{background-color:#fff!important}.table-container[theme=dark] .table-wrapper table ::ng-deep :not(thead) tr:hover,.table-container[theme=light] .table-wrapper table ::ng-deep :not(thead) tr:hover{background-color:#fff2fc}.table-container ::ng-deep tr.detail-row{height:0}.table-container ::ng-deep tr.detail-row td{border:unset!important}.table-container ::ng-deep .mat-column-expandedDetail{padding:0!important}.table-container ::ng-deep .element-detail{overflow:hidden!important;display:flex!important}.table-container ::ng-deep .element-detail table{background-color:#fff;border-bottom:1px solid #D3D3D3;transition:border .3s}.table-container ::ng-deep .element-detail table.hide-borders{border-bottom:unset}.table-container ::ng-deep .element-detail table .mat-mdc-header-row{visibility:collapse}.table-container ::ng-deep .element-detail table .mat-mdc-cell{border-width:0}.table-container ::ng-deep .element-detail table td:first-child{padding-left:64px!important}table th.th-right{text-align:right}table th.th-right ::ng-deep .header-section{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .header-section{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .header-section{justify-content:center}table td.td-right{text-align:right}table td.td-right div{justify-content:end}table td.td-left{text-align:left}table td.td-left div{justify-content:start}table td.td-center{text-align:center}table td.td-center div{justify-content:center}::ng-deep table:not(.main-table) thead{display:none!important}ui-paginator{width:100%;display:flex;justify-content:flex-end;border-top:1px solid #D3D3D3}ui-paginator ::ng-deep .mat-mdc-paginator{width:100%}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$6.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "isAiTheme", "applicationTheme"] }, { kind: "component", type: PaginatorComponent, selector: "ui-paginator", inputs: ["pageSizeOptions", "length", "pageSize", "disabled", "applicationTheme", "currentPage"], outputs: ["paginatorChange"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: i7$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "directive", type: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: ["dynamicComponent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: DataPropertyGetterPipe, name: "dataPropertyGetter" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }, { kind: "pipe", type: SentenceCasePipe, name: "sentencecase" }], animations: [
|
|
14490
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TableComponent, selector: "ui-table", inputs: { config: "config", data: "data", loading: "loading", applicationTheme: "applicationTheme", tableDetailColumns: "tableDetailColumns", tableDetails: "tableDetails", disableBorderRadius: "disableBorderRadius", isCondensed: "isCondensed", stickyHeader: "stickyHeader", maxHeight: "maxHeight" }, outputs: { onRowClickEvent: "onRowClickEvent", onDetailRowClickEvent: "onDetailRowClickEvent", paginatorChange: "paginatorChange", sortChange: "sortChange" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #tableContainer class=\"table-container\"\n [ngClass]=\"{ 'without-title': !tableConfig?.title, 'disable-border-radius': disableBorderRadius }\"\n [attr.theme]=\"applicationTheme\">\n <div *ngIf=\"tableConfig?.title\" class=\"table-header\">\n {{ tableConfig.title | sentencecase }}\n <ng-content select=\"[title-actions]\"></ng-content>\n </div>\n <div\n #table\n *ngIf=\"scrollSettings$ | async as scrollSettings\"\n class=\"table-wrapper\"\n [class.sticky-header]=\"stickyHeader\"\n [style.--table-max-height]=\"maxHeight\">\n <table\n [tabIndex]=\"0\"\n class=\"main-table\"\n [class.condensed]=\"isCondensed\"\n mat-table\n [dataSource]=\"tableData\"\n matSort\n [matSortStart]=\"tableConfig?.sort?.defaultSortStart ?? 'asc'\"\n [matSortActive]=\"tableConfig?.sort?.active ?? ''\"\n [matSortDirection]=\"tableConfig?.sort?.direction ?? ''\"\n (matSortChange)=\"onSortChange($event)\"\n multiTemplateDataRows\n >\n\n <ng-container\n *ngFor=\"let column of tableConfig.columns; index as i, last as isLast; trackBy: trackColumnUniqueId\">\n <ng-container *ngIf=\"isLast && column.isSticky && column.allowSort\">\n <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\" [stickyEnd]=\"!scrollSettings?.scrollEnd\">\n <th mat-header-cell\n [start]=\"column.sortStart ?? 'asc'\"\n [mat-sort-header]=\"column.sortHeader ?? column.key\"\n *matHeaderCellDef\n [attr.sortable]=\"column.allowSort ?? false\"\n [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\n [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\n [style.font-weight]=\"'bold'\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title, column, colIndex: i}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element; let rowIndex = dataIndex\"\n [align]=\"column.styles?.alignment\"\n [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\n (click)=\"onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\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 <div class=\"row-value\">\n <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\n\n @if (column?.type) {\n <ng-container\n *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\n } @else {\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: {$implicit: element, rowIndex}\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\n </ng-template>\n }\n </div>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"isLast && column.isSticky && !column.allowSort\">\n <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\"\n [stickyEnd]=\"scrollSettings.horizontalScroll ? !scrollSettings.scrollEnd : true\">\n <th mat-header-cell\n *matHeaderCellDef\n [attr.sortable]=\"column.allowSort ?? false\"\n [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\n [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\n [style.font-weight]=\"'bold'\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: {$implicit: column.title, column, colIndex: i}\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element; let rowIndex = dataIndex\"\n [align]=\"column.styles?.alignment\"\n [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\n (click)=\"onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\"\n [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <div class=\"row-value\">\n <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\n\n @if (column?.type) {\n <ng-container\n *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\n } @else {\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\n </ng-template>\n }\n </div>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"!(isLast && column.isSticky) && column.allowSort\">\n <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\"\n [sticky]=\"(isMobile$ | async) ? false : !scrollSettings.scrollStart && !!column.isSticky\">\n <th mat-header-cell\n [start]=\"column.sortStart ?? 'asc'\"\n [mat-sort-header]=\"column.sortHeader ?? column.key\"\n [attr.sortable]=\"column.allowSort ?? false\"\n *matHeaderCellDef\n [style.font-weight]=\"'bold'\"\n [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\n [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: { $implicit: column.title, column, colIndex: i }\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element; let rowIndex = dataIndex\"\n [align]=\"column.styles?.alignment\"\n [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\n (click)=\"onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\"\n [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <div class=\"row-value\">\n <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\n\n @if (column?.type) {\n <ng-container\n *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\n } @else {\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\n </ng-template>\n }\n </div>\n\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container\n *ngIf=\"!(isLast && column.isSticky) && !column.allowSort\">\n <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\"\n [sticky]=\"(isMobile$ | async) ? false : !scrollSettings.scrollStart && !!column.isSticky\">\n <th mat-header-cell\n [attr.sortable]=\"column.allowSort ?? false\"\n *matHeaderCellDef\n [style.font-weight]=\"'bold'\"\n [ngStyle]=\"{width: column.styles?.width, minWidth: column.styles?.['min-width']}\"\n [ngClass]=\"column.styles?.alignment ? 'th-'+column.styles?.alignment : ''\"\n >\n <ng-container *ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n *ngTemplateOutlet=\"column.headerCellTemplate; context: { $implicit: column.title, column, colIndex: i }\"></ng-container>\n </ng-container>\n <ng-template #configValue>\n <ng-container [ngTemplateOutlet]=\"columnHeader\" [ngTemplateOutletContext]=\"{ i, column }\"></ng-container>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element; let rowIndex = dataIndex\"\n [align]=\"column.styles?.alignment\"\n [ngClass]=\"[column.styles?.alignment ? 'td-'+column.styles?.alignment : '']\"\n (click)=\"onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\"\n >\n <ui-skeleton class=\"table-skeleton-loader\" [count]=\"1\" [theme]=\"skeletonStyleConfig\"\n [appearance]=\"'line'\"\n *ngIf=\"loading; else value\"></ui-skeleton>\n <ng-template #value>\n <div class=\"row-value\">\n <ng-container [ngTemplateOutlet]=\"expandButton\" [ngTemplateOutletContext]=\"{ index: i, element }\"></ng-container>\n\n @if (column?.type) {\n <ng-container\n *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn: column}\"></ng-container>\n } @else {\n <ng-container *ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"></ng-container>\n </ng-container>\n <ng-template #configData>\n <span [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n [style.font-size]=\"column.fontSize ?? '14px'\">{{ element | dataPropertyGetter: column.key }}</span>\n </ng-template>\n }\n </div>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n </ng-container>\n\n\n <ng-container matColumnDef=\"expandedDetail\">\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\n <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\n [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n <table\n mat-table\n [dataSource]=\"dataSourceDetail\"\n [ngClass]=\"{ 'hide-borders': element === tableData[tableData.length - 1] }\"\n >\n <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n [matColumnDef]=\"tableColumn.title ?? ''\">\n <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\n [ngStyle]=\"{width: tableColumn.styles?.width}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n {{ tableColumn.title | uppercase }}\n </th>\n\n <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\n [ngStyle]=\"{width: tableColumn.styles?.width }\">\n <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\n </table>\n </div>\n </td>\n </ng-container>\n\n <ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n <div class=\"align-wrapper\">\n <ng-container [ngSwitch]=\"tableColumn.type\">\n <ng-container *ngSwitchCase=\"DataType.FIELD\">\n {{ element | dataPropertyGetter: tableColumn.key }}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n {{ tableColumn.function?.(element) }}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n <ng-template\n [dynamicComponent]=\"[tableColumn.renderer, element] | memoizeFunc : callRenderer\">\n </ng-template>\n </ng-container>\n <ng-container *ngSwitchDefault>\n {{ element | dataPropertyGetter: tableColumn.key }}\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: stickyHeader\" [class.is-title-present]=\"tableConfig.title\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n [ngClass]=\"{'expanded-row': elementDetail === row, 'row-clickable': tableDetails, 'selected': row?.selected, 'last-row': row === tableData[tableData.length - 1] && !elementDetail }\"\n (click)=\"toggleRow(row)\">\n </tr>\n <ng-container *ngIf=\"tableDetails && tableDetailColumns?.columnDefs?.length\">\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n </ng-container>\n\n <ng-container *ngIf=\"tableConfig.noDataRowTpl\">\n <tr *matNoDataRow>\n <ng-container *ngTemplateOutlet=\"tableConfig.noDataRowTpl\"></ng-container>\n </tr>\n </ng-container>\n </table>\n </div>\n\n <ui-paginator\n *ngIf=\"!tableConfig?.hidePagination && tableConfig?.pagination\"\n [disabled]=\"loading\"\n [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\n [pageSize]=\"tableConfig.pagination?.itemsPerPage ?? 25\"\n [length]=\"tableConfig.pagination?.totalItems ?? 0\"\n [currentPage]=\"tableConfig.pagination?.currentPage ?? 0\"\n [pageSizeOptions]=\"tableConfig.pagination?.itemsPerPageOptions ?? [10, 25, 50]\"\n (paginatorChange)=\"onPaginatorChange($event)\"\n ></ui-paginator>\n</div>\n\n<ng-template #expandButton let-i=\"index\" let-element=\"element\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"!i && tableDetails\"\n variant=\"icon-button\"\n [ngClass]=\"{ opened: elementDetail && element == elementDetail }\"\n [iconName]=\"elementDetail && element == elementDetail ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\n ></ui-button>\n</ng-template>\n\n<ng-template #columnHeader let-column=\"column\" let-i=\"i\">\n <div class=\"header-section\">\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title | sentencecase }}\n </span>\n <ui-icon *ngIf=\"column?.showTooltip\" [name]=\"'Help-in-line'\"\n [matTooltipClass]=\"applicationTheme\"\n [matTooltip]=\"(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title ) : '') || ''\"\n ></ui-icon>\n </div>\n</ng-template>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host-context(.without-table-border) .table-container{border:none}.flex-left,.table-container .table-header{display:flex;justify-content:flex-start;align-items:center}.table-container{--mat-table-background-color: #ffffff;overflow:hidden;border:1px #E0E0E0 solid;border-radius:8px}.table-container ::ng-deep .mat-sort-header-arrow{color:#000}.table-container .table-header{min-height:56px;padding:8px;background:#fff;line-height:24px;font-size:16px;font-weight:700;text-transform:uppercase;display:flex;justify-content:space-between}.table-container .table-wrapper{max-width:100%;overflow:auto}.table-container .table-wrapper.sticky-header{max-height:var(--table-max-height);overflow-y:auto}.table-container .table-wrapper table.main-table{width:100%;box-shadow:unset}.table-container .table-wrapper table.main-table ::ng-deep .mat-sort-header-arrow{margin-left:8px}.table-container .table-wrapper table.main-table .mdc-data-table__cell,.table-container .table-wrapper table.main-table .mdc-data-table__header-cell{padding:8px 24px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:not(:first-child):not(:last-child){padding:8px 12px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:first-child{padding:8px 12px 8px 24px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:last-child{padding:8px 24px 8px 12px}.table-container .table-wrapper table.main-table th{font-size:14px;line-height:16px;text-transform:uppercase}.table-container .table-wrapper table.main-table tr.is-title-present th.mat-mdc-header-cell.mdc-data-table__header-cell{border-top:1px solid #E0E0E0}.table-container .table-wrapper table.main-table td{font-size:14px;line-height:20px}.table-container .table-wrapper table.main-table td .row-value{display:flex;align-items:center;gap:16px}.table-container .table-wrapper table.main-table td .row-value ui-icon ::ng-deep mat-icon{transition:all .3s!important;font-size:24px}.table-container .table-wrapper table.main-table td .row-value ui-icon.opened ::ng-deep mat-icon{transform:rotate(180deg)}.table-container .table-wrapper table.main-table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader{display:flex;justify-content:center;align-items:center;line-height:unset}.table-container .table-wrapper table.main-table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader .skeleton-loader{margin-bottom:0}.table-container .table-wrapper table.main-table ::ng-deep thead{background:#f6f6f6!important}.table-container .table-wrapper table.main-table .mat-mdc-table-sticky-border-elem-left{box-shadow:24px 8px 24px #00000014}.table-container .table-wrapper table.main-table .mat-mdc-table-sticky-border-elem-right{box-shadow:0 8px 24px 4px #00000014}.table-container .header-section{display:flex;gap:4px;align-items:center}.table-container .header-section .column-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;max-width:fit-content;font-weight:700}.table-container.without-title table{border:unset!important}.table-container.disable-border-radius{border-radius:0!important}.table-container ::ng-deep .mat-mdc-paginator-container{padding:0 24px}.table-container[theme=dark],.table-container[theme=light]{border-radius:10px}.table-container[theme=dark] tr.selected,.table-container[theme=light] tr.selected{background:#f4f4f4!important}.table-container[theme=dark] .table-header,.table-container[theme=light] .table-header{padding:8px 24px;text-transform:none}.table-container[theme=dark] .table-wrapper table th,.table-container[theme=light] .table-wrapper table th{text-transform:none}.table-container[theme=dark] .table-wrapper table td,.table-container[theme=light] .table-wrapper table td{transition:border .3s}.table-container[theme=dark] .table-wrapper table tr.last-row td,.table-container[theme=light] .table-wrapper table tr.last-row td{--mat-table-row-item-outline-color: rgb(0, 0, 0, 0)}.table-container[theme=dark] .table-wrapper table .mat-mdc-table-sticky-border-elem-right,.table-container[theme=light] .table-wrapper table .mat-mdc-table-sticky-border-elem-right{box-shadow:0 8px 24px 4px #24242414!important}.table-container[theme=dark] .table-wrapper table .mat-mdc-table-sticky-border-elem-left,.table-container[theme=light] .table-wrapper table .mat-mdc-table-sticky-border-elem-left{box-shadow:24px 8px 24px #24242414!important}.table-container[theme=dark] .table-wrapper table ::ng-deep thead,.table-container[theme=light] .table-wrapper table ::ng-deep thead{background-color:#fff!important}.table-container[theme=dark] .table-wrapper table ::ng-deep :not(thead) tr:hover,.table-container[theme=light] .table-wrapper table ::ng-deep :not(thead) tr:hover{background-color:#fff2fc}.table-container ::ng-deep tr.detail-row{height:0}.table-container ::ng-deep tr.detail-row td{border:unset!important}.table-container ::ng-deep .mat-column-expandedDetail{padding:0!important}.table-container ::ng-deep .element-detail{overflow:hidden!important;display:flex!important}.table-container ::ng-deep .element-detail table{background-color:#fff;border-bottom:1px solid #D3D3D3;transition:border .3s}.table-container ::ng-deep .element-detail table.hide-borders{border-bottom:unset}.table-container ::ng-deep .element-detail table .mat-mdc-header-row{visibility:collapse}.table-container ::ng-deep .element-detail table .mat-mdc-cell{border-width:0}.table-container ::ng-deep .element-detail table td:first-child{padding-left:64px!important}table th.th-right{text-align:right}table th.th-right ::ng-deep .header-section{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .header-section{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .header-section{justify-content:center}table td.td-right{text-align:right}table td.td-right div{justify-content:end}table td.td-left{text-align:left}table td.td-left div{justify-content:start}table td.td-center{text-align:center}table td.td-center div{justify-content:center}::ng-deep table:not(.main-table) thead{display:none!important}ui-paginator{width:100%;display:flex;justify-content:flex-end;border-top:1px solid #D3D3D3}ui-paginator ::ng-deep .mat-mdc-paginator{width:100%}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$7.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "isAiTheme", "applicationTheme"] }, { kind: "component", type: PaginatorComponent, selector: "ui-paginator", inputs: ["pageSizeOptions", "length", "pageSize", "disabled", "applicationTheme", "currentPage"], outputs: ["paginatorChange"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: i7$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "directive", type: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: ["dynamicComponent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: DataPropertyGetterPipe, name: "dataPropertyGetter" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }, { kind: "pipe", type: SentenceCasePipe, name: "sentencecase" }], animations: [
|
|
14488
14491
|
trigger('expandDetail', [
|
|
14489
14492
|
state('collapsed, void', style({ height: '0px' })),
|
|
14490
14493
|
state('expanded', style({ height: '*' })),
|
|
@@ -14784,7 +14787,7 @@ class SliderComponent {
|
|
|
14784
14787
|
},
|
|
14785
14788
|
provideNgxMask(),
|
|
14786
14789
|
DecimalPipe,
|
|
14787
|
-
], ngImport: i0, template: "<ng-container>\n <div\n class=\"slider-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n >\n @if (label) {\n <div class=\"slider-label\">{{ label }}</div>\n }\n\n <div class=\"slider\">\n @if (!isBasicSlider) {\n <div class=\"min-value\">\n <span>\n @if (useDecimal()) {\n {{ min | number }}\n } @else {\n {{ min }}\n }\n @if (percentage) {\n %\n }\n </span>\n </div>\n }\n <mat-slider\n [disableRipple]=\"applicationTheme !== 'classic'\"\n #sliderElement\n discrete\n [disabled]=\"disabled\"\n [max]=\"max\"\n [min]=\"min\"\n [step]=\"step\"\n (mouseenter)=\"sliderElement.discrete = true\"\n (mouseleave)=\"sliderElement.discrete = false\"\n [displayWith]=\"formatLabel\"\n >\n @if (isBasicSlider) {\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange($event)\" [(ngModel)]=\"sliderStart\" matSliderThumb />\n } @else {\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderStart\" matSliderStartThumb />\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderEnd\" matSliderEndThumb />\n }\n </mat-slider>\n @if (!isBasicSlider) {\n <div class=\"max-value\">\n <span>\n @if (useDecimal()) {\n {{ max | number }}\n } @else {\n {{ max }}\n }\n @if (percentage) {\n %\n }\n </span>\n </div>\n }\n </div>\n\n @if (showInputs && !this.isBasicSlider) {\n <div class=\"slider-input\">\n <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n @if (minLabel()) {\n <mat-label>\n {{ minLabel() }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n } @else {\n <mat-label>\n {{ 'COMMON.MIN' | uiTranslate | async }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n }\n @if (useDecimal()) {\n <input\n matInput\n [type]=\"'text'\"\n [(ngModel)]=\"sliderStart\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n mask=\"separator.2\"\n thousandSeparator=\",\"\n />\n } @else {\n <input\n matInput\n [type]=\"'number'\"\n [(ngModel)]=\"sliderStart\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n [allowOnlyDigits]=\"true\"\n digitsOnly\n />\n }\n </mat-form-field>\n <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n @if (maxLabel()) {\n <mat-label>\n {{ maxLabel() }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n } @else {\n <mat-label>\n {{ 'COMMON.MAX' | uiTranslate | async }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n }\n @if (useDecimal()) {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'text'\"\n [(ngModel)]=\"sliderEnd\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n data-testid=\"slider.input-end\"\n mask=\"separator.2\"\n thousandSeparator=\",\"\n />\n } @else {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'number'\"\n [(ngModel)]=\"sliderEnd\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n [allowOnlyDigits]=\"true\"\n digitsOnly\n data-testid=\"slider.input-end\"\n />\n }\n </mat-form-field>\n </div>\n }\n\n @if (hasError && touchedControlName) {\n <mat-error class=\"slider-errors\">\n @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{\n translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n }}</span>\n </div>\n }\n @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{\n translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n }}</span>\n </div>\n }\n @if (sliderStart < min) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n </div>\n }\n @if (sliderEnd > max) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n </div>\n }\n </mat-error>\n }\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep mat-form-field .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}:host ::ng-deep mat-form-field .mdc-floating-label--float-above{transform:translateY(-28px) scale(.75)!important}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#e02800!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#e02800!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled *{pointer-events:none;cursor:initial}::ng-deep .slider-container.disabled .mat-mdc-slider *{border-color:#919191!important}::ng-deep .slider-container.disabled .mat-mdc-slider .mdc-slider__thumb:after{display:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#a9c2c9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:auto;margin-right:8px;white-space:nowrap}::ng-deep .slider-container .slider .max-value{width:auto;margin-left:8px;white-space:nowrap}::ng-deep .slider-container .slider-errors{margin-top:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between}::ng-deep .slider-container .slider-input mat-form-field{min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#e02800}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .slider-container[theme=light],::ng-deep .slider-container[theme=dark]{color:#242424}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary{--mdc-slider-active-track-color: #D410AA;--mdc-slider-handle-color: #D410AA;--mdc-slider-focus-handle-color: #D410AA;--mdc-slider-hover-handle-color: #D410AA;--mdc-slider-inactive-track-color: #D3D3D3;--mdc-slider-with-tick-marks-inactive-container-color: #D410AA;--mat-mdc-slider-ripple-color: #D410AA;height:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple{background-color:#ffb3ee8f}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive{opacity:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb{z-index:1;height:40px;width:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill{z-index:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container{bottom:60px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator{background:#242424;opacity:1;color:#fff;position:relative;width:100%;display:flex;justify-content:center;align-items:center}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before{content:\"\";display:flex;position:absolute;left:calc(50% - 7px);bottom:-8px;height:15px;width:15px;border-top:1px solid #ffffff;border-right:1px solid #ffffff;background:#242424;z-index:10;border-top-right-radius:4px;transform:rotate(135deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i2$7.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$7.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i2$7.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "directive", type: DigitsOnlyDirective, selector: "[digitsOnly]", inputs: ["allowNegative", "allowDecimal", "allowOnlyDigits"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14790
|
+
], ngImport: i0, template: "<ng-container>\n <div\n class=\"slider-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n >\n @if (label) {\n <div class=\"slider-label\">{{ label }}</div>\n }\n\n <div class=\"slider\">\n @if (!isBasicSlider) {\n <div class=\"min-value\">\n <span>\n @if (useDecimal()) {\n {{ min | number }}\n } @else {\n {{ min }}\n }\n @if (percentage) {\n %\n }\n </span>\n </div>\n }\n <mat-slider\n [disableRipple]=\"applicationTheme !== 'classic'\"\n #sliderElement\n discrete\n [disabled]=\"disabled\"\n [max]=\"max\"\n [min]=\"min\"\n [step]=\"step\"\n (mouseenter)=\"sliderElement.discrete = true\"\n (mouseleave)=\"sliderElement.discrete = false\"\n [displayWith]=\"formatLabel\"\n >\n @if (isBasicSlider) {\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange($event)\" [(ngModel)]=\"sliderStart\" matSliderThumb />\n } @else {\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderStart\" matSliderStartThumb />\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderEnd\" matSliderEndThumb />\n }\n </mat-slider>\n @if (!isBasicSlider) {\n <div class=\"max-value\">\n <span>\n @if (useDecimal()) {\n {{ max | number }}\n } @else {\n {{ max }}\n }\n @if (percentage) {\n %\n }\n </span>\n </div>\n }\n </div>\n\n @if (showInputs && !this.isBasicSlider) {\n <div class=\"slider-input\">\n <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n @if (minLabel()) {\n <mat-label>\n {{ minLabel() }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n } @else {\n <mat-label>\n {{ 'COMMON.MIN' | uiTranslate | async }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n }\n @if (useDecimal()) {\n <input\n matInput\n [type]=\"'text'\"\n [(ngModel)]=\"sliderStart\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n mask=\"separator.2\"\n thousandSeparator=\",\"\n />\n } @else {\n <input\n matInput\n [type]=\"'number'\"\n [(ngModel)]=\"sliderStart\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n [allowOnlyDigits]=\"true\"\n digitsOnly\n />\n }\n </mat-form-field>\n <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n @if (maxLabel()) {\n <mat-label>\n {{ maxLabel() }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n } @else {\n <mat-label>\n {{ 'COMMON.MAX' | uiTranslate | async }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n }\n @if (useDecimal()) {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'text'\"\n [(ngModel)]=\"sliderEnd\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n data-testid=\"slider.input-end\"\n mask=\"separator.2\"\n thousandSeparator=\",\"\n />\n } @else {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'number'\"\n [(ngModel)]=\"sliderEnd\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n [allowOnlyDigits]=\"true\"\n digitsOnly\n data-testid=\"slider.input-end\"\n />\n }\n </mat-form-field>\n </div>\n }\n\n @if (hasError && touchedControlName) {\n <mat-error class=\"slider-errors\">\n @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{\n translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n }}</span>\n </div>\n }\n @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{\n translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n }}</span>\n </div>\n }\n @if (sliderStart < min) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n </div>\n }\n @if (sliderEnd > max) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n </div>\n }\n </mat-error>\n }\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep mat-form-field .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}:host ::ng-deep mat-form-field .mdc-floating-label--float-above{transform:translateY(-28px) scale(.75)!important}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#e02800!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#e02800!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled *{pointer-events:none;cursor:initial}::ng-deep .slider-container.disabled .mat-mdc-slider *{border-color:#919191!important}::ng-deep .slider-container.disabled .mat-mdc-slider .mdc-slider__thumb:after{display:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#a9c2c9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:auto;margin-right:8px;white-space:nowrap}::ng-deep .slider-container .slider .max-value{width:auto;margin-left:8px;white-space:nowrap}::ng-deep .slider-container .slider-errors{margin-top:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between}::ng-deep .slider-container .slider-input mat-form-field{min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#e02800}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .slider-container[theme=light],::ng-deep .slider-container[theme=dark]{color:#242424}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary{--mdc-slider-active-track-color: #D410AA;--mdc-slider-handle-color: #D410AA;--mdc-slider-focus-handle-color: #D410AA;--mdc-slider-hover-handle-color: #D410AA;--mdc-slider-inactive-track-color: #D3D3D3;--mdc-slider-with-tick-marks-inactive-container-color: #D410AA;--mat-mdc-slider-ripple-color: #D410AA;height:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-hover-ripple,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-slider-focus-ripple{background-color:#ffb3ee8f}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive{opacity:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb{z-index:1;height:40px;width:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill{z-index:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container{bottom:60px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator{background:#242424;opacity:1;color:#fff;position:relative;width:100%;display:flex;justify-content:center;align-items:center}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before{content:\"\";display:flex;position:absolute;left:calc(50% - 7px);bottom:-8px;height:15px;width:15px;border-top:1px solid #ffffff;border-right:1px solid #ffffff;background:#242424;z-index:10;border-top-right-radius:4px;transform:rotate(135deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i2$8.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$8.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i2$8.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "directive", type: DigitsOnlyDirective, selector: "[digitsOnly]", inputs: ["allowNegative", "allowDecimal", "allowOnlyDigits"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14788
14791
|
}
|
|
14789
14792
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SliderComponent, decorators: [{
|
|
14790
14793
|
type: Component,
|
|
@@ -15086,7 +15089,7 @@ class DividerComponent {
|
|
|
15086
15089
|
}
|
|
15087
15090
|
}
|
|
15088
15091
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DividerComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15089
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DividerComponent, selector: "ui-divider", inputs: { size: "size", companyColor: "companyColor", applicationTheme: "applicationTheme", label: "label" }, host: { properties: { "style.--companyColor": "this.companyColor" } }, ngImport: i0, template: "<div class=\"ui-divider-wrapper\">\n <ng-container *ngIf=\"!label; else withLabel\">\n <mat-divider aria-hidden=\"true\" [class]=\"applicationTheme\" [ngClass]=\"size\"></mat-divider>\n </ng-container>\n\n <ng-template #withLabel>\n <div class=\"container\">\n <div class=\"line\" aria-hidden=\"true\"><mat-divider [class]=\"applicationTheme\" [ngClass]=\"size\"></mat-divider></div>\n <div [class]=\"'label' + ' ' + size\">{{ label }}</div>\n <div class=\"line\" aria-hidden=\"true\"><mat-divider [class]=\"applicationTheme\" [ngClass]=\"size\"></mat-divider></div>\n </div>\n </ng-template>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}mat-divider.classic.small{--mat-divider-width: 1px;--mat-divider-color: #E0E0E0}mat-divider.classic.large{--mat-divider-width: 2px;--mat-divider-color: var(--companyColor)}mat-divider.light.small,mat-divider.dark.small{--mat-divider-width: 1px;--mat-divider-color: #D3D3D3}mat-divider.light.large,mat-divider.dark.large{--mat-divider-width: 2px;--mat-divider-color: #242424}.ui-divider-wrapper .container{width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center}.ui-divider-wrapper .line{flex:1}.ui-divider-wrapper .label{font-size:14px;padding:0 8px}.ui-divider-wrapper .label.large{color:#242424}.ui-divider-wrapper .label.small{color:#666}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$
|
|
15092
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DividerComponent, selector: "ui-divider", inputs: { size: "size", companyColor: "companyColor", applicationTheme: "applicationTheme", label: "label" }, host: { properties: { "style.--companyColor": "this.companyColor" } }, ngImport: i0, template: "<div class=\"ui-divider-wrapper\">\n <ng-container *ngIf=\"!label; else withLabel\">\n <mat-divider aria-hidden=\"true\" [class]=\"applicationTheme\" [ngClass]=\"size\"></mat-divider>\n </ng-container>\n\n <ng-template #withLabel>\n <div class=\"container\">\n <div class=\"line\" aria-hidden=\"true\"><mat-divider [class]=\"applicationTheme\" [ngClass]=\"size\"></mat-divider></div>\n <div [class]=\"'label' + ' ' + size\">{{ label }}</div>\n <div class=\"line\" aria-hidden=\"true\"><mat-divider [class]=\"applicationTheme\" [ngClass]=\"size\"></mat-divider></div>\n </div>\n </ng-template>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}mat-divider.classic.small{--mat-divider-width: 1px;--mat-divider-color: #E0E0E0}mat-divider.classic.large{--mat-divider-width: 2px;--mat-divider-color: var(--companyColor)}mat-divider.light.small,mat-divider.dark.small{--mat-divider-width: 1px;--mat-divider-color: #D3D3D3}mat-divider.light.large,mat-divider.dark.large{--mat-divider-width: 2px;--mat-divider-color: #242424}.ui-divider-wrapper .container{width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center}.ui-divider-wrapper .line{flex:1}.ui-divider-wrapper .label{font-size:14px;padding:0 8px}.ui-divider-wrapper .label.large{color:#242424}.ui-divider-wrapper .label.small{color:#666}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
|
|
15090
15093
|
}
|
|
15091
15094
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DividerComponent, decorators: [{
|
|
15092
15095
|
type: Component,
|
|
@@ -15290,7 +15293,7 @@ class TabsComponent {
|
|
|
15290
15293
|
}
|
|
15291
15294
|
}
|
|
15292
15295
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabsComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: IS_MOBILE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15293
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TabsComponent, selector: "ui-tabs", inputs: { companyColor: { classPropertyName: "companyColor", publicName: "companyColor", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: false, isRequired: false, transformFunction: null }, headerContentPadding: { classPropertyName: "headerContentPadding", publicName: "headerContentPadding", isSignal: false, isRequired: false, transformFunction: (value) => value + 'px' }, dynamicHeight: { classPropertyName: "dynamicHeight", publicName: "dynamicHeight", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedTabIndex: "selectedTabIndex", selectedTab: "selectedTab" }, host: { properties: { "style.--color": "this.companyColor", "style.--header-content-padding": "this.headerContentPadding" } }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, static: true }], ngImport: i0, template: "<mat-tab-group\n #tabGroup\n headerPosition=\"above\"\n class=\"tabs-container\"\n [ngClass]=\"'tabs-type-' + ((isMobile$ | async) ? 'underlined' : type)\"\n [class.tabs-container-loading]=\"isLoading()\"\n [attr.theme]=\"applicationTheme\"\n [dynamicHeight]=\"dynamicHeight\"\n [selectedIndex]=\"tabIndex()\"\n [animationDuration]=\"animationDuration\"\n (selectedTabChange)=\"onTabChange($event)\"\n role=\"tablist\"\n>\n <mat-tab\n *ngFor=\"let tab of tabs; trackBy: trackByTabName; let i = index\"\n [disabled]=\"tab.disabled ?? false\"\n [attr.aria-label]=\"tab?.ariaLabel\"\n >\n <ng-template mat-tab-label>\n <a\n data-test-role=\"tab-link\"\n [attr.data-testid]=\"tab.tabName\"\n class=\"tab-name\"\n [href]=\"tab?.linkUrl ? tab.linkUrl : '#'\"\n (click)=\"$event.preventDefault()\"\n [attr.aria-selected]=\"i === tabIndex()\"\n [attr.aria-label]=\"tab.tabLabel + (i === tabIndex() ? ', ' + ('TABS.SELECTED' | uiTranslate | async) : '')\"\n role=\"tab\"\n >\n @if (isLoading()) {\n <ui-skeleton [count]=\"1\"\n [theme]=\"tab.skeletonTheme ?? {}\"\n [isAiTheme]=\"!!tab.isSkeletonAiTheme\"\n ></ui-skeleton>\n } @else {\n <ui-icon\n color=\"rebrand-black\"\n [size]=\"'24'\"\n [tabindex]=\"1\"\n class=\"left-icon\"\n [name]=\"tab.iconLeft!\"\n *ngIf=\"tab?.iconLeft\"\n ></ui-icon>\n <span class=\"label\">{{ tab.tabLabel }}</span>\n <ui-icon\n color=\"rebrand-black\"\n [size]=\"'24'\"\n class=\"right-icon\"\n [name]=\"tab.iconRight!\"\n *ngIf=\"tab?.iconRight\"\n ></ui-icon>\n }\n </a>\n </ng-template>\n <div role=\"tabpanel\" [attr.id]=\"'tabpanel-' + i\" [attr.aria-labelledby]=\"'tab-' + i\">\n <ng-container *ngTemplateOutlet=\"tab.contentTemplateRef\"></ng-container>\n </div>\n </mat-tab>\n</mat-tab-group>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep .mat-mdc-tab-group,:host .mat-mdc-tab-nav-bar{--mdc-tab-indicator-active-indicator-color: var(--color);--mat-tab-header-active-label-text-color: var(--color);--mat-tab-header-active-ripple-color: transparent;--mat-tab-header-inactive-ripple-color: var(--color);--mat-tab-header-active-focus-label-text-color: var(--color);--mat-tab-header-active-focus-indicator-color: var(--color)}:host ::ng-deep .tabs-type-filled mat-tab-header{border-bottom:unset!important;border-right:1px solid #D3D3D3}:host ::ng-deep mat-tab-group{width:100%;height:100%}:host ::ng-deep mat-tab-group .mat-mdc-tab-label-container{padding:4px}:host ::ng-deep mat-tab-group .mdc-tab.cdk-keyboard-focused{position:relative}:host ::ng-deep mat-tab-group .mdc-tab.cdk-keyboard-focused:after{content:\"\";position:absolute;inset:-2px;z-index:10;border-radius:4px;outline:2px solid #242424;animation:focus-ring-animation-main .4s forwards}::ng-deep .tabs-container .mdc-tab-indicator__content{border-color:#276678!important}::ng-deep .tabs-container .tab-name{text-decoration:none!important;display:flex;justify-content:center;align-content:center;color:#242424;outline:unset;font-size:16px;line-height:24px;width:100%}::ng-deep .tabs-container .tab-name .left-icon{margin-right:8px}::ng-deep .tabs-container .tab-name .right-icon{margin-left:8px}::ng-deep .tabs-container .tab-name .left-icon:focus,::ng-deep .tabs-container .tab-name .right-icon:focus{height:24px;outline:1px dashed #888888}::ng-deep .tabs-container ::ng-deep .mdc-tab{min-width:0;padding:0}::ng-deep .tabs-container ::ng-deep .mdc-tab:hover{background:#f6f6f6}::ng-deep .tabs-container.tabs-type-underlined .tab-name{padding:16px 24px}::ng-deep .tabs-container.tabs-type-underlined .mdc-tab--active .tab-name .label{text-shadow:-.5px 0 #242424,.5px 0 #242424}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mat-mdc-tab-header{padding:0 var(--header-content-padding)}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mat-mdc-tab-header-pagination-chevron{border-color:#242424}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mdc-tab{height:64px!important;flex-grow:0!important;margin-left:1px}::ng-deep .tabs-container.tabs-type-filled{--mat-tab-header-active-ripple-color: var(--color);display:flex;flex-direction:row}::ng-deep .tabs-container.tabs-type-filled .mdc-tab--active{background-color:#e9f0f1!important}::ng-deep .tabs-container.tabs-type-filled .mdc-tab--active .tab-name .label{text-shadow:-.5px 0 black,.5px 0 black}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-header{padding:var(--header-content-padding) 0}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-label-container{overflow:auto!important}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-labels{flex-direction:column;padding-top:2px}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab{flex-grow:0!important}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__content,::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__text-label{width:100%}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__text-label{margin:-1px 1px 1px}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab--active ::ng-deep .mdc-tab-indicator:after{content:\"\";position:absolute;left:0;top:8px;width:4px;height:32px;border-radius:0 8px 8px 0;background:#276678}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab-indicator__content{display:none}::ng-deep .tabs-container.tabs-type-filled .tab-name{padding:12px var(--header-content-padding)}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab{position:relative;height:48px!important;min-height:48px!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body-wrapper{width:100%}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body{padding:var(--header-content-padding)}@media (max-width: 600px){::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body{padding:24px}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header{position:relative;padding:0!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header .mat-mdc-tab-header-pagination-disabled{visibility:hidden!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header:after{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:#d3d3d3}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-header{padding:24px 0}}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light],::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark]{--mat-tab-header-inactive-ripple-color: none !important}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{border-color:#d410aa!important}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab:hover,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab:hover{background:none!important;border-bottom:2px solid #242424}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab:hover .mdc-tab-indicator,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab:hover .mdc-tab-indicator{display:none}::ng-deep .tabs-container-loading .mat-mdc-tab.mat-mdc-tab-disabled{opacity:1}::ng-deep .tabs-container-loading .mat-mdc-tab.mat-mdc-tab-disabled.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.4}::ng-deep .mat-mdc-tab-group.tabs-type-filled{--mat-tab-header-active-ripple-color: unset !important}::ng-deep .mat-mdc-tab-group.tabs-type-filled .tab-name{color:#242424}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light],::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark]{--mat-tab-header-inactive-ripple-color: none !important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{border-color:#d410aa!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab--active,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab--active{background-color:#f4f4f4!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab--active .mdc-tab-indicator:after,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab--active .mdc-tab-indicator:after{background-color:#d410aa!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab:hover,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab:hover{background:#fff2fc!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$9.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i2$9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i2$9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "isAiTheme", "applicationTheme"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
15296
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TabsComponent, selector: "ui-tabs", inputs: { companyColor: { classPropertyName: "companyColor", publicName: "companyColor", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: false, isRequired: false, transformFunction: null }, headerContentPadding: { classPropertyName: "headerContentPadding", publicName: "headerContentPadding", isSignal: false, isRequired: false, transformFunction: (value) => value + 'px' }, dynamicHeight: { classPropertyName: "dynamicHeight", publicName: "dynamicHeight", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedTabIndex: "selectedTabIndex", selectedTab: "selectedTab" }, host: { properties: { "style.--color": "this.companyColor", "style.--header-content-padding": "this.headerContentPadding" } }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, static: true }], ngImport: i0, template: "<mat-tab-group\n #tabGroup\n headerPosition=\"above\"\n class=\"tabs-container\"\n [ngClass]=\"'tabs-type-' + ((isMobile$ | async) ? 'underlined' : type)\"\n [class.tabs-container-loading]=\"isLoading()\"\n [attr.theme]=\"applicationTheme\"\n [dynamicHeight]=\"dynamicHeight\"\n [selectedIndex]=\"tabIndex()\"\n [animationDuration]=\"animationDuration\"\n (selectedTabChange)=\"onTabChange($event)\"\n role=\"tablist\"\n>\n <mat-tab\n *ngFor=\"let tab of tabs; trackBy: trackByTabName; let i = index\"\n [disabled]=\"tab.disabled ?? false\"\n [attr.aria-label]=\"tab?.ariaLabel\"\n >\n <ng-template mat-tab-label>\n <a\n data-test-role=\"tab-link\"\n [attr.data-testid]=\"tab.tabName\"\n class=\"tab-name\"\n [href]=\"tab?.linkUrl ? tab.linkUrl : '#'\"\n (click)=\"$event.preventDefault()\"\n [attr.aria-selected]=\"i === tabIndex()\"\n [attr.aria-label]=\"tab.tabLabel + (i === tabIndex() ? ', ' + ('TABS.SELECTED' | uiTranslate | async) : '')\"\n role=\"tab\"\n >\n @if (isLoading()) {\n <ui-skeleton [count]=\"1\"\n [theme]=\"tab.skeletonTheme ?? {}\"\n [isAiTheme]=\"!!tab.isSkeletonAiTheme\"\n ></ui-skeleton>\n } @else {\n <ui-icon\n color=\"rebrand-black\"\n [size]=\"'24'\"\n [tabindex]=\"1\"\n class=\"left-icon\"\n [name]=\"tab.iconLeft!\"\n *ngIf=\"tab?.iconLeft\"\n ></ui-icon>\n <span class=\"label\">{{ tab.tabLabel }}</span>\n <ui-icon\n color=\"rebrand-black\"\n [size]=\"'24'\"\n class=\"right-icon\"\n [name]=\"tab.iconRight!\"\n *ngIf=\"tab?.iconRight\"\n ></ui-icon>\n }\n </a>\n </ng-template>\n <div role=\"tabpanel\" [attr.id]=\"'tabpanel-' + i\" [attr.aria-labelledby]=\"'tab-' + i\">\n <ng-container *ngTemplateOutlet=\"tab.contentTemplateRef\"></ng-container>\n </div>\n </mat-tab>\n</mat-tab-group>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep .mat-mdc-tab-group,:host .mat-mdc-tab-nav-bar{--mdc-tab-indicator-active-indicator-color: var(--color);--mat-tab-header-active-label-text-color: var(--color);--mat-tab-header-active-ripple-color: transparent;--mat-tab-header-inactive-ripple-color: var(--color);--mat-tab-header-active-focus-label-text-color: var(--color);--mat-tab-header-active-focus-indicator-color: var(--color)}:host ::ng-deep .tabs-type-filled mat-tab-header{border-bottom:unset!important;border-right:1px solid #D3D3D3}:host ::ng-deep mat-tab-group{width:100%;height:100%}:host ::ng-deep mat-tab-group .mat-mdc-tab-label-container{padding:4px}:host ::ng-deep mat-tab-group .mdc-tab.cdk-keyboard-focused{position:relative}:host ::ng-deep mat-tab-group .mdc-tab.cdk-keyboard-focused:after{content:\"\";position:absolute;inset:-2px;z-index:10;border-radius:4px;outline:2px solid #242424;animation:focus-ring-animation-main .4s forwards}::ng-deep .tabs-container .mdc-tab-indicator__content{border-color:#276678!important}::ng-deep .tabs-container .tab-name{text-decoration:none!important;display:flex;justify-content:center;align-content:center;color:#242424;outline:unset;font-size:16px;line-height:24px;width:100%}::ng-deep .tabs-container .tab-name .left-icon{margin-right:8px}::ng-deep .tabs-container .tab-name .right-icon{margin-left:8px}::ng-deep .tabs-container .tab-name .left-icon:focus,::ng-deep .tabs-container .tab-name .right-icon:focus{height:24px;outline:1px dashed #888888}::ng-deep .tabs-container ::ng-deep .mdc-tab{min-width:0;padding:0}::ng-deep .tabs-container ::ng-deep .mdc-tab:hover{background:#f6f6f6}::ng-deep .tabs-container.tabs-type-underlined .tab-name{padding:16px 24px}::ng-deep .tabs-container.tabs-type-underlined .mdc-tab--active .tab-name .label{text-shadow:-.5px 0 #242424,.5px 0 #242424}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mat-mdc-tab-header{padding:0 var(--header-content-padding)}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mat-mdc-tab-header-pagination-chevron{border-color:#242424}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mdc-tab{height:64px!important;flex-grow:0!important;margin-left:1px}::ng-deep .tabs-container.tabs-type-filled{--mat-tab-header-active-ripple-color: var(--color);display:flex;flex-direction:row}::ng-deep .tabs-container.tabs-type-filled .mdc-tab--active{background-color:#e9f0f1!important}::ng-deep .tabs-container.tabs-type-filled .mdc-tab--active .tab-name .label{text-shadow:-.5px 0 black,.5px 0 black}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-header{padding:var(--header-content-padding) 0}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-label-container{overflow:auto!important}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-labels{flex-direction:column;padding-top:2px}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab{flex-grow:0!important}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__content,::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__text-label{width:100%}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__text-label{margin:-1px 1px 1px}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab--active ::ng-deep .mdc-tab-indicator:after{content:\"\";position:absolute;left:0;top:8px;width:4px;height:32px;border-radius:0 8px 8px 0;background:#276678}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab-indicator__content{display:none}::ng-deep .tabs-container.tabs-type-filled .tab-name{padding:12px var(--header-content-padding)}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab{position:relative;height:48px!important;min-height:48px!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body-wrapper{width:100%}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body{padding:var(--header-content-padding)}@media (max-width: 600px){::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body{padding:24px}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header{position:relative;padding:0!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header .mat-mdc-tab-header-pagination-disabled{visibility:hidden!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header:after{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:#d3d3d3}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-header{padding:24px 0}}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light],::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark]{--mat-tab-header-inactive-ripple-color: none !important}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{border-color:#d410aa!important}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab:hover,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab:hover{background:none!important;border-bottom:2px solid #242424}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab:hover .mdc-tab-indicator,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab:hover .mdc-tab-indicator{display:none}::ng-deep .tabs-container-loading .mat-mdc-tab.mat-mdc-tab-disabled{opacity:1}::ng-deep .tabs-container-loading .mat-mdc-tab.mat-mdc-tab-disabled.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.4}::ng-deep .mat-mdc-tab-group.tabs-type-filled{--mat-tab-header-active-ripple-color: unset !important}::ng-deep .mat-mdc-tab-group.tabs-type-filled .tab-name{color:#242424}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light],::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark]{--mat-tab-header-inactive-ripple-color: none !important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{border-color:#d410aa!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab--active,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab--active{background-color:#f4f4f4!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab--active .mdc-tab-indicator:after,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab--active .mdc-tab-indicator:after{background-color:#d410aa!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab:hover,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab:hover{background:#fff2fc!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$a.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i2$a.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i2$a.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "isAiTheme", "applicationTheme"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
15294
15297
|
}
|
|
15295
15298
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabsComponent, decorators: [{
|
|
15296
15299
|
type: Component,
|
|
@@ -15690,7 +15693,7 @@ class SegmentedButtonComponent {
|
|
|
15690
15693
|
useExisting: forwardRef(() => SegmentedButtonComponent),
|
|
15691
15694
|
multi: true,
|
|
15692
15695
|
},
|
|
15693
|
-
], ngImport: i0, template: "<mat-button-toggle-group\n class=\"segmented-button-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled, 'full-width': fullWidth }\"\n [value]=\"value\"\n [hideSingleSelectionIndicator]=\"true\"\n (change)=\"manualChangeValue($event)\"\n>\n <mat-button-toggle\n [disableRipple]=\"true\"\n *ngFor=\"let button of buttonConfig\"\n [value]=\"button.value\"\n [ngClass]=\"{ disabled: button.disabled }\"\n [matTooltip]=\"button.tooltip ?? ''\"\n >\n <ng-container *ngIf=\"button.template; else label\" [ngTemplateOutlet]=\"button.template\"></ng-container>\n <ng-template #label>{{ button.label }}</ng-template>\n </mat-button-toggle>\n</mat-button-toggle-group>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}h1,h2,h3,.h1,.h2,.h3{font-weight:400;margin:0}h4,h5,h6,.h4,.h5,.h6{font-weight:700;margin:0}h1,.h1{font-size:40px;line-height:60px;font-weight:700}h2,.h2{font-size:24px;line-height:36px}h2.bold,.h2.bold{font-weight:700}h3,.h3{font-size:20px;line-height:28px}h3.bold,.h3.bold{font-weight:700}h4,.h4{font-size:16px;line-height:24px}h5,.h5{font-size:14px;line-height:20px}h6,.h6{font-size:12px;line-height:16px;text-transform:uppercase}body{font-size:14px;line-height:20px}strong,b{font-weight:700!important}.featured{font-size:16px;line-height:24px}p .semibold,.featured .semibold,.caption .semibold{font-weight:600;color:#46a997}small{font-size:8px;line-height:12px}caption,.caption{font-size:12px;line-height:16px;display:inline-block}*[theme=dark] h1,*[theme=dark] .h1,*[theme=light] h1,*[theme=light] .h1{color:#242424;font-size:32px;line-height:48px;font-weight:400}*[theme=dark] h1.black,*[theme=dark] .h1.black,*[theme=light] h1.black,*[theme=light] .h1.black{font-family:ModernGothic,sans-serif!important;font-weight:900}*[theme=dark] h2,*[theme=dark] .h2,*[theme=light] h2,*[theme=light] .h2{color:#242424;font-size:24px;line-height:30px;font-weight:900;font-family:ModernGothic,sans-serif!important}*[theme=dark] h3,*[theme=dark] .h3,*[theme=light] h3,*[theme=light] .h3{font-size:20px;line-height:26px;font-weight:400;color:#242424}*[theme=dark] h3.bold,*[theme=dark] .h3.bold,*[theme=light] h3.bold,*[theme=light] .h3.bold{font-family:ModernGothic,sans-serif!important;font-weight:700}*[theme=dark] h4,*[theme=dark] .h4,*[theme=light] h4,*[theme=light] .h4{font-size:16px;line-height:20px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] h5,*[theme=dark] .h5,*[theme=light] h5,*[theme=light] .h5{font-size:14px;line-height:18px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] .body-large,*[theme=light] .body-large{font-weight:700;font-size:14px;line-height:22px}*[theme=dark] .body-large-bold,*[theme=light] .body-large-bold{font-weight:700;font-size:16px;line-height:24px}*[theme=dark] .body-large-regular,*[theme=light] .body-large-regular{font-weight:400;font-size:16px;line-height:24px}*[theme=dark] .body-small-bold,*[theme=light] .body-small-bold{font-weight:700;font-size:12px;line-height:16px}*[theme=dark] .body-small-regular,*[theme=light] .body-small-regular{font-weight:400;font-size:12px;line-height:16px}*[theme=dark] .hyperlink-large,*[theme=light] .hyperlink-large{font-weight:500;font-size:16px;line-height:24px}*[theme=dark] .hyperlink,*[theme=light] .hyperlink{font-weight:500;font-size:14px;line-height:22px}*[theme=dark] .hyperlink-small,*[theme=light] .hyperlink-small{font-weight:500;font-size:12px;line-height:16px}*[theme=dark] .button-label,*[theme=light] .button-label{font-weight:500;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .label,*[theme=light] .label{font-weight:400;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .large-hover-state,*[theme=light] .large-hover-state{font-weight:700;text-decoration:underline;font-size:16px;line-height:24px}*[theme=dark] .hover-state,*[theme=light] .hover-state{font-weight:700;text-decoration:underline;font-size:14px;line-height:22px}*[theme=dark] h1,*[theme=dark] .h1,*[theme=dark] h2,*[theme=dark] .h2,*[theme=dark] h3,*[theme=dark] .h3,*[theme=dark] h4,*[theme=dark] .h4,*[theme=dark] h5,*[theme=dark] .h5{color:#fff}.segmented-button-container.full-width,.segmented-button-container.full-width .mat-button-toggle{width:100%}.segmented-button-container[theme=classic] .mat-button-toggle{min-width:80px;height:40px}.segmented-button-container[theme=classic] .mat-button-toggle ::ng-deep .mat-button-toggle-button,.segmented-button-container[theme=classic] .mat-button-toggle .mat-button-toggle-label-content{height:40px;display:flex;align-items:center}.segmented-button-container[theme=classic] .mat-button-toggle.mat-button-toggle-checked{background-color:#276678;color:#fff}.segmented-button-container[theme=light],.segmented-button-container[theme=dark]{border-color:#919191;overflow:visible}.segmented-button-container[theme=light]:first-child,.segmented-button-container[theme=light] .mat-button-toggle:first-child,.segmented-button-container[theme=dark]:first-child,.segmented-button-container[theme=dark] .mat-button-toggle:first-child{border-bottom-left-radius:10px;border-top-left-radius:10px}.segmented-button-container[theme=light]:last-child,.segmented-button-container[theme=light] .mat-button-toggle:last-child,.segmented-button-container[theme=dark]:last-child,.segmented-button-container[theme=dark] .mat-button-toggle:last-child{border-bottom-right-radius:10px;border-top-right-radius:10px}.segmented-button-container[theme=light] .mat-button-toggle,.segmented-button-container[theme=dark] .mat-button-toggle{min-height:48px;min-width:80px;border-color:#919191}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#242424;font-weight:400;font-size:14px;font-feature-settings:\"capb\"}.segmented-button-container[theme=light] .mat-button-toggle:hover,.segmented-button-container[theme=dark] .mat-button-toggle:hover{background:#fff2fc}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked{background:#ffe6fa}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content{font-weight:700}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay{display:none}.segmented-button-container[theme=light] .mat-button-toggle.disabled,.segmented-button-container[theme=dark] .mat-button-toggle.disabled{pointer-events:none;background:#fff}.segmented-button-container[theme=light] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}.segmented-button-container.disabled{pointer-events:none}.segmented-button-container.disabled .mat-button-toggle{background:#fff}.segmented-button-container.disabled .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$a.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$a.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15696
|
+
], ngImport: i0, template: "<mat-button-toggle-group\n class=\"segmented-button-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled, 'full-width': fullWidth }\"\n [value]=\"value\"\n [hideSingleSelectionIndicator]=\"true\"\n (change)=\"manualChangeValue($event)\"\n>\n <mat-button-toggle\n [disableRipple]=\"true\"\n *ngFor=\"let button of buttonConfig\"\n [value]=\"button.value\"\n [ngClass]=\"{ disabled: button.disabled }\"\n [matTooltip]=\"button.tooltip ?? ''\"\n >\n <ng-container *ngIf=\"button.template; else label\" [ngTemplateOutlet]=\"button.template\"></ng-container>\n <ng-template #label>{{ button.label }}</ng-template>\n </mat-button-toggle>\n</mat-button-toggle-group>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}h1,h2,h3,.h1,.h2,.h3{font-weight:400;margin:0}h4,h5,h6,.h4,.h5,.h6{font-weight:700;margin:0}h1,.h1{font-size:40px;line-height:60px;font-weight:700}h2,.h2{font-size:24px;line-height:36px}h2.bold,.h2.bold{font-weight:700}h3,.h3{font-size:20px;line-height:28px}h3.bold,.h3.bold{font-weight:700}h4,.h4{font-size:16px;line-height:24px}h5,.h5{font-size:14px;line-height:20px}h6,.h6{font-size:12px;line-height:16px;text-transform:uppercase}body{font-size:14px;line-height:20px}strong,b{font-weight:700!important}.featured{font-size:16px;line-height:24px}p .semibold,.featured .semibold,.caption .semibold{font-weight:600;color:#46a997}small{font-size:8px;line-height:12px}caption,.caption{font-size:12px;line-height:16px;display:inline-block}*[theme=dark] h1,*[theme=dark] .h1,*[theme=light] h1,*[theme=light] .h1{color:#242424;font-size:32px;line-height:48px;font-weight:400}*[theme=dark] h1.black,*[theme=dark] .h1.black,*[theme=light] h1.black,*[theme=light] .h1.black{font-family:ModernGothic,sans-serif!important;font-weight:900}*[theme=dark] h2,*[theme=dark] .h2,*[theme=light] h2,*[theme=light] .h2{color:#242424;font-size:24px;line-height:30px;font-weight:900;font-family:ModernGothic,sans-serif!important}*[theme=dark] h3,*[theme=dark] .h3,*[theme=light] h3,*[theme=light] .h3{font-size:20px;line-height:26px;font-weight:400;color:#242424}*[theme=dark] h3.bold,*[theme=dark] .h3.bold,*[theme=light] h3.bold,*[theme=light] .h3.bold{font-family:ModernGothic,sans-serif!important;font-weight:700}*[theme=dark] h4,*[theme=dark] .h4,*[theme=light] h4,*[theme=light] .h4{font-size:16px;line-height:20px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] h5,*[theme=dark] .h5,*[theme=light] h5,*[theme=light] .h5{font-size:14px;line-height:18px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] .body-large,*[theme=light] .body-large{font-weight:700;font-size:14px;line-height:22px}*[theme=dark] .body-large-bold,*[theme=light] .body-large-bold{font-weight:700;font-size:16px;line-height:24px}*[theme=dark] .body-large-regular,*[theme=light] .body-large-regular{font-weight:400;font-size:16px;line-height:24px}*[theme=dark] .body-small-bold,*[theme=light] .body-small-bold{font-weight:700;font-size:12px;line-height:16px}*[theme=dark] .body-small-regular,*[theme=light] .body-small-regular{font-weight:400;font-size:12px;line-height:16px}*[theme=dark] .hyperlink-large,*[theme=light] .hyperlink-large{font-weight:500;font-size:16px;line-height:24px}*[theme=dark] .hyperlink,*[theme=light] .hyperlink{font-weight:500;font-size:14px;line-height:22px}*[theme=dark] .hyperlink-small,*[theme=light] .hyperlink-small{font-weight:500;font-size:12px;line-height:16px}*[theme=dark] .button-label,*[theme=light] .button-label{font-weight:500;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .label,*[theme=light] .label{font-weight:400;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .large-hover-state,*[theme=light] .large-hover-state{font-weight:700;text-decoration:underline;font-size:16px;line-height:24px}*[theme=dark] .hover-state,*[theme=light] .hover-state{font-weight:700;text-decoration:underline;font-size:14px;line-height:22px}*[theme=dark] h1,*[theme=dark] .h1,*[theme=dark] h2,*[theme=dark] .h2,*[theme=dark] h3,*[theme=dark] .h3,*[theme=dark] h4,*[theme=dark] .h4,*[theme=dark] h5,*[theme=dark] .h5{color:#fff}.segmented-button-container.full-width,.segmented-button-container.full-width .mat-button-toggle{width:100%}.segmented-button-container[theme=classic] .mat-button-toggle{min-width:80px;height:40px}.segmented-button-container[theme=classic] .mat-button-toggle ::ng-deep .mat-button-toggle-button,.segmented-button-container[theme=classic] .mat-button-toggle .mat-button-toggle-label-content{height:40px;display:flex;align-items:center}.segmented-button-container[theme=classic] .mat-button-toggle.mat-button-toggle-checked{background-color:#276678;color:#fff}.segmented-button-container[theme=light],.segmented-button-container[theme=dark]{border-color:#919191;overflow:visible}.segmented-button-container[theme=light]:first-child,.segmented-button-container[theme=light] .mat-button-toggle:first-child,.segmented-button-container[theme=dark]:first-child,.segmented-button-container[theme=dark] .mat-button-toggle:first-child{border-bottom-left-radius:10px;border-top-left-radius:10px}.segmented-button-container[theme=light]:last-child,.segmented-button-container[theme=light] .mat-button-toggle:last-child,.segmented-button-container[theme=dark]:last-child,.segmented-button-container[theme=dark] .mat-button-toggle:last-child{border-bottom-right-radius:10px;border-top-right-radius:10px}.segmented-button-container[theme=light] .mat-button-toggle,.segmented-button-container[theme=dark] .mat-button-toggle{min-height:48px;min-width:80px;border-color:#919191}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#242424;font-weight:400;font-size:14px;font-feature-settings:\"capb\"}.segmented-button-container[theme=light] .mat-button-toggle:hover,.segmented-button-container[theme=dark] .mat-button-toggle:hover{background:#fff2fc}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked{background:#ffe6fa}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content{font-weight:700}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay{display:none}.segmented-button-container[theme=light] .mat-button-toggle.disabled,.segmented-button-container[theme=dark] .mat-button-toggle.disabled{pointer-events:none;background:#fff}.segmented-button-container[theme=light] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}.segmented-button-container.disabled{pointer-events:none}.segmented-button-container.disabled .mat-button-toggle{background:#fff}.segmented-button-container.disabled .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$b.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$b.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15694
15697
|
}
|
|
15695
15698
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SegmentedButtonComponent, decorators: [{
|
|
15696
15699
|
type: Component,
|
|
@@ -16141,13 +16144,13 @@ class PhoneInputComponent {
|
|
|
16141
16144
|
ev.preventDefault();
|
|
16142
16145
|
ev.stopPropagation();
|
|
16143
16146
|
}
|
|
16144
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PhoneInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i2$
|
|
16147
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PhoneInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i2$5.ErrorStateMatcher }, { token: i1$2.UntypedFormBuilder }, { token: i2$3.FocusMonitor }, { token: i0.ChangeDetectorRef }, { token: i2.DomSanitizer }, { token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16145
16148
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PhoneInputComponent, selector: "ui-phone-input", inputs: { value: "value", countryList: "countryList", placeholder: "placeholder", disabled: "disabled", required: "required", applicationTheme: "applicationTheme", fullWidth: "fullWidth", errors: "errors", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors" }, host: { properties: { "attr.disabled": "this.disabled", "attr.theme": "this.applicationTheme", "id": "this.id", "class.floated": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, providers: [
|
|
16146
16149
|
{
|
|
16147
16150
|
provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
|
|
16148
16151
|
useValue: { overlayPanelClass: 'phone-number-autocomplete' },
|
|
16149
16152
|
},
|
|
16150
|
-
], viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true, read: ElementRef, static: true }, { propertyName: "select", first: true, predicate: MatSelect, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<mat-form-field\n [formGroup]=\"form\"\n appearance=\"outline\"\n [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [ngClass]=\"{ disabled: form.disabled || disabled, 'full-width': fullWidth }\"\n>\n <mat-label>{{ 'COMMON.PHONE_NUMBER' | uiTranslate | async }} <span *ngIf=\"required\">*</span></mat-label>\n\n <div matPrefix class=\"country\">\n <button class=\"selected-flag\" matPrefix *ngIf=\"selectedCountry\">\n <img [height]=\"20\" [width]=\"24\" [attr.src]=\"countryFlagSrc + selectedCountry?.alpha2Code?.toLowerCase() + '.svg'\"\n [alt]=\"'Country flag ' + selectedCountry?.alpha2Code?.toLowerCase()\">\n </button>\n <mat-select\n #select\n (selectionChange)=\"onOptionsSelected($event.value)\"\n [value]=\"selectedCountry\"\n [disableOptionCentering]=\"true\"\n [panelClass]=\"'phone-number-select' + ' ' + applicationTheme\"\n [ngClass]=\"{ opened: select.panelOpen }\"\n >\n <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search\n [formControl]=\"selectFilterCtrl\"\n ngDefaultControl\n placeholderLabel=\"\"\n noEntriesFoundLabel=\"\"\n >\n <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n </ngx-mat-select-search>\n </mat-option>\n <mat-option *ngFor=\"let country of countries$ | async; trackBy: filteredCountryTrackByMethod\" [value]=\"country\">\n <div class=\"country-option\">\n <img [height]=\"20\" [width]=\"24\" [attr.src]=\"countryFlagSrc + country?.alpha2Code?.toLowerCase()! + '.svg'\"\n [alt]=\"'Country flag ' + country?.alpha2Code?.toLowerCase()!\">\n <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) | joinStrings : ' ' }}</small>\n </div>\n </mat-option>\n </mat-select>\n </div>\n\n <input\n (input)=\"onInput(form.get('phone_number')!.value)\"\n formControlName=\"phone_number\"\n (click)=\"disableClick($event)\"\n [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n [required]=\"required\"\n matInput\n type=\"text\"\n />\n\n <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n <ng-container *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of _errors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : ('COMMON.PHONE_NUMBER' | uiTranslate | async)\"></ui-validation-error>\n\n </mat-hint>\n</mat-form-field>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;align-items:center}:host .selected-flag{display:flex;position:relative;margin-right:1rem;align-items:center}:host mat-spinner{padding:0 20px}:host .country{cursor:pointer!important;display:flex;align-items:center;margin:-8px 12px 0 16px}:host .country button{margin:0 8px 0 0;background:transparent;border:unset;padding:0}:host ::ng-deep .mat-mdc-select-trigger{display:flex;gap:8px}:host mat-select{flex:0}:host .mat-mdc-form-field{min-width:320px}:host .mat-mdc-form-field.full-width{width:100%}:host .mat-mdc-form-field.disabled ::ng-deep *{border-color:#d3d3d3;color:#d3d3d3;pointer-events:none}:host .mat-mdc-form-field.disabled ::ng-deep * .mat-mdc-select-arrow{opacity:.1}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow{background:url('data:image/svg+xml,<svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path d=\"M12 17.025L6 11.025L7.4 9.625L12 14.225L16.6 9.625L18 11.025L12 17.025Z\" fill=\"currentColor\"/>%0A</svg>%0A');background-size:cover;width:16px;height:16px}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow svg,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow svg{display:none}:host[theme=dark] mat-select.opened ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select.opened ::ng-deep .mat-mdc-select-arrow{background:url('data:image/svg+xml,<svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path d=\"M12 9.6249L18 15.6249L16.6 17.0249L12 12.4249L7.4 17.0249L6 15.6249L12 9.6249Z\" fill=\"currentColor\"/>%0A</svg>%0A');background-size:cover;width:16px;height:16px}::ng-deep .mat-form-field-appearance-outline mat-select .mat-select-arrow-wrapper{transform:none}::ng-deep .mat-select-panel.phone-number-select{margin-top:36px;margin-left:45px}::ng-deep .mat-select-search-inner{box-shadow:none!important;height:48px;background-color:#fff!important;border-bottom:none!important}::ng-deep .mat-select-search-inner .mat-select-search-inner-row{width:100%}::ng-deep .mat-select-search-inner button.mat-select-search-clear{right:35px}::ng-deep .mat-select-search-inner button.mat-select-search-clear mat-icon{font-size:20px}@media screen and (min-width: 599px){::ng-deep .mat-select-panel.phone-number-select{margin-left:-33px;min-width:510px}::ng-deep .mat-select-search-inner{min-width:calc(100% + 33px)!important}}ngx-mat-select-search ::ng-deep button .mat-mdc-button-persistent-ripple,ngx-mat-select-search ::ng-deep button .mat-ripple,ngx-mat-select-search ::ng-deep button .mat-mdc-button-ripple{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "directive", type: i9.MatSelectSearchClearDirective, selector: "[ngxMatSelectSearchClear]" }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }, { kind: "pipe", type: JoinStringsPipe, name: "joinStrings" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16153
|
+
], viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true, read: ElementRef, static: true }, { propertyName: "select", first: true, predicate: MatSelect, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<mat-form-field\n [formGroup]=\"form\"\n appearance=\"outline\"\n [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [ngClass]=\"{ disabled: form.disabled || disabled, 'full-width': fullWidth }\"\n>\n <mat-label>{{ 'COMMON.PHONE_NUMBER' | uiTranslate | async }} <span *ngIf=\"required\">*</span></mat-label>\n\n <div matPrefix class=\"country\">\n <button class=\"selected-flag\" matPrefix *ngIf=\"selectedCountry\">\n <img [height]=\"20\" [width]=\"24\" [attr.src]=\"countryFlagSrc + selectedCountry?.alpha2Code?.toLowerCase() + '.svg'\"\n [alt]=\"'Country flag ' + selectedCountry?.alpha2Code?.toLowerCase()\">\n </button>\n <mat-select\n #select\n (selectionChange)=\"onOptionsSelected($event.value)\"\n [value]=\"selectedCountry\"\n [disableOptionCentering]=\"true\"\n [panelClass]=\"'phone-number-select' + ' ' + applicationTheme\"\n [ngClass]=\"{ opened: select.panelOpen }\"\n >\n <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search\n [formControl]=\"selectFilterCtrl\"\n ngDefaultControl\n placeholderLabel=\"\"\n noEntriesFoundLabel=\"\"\n >\n <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n </ngx-mat-select-search>\n </mat-option>\n <mat-option *ngFor=\"let country of countries$ | async; trackBy: filteredCountryTrackByMethod\" [value]=\"country\">\n <div class=\"country-option\">\n <img [height]=\"20\" [width]=\"24\" [attr.src]=\"countryFlagSrc + country?.alpha2Code?.toLowerCase()! + '.svg'\"\n [alt]=\"'Country flag ' + country?.alpha2Code?.toLowerCase()!\">\n <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) | joinStrings : ' ' }}</small>\n </div>\n </mat-option>\n </mat-select>\n </div>\n\n <input\n (input)=\"onInput(form.get('phone_number')!.value)\"\n formControlName=\"phone_number\"\n (click)=\"disableClick($event)\"\n [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n [required]=\"required\"\n matInput\n type=\"text\"\n />\n\n <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n <ng-container *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of _errors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : ('COMMON.PHONE_NUMBER' | uiTranslate | async)\"></ui-validation-error>\n\n </mat-hint>\n</mat-form-field>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;align-items:center}:host .selected-flag{display:flex;position:relative;margin-right:1rem;align-items:center}:host mat-spinner{padding:0 20px}:host .country{cursor:pointer!important;display:flex;align-items:center;margin:-8px 12px 0 16px}:host .country button{margin:0 8px 0 0;background:transparent;border:unset;padding:0}:host ::ng-deep .mat-mdc-select-trigger{display:flex;gap:8px}:host mat-select{flex:0}:host .mat-mdc-form-field{min-width:320px}:host .mat-mdc-form-field.full-width{width:100%}:host .mat-mdc-form-field.disabled ::ng-deep *{border-color:#d3d3d3;color:#d3d3d3;pointer-events:none}:host .mat-mdc-form-field.disabled ::ng-deep * .mat-mdc-select-arrow{opacity:.1}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow{background:url('data:image/svg+xml,<svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path d=\"M12 17.025L6 11.025L7.4 9.625L12 14.225L16.6 9.625L18 11.025L12 17.025Z\" fill=\"currentColor\"/>%0A</svg>%0A');background-size:cover;width:16px;height:16px}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow svg,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow svg{display:none}:host[theme=dark] mat-select.opened ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select.opened ::ng-deep .mat-mdc-select-arrow{background:url('data:image/svg+xml,<svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A<path d=\"M12 9.6249L18 15.6249L16.6 17.0249L12 12.4249L7.4 17.0249L6 15.6249L12 9.6249Z\" fill=\"currentColor\"/>%0A</svg>%0A');background-size:cover;width:16px;height:16px}::ng-deep .mat-form-field-appearance-outline mat-select .mat-select-arrow-wrapper{transform:none}::ng-deep .mat-select-panel.phone-number-select{margin-top:36px;margin-left:45px}::ng-deep .mat-select-search-inner{box-shadow:none!important;height:48px;background-color:#fff!important;border-bottom:none!important}::ng-deep .mat-select-search-inner .mat-select-search-inner-row{width:100%}::ng-deep .mat-select-search-inner button.mat-select-search-clear{right:35px}::ng-deep .mat-select-search-inner button.mat-select-search-clear mat-icon{font-size:20px}@media screen and (min-width: 599px){::ng-deep .mat-select-panel.phone-number-select{margin-left:-33px;min-width:510px}::ng-deep .mat-select-search-inner{min-width:calc(100% + 33px)!important}}ngx-mat-select-search ::ng-deep button .mat-mdc-button-persistent-ripple,ngx-mat-select-search ::ng-deep button .mat-ripple,ngx-mat-select-search ::ng-deep button .mat-mdc-button-ripple{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "directive", type: i9.MatSelectSearchClearDirective, selector: "[ngxMatSelectSearchClear]" }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }, { kind: "pipe", type: JoinStringsPipe, name: "joinStrings" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16151
16154
|
}
|
|
16152
16155
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PhoneInputComponent, decorators: [{
|
|
16153
16156
|
type: Component,
|
|
@@ -16161,7 +16164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
16161
16164
|
type: Optional
|
|
16162
16165
|
}, {
|
|
16163
16166
|
type: Self
|
|
16164
|
-
}] }, { type: i2$
|
|
16167
|
+
}] }, { type: i2$5.ErrorStateMatcher }, { type: i1$2.UntypedFormBuilder }, { type: i2$3.FocusMonitor }, { type: i0.ChangeDetectorRef }, { type: i2.DomSanitizer }, { type: undefined, decorators: [{
|
|
16165
16168
|
type: Optional
|
|
16166
16169
|
}, {
|
|
16167
16170
|
type: Inject,
|
|
@@ -17295,7 +17298,7 @@ class SpiderChartComponent {
|
|
|
17295
17298
|
return label.substring(firstLine.length).trim();
|
|
17296
17299
|
}
|
|
17297
17300
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpiderChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17298
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpiderChartComponent, selector: "ui-spider-chart", inputs: { size: "size", spiderChartData: "spiderChartData", stepSize: "stepSize", ariaLabel: "ariaLabel", loading: "loading", applicationTheme: "applicationTheme" }, viewQueries: [{ propertyName: "chart", first: true, predicate: BaseChartDirective, descendants: true }, { propertyName: "labelContainers", predicate: ["labelContainer"], descendants: true }, { propertyName: "fakeDataPoints", predicate: ["fakeDataPoints"], descendants: true }, { propertyName: "fakeDataPointsSecondary", predicate: ["fakeDataPointsSecondary"], descendants: true }, { propertyName: "legendItems", predicate: ["legendItem"], descendants: true }], ngImport: i0, template: "<div class=\"spider-chart-container\"\n tabindex=\"0\"\n [attr.aria-label]=\"ariaLabel\">\n <div class=\"spacing-container\"\n [ngClass]=\"{'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading}\">\n <div class=\"chart-container\"\n [style.width]=\"size === 'large' ? '280px' : '200px'\"\n [style.height]=\"size === 'large' ? '280px' : '200px'\">\n @if (!loading) {\n <canvas\n baseChart\n [data]=\"radarChartData\"\n [options]=\"radarChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n } @else {\n <canvas\n baseChart\n [data]=\"loadingChartData\"\n [options]=\"loadingChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n <ui-spinner></ui-spinner>\n }\n\n @if (labelPositionsVisible) {\n <div class=\"overlay-container\">\n @for (label of spiderChartData.labels; track label) {\n <div class=\"label-container\" #labelContainer\n [matTooltip]=\"spiderChartData.labelDescription[$index]\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n (keydown)=\"onLabelKeyDown($event, $index)\"\n [attr.aria-label]=\"spiderChartData.labelDescription[$index]\"\n [style.left]=\"getCenteredLabelLeftPosition(label, labelContainer.offsetWidth)\"\n [style.bottom]=\"getCenteredLabelBottomPosition(label, labelContainer.offsetHeight)\">\n @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n {{ label }}\n </div>\n } @else {\n <div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getFirstLine }}</div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getSecondLine : this }}</div>\n </div>\n }\n <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n </div>\n <span class=\"fake-data-points\" #fakeDataPoints\n [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index)\">\n </span>\n @if (radarChartData.datasets.length > 1) {\n <span class=\"fake-data-points-secondary\" #fakeDataPointsSecondary\n [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\">\n </span>\n }\n }\n </div>\n }\n </div>\n </div>\n @if (radarChartData.datasets.length > 0) {\n <div class=\"legend-container\">\n @for (dataset of radarChartData.datasets; track dataset.label) {\n <div class=\"legend-item\"\n (click)=\"toggleDatasetVisibility($index)\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n role=\"button\"\n [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n [attr.aria-label]=\"isDatasetVisible($index) ?\n ((translationContext + 'DATASET_VISIBLE') | uiTranslate : { dataset: dataset.label } | async) :\n ((translationContext + 'DATASET_HIDDEN') | uiTranslate : { dataset: dataset.label } | async)\"\n (keydown)=\"onLegendItemKeyDown($event, $index)\"\n #legendItem>\n <span class=\"legend-line\" [ngClass]=\"{'solid-line': $index === 0, 'dashed-line': $index === 1}\"></span>\n <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n {{ dataset.label }}\n </span>\n </div>\n }\n </div>\n }\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.spider-chart-container{display:flex;flex-direction:column;align-items:center}.spider-chart-container .spacing-container{padding:40px 140px}.spider-chart-container .spacing-container.small-spacing{padding:0 80px}.spider-chart-container .spacing-container .chart-container{position:relative}.spider-chart-container .spacing-container .chart-container .overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container{display:flex;gap:4px;position:absolute;pointer-events:all;cursor:pointer}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .fake-data-points{visibility:hidden}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container:focus{outline:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .label{font-size:12px;border-bottom:1px dashed #D3D3D3;white-space:nowrap;overflow:hidden;width:fit-content;text-overflow:ellipsis}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .value{font-weight:700}.spider-chart-container .legend-container{display:flex;gap:16px;cursor:pointer}.spider-chart-container .legend-container .legend-item{display:flex;align-items:center;gap:8px}.spider-chart-container .legend-container .legend-item .legend-line{display:inline-block;width:11px;height:4px}.spider-chart-container .legend-container .legend-item .solid-line{background-color:#d410aa}.spider-chart-container .legend-container .legend-item .dashed-line{border-top:2px dashed #242424}:host ::ng-deep .spider-chart-container .spinner-container.loader{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type:
|
|
17301
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpiderChartComponent, selector: "ui-spider-chart", inputs: { size: "size", spiderChartData: "spiderChartData", stepSize: "stepSize", ariaLabel: "ariaLabel", loading: "loading", applicationTheme: "applicationTheme" }, viewQueries: [{ propertyName: "chart", first: true, predicate: BaseChartDirective, descendants: true }, { propertyName: "labelContainers", predicate: ["labelContainer"], descendants: true }, { propertyName: "fakeDataPoints", predicate: ["fakeDataPoints"], descendants: true }, { propertyName: "fakeDataPointsSecondary", predicate: ["fakeDataPointsSecondary"], descendants: true }, { propertyName: "legendItems", predicate: ["legendItem"], descendants: true }], ngImport: i0, template: "<div class=\"spider-chart-container\"\n tabindex=\"0\"\n [attr.aria-label]=\"ariaLabel\">\n <div class=\"spacing-container\"\n [ngClass]=\"{'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading}\">\n <div class=\"chart-container\"\n [style.width]=\"size === 'large' ? '280px' : '200px'\"\n [style.height]=\"size === 'large' ? '280px' : '200px'\">\n @if (!loading) {\n <canvas\n baseChart\n [data]=\"radarChartData\"\n [options]=\"radarChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n } @else {\n <canvas\n baseChart\n [data]=\"loadingChartData\"\n [options]=\"loadingChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n <ui-spinner></ui-spinner>\n }\n\n @if (labelPositionsVisible) {\n <div class=\"overlay-container\">\n @for (label of spiderChartData.labels; track label) {\n <div class=\"label-container\" #labelContainer\n [matTooltip]=\"spiderChartData.labelDescription[$index]\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n (keydown)=\"onLabelKeyDown($event, $index)\"\n [attr.aria-label]=\"spiderChartData.labelDescription[$index]\"\n [style.left]=\"getCenteredLabelLeftPosition(label, labelContainer.offsetWidth)\"\n [style.bottom]=\"getCenteredLabelBottomPosition(label, labelContainer.offsetHeight)\">\n @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n {{ label }}\n </div>\n } @else {\n <div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getFirstLine }}</div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getSecondLine : this }}</div>\n </div>\n }\n <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n </div>\n <span class=\"fake-data-points\" #fakeDataPoints\n [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index)\">\n </span>\n @if (radarChartData.datasets.length > 1) {\n <span class=\"fake-data-points-secondary\" #fakeDataPointsSecondary\n [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\">\n </span>\n }\n }\n </div>\n }\n </div>\n </div>\n @if (radarChartData.datasets.length > 0) {\n <div class=\"legend-container\">\n @for (dataset of radarChartData.datasets; track dataset.label) {\n <div class=\"legend-item\"\n (click)=\"toggleDatasetVisibility($index)\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n role=\"button\"\n [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n [attr.aria-label]=\"isDatasetVisible($index) ?\n ((translationContext + 'DATASET_VISIBLE') | uiTranslate : { dataset: dataset.label } | async) :\n ((translationContext + 'DATASET_HIDDEN') | uiTranslate : { dataset: dataset.label } | async)\"\n (keydown)=\"onLegendItemKeyDown($event, $index)\"\n #legendItem>\n <span class=\"legend-line\" [ngClass]=\"{'solid-line': $index === 0, 'dashed-line': $index === 1}\"></span>\n <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n {{ dataset.label }}\n </span>\n </div>\n }\n </div>\n }\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.spider-chart-container{display:flex;flex-direction:column;align-items:center}.spider-chart-container .spacing-container{padding:40px 140px}.spider-chart-container .spacing-container.small-spacing{padding:0 80px}.spider-chart-container .spacing-container .chart-container{position:relative}.spider-chart-container .spacing-container .chart-container .overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container{display:flex;gap:4px;position:absolute;pointer-events:all;cursor:pointer}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .fake-data-points{visibility:hidden}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container:focus{outline:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .label{font-size:12px;border-bottom:1px dashed #D3D3D3;white-space:nowrap;overflow:hidden;width:fit-content;text-overflow:ellipsis}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .value{font-weight:700}.spider-chart-container .legend-container{display:flex;gap:16px;cursor:pointer}.spider-chart-container .legend-container .legend-item{display:flex;align-items:center;gap:8px}.spider-chart-container .legend-container .legend-item .legend-line{display:inline-block;width:11px;height:4px}.spider-chart-container .legend-container .legend-item .solid-line{background-color:#d410aa}.spider-chart-container .legend-container .legend-item .dashed-line{border-top:2px dashed #242424}:host ::ng-deep .spider-chart-container .spinner-container.loader{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$4.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
|
|
17299
17302
|
}
|
|
17300
17303
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpiderChartComponent, decorators: [{
|
|
17301
17304
|
type: Component,
|
|
@@ -17560,6 +17563,12 @@ class GaussianChartComponent {
|
|
|
17560
17563
|
* @memberof SpinnerComponent
|
|
17561
17564
|
*/
|
|
17562
17565
|
this.applicationTheme = 'light';
|
|
17566
|
+
/**
|
|
17567
|
+
* Controls the position of the legend relative to the chart.
|
|
17568
|
+
* @type {LegendPosition}
|
|
17569
|
+
* @memberof GaussianChartComponent
|
|
17570
|
+
*/
|
|
17571
|
+
this.legendPosition = 'bottom-start';
|
|
17563
17572
|
this.minXValue = -3;
|
|
17564
17573
|
this.maxXValue = 3;
|
|
17565
17574
|
this.minYValue = 0;
|
|
@@ -17765,17 +17774,19 @@ class GaussianChartComponent {
|
|
|
17765
17774
|
}
|
|
17766
17775
|
}
|
|
17767
17776
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GaussianChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17768
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GaussianChartComponent, selector: "ui-gaussian-chart", inputs: { score: "score", bestCandidateScore: "bestCandidateScore", applicationTheme: "applicationTheme" }, ngImport: i0, template: "<div class=\"chart-section\" *ngIf=\"score\"\n [attr.aria-label]=\"(translationContext + 'ARIA_LABEL') | uiTranslate :\n { score: score,\n activeBucket: getScoreTranslationKey(score) | uiTranslate | async,\n bestCandidateScore: bestCandidateScore,\n activeBucketBestScore: getScoreTranslationKey(bestCandidateScore) | uiTranslate | async\n } | async\"\n tabindex=\"0\">\n <div class=\"chart-range-wrapper\">\n <div class=\"normal-chart-container\">\n <div class=\"normal-chart\">\n <canvas baseChart\n [data]=\"gaussianChartData\"\n [options]=\"gaussianChartOptions\"\n type=\"line\"\n class=\"chart\"\n >\n </canvas>\n <div class=\"overlay-icon\"\n [style.bottom]=\"[overlayYValue, 3, 'subtract'] | memoizeFunc : getCalcPosition\"\n [style.left]=\"[overlayXValue, 20, 'subtract'] | memoizeFunc : getCalcPosition\">\n <div class=\"drop-icon\">\n <ui-icon name=\"Pin-marker\" size=\"40\"></ui-icon>\n <span class=\"curve-score\">{{score}}</span>\n </div>\n </div>\n <div class=\"best-score\"\n [style.height]=\"[100 - overlayYBestScoreValue, normalContainerPadding, 'add'] | memoizeFunc : getCalcPosition\"\n [style.bottom]=\"overlayYBestScoreValue + '%'\"\n [style.left]=\"overlayXBestScoreValue + '%'\">\n <div class=\"best-score-content\"\n [style.left]=\"bestCandidateScore | memoizeFunc : getBestScoreContentPosition : this\">\n <ui-icon name=\"Trophy\"></ui-icon>\n {{bestCandidateScore}}\n </div>\n </div>\n </div>\n <div class=\"overlay\">\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWEST\">\n <div class=\"column-item\" [class.text-bold]=\"activeBucket === PercentileThreshold.LOWEST\"\n [matTooltip]=\"((translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST_TOOLTIP') | uiTranslate | async) || ''\">\n {{(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST') | uiTranslate | async}}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWER\">\n <div class=\"column-item\" [class.text-bold]=\"activeBucket === PercentileThreshold.LOWER\"\n [matTooltip]=\"((translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER_TOOLTIP') | uiTranslate | async) || ''\">\n {{(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER') | uiTranslate | async}}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.AVERAGE\">\n <div class=\"column-item\" [class.text-bold]=\"activeBucket === PercentileThreshold.AVERAGE\"\n [matTooltip]=\"((translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE_TOOLTIP') | uiTranslate | async) || ''\">\n {{(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE') | uiTranslate | async}}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHER\">\n <div class=\"column-item\" [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHER\"\n [matTooltip]=\"((translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER_TOOLTIP') | uiTranslate | async) || ''\">\n {{(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER') | uiTranslate | async}}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHEST\">\n <div class=\"column-item\" [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHEST\"\n [matTooltip]=\"((translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST_TOOLTIP') | uiTranslate | async) || ''\">\n {{(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST') | uiTranslate | async}}\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"range\">\n <div>1</div>\n <div>20</div>\n <div>40</div>\n <div>60</div>\n <div>80</div>\n <div>99</div>\n </div>\n </div>\n\n <div class=\"legend-container mt-16\">\n <div class=\"legend\">\n <ui-icon name=\"Dot\"></ui-icon>\n {{(translationContext + 'CANDIDATE_SCORE') | uiTranslate | async}}\n </div>\n <div class=\"legend\">\n <ui-icon name=\"Trophy\"></ui-icon>\n {{(translationContext + 'HIGHEST_SCORE') | uiTranslate | async}}\n </div>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.chart-section{display:flex;flex-direction:column;gap:8px;overflow:auto;width:100%}.chart-section .chart-range-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.chart-section .chart-range-wrapper .normal-chart-container{position:relative;padding-bottom:32px;padding-top:50px;margin-top:16px;border:1px solid #D3D3D3;border-radius:10px;width:100%;height:230px}.chart-section .chart-range-wrapper .normal-chart-container .normal-chart{position:relative;z-index:1;width:100%;height:100%}.chart-section .chart-range-wrapper .normal-chart-container .overlay{position:absolute;top:0;left:0;height:100%;width:100%;display:flex}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{flex:1;font-size:12px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column .column-item{cursor:pointer}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column:not(:last-child){border-right:1px solid #D3D3D3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active{background-color:#fff5ed;border-bottom:3px solid #242424}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border:none;position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-right:1px solid #D3D3D3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{content:\"\";position:absolute;bottom:0;width:calc(100% - 4px);height:2.5px;background-color:#000}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before{right:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{left:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon{position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon .curve-score{font-size:14px;font-weight:700;position:absolute;width:100%;text-align:center;top:0;left:.5px;padding:4px 4px 9px}.chart-section .chart-range-wrapper .normal-chart-container .best-score{position:absolute;border-left:1px #242424 dashed}.chart-section .chart-range-wrapper .normal-chart-container .best-score .best-score-content{position:absolute;display:flex;gap:3px;align-items:center}.chart-section .chart-range-wrapper .range{display:flex;justify-content:space-between;color:#919191}.chart-section .chart-range-wrapper .range div{width:35px;text-align:center}.chart-section .chart-range-wrapper .range div:nth-child(2){text-align:left}.chart-section .chart-range-wrapper .range div:nth-last-child(2){text-align:right}.chart-section .legend-container{display:flex;gap:16px}.chart-section .legend-container .legend{display:flex;gap:8px;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$4.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }] }); }
|
|
17777
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GaussianChartComponent, selector: "ui-gaussian-chart", inputs: { score: "score", bestCandidateScore: "bestCandidateScore", applicationTheme: "applicationTheme", legendPosition: "legendPosition" }, ngImport: i0, template: "<div\n class=\"chart-section\"\n *ngIf=\"score\"\n [attr.aria-label]=\"\n translationContext + 'ARIA_LABEL'\n | uiTranslate\n : {\n score: score,\n activeBucket: getScoreTranslationKey(score) | uiTranslate | async,\n bestCandidateScore: bestCandidateScore,\n activeBucketBestScore: getScoreTranslationKey(bestCandidateScore) | uiTranslate | async,\n }\n | async\n \"\n tabindex=\"0\"\n>\n <!-- Legend positioned at top -->\n @if (legendPosition === 'top-start' || legendPosition === 'top-end') {\n <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n }\n\n <div class=\"chart-range-wrapper\">\n <div class=\"normal-chart-container\">\n <div class=\"normal-chart\">\n <canvas baseChart [data]=\"gaussianChartData\" [options]=\"gaussianChartOptions\" type=\"line\" class=\"chart\">\n </canvas>\n <div\n class=\"overlay-icon\"\n [style.bottom]=\"[overlayYValue, 3, 'subtract'] | memoizeFunc: getCalcPosition\"\n [style.left]=\"[overlayXValue, 20, 'subtract'] | memoizeFunc: getCalcPosition\"\n >\n <div class=\"drop-icon\">\n <ui-icon name=\"Pin-marker\" size=\"40\"></ui-icon>\n <span class=\"curve-score\">{{ score }}</span>\n </div>\n </div>\n <div\n class=\"best-score\"\n [style.height]=\"[100 - overlayYBestScoreValue, normalContainerPadding, 'add'] | memoizeFunc: getCalcPosition\"\n [style.bottom]=\"overlayYBestScoreValue + '%'\"\n [style.left]=\"overlayXBestScoreValue + '%'\"\n >\n <div\n class=\"best-score-content\"\n [style.left]=\"bestCandidateScore | memoizeFunc: getBestScoreContentPosition : this\"\n >\n <ui-icon name=\"Trophy\"></ui-icon>\n {{ bestCandidateScore }}\n </div>\n </div>\n </div>\n <div class=\"overlay\">\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWEST\">\n <div\n class=\"column-item\"\n [class.text-bold]=\"activeBucket === PercentileThreshold.LOWEST\"\n [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST_TOOLTIP' | uiTranslate | async) || ''\"\n >\n {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST' | uiTranslate | async }}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWER\">\n <div\n class=\"column-item\"\n [class.text-bold]=\"activeBucket === PercentileThreshold.LOWER\"\n [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER_TOOLTIP' | uiTranslate | async) || ''\"\n >\n {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER' | uiTranslate | async }}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.AVERAGE\">\n <div\n class=\"column-item\"\n [class.text-bold]=\"activeBucket === PercentileThreshold.AVERAGE\"\n [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE_TOOLTIP' | uiTranslate | async) || ''\"\n >\n {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE' | uiTranslate | async }}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHER\">\n <div\n class=\"column-item\"\n [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHER\"\n [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER_TOOLTIP' | uiTranslate | async) || ''\"\n >\n {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER' | uiTranslate | async }}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHEST\">\n <div\n class=\"column-item\"\n [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHEST\"\n [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST_TOOLTIP' | uiTranslate | async) || ''\"\n >\n {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST' | uiTranslate | async }}\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"range\">\n <div>1</div>\n <div>20</div>\n <div>40</div>\n <div>60</div>\n <div>80</div>\n <div>99</div>\n </div>\n </div>\n\n <!-- Legend positioned at bottom -->\n @if (legendPosition === 'bottom-start' || legendPosition === 'bottom-end') {\n <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n }\n</div>\n\n<!-- Reusable legend template -->\n<ng-template #legendTemplate>\n <div class=\"legend-container\" [ngClass]=\"'legend-' + legendPosition\">\n <div class=\"legend\">\n <ui-icon name=\"Dot\" color=\"gray\"></ui-icon>\n {{ translationContext + 'CANDIDATE_SCORE' | uiTranslate | async }}\n </div>\n <div class=\"legend\">\n <ui-icon name=\"Trophy\" color=\"gray\"></ui-icon>\n {{ translationContext + 'HIGHEST_SCORE' | uiTranslate | async }}\n </div>\n </div>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.chart-section{display:flex;flex-direction:column;gap:16px;overflow:auto;width:100%}.chart-section .chart-range-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.chart-section .chart-range-wrapper .normal-chart-container{position:relative;padding-bottom:32px;padding-top:50px;border:1px solid #D3D3D3;border-radius:10px;width:100%;height:230px}.chart-section .chart-range-wrapper .normal-chart-container .normal-chart{position:relative;z-index:1;width:100%;height:100%}.chart-section .chart-range-wrapper .normal-chart-container .overlay{position:absolute;top:0;left:0;height:100%;width:100%;display:flex}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{flex:1;font-size:12px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column .column-item{cursor:pointer}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column:not(:last-child){border-right:1px solid #D3D3D3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active{background-color:#fff5ed;border-bottom:3px solid #242424}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border:none;position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-right:1px solid #D3D3D3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{content:\"\";position:absolute;bottom:0;width:calc(100% - 4px);height:2.5px;background-color:#000}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before{right:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{left:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon{position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon .curve-score{font-size:14px;font-weight:700;position:absolute;width:100%;text-align:center;top:0;left:.5px;padding:4px 4px 9px}.chart-section .chart-range-wrapper .normal-chart-container .best-score{position:absolute;border-left:1px #242424 dashed}.chart-section .chart-range-wrapper .normal-chart-container .best-score .best-score-content{position:absolute;display:flex;gap:3px;align-items:center}.chart-section .chart-range-wrapper .range{display:flex;justify-content:space-between;color:#919191}.chart-section .chart-range-wrapper .range div{width:35px;text-align:center}.chart-section .chart-range-wrapper .range div:nth-child(2){text-align:left}.chart-section .chart-range-wrapper .range div:nth-last-child(2){text-align:right}.chart-section .legend-container{display:flex;gap:16px}.chart-section .legend-container.legend-top-start,.chart-section .legend-container.legend-bottom-start{justify-content:flex-start}.chart-section .legend-container.legend-top-end,.chart-section .legend-container.legend-bottom-end{justify-content:flex-end}.chart-section .legend-container .legend{display:flex;gap:8px;align-items:center;color:#666}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$4.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }] }); }
|
|
17769
17778
|
}
|
|
17770
17779
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GaussianChartComponent, decorators: [{
|
|
17771
17780
|
type: Component,
|
|
17772
|
-
args: [{ selector: 'ui-gaussian-chart', template: "<div class=\"chart-section\" *ngIf=\"score\"\n [attr.aria-label]=\"(translationContext + 'ARIA_LABEL') | uiTranslate :\n { score: score,\n activeBucket: getScoreTranslationKey(score) | uiTranslate | async,\n bestCandidateScore: bestCandidateScore,\n activeBucketBestScore: getScoreTranslationKey(bestCandidateScore) | uiTranslate | async\n } | async\"\n tabindex=\"0\">\n <div class=\"chart-range-wrapper\">\n <div class=\"normal-chart-container\">\n <div class=\"normal-chart\">\n <canvas baseChart\n [data]=\"gaussianChartData\"\n [options]=\"gaussianChartOptions\"\n type=\"line\"\n class=\"chart\"\n >\n </canvas>\n <div class=\"overlay-icon\"\n [style.bottom]=\"[overlayYValue, 3, 'subtract'] | memoizeFunc : getCalcPosition\"\n [style.left]=\"[overlayXValue, 20, 'subtract'] | memoizeFunc : getCalcPosition\">\n <div class=\"drop-icon\">\n <ui-icon name=\"Pin-marker\" size=\"40\"></ui-icon>\n <span class=\"curve-score\">{{score}}</span>\n </div>\n </div>\n <div class=\"best-score\"\n [style.height]=\"[100 - overlayYBestScoreValue, normalContainerPadding, 'add'] | memoizeFunc : getCalcPosition\"\n [style.bottom]=\"overlayYBestScoreValue + '%'\"\n [style.left]=\"overlayXBestScoreValue + '%'\">\n <div class=\"best-score-content\"\n [style.left]=\"bestCandidateScore | memoizeFunc : getBestScoreContentPosition : this\">\n <ui-icon name=\"Trophy\"></ui-icon>\n {{bestCandidateScore}}\n </div>\n </div>\n </div>\n <div class=\"overlay\">\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWEST\">\n <div class=\"column-item\" [class.text-bold]=\"activeBucket === PercentileThreshold.LOWEST\"\n [matTooltip]=\"((translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST_TOOLTIP') | uiTranslate | async) || ''\">\n {{(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST') | uiTranslate | async}}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWER\">\n <div class=\"column-item\" [class.text-bold]=\"activeBucket === PercentileThreshold.LOWER\"\n [matTooltip]=\"((translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER_TOOLTIP') | uiTranslate | async) || ''\">\n {{(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER') | uiTranslate | async}}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.AVERAGE\">\n <div class=\"column-item\" [class.text-bold]=\"activeBucket === PercentileThreshold.AVERAGE\"\n [matTooltip]=\"((translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE_TOOLTIP') | uiTranslate | async) || ''\">\n {{(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE') | uiTranslate | async}}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHER\">\n <div class=\"column-item\" [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHER\"\n [matTooltip]=\"((translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER_TOOLTIP') | uiTranslate | async) || ''\">\n {{(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER') | uiTranslate | async}}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHEST\">\n <div class=\"column-item\" [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHEST\"\n [matTooltip]=\"((translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST_TOOLTIP') | uiTranslate | async) || ''\">\n {{(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST') | uiTranslate | async}}\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"range\">\n <div>1</div>\n <div>20</div>\n <div>40</div>\n <div>60</div>\n <div>80</div>\n <div>99</div>\n </div>\n </div>\n\n <div class=\"legend-container mt-16\">\n <div class=\"legend\">\n <ui-icon name=\"Dot\"></ui-icon>\n {{(translationContext + 'CANDIDATE_SCORE') | uiTranslate | async}}\n </div>\n <div class=\"legend\">\n <ui-icon name=\"Trophy\"></ui-icon>\n {{(translationContext + 'HIGHEST_SCORE') | uiTranslate | async}}\n </div>\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:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.chart-section{display:flex;flex-direction:column;gap:8px;overflow:auto;width:100%}.chart-section .chart-range-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.chart-section .chart-range-wrapper .normal-chart-container{position:relative;padding-bottom:32px;padding-top:50px;margin-top:16px;border:1px solid #D3D3D3;border-radius:10px;width:100%;height:230px}.chart-section .chart-range-wrapper .normal-chart-container .normal-chart{position:relative;z-index:1;width:100%;height:100%}.chart-section .chart-range-wrapper .normal-chart-container .overlay{position:absolute;top:0;left:0;height:100%;width:100%;display:flex}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{flex:1;font-size:12px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column .column-item{cursor:pointer}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column:not(:last-child){border-right:1px solid #D3D3D3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active{background-color:#fff5ed;border-bottom:3px solid #242424}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border:none;position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-right:1px solid #D3D3D3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{content:\"\";position:absolute;bottom:0;width:calc(100% - 4px);height:2.5px;background-color:#000}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before{right:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{left:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon{position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon .curve-score{font-size:14px;font-weight:700;position:absolute;width:100%;text-align:center;top:0;left:.5px;padding:4px 4px 9px}.chart-section .chart-range-wrapper .normal-chart-container .best-score{position:absolute;border-left:1px #242424 dashed}.chart-section .chart-range-wrapper .normal-chart-container .best-score .best-score-content{position:absolute;display:flex;gap:3px;align-items:center}.chart-section .chart-range-wrapper .range{display:flex;justify-content:space-between;color:#919191}.chart-section .chart-range-wrapper .range div{width:35px;text-align:center}.chart-section .chart-range-wrapper .range div:nth-child(2){text-align:left}.chart-section .chart-range-wrapper .range div:nth-last-child(2){text-align:right}.chart-section .legend-container{display:flex;gap:16px}.chart-section .legend-container .legend{display:flex;gap:8px;align-items:center}\n"] }]
|
|
17781
|
+
args: [{ selector: 'ui-gaussian-chart', template: "<div\n class=\"chart-section\"\n *ngIf=\"score\"\n [attr.aria-label]=\"\n translationContext + 'ARIA_LABEL'\n | uiTranslate\n : {\n score: score,\n activeBucket: getScoreTranslationKey(score) | uiTranslate | async,\n bestCandidateScore: bestCandidateScore,\n activeBucketBestScore: getScoreTranslationKey(bestCandidateScore) | uiTranslate | async,\n }\n | async\n \"\n tabindex=\"0\"\n>\n <!-- Legend positioned at top -->\n @if (legendPosition === 'top-start' || legendPosition === 'top-end') {\n <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n }\n\n <div class=\"chart-range-wrapper\">\n <div class=\"normal-chart-container\">\n <div class=\"normal-chart\">\n <canvas baseChart [data]=\"gaussianChartData\" [options]=\"gaussianChartOptions\" type=\"line\" class=\"chart\">\n </canvas>\n <div\n class=\"overlay-icon\"\n [style.bottom]=\"[overlayYValue, 3, 'subtract'] | memoizeFunc: getCalcPosition\"\n [style.left]=\"[overlayXValue, 20, 'subtract'] | memoizeFunc: getCalcPosition\"\n >\n <div class=\"drop-icon\">\n <ui-icon name=\"Pin-marker\" size=\"40\"></ui-icon>\n <span class=\"curve-score\">{{ score }}</span>\n </div>\n </div>\n <div\n class=\"best-score\"\n [style.height]=\"[100 - overlayYBestScoreValue, normalContainerPadding, 'add'] | memoizeFunc: getCalcPosition\"\n [style.bottom]=\"overlayYBestScoreValue + '%'\"\n [style.left]=\"overlayXBestScoreValue + '%'\"\n >\n <div\n class=\"best-score-content\"\n [style.left]=\"bestCandidateScore | memoizeFunc: getBestScoreContentPosition : this\"\n >\n <ui-icon name=\"Trophy\"></ui-icon>\n {{ bestCandidateScore }}\n </div>\n </div>\n </div>\n <div class=\"overlay\">\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWEST\">\n <div\n class=\"column-item\"\n [class.text-bold]=\"activeBucket === PercentileThreshold.LOWEST\"\n [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST_TOOLTIP' | uiTranslate | async) || ''\"\n >\n {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST' | uiTranslate | async }}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWER\">\n <div\n class=\"column-item\"\n [class.text-bold]=\"activeBucket === PercentileThreshold.LOWER\"\n [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER_TOOLTIP' | uiTranslate | async) || ''\"\n >\n {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER' | uiTranslate | async }}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.AVERAGE\">\n <div\n class=\"column-item\"\n [class.text-bold]=\"activeBucket === PercentileThreshold.AVERAGE\"\n [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE_TOOLTIP' | uiTranslate | async) || ''\"\n >\n {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE' | uiTranslate | async }}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHER\">\n <div\n class=\"column-item\"\n [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHER\"\n [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER_TOOLTIP' | uiTranslate | async) || ''\"\n >\n {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER' | uiTranslate | async }}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHEST\">\n <div\n class=\"column-item\"\n [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHEST\"\n [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST_TOOLTIP' | uiTranslate | async) || ''\"\n >\n {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST' | uiTranslate | async }}\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"range\">\n <div>1</div>\n <div>20</div>\n <div>40</div>\n <div>60</div>\n <div>80</div>\n <div>99</div>\n </div>\n </div>\n\n <!-- Legend positioned at bottom -->\n @if (legendPosition === 'bottom-start' || legendPosition === 'bottom-end') {\n <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n }\n</div>\n\n<!-- Reusable legend template -->\n<ng-template #legendTemplate>\n <div class=\"legend-container\" [ngClass]=\"'legend-' + legendPosition\">\n <div class=\"legend\">\n <ui-icon name=\"Dot\" color=\"gray\"></ui-icon>\n {{ translationContext + 'CANDIDATE_SCORE' | uiTranslate | async }}\n </div>\n <div class=\"legend\">\n <ui-icon name=\"Trophy\" color=\"gray\"></ui-icon>\n {{ translationContext + 'HIGHEST_SCORE' | uiTranslate | async }}\n </div>\n </div>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.chart-section{display:flex;flex-direction:column;gap:16px;overflow:auto;width:100%}.chart-section .chart-range-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.chart-section .chart-range-wrapper .normal-chart-container{position:relative;padding-bottom:32px;padding-top:50px;border:1px solid #D3D3D3;border-radius:10px;width:100%;height:230px}.chart-section .chart-range-wrapper .normal-chart-container .normal-chart{position:relative;z-index:1;width:100%;height:100%}.chart-section .chart-range-wrapper .normal-chart-container .overlay{position:absolute;top:0;left:0;height:100%;width:100%;display:flex}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{flex:1;font-size:12px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column .column-item{cursor:pointer}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column:not(:last-child){border-right:1px solid #D3D3D3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active{background-color:#fff5ed;border-bottom:3px solid #242424}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border:none;position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-right:1px solid #D3D3D3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{content:\"\";position:absolute;bottom:0;width:calc(100% - 4px);height:2.5px;background-color:#000}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before{right:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{left:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon{position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon .curve-score{font-size:14px;font-weight:700;position:absolute;width:100%;text-align:center;top:0;left:.5px;padding:4px 4px 9px}.chart-section .chart-range-wrapper .normal-chart-container .best-score{position:absolute;border-left:1px #242424 dashed}.chart-section .chart-range-wrapper .normal-chart-container .best-score .best-score-content{position:absolute;display:flex;gap:3px;align-items:center}.chart-section .chart-range-wrapper .range{display:flex;justify-content:space-between;color:#919191}.chart-section .chart-range-wrapper .range div{width:35px;text-align:center}.chart-section .chart-range-wrapper .range div:nth-child(2){text-align:left}.chart-section .chart-range-wrapper .range div:nth-last-child(2){text-align:right}.chart-section .legend-container{display:flex;gap:16px}.chart-section .legend-container.legend-top-start,.chart-section .legend-container.legend-bottom-start{justify-content:flex-start}.chart-section .legend-container.legend-top-end,.chart-section .legend-container.legend-bottom-end{justify-content:flex-end}.chart-section .legend-container .legend{display:flex;gap:8px;align-items:center;color:#666}\n"] }]
|
|
17773
17782
|
}], propDecorators: { score: [{
|
|
17774
17783
|
type: Input
|
|
17775
17784
|
}], bestCandidateScore: [{
|
|
17776
17785
|
type: Input
|
|
17777
17786
|
}], applicationTheme: [{
|
|
17778
17787
|
type: Input
|
|
17788
|
+
}], legendPosition: [{
|
|
17789
|
+
type: Input
|
|
17779
17790
|
}] } });
|
|
17780
17791
|
|
|
17781
17792
|
Chart.register(...registerables);
|
|
@@ -18143,7 +18154,7 @@ class FilterButtonComponent {
|
|
|
18143
18154
|
this.cdr.markForCheck();
|
|
18144
18155
|
}
|
|
18145
18156
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterButtonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18146
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterButtonComponent, selector: "ui-filter-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: false, isRequired: false, transformFunction: null }, singleSelection: { classPropertyName: "singleSelection", publicName: "singleSelection", isSignal: false, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: false, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: false, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", optionChange: "optionChange" }, host: { properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true }, { propertyName: "filterOptions", predicate: ["filterOption"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <ui-button\n [matTooltip]=\"tooltip()\"\n [matTooltipClass]=\"'tooltip-multi-line'\"\n [matTooltipPosition]=\"'above'\"\n class=\"ui-filter-button-trigger\"\n [class.button-opened]=\"isOpen()\"\n [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n [label]=\"displayedLabel() || label\"\n [disabled]=\"disabled || (options().length === 0 && !noOptionsMessage)\"\n (click)=\"toggle()\"\n type=\"button\"\n size=\"small\"\n [role]=\"'combobox'\"\n [tooltip]=\"value.length ? ' ' : ''\"\n [attr.aria-expanded]=\"isOpen()\"\n [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n [iconPosition]=\"iconPosition\"\n [applicationTheme]=\"applicationTheme\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n ></ui-button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"outsideClick()\"\n >\n @if (displayedOptions().length) {\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n {{\n translationContext + 'ACTIVE_ITEM'\n | uiTranslate: { active: (keyManager.activeItemIndex ?? 0) + 1, total: filterOptions.length }\n | async\n }}\n </div>\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n {{\n (value.includes(displayedOptions()[keyManager.activeItemIndex ?? 0].value)\n ? translationContext + 'SELECTED'\n : translationContext + 'DESELECTED'\n )\n | uiTranslate\n | async\n }}\n </div>\n }\n <div class=\"ui-filter-button\" #overlayContainer>\n <div class=\"ui-filter-button-header\" *ngIf=\"options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH\">\n <ui-field\n type=\"search\"\n [showBottomContent]=\"false\"\n [ngModel]=\"search()\"\n (ngModelChange)=\"search.set($event)\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-field>\n </div>\n <div class=\"ui-filter-button-list\" #list (keydown)=\"keyDownHandler($event)\">\n @if (!displayedOptions().length && options().length) {\n <div class=\"no-results-found\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </div>\n } @else {\n <div *ngFor=\"let section of displayedOptions(); index as i\">\n <div\n *ngIf=\"section.sectionTitle && section.sectionTitle !== displayedOptions()[i - 1]?.sectionTitle\"\n class=\"section-title\"\n >\n {{ section.sectionTitle }}\n </div>\n <div\n class=\"item\"\n [class.item-selected]=\"isSelected(section.value)\"\n (click)=\"optionChanged(!isSelected(section.value), section)\"\n >\n <ui-radio-button\n (click)=\"$event.stopPropagation()\"\n *ngIf=\"singleSelection\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [selected]=\"isSelected(section.value)\"\n (changeRadio)=\"optionChanged($event.optionChecked, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n >\n </ui-radio-button>\n <ui-checkbox\n (click)=\"$event.stopPropagation()\"\n [class.with-label-number]=\"section.labelNumber !== undefined\"\n *ngIf=\"!singleSelection\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [checked]=\"isSelected(section.value)\"\n (changed)=\"optionChanged($event, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n ></ui-checkbox>\n <ui-icon *ngIf=\"section.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"section.icon\"></ui-icon>\n <span\n #tooltip=\"matTooltip\"\n class=\"item-label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event, section.value)\"\n [matTooltip]=\"showTooltip[section.value] ? section.label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >\n {{ section.label }}\n </span>\n <span class=\"item-number\" *ngIf=\"section.labelNumber !== undefined\">({{ section.labelNumber }})</span>\n </div>\n </div>\n }\n </div>\n @if (!options().length && !!noOptionsMessage) {\n <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n } @else {\n <div class=\"ui-filter-button-footer\" *ngIf=\"allowClear || message\">\n <ui-button\n *ngIf=\"allowClear\"\n variant=\"text\"\n size=\"small\"\n [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n (click)=\"clearValue()\"\n [applicationTheme]=\"applicationTheme\"\n (keydown.escape)=\"toggle()\"\n ></ui-button>\n <div class=\"ui-filter-button-footer-message\">\n {{ message }}\n </div>\n </div>\n }\n </div>\n </ng-template>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}ui-filter-button{display:inline-block}ui-filter-button ui-button .button-wrapper button{padding:7px 24px!important}ui-filter-button ui-button .button-wrapper button .icon ui-icon mat-icon.size-16 svg{width:24px;height:24px}ui-filter-button ui-button .button-wrapper button .label{line-clamp:1;-webkit-line-clamp:1!important}ui-filter-button ui-button.button-opened .button-wrapper button{background-color:#666!important;border-color:#666}ui-filter-button ui-button button.secondary{border:1px solid #242424}ui-filter-button ui-button button.secondary:hover{border-color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button{margin-top:4px;box-shadow:0 4px 16px #24242414;border-radius:10px;background-color:#fff;padding:0 0 8px;width:240px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-header{padding:8px 16px 0}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list{max-height:290px;overflow-y:auto;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .no-results-found{padding:8px 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item{padding:0 16px 0 5px;display:flex;align-items:center;gap:5px;height:48px;cursor:pointer}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item:hover,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-selected{background-color:#f4f4f4}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox.with-label-number{max-width:calc(100% - 25px)}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-number{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer{display:flex;justify-content:space-between;align-items:center;padding:0 16px 0 5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer ui-button{margin-left:-5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer-message{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-no-options{padding:24px}.tooltip-multi-line .mdc-tooltip__surface{text-align:left;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$8.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$8.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "companyColor", "name", "label", "multiple", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "hideBuiltInErrors", "hideLabelInErrors", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changed"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["fullWidth", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "component", type: RadioButtonComponent, selector: "ui-radio-button", inputs: ["disabled", "selected", "allowUnselect", "companyColor", "name", "label", "multiple", "value", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changeRadio"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
18157
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterButtonComponent, selector: "ui-filter-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: false, isRequired: false, transformFunction: null }, singleSelection: { classPropertyName: "singleSelection", publicName: "singleSelection", isSignal: false, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: false, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: false, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", optionChange: "optionChange" }, host: { properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true }, { propertyName: "filterOptions", predicate: ["filterOption"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <ui-button\n [matTooltip]=\"tooltip()\"\n [matTooltipClass]=\"'tooltip-multi-line'\"\n [matTooltipPosition]=\"'above'\"\n class=\"ui-filter-button-trigger\"\n [class.button-opened]=\"isOpen()\"\n [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n [label]=\"displayedLabel() || label\"\n [disabled]=\"disabled || (options().length === 0 && !noOptionsMessage)\"\n (click)=\"toggle()\"\n type=\"button\"\n size=\"small\"\n [role]=\"'combobox'\"\n [tooltip]=\"value.length ? ' ' : ''\"\n [attr.aria-expanded]=\"isOpen()\"\n [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n [iconPosition]=\"iconPosition\"\n [applicationTheme]=\"applicationTheme\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n ></ui-button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"outsideClick()\"\n >\n @if (displayedOptions().length) {\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n {{\n translationContext + 'ACTIVE_ITEM'\n | uiTranslate: { active: (keyManager.activeItemIndex ?? 0) + 1, total: filterOptions.length }\n | async\n }}\n </div>\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n {{\n (value.includes(displayedOptions()[keyManager.activeItemIndex ?? 0].value)\n ? translationContext + 'SELECTED'\n : translationContext + 'DESELECTED'\n )\n | uiTranslate\n | async\n }}\n </div>\n }\n <div class=\"ui-filter-button\" #overlayContainer>\n <div class=\"ui-filter-button-header\" *ngIf=\"options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH\">\n <ui-field\n type=\"search\"\n [showBottomContent]=\"false\"\n [ngModel]=\"search()\"\n (ngModelChange)=\"search.set($event)\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-field>\n </div>\n <div class=\"ui-filter-button-list\" #list (keydown)=\"keyDownHandler($event)\">\n @if (!displayedOptions().length && options().length) {\n <div class=\"no-results-found\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </div>\n } @else {\n <div *ngFor=\"let section of displayedOptions(); index as i\">\n <div\n *ngIf=\"section.sectionTitle && section.sectionTitle !== displayedOptions()[i - 1]?.sectionTitle\"\n class=\"section-title\"\n >\n {{ section.sectionTitle }}\n </div>\n <div\n class=\"item\"\n [class.item-selected]=\"isSelected(section.value)\"\n (click)=\"optionChanged(!isSelected(section.value), section)\"\n >\n <ui-radio-button\n (click)=\"$event.stopPropagation()\"\n *ngIf=\"singleSelection\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [selected]=\"isSelected(section.value)\"\n (changeRadio)=\"optionChanged($event.optionChecked, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n >\n </ui-radio-button>\n <ui-checkbox\n (click)=\"$event.stopPropagation()\"\n [class.with-label-number]=\"section.labelNumber !== undefined\"\n *ngIf=\"!singleSelection\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [checked]=\"isSelected(section.value)\"\n (changed)=\"optionChanged($event, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n ></ui-checkbox>\n <ui-icon *ngIf=\"section.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"section.icon\"></ui-icon>\n <span\n #tooltip=\"matTooltip\"\n class=\"item-label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event, section.value)\"\n [matTooltip]=\"showTooltip[section.value] ? section.label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >\n {{ section.label }}\n </span>\n <span class=\"item-number\" *ngIf=\"section.labelNumber !== undefined\">({{ section.labelNumber }})</span>\n </div>\n </div>\n }\n </div>\n @if (!options().length && !!noOptionsMessage) {\n <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n } @else {\n <div class=\"ui-filter-button-footer\" *ngIf=\"allowClear || message\">\n <ui-button\n *ngIf=\"allowClear\"\n variant=\"text\"\n size=\"small\"\n [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n (click)=\"clearValue()\"\n [applicationTheme]=\"applicationTheme\"\n (keydown.escape)=\"toggle()\"\n ></ui-button>\n <div class=\"ui-filter-button-footer-message\">\n {{ message }}\n </div>\n </div>\n }\n </div>\n </ng-template>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}ui-filter-button{display:inline-block}ui-filter-button ui-button .button-wrapper button{padding:7px 24px!important}ui-filter-button ui-button .button-wrapper button .icon ui-icon mat-icon.size-16 svg{width:24px;height:24px}ui-filter-button ui-button .button-wrapper button .label{line-clamp:1;-webkit-line-clamp:1!important}ui-filter-button ui-button.button-opened .button-wrapper button{background-color:#666!important;border-color:#666}ui-filter-button ui-button button.secondary{border:1px solid #242424}ui-filter-button ui-button button.secondary:hover{border-color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button{margin-top:4px;box-shadow:0 4px 16px #24242414;border-radius:10px;background-color:#fff;padding:0 0 8px;width:240px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-header{padding:8px 16px 0}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list{max-height:290px;overflow-y:auto;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .no-results-found{padding:8px 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item{padding:0 16px 0 5px;display:flex;align-items:center;gap:5px;height:48px;cursor:pointer}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item:hover,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-selected{background-color:#f4f4f4}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox.with-label-number{max-width:calc(100% - 25px)}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-number{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer{display:flex;justify-content:space-between;align-items:center;padding:0 16px 0 5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer ui-button{margin-left:-5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer-message{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-no-options{padding:24px}.tooltip-multi-line .mdc-tooltip__surface{text-align:left;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$7.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$7.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "companyColor", "name", "label", "multiple", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "hideBuiltInErrors", "hideLabelInErrors", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changed"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["fullWidth", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "component", type: RadioButtonComponent, selector: "ui-radio-button", inputs: ["disabled", "selected", "allowUnselect", "companyColor", "name", "label", "multiple", "value", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changeRadio"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
18147
18158
|
}
|
|
18148
18159
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterButtonComponent, decorators: [{
|
|
18149
18160
|
type: Component,
|