@testgorilla/tgo-ui 2.23.34 → 2.23.36
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/dialog/dialog.component.d.ts +13 -1
- package/components/progress-bar/progress-bar.component.d.ts +22 -1
- package/components/progress-bar/progress-bar.component.module.d.ts +2 -1
- package/components/spinner/spinner.component.d.ts +8 -1
- package/components/spinner/spinner.module.d.ts +2 -1
- package/components/tag/tag.component.d.ts +10 -1
- package/components/tag/tag.component.module.d.ts +2 -1
- package/esm2022/assets/i18n/en.json +5 -1
- package/esm2022/components/autocomplete/autocomplete.component.mjs +1 -1
- package/esm2022/components/badge/badge.component.mjs +3 -3
- package/esm2022/components/confirm-dialog/confirm-dialog.component.mjs +1 -1
- package/esm2022/components/dialog/dialog.component.mjs +19 -3
- package/esm2022/components/file-upload/file-upload.component.mjs +2 -2
- package/esm2022/components/password-criteria/password.component.mjs +1 -1
- package/esm2022/components/password-strength/password-strength.component.mjs +1 -1
- package/esm2022/components/progress-bar/progress-bar.component.mjs +34 -4
- package/esm2022/components/progress-bar/progress-bar.component.module.mjs +4 -3
- package/esm2022/components/spinner/spinner.component.mjs +14 -3
- package/esm2022/components/spinner/spinner.module.mjs +5 -4
- package/esm2022/components/tag/tag.component.mjs +25 -4
- package/esm2022/components/tag/tag.component.module.mjs +4 -3
- package/esm2022/components/toggle/toggle.component.mjs +1 -1
- package/fesm2022/testgorilla-tgo-ui.mjs +138 -63
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/projects/tgo-canopy-ui/assets/i18n/en.json +5 -1
|
@@ -30,27 +30,27 @@ import { MatInputModule, MatInput } from '@angular/material/input';
|
|
|
30
30
|
import * as i1$3 from '@angular/material/dialog';
|
|
31
31
|
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
|
32
32
|
import * as i8 from '@angular/cdk/text-field';
|
|
33
|
-
import * as
|
|
33
|
+
import * as i2$3 from '@angular/material/progress-bar';
|
|
34
34
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
35
35
|
import * as i7$1 from '@angular/material/menu';
|
|
36
36
|
import { MatMenuModule, MatMenu, MatMenuTrigger } from '@angular/material/menu';
|
|
37
37
|
import * as i4$2 from '@angular/material/expansion';
|
|
38
38
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
39
|
-
import * as i1$
|
|
39
|
+
import * as i1$4 from '@angular/cdk/layout';
|
|
40
40
|
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
41
41
|
import * as i4$3 from '@angular/material/toolbar';
|
|
42
42
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
43
43
|
import * as i5 from '@angular/material/sidenav';
|
|
44
44
|
import { MatSidenavModule } from '@angular/material/sidenav';
|
|
45
|
-
import * as i2$
|
|
45
|
+
import * as i2$5 from '@angular/material/core';
|
|
46
46
|
import { MatRippleModule, NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
|
|
47
|
-
import * as i1$
|
|
47
|
+
import * as i1$5 from '@angular/material/paginator';
|
|
48
48
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
49
|
-
import * as i1$
|
|
49
|
+
import * as i1$6 from '@angular/material/snack-bar';
|
|
50
50
|
import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
|
|
51
51
|
import * as i4$5 from '@angular/material/sort';
|
|
52
52
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
53
|
-
import * as i2$
|
|
53
|
+
import * as i2$4 from '@angular/material/table';
|
|
54
54
|
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
|
|
55
55
|
import * as i7$2 from '@angular/material/select';
|
|
56
56
|
import { MatSelectModule, MatSelect } from '@angular/material/select';
|
|
@@ -61,18 +61,18 @@ import { CdkVirtualScrollViewport, CdkVirtualForOf, CdkFixedSizeVirtualScroll }
|
|
|
61
61
|
import * as i5$1 from '@angular/material/autocomplete';
|
|
62
62
|
import { MatAutocompleteModule, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from '@angular/material/autocomplete';
|
|
63
63
|
import { MatChipsModule } from '@angular/material/chips';
|
|
64
|
-
import * as i2$
|
|
64
|
+
import * as i2$6 from 'ngx-skeleton-loader';
|
|
65
65
|
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
|
|
66
|
-
import * as i2$
|
|
66
|
+
import * as i2$7 from '@angular/material/slider';
|
|
67
67
|
import { MatSliderModule } from '@angular/material/slider';
|
|
68
68
|
import { ComponentPortal } from '@angular/cdk/portal';
|
|
69
|
-
import * as i1$
|
|
70
|
-
import * as i2$
|
|
69
|
+
import * as i1$7 from '@angular/cdk/overlay';
|
|
70
|
+
import * as i2$8 from '@angular/material/divider';
|
|
71
71
|
import { MatDividerModule } from '@angular/material/divider';
|
|
72
72
|
import { hasModifierKey, SPACE, ENTER } from '@angular/cdk/keycodes';
|
|
73
|
-
import * as i2$
|
|
73
|
+
import * as i2$9 from '@angular/material/tabs';
|
|
74
74
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
75
|
-
import * as i2$
|
|
75
|
+
import * as i2$a from '@angular/material/button-toggle';
|
|
76
76
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
77
77
|
import { parsePhoneNumber } from 'libphonenumber-js';
|
|
78
78
|
import { takeUntil } from 'rxjs/operators';
|
|
@@ -1227,11 +1227,11 @@ class BadgeComponent {
|
|
|
1227
1227
|
return this.applicationTheme === 'classic';
|
|
1228
1228
|
}
|
|
1229
1229
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: BadgeComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1230
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: BadgeComponent, selector: "ui-badge", inputs: { label: "label", icon: "icon", color: "color", variant: "variant", notificationsAmount: "notificationsAmount", applicationTheme: "applicationTheme", rebrandColor: "rebrandColor", truncateLabel: "truncateLabel" }, ngImport: i0, template: "<div [class]=\"'badge-container-' + variant\"\n [attr.theme]=\"applicationTheme\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n [matTooltip]=\"(label.length > 25) ? label : ''\"\n [matTooltipClass]=\"applicationTheme\">\n <ng-container [ngSwitch]=\"variant\">\n <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY\">\n <ui-icon *ngIf=\"icon\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n </ng-container>\n <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n </ng-container>\n <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label.length > 25 && truncateLabel ? (label | slice : 0 : 25) + '...' : label }}</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}:host{display:block;width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;line-height:10px}:host .badge-container-primary .label,:host .badge-container-secondary .label{font-size:12px;line-height:14px}:host .badge-container-primary .badge-icon,:host .badge-container-secondary .badge-icon{margin-right:8px}:host .badge-container-secondary .point{border-radius:50%;width:8px;height:8px;margin-right:8px}:host .badge-container-secondary .label{color:#000!important}:host .badge-container-secondary[theme=dark],:host .badge-container-secondary[theme=light]{color:#242424}:host .badge-container-notification{width:20px;height:20px;border-radius:50%;color:#fff;line-height:10px}:host .badge-container-notification .label{font-size:12px}:host .badge-container-notification[theme=dark],:host .badge-container-notification[theme=light]{background:#242424!important;color:#fff!important;border-color:1px solid #ffffff}.flex-center,:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host .badge-container-secondary [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host .badge-container-secondary [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#e0e0e0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host .badge-container-secondary [color=teal].point,:host [color=teal].badge-container-notification{background:#46a997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host .badge-container-secondary [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host .badge-container-secondary [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host .badge-container-secondary [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#b5ddd5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host .badge-container-secondary [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#e9f0f1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host .badge-container-secondary [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#a9c2c9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host .badge-container-secondary [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888}.background-colors[color=success],:host [color=success].badge-container-primary,:host .badge-container-secondary [color=success].point,:host [color=success].badge-container-notification{background:#aae47a;color:#242424}.background-colors[color=warning],:host [color=warning].badge-container-primary,:host .badge-container-secondary [color=warning].point,:host [color=warning].badge-container-notification{background:#ffe1b3;color:#242424}.background-colors[color=negative],:host [color=negative].badge-container-primary,:host .badge-container-secondary [color=negative].point,:host [color=negative].badge-container-notification{background:#ffac9a;color:#242424}.background-colors[color=info],:host [color=info].badge-container-primary,:host .badge-container-secondary [color=info].point,:host [color=info].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=brand],:host [color=brand].badge-container-primary,:host .badge-container-secondary [color=brand].point,:host [color=brand].badge-container-notification{background:#ffe6fa;color:#242424}.background-colors[color=neutral],:host [color=neutral].badge-container-primary,:host .badge-container-secondary [color=neutral].point,:host [color=neutral].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=blue-20],:host [color=blue-20].badge-container-primary,:host .badge-container-secondary [color=blue-20].point,:host [color=blue-20].badge-container-notification{background:#99c1fe;color:#242424}.background-colors[color=blue-40],:host [color=blue-40].badge-container-primary,:host .badge-container-secondary [color=blue-40].point,:host [color=blue-40].badge-container-notification{background:#0165fc;color:#fff}.background-colors[color=pink-30],:host [color=pink-30].badge-container-primary,:host .badge-container-secondary [color=pink-30].point,:host [color=pink-30].badge-container-notification{background:#ffb3ee;color:#242424}.background-colors[color=blue-10],:host [color=blue-10].badge-container-primary,:host .badge-container-secondary [color=blue-10].point,:host [color=blue-10].badge-container-notification{background:#d9e8ff;color:#242424}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] }); }
|
|
1230
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: BadgeComponent, selector: "ui-badge", inputs: { label: "label", icon: "icon", color: "color", variant: "variant", notificationsAmount: "notificationsAmount", applicationTheme: "applicationTheme", rebrandColor: "rebrandColor", truncateLabel: "truncateLabel" }, ngImport: i0, template: "<div [class]=\"'badge-container-' + variant\"\n [attr.aria-label]=\"label\"\n [attr.theme]=\"applicationTheme\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n [matTooltip]=\"(label.length > 25) ? label : ''\"\n [matTooltipClass]=\"applicationTheme\">\n <ng-container [ngSwitch]=\"variant\">\n <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY\">\n <ui-icon *ngIf=\"icon\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n </ng-container>\n <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n </ng-container>\n <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label.length > 25 && truncateLabel ? (label | slice : 0 : 25) + '...' : label }}</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}:host{display:block;width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;line-height:10px}:host .badge-container-primary .label,:host .badge-container-secondary .label{font-size:12px;line-height:14px}:host .badge-container-primary .badge-icon,:host .badge-container-secondary .badge-icon{margin-right:8px}:host .badge-container-secondary .point{border-radius:50%;width:8px;height:8px;margin-right:8px}:host .badge-container-secondary .label{color:#000!important}:host .badge-container-secondary[theme=dark],:host .badge-container-secondary[theme=light]{color:#242424}:host .badge-container-notification{width:20px;height:20px;border-radius:50%;color:#fff;line-height:10px}:host .badge-container-notification .label{font-size:12px}:host .badge-container-notification[theme=dark],:host .badge-container-notification[theme=light]{background:#242424!important;color:#fff!important;border-color:1px solid #ffffff}.flex-center,:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host .badge-container-secondary [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host .badge-container-secondary [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#e0e0e0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host .badge-container-secondary [color=teal].point,:host [color=teal].badge-container-notification{background:#46a997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host .badge-container-secondary [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host .badge-container-secondary [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host .badge-container-secondary [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#b5ddd5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host .badge-container-secondary [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#e9f0f1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host .badge-container-secondary [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#a9c2c9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host .badge-container-secondary [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888}.background-colors[color=success],:host [color=success].badge-container-primary,:host .badge-container-secondary [color=success].point,:host [color=success].badge-container-notification{background:#aae47a;color:#242424}.background-colors[color=warning],:host [color=warning].badge-container-primary,:host .badge-container-secondary [color=warning].point,:host [color=warning].badge-container-notification{background:#ffe1b3;color:#242424}.background-colors[color=negative],:host [color=negative].badge-container-primary,:host .badge-container-secondary [color=negative].point,:host [color=negative].badge-container-notification{background:#ffac9a;color:#242424}.background-colors[color=info],:host [color=info].badge-container-primary,:host .badge-container-secondary [color=info].point,:host [color=info].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=brand],:host [color=brand].badge-container-primary,:host .badge-container-secondary [color=brand].point,:host [color=brand].badge-container-notification{background:#ffe6fa;color:#242424}.background-colors[color=neutral],:host [color=neutral].badge-container-primary,:host .badge-container-secondary [color=neutral].point,:host [color=neutral].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=blue-20],:host [color=blue-20].badge-container-primary,:host .badge-container-secondary [color=blue-20].point,:host [color=blue-20].badge-container-notification{background:#99c1fe;color:#242424}.background-colors[color=blue-40],:host [color=blue-40].badge-container-primary,:host .badge-container-secondary [color=blue-40].point,:host [color=blue-40].badge-container-notification{background:#0165fc;color:#fff}.background-colors[color=pink-30],:host [color=pink-30].badge-container-primary,:host .badge-container-secondary [color=pink-30].point,:host [color=pink-30].badge-container-notification{background:#ffb3ee;color:#242424}.background-colors[color=blue-10],:host [color=blue-10].badge-container-primary,:host .badge-container-secondary [color=blue-10].point,:host [color=blue-10].badge-container-notification{background:#d9e8ff;color:#242424}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] }); }
|
|
1231
1231
|
}
|
|
1232
1232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
1233
1233
|
type: Component,
|
|
1234
|
-
args: [{ selector: 'ui-badge', template: "<div [class]=\"'badge-container-' + variant\"\n [attr.theme]=\"applicationTheme\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n [matTooltip]=\"(label.length > 25) ? label : ''\"\n [matTooltipClass]=\"applicationTheme\">\n <ng-container [ngSwitch]=\"variant\">\n <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY\">\n <ui-icon *ngIf=\"icon\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n </ng-container>\n <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n </ng-container>\n <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label.length > 25 && truncateLabel ? (label | slice : 0 : 25) + '...' : label }}</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}:host{display:block;width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;line-height:10px}:host .badge-container-primary .label,:host .badge-container-secondary .label{font-size:12px;line-height:14px}:host .badge-container-primary .badge-icon,:host .badge-container-secondary .badge-icon{margin-right:8px}:host .badge-container-secondary .point{border-radius:50%;width:8px;height:8px;margin-right:8px}:host .badge-container-secondary .label{color:#000!important}:host .badge-container-secondary[theme=dark],:host .badge-container-secondary[theme=light]{color:#242424}:host .badge-container-notification{width:20px;height:20px;border-radius:50%;color:#fff;line-height:10px}:host .badge-container-notification .label{font-size:12px}:host .badge-container-notification[theme=dark],:host .badge-container-notification[theme=light]{background:#242424!important;color:#fff!important;border-color:1px solid #ffffff}.flex-center,:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host .badge-container-secondary [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host .badge-container-secondary [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#e0e0e0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host .badge-container-secondary [color=teal].point,:host [color=teal].badge-container-notification{background:#46a997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host .badge-container-secondary [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host .badge-container-secondary [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host .badge-container-secondary [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#b5ddd5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host .badge-container-secondary [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#e9f0f1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host .badge-container-secondary [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#a9c2c9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host .badge-container-secondary [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888}.background-colors[color=success],:host [color=success].badge-container-primary,:host .badge-container-secondary [color=success].point,:host [color=success].badge-container-notification{background:#aae47a;color:#242424}.background-colors[color=warning],:host [color=warning].badge-container-primary,:host .badge-container-secondary [color=warning].point,:host [color=warning].badge-container-notification{background:#ffe1b3;color:#242424}.background-colors[color=negative],:host [color=negative].badge-container-primary,:host .badge-container-secondary [color=negative].point,:host [color=negative].badge-container-notification{background:#ffac9a;color:#242424}.background-colors[color=info],:host [color=info].badge-container-primary,:host .badge-container-secondary [color=info].point,:host [color=info].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=brand],:host [color=brand].badge-container-primary,:host .badge-container-secondary [color=brand].point,:host [color=brand].badge-container-notification{background:#ffe6fa;color:#242424}.background-colors[color=neutral],:host [color=neutral].badge-container-primary,:host .badge-container-secondary [color=neutral].point,:host [color=neutral].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=blue-20],:host [color=blue-20].badge-container-primary,:host .badge-container-secondary [color=blue-20].point,:host [color=blue-20].badge-container-notification{background:#99c1fe;color:#242424}.background-colors[color=blue-40],:host [color=blue-40].badge-container-primary,:host .badge-container-secondary [color=blue-40].point,:host [color=blue-40].badge-container-notification{background:#0165fc;color:#fff}.background-colors[color=pink-30],:host [color=pink-30].badge-container-primary,:host .badge-container-secondary [color=pink-30].point,:host [color=pink-30].badge-container-notification{background:#ffb3ee;color:#242424}.background-colors[color=blue-10],:host [color=blue-10].badge-container-primary,:host .badge-container-secondary [color=blue-10].point,:host [color=blue-10].badge-container-notification{background:#d9e8ff;color:#242424}\n"] }]
|
|
1234
|
+
args: [{ selector: 'ui-badge', template: "<div [class]=\"'badge-container-' + variant\"\n [attr.aria-label]=\"label\"\n [attr.theme]=\"applicationTheme\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n [matTooltip]=\"(label.length > 25) ? label : ''\"\n [matTooltipClass]=\"applicationTheme\">\n <ng-container [ngSwitch]=\"variant\">\n <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY\">\n <ui-icon *ngIf=\"icon\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n </ng-container>\n <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n </ng-container>\n <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label.length > 25 && truncateLabel ? (label | slice : 0 : 25) + '...' : label }}</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}:host{display:block;width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;line-height:10px}:host .badge-container-primary .label,:host .badge-container-secondary .label{font-size:12px;line-height:14px}:host .badge-container-primary .badge-icon,:host .badge-container-secondary .badge-icon{margin-right:8px}:host .badge-container-secondary .point{border-radius:50%;width:8px;height:8px;margin-right:8px}:host .badge-container-secondary .label{color:#000!important}:host .badge-container-secondary[theme=dark],:host .badge-container-secondary[theme=light]{color:#242424}:host .badge-container-notification{width:20px;height:20px;border-radius:50%;color:#fff;line-height:10px}:host .badge-container-notification .label{font-size:12px}:host .badge-container-notification[theme=dark],:host .badge-container-notification[theme=light]{background:#242424!important;color:#fff!important;border-color:1px solid #ffffff}.flex-center,:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host .badge-container-secondary [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host .badge-container-secondary [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#e0e0e0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host .badge-container-secondary [color=teal].point,:host [color=teal].badge-container-notification{background:#46a997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host .badge-container-secondary [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host .badge-container-secondary [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host .badge-container-secondary [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#b5ddd5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host .badge-container-secondary [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#e9f0f1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host .badge-container-secondary [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#a9c2c9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host .badge-container-secondary [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888}.background-colors[color=success],:host [color=success].badge-container-primary,:host .badge-container-secondary [color=success].point,:host [color=success].badge-container-notification{background:#aae47a;color:#242424}.background-colors[color=warning],:host [color=warning].badge-container-primary,:host .badge-container-secondary [color=warning].point,:host [color=warning].badge-container-notification{background:#ffe1b3;color:#242424}.background-colors[color=negative],:host [color=negative].badge-container-primary,:host .badge-container-secondary [color=negative].point,:host [color=negative].badge-container-notification{background:#ffac9a;color:#242424}.background-colors[color=info],:host [color=info].badge-container-primary,:host .badge-container-secondary [color=info].point,:host [color=info].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=brand],:host [color=brand].badge-container-primary,:host .badge-container-secondary [color=brand].point,:host [color=brand].badge-container-notification{background:#ffe6fa;color:#242424}.background-colors[color=neutral],:host [color=neutral].badge-container-primary,:host .badge-container-secondary [color=neutral].point,:host [color=neutral].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=blue-20],:host [color=blue-20].badge-container-primary,:host .badge-container-secondary [color=blue-20].point,:host [color=blue-20].badge-container-notification{background:#99c1fe;color:#242424}.background-colors[color=blue-40],:host [color=blue-40].badge-container-primary,:host .badge-container-secondary [color=blue-40].point,:host [color=blue-40].badge-container-notification{background:#0165fc;color:#fff}.background-colors[color=pink-30],:host [color=pink-30].badge-container-primary,:host .badge-container-secondary [color=pink-30].point,:host [color=pink-30].badge-container-notification{background:#ffb3ee;color:#242424}.background-colors[color=blue-10],:host [color=blue-10].badge-container-primary,:host .badge-container-secondary [color=blue-10].point,:host [color=blue-10].badge-container-notification{background:#d9e8ff;color:#242424}\n"] }]
|
|
1235
1235
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1236
1236
|
type: Optional
|
|
1237
1237
|
}, {
|
|
@@ -1362,7 +1362,8 @@ var COMMON$b = {
|
|
|
1362
1362
|
CLEAR: "Clear",
|
|
1363
1363
|
PHONE_NUMBER: "Phone number",
|
|
1364
1364
|
ON: "On",
|
|
1365
|
-
OFF: "Off"
|
|
1365
|
+
OFF: "Off",
|
|
1366
|
+
LOADING: "Loading..."
|
|
1366
1367
|
};
|
|
1367
1368
|
var DIALOG$b = {
|
|
1368
1369
|
CLOSE_LABEL: "Close dialog",
|
|
@@ -1421,6 +1422,9 @@ var ALERT_BANNER$b = {
|
|
|
1421
1422
|
ERROR: "Error:",
|
|
1422
1423
|
SUCCESS: "Success:"
|
|
1423
1424
|
};
|
|
1425
|
+
var TAG = {
|
|
1426
|
+
REMOVE: "Remove tag"
|
|
1427
|
+
};
|
|
1424
1428
|
var en = {
|
|
1425
1429
|
SNACKBAR: SNACKBAR$b,
|
|
1426
1430
|
AUTOCOMPLETE: AUTOCOMPLETE$b,
|
|
@@ -1437,7 +1441,8 @@ var en = {
|
|
|
1437
1441
|
SCALE_TABLE: SCALE_TABLE$b,
|
|
1438
1442
|
BUTTON: BUTTON$b,
|
|
1439
1443
|
MENU: MENU$b,
|
|
1440
|
-
ALERT_BANNER: ALERT_BANNER$b
|
|
1444
|
+
ALERT_BANNER: ALERT_BANNER$b,
|
|
1445
|
+
TAG: TAG
|
|
1441
1446
|
};
|
|
1442
1447
|
|
|
1443
1448
|
var SNACKBAR$a = {
|
|
@@ -4431,6 +4436,18 @@ class DialogComponent {
|
|
|
4431
4436
|
* @memberof DialogComponent
|
|
4432
4437
|
*/
|
|
4433
4438
|
this.language = LanguageService.defaultLanguage;
|
|
4439
|
+
/**
|
|
4440
|
+
* Primary button test id
|
|
4441
|
+
*
|
|
4442
|
+
* @memberof DialogComponent
|
|
4443
|
+
*/
|
|
4444
|
+
this.primaryButtonDataTestId = null;
|
|
4445
|
+
/**
|
|
4446
|
+
* Secondary button test id
|
|
4447
|
+
*
|
|
4448
|
+
* @memberof DialogComponent
|
|
4449
|
+
*/
|
|
4450
|
+
this.secondaryButtonDataTestId = null;
|
|
4434
4451
|
/**
|
|
4435
4452
|
* Color of the dialog.
|
|
4436
4453
|
* Defaults to Test Gorilla primary color.
|
|
@@ -4551,11 +4568,11 @@ class DialogComponent {
|
|
|
4551
4568
|
this.primaryButtonClickEvent.emit(event);
|
|
4552
4569
|
}
|
|
4553
4570
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DialogComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4554
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: DialogComponent, selector: "ui-dialog", inputs: { title: "title", showCloseButton: "showCloseButton", canCloseFn: "canCloseFn", secondaryButtonLabel: "secondaryButtonLabel", primaryButtonLabel: "primaryButtonLabel", secondaryButtonType: "secondaryButtonType", primaryButtonType: "primaryButtonType", language: "language", companyColor: "companyColor", applicationTheme: "applicationTheme", disablePrimaryButton: "disablePrimaryButton", disableClose: "disableClose", shouldDisableButtons: "shouldDisableButtons", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", keyboardOpen: "keyboardOpen" }, outputs: { closeEvent: "closeEvent", secondaryButtonClickEvent: "secondaryButtonClickEvent", primaryButtonClickEvent: "primaryButtonClickEvent" }, host: { listeners: { "keydown.esc": "onEsc($event)" }, properties: { "style.--color": "this.companyColor" } }, viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n <div\n mat-dialog-title\n class=\"dialog-title\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n >\n\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n <h3 class=\"bold\" id=\"labelledby\">{{ title }}</h3>\n <div *ngIf=\"showCloseButton\">\n <ui-button\n #closeButton\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"('COMMON.CLOSE') | uiTranslate : language\"\n (click)=\"onClose($event)\"\n (buttonClickEvent)=\"dismiss()\"\n id=\"dialog-close-button\"\n ></ui-button>\n </div>\n </div>\n <mat-dialog-content>\n <ng-content></ng-content>\n </mat-dialog-content>\n <div mat-dialog-actions *ngIf=\"secondaryButtonLabel !== '' || primaryButtonLabel !== ''\">\n <ui-button\n [companyColor]=\"companyColor\"\n [variant]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"!!secondaryButtonLabel\"\n [label]=\"secondaryButtonLabel\"\n (click)=\"onSecondaryButtonClick($event)\"\n ></ui-button>\n <ui-button\n [variant]=\"primaryButtonType\"\n *ngIf=\"!!primaryButtonLabel\"\n [disabled]=\"disableButtons || disablePrimaryButton\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"onPrimaryButtonClick($event)\"\n [label]=\"primaryButtonLabel\"\n [companyColor]=\"companyColor\"\n (buttonClickEvent)=\"dismiss()\"\n ></ui-button>\n </div>\n\n<!-- This is announcement for screen reader that dialog was closed-->\n <div aria-live=\"assertive\" role=\"alert\" style=\"position: absolute; left: -9999px;\">\n <span *ngIf=\"modalClosed\">{{ 'DIALOG.CLOSED' | uiTranslate : language }}</span>\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}.ui-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper.small{width:600px}.ui-dialog-wrapper.large{width:956px}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:16px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{padding:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:10px}.ui-dialog-wrapper.dark .dialog-title,.ui-dialog-wrapper.light .dialog-title{height:40px;padding:0;margin-bottom:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-content,.ui-dialog-wrapper.light .mat-mdc-dialog-content{padding:0}.ui-dialog-wrapper.dark .mat-mdc-dialog-actions,.ui-dialog-wrapper.light .mat-mdc-dialog-actions{padding:0;margin-top:32px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000;line-height:20px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container{--mdc-dialog-container-color: #424242}.ui-dialog-wrapper.dark .mat-mdc-dialog-content{color:#fff!important}.ui-dialog-wrapper.dark .dialog-title{--mdc-dialog-subhead-color: #ffffff}.dialog-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0}.dialog-title .close{margin-right:-24px}.dialog-title:before{content:none}.mat-mdc-dialog-actions{display:flex;justify-content:flex-end;column-gap:16px;padding:16px 0 0;margin-bottom:0;min-height:48px}@media (max-width: 1024px){.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:320px;max-width:600px;border-radius:0}.mat-mdc-dialog-content{max-height:524px}}@media (max-width: 600px){.cdk-overlay-pane.ui-dialog-wrapper{max-width:100%!important;min-height:100%;display:flex;justify-content:center}.cdk-overlay-pane.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:100%;max-width:100%;height:100%;display:flex;flex-grow:1;border-radius:0}ui-dialog{height:100%;display:flex;flex-flow:column}.mat-mdc-dialog-content{max-height:unset;display:flex;flex-grow:1;flex-direction:column}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { 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", "language", "preventDefault", "tooltipPosition"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4571
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: DialogComponent, selector: "ui-dialog", inputs: { title: "title", showCloseButton: "showCloseButton", canCloseFn: "canCloseFn", secondaryButtonLabel: "secondaryButtonLabel", primaryButtonLabel: "primaryButtonLabel", secondaryButtonType: "secondaryButtonType", primaryButtonType: "primaryButtonType", language: "language", primaryButtonDataTestId: "primaryButtonDataTestId", secondaryButtonDataTestId: "secondaryButtonDataTestId", companyColor: "companyColor", applicationTheme: "applicationTheme", disablePrimaryButton: "disablePrimaryButton", disableClose: "disableClose", shouldDisableButtons: "shouldDisableButtons", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", keyboardOpen: "keyboardOpen" }, outputs: { closeEvent: "closeEvent", secondaryButtonClickEvent: "secondaryButtonClickEvent", primaryButtonClickEvent: "primaryButtonClickEvent" }, host: { listeners: { "keydown.esc": "onEsc($event)" }, properties: { "style.--color": "this.companyColor" } }, viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n <div\n mat-dialog-title\n class=\"dialog-title\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n >\n\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n <h3 class=\"bold\" id=\"labelledby\">{{ title }}</h3>\n <div *ngIf=\"showCloseButton\">\n <ui-button\n #closeButton\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"('COMMON.CLOSE') | uiTranslate : language\"\n (click)=\"onClose($event)\"\n (buttonClickEvent)=\"dismiss()\"\n id=\"dialog-close-button\"\n ></ui-button>\n </div>\n </div>\n <mat-dialog-content>\n <ng-content></ng-content>\n </mat-dialog-content>\n <div mat-dialog-actions *ngIf=\"secondaryButtonLabel !== '' || primaryButtonLabel !== ''\">\n <ui-button\n [companyColor]=\"companyColor\"\n [variant]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"!!secondaryButtonLabel\"\n [label]=\"secondaryButtonLabel\"\n [attr.data-testid]=\"secondaryButtonDataTestId\"\n (click)=\"onSecondaryButtonClick($event)\"\n ></ui-button>\n <ui-button\n [variant]=\"primaryButtonType\"\n *ngIf=\"!!primaryButtonLabel\"\n [disabled]=\"disableButtons || disablePrimaryButton\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"onPrimaryButtonClick($event)\"\n [label]=\"primaryButtonLabel\"\n [companyColor]=\"companyColor\"\n [attr.data-testid]=\"primaryButtonDataTestId\"\n (buttonClickEvent)=\"dismiss()\"\n ></ui-button>\n </div>\n\n<!-- This is announcement for screen reader that dialog was closed-->\n <div aria-live=\"assertive\" role=\"alert\" style=\"position: absolute; left: -9999px;\">\n <span *ngIf=\"modalClosed\">{{ 'DIALOG.CLOSED' | uiTranslate : language }}</span>\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}.ui-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper.small{width:600px}.ui-dialog-wrapper.large{width:956px}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:16px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{padding:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:10px}.ui-dialog-wrapper.dark .dialog-title,.ui-dialog-wrapper.light .dialog-title{height:40px;padding:0;margin-bottom:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-content,.ui-dialog-wrapper.light .mat-mdc-dialog-content{padding:0}.ui-dialog-wrapper.dark .mat-mdc-dialog-actions,.ui-dialog-wrapper.light .mat-mdc-dialog-actions{padding:0;margin-top:32px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000;line-height:20px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container{--mdc-dialog-container-color: #424242}.ui-dialog-wrapper.dark .mat-mdc-dialog-content{color:#fff!important}.ui-dialog-wrapper.dark .dialog-title{--mdc-dialog-subhead-color: #ffffff}.dialog-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0}.dialog-title .close{margin-right:-24px}.dialog-title:before{content:none}.mat-mdc-dialog-actions{display:flex;justify-content:flex-end;column-gap:16px;padding:16px 0 0;margin-bottom:0;min-height:48px}@media (max-width: 1024px){.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:320px;max-width:600px;border-radius:0}.mat-mdc-dialog-content{max-height:524px}}@media (max-width: 600px){.cdk-overlay-pane.ui-dialog-wrapper{max-width:100%!important;min-height:100%;display:flex;justify-content:center}.cdk-overlay-pane.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:100%;max-width:100%;height:100%;display:flex;flex-grow:1;border-radius:0}ui-dialog{height:100%;display:flex;flex-flow:column}.mat-mdc-dialog-content{max-height:unset;display:flex;flex-grow:1;flex-direction:column}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { 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", "language", "preventDefault", "tooltipPosition"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4555
4572
|
}
|
|
4556
4573
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DialogComponent, decorators: [{
|
|
4557
4574
|
type: Component,
|
|
4558
|
-
args: [{ selector: 'ui-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n <div\n mat-dialog-title\n class=\"dialog-title\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n >\n\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n <h3 class=\"bold\" id=\"labelledby\">{{ title }}</h3>\n <div *ngIf=\"showCloseButton\">\n <ui-button\n #closeButton\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"('COMMON.CLOSE') | uiTranslate : language\"\n (click)=\"onClose($event)\"\n (buttonClickEvent)=\"dismiss()\"\n id=\"dialog-close-button\"\n ></ui-button>\n </div>\n </div>\n <mat-dialog-content>\n <ng-content></ng-content>\n </mat-dialog-content>\n <div mat-dialog-actions *ngIf=\"secondaryButtonLabel !== '' || primaryButtonLabel !== ''\">\n <ui-button\n [companyColor]=\"companyColor\"\n [variant]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"!!secondaryButtonLabel\"\n [label]=\"secondaryButtonLabel\"\n (click)=\"onSecondaryButtonClick($event)\"\n ></ui-button>\n <ui-button\n [variant]=\"primaryButtonType\"\n *ngIf=\"!!primaryButtonLabel\"\n [disabled]=\"disableButtons || disablePrimaryButton\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"onPrimaryButtonClick($event)\"\n [label]=\"primaryButtonLabel\"\n [companyColor]=\"companyColor\"\n (buttonClickEvent)=\"dismiss()\"\n ></ui-button>\n </div>\n\n<!-- This is announcement for screen reader that dialog was closed-->\n <div aria-live=\"assertive\" role=\"alert\" style=\"position: absolute; left: -9999px;\">\n <span *ngIf=\"modalClosed\">{{ 'DIALOG.CLOSED' | uiTranslate : language }}</span>\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}.ui-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper.small{width:600px}.ui-dialog-wrapper.large{width:956px}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:16px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{padding:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:10px}.ui-dialog-wrapper.dark .dialog-title,.ui-dialog-wrapper.light .dialog-title{height:40px;padding:0;margin-bottom:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-content,.ui-dialog-wrapper.light .mat-mdc-dialog-content{padding:0}.ui-dialog-wrapper.dark .mat-mdc-dialog-actions,.ui-dialog-wrapper.light .mat-mdc-dialog-actions{padding:0;margin-top:32px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000;line-height:20px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container{--mdc-dialog-container-color: #424242}.ui-dialog-wrapper.dark .mat-mdc-dialog-content{color:#fff!important}.ui-dialog-wrapper.dark .dialog-title{--mdc-dialog-subhead-color: #ffffff}.dialog-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0}.dialog-title .close{margin-right:-24px}.dialog-title:before{content:none}.mat-mdc-dialog-actions{display:flex;justify-content:flex-end;column-gap:16px;padding:16px 0 0;margin-bottom:0;min-height:48px}@media (max-width: 1024px){.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:320px;max-width:600px;border-radius:0}.mat-mdc-dialog-content{max-height:524px}}@media (max-width: 600px){.cdk-overlay-pane.ui-dialog-wrapper{max-width:100%!important;min-height:100%;display:flex;justify-content:center}.cdk-overlay-pane.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:100%;max-width:100%;height:100%;display:flex;flex-grow:1;border-radius:0}ui-dialog{height:100%;display:flex;flex-flow:column}.mat-mdc-dialog-content{max-height:unset;display:flex;flex-grow:1;flex-direction:column}}\n"] }]
|
|
4575
|
+
args: [{ selector: 'ui-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n <div\n mat-dialog-title\n class=\"dialog-title\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n >\n\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n <h3 class=\"bold\" id=\"labelledby\">{{ title }}</h3>\n <div *ngIf=\"showCloseButton\">\n <ui-button\n #closeButton\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"('COMMON.CLOSE') | uiTranslate : language\"\n (click)=\"onClose($event)\"\n (buttonClickEvent)=\"dismiss()\"\n id=\"dialog-close-button\"\n ></ui-button>\n </div>\n </div>\n <mat-dialog-content>\n <ng-content></ng-content>\n </mat-dialog-content>\n <div mat-dialog-actions *ngIf=\"secondaryButtonLabel !== '' || primaryButtonLabel !== ''\">\n <ui-button\n [companyColor]=\"companyColor\"\n [variant]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"!!secondaryButtonLabel\"\n [label]=\"secondaryButtonLabel\"\n [attr.data-testid]=\"secondaryButtonDataTestId\"\n (click)=\"onSecondaryButtonClick($event)\"\n ></ui-button>\n <ui-button\n [variant]=\"primaryButtonType\"\n *ngIf=\"!!primaryButtonLabel\"\n [disabled]=\"disableButtons || disablePrimaryButton\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"onPrimaryButtonClick($event)\"\n [label]=\"primaryButtonLabel\"\n [companyColor]=\"companyColor\"\n [attr.data-testid]=\"primaryButtonDataTestId\"\n (buttonClickEvent)=\"dismiss()\"\n ></ui-button>\n </div>\n\n<!-- This is announcement for screen reader that dialog was closed-->\n <div aria-live=\"assertive\" role=\"alert\" style=\"position: absolute; left: -9999px;\">\n <span *ngIf=\"modalClosed\">{{ 'DIALOG.CLOSED' | uiTranslate : language }}</span>\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}.ui-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper.small{width:600px}.ui-dialog-wrapper.large{width:956px}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:16px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{padding:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:10px}.ui-dialog-wrapper.dark .dialog-title,.ui-dialog-wrapper.light .dialog-title{height:40px;padding:0;margin-bottom:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-content,.ui-dialog-wrapper.light .mat-mdc-dialog-content{padding:0}.ui-dialog-wrapper.dark .mat-mdc-dialog-actions,.ui-dialog-wrapper.light .mat-mdc-dialog-actions{padding:0;margin-top:32px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000;line-height:20px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container{--mdc-dialog-container-color: #424242}.ui-dialog-wrapper.dark .mat-mdc-dialog-content{color:#fff!important}.ui-dialog-wrapper.dark .dialog-title{--mdc-dialog-subhead-color: #ffffff}.dialog-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0}.dialog-title .close{margin-right:-24px}.dialog-title:before{content:none}.mat-mdc-dialog-actions{display:flex;justify-content:flex-end;column-gap:16px;padding:16px 0 0;margin-bottom:0;min-height:48px}@media (max-width: 1024px){.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:320px;max-width:600px;border-radius:0}.mat-mdc-dialog-content{max-height:524px}}@media (max-width: 600px){.cdk-overlay-pane.ui-dialog-wrapper{max-width:100%!important;min-height:100%;display:flex;justify-content:center}.cdk-overlay-pane.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:100%;max-width:100%;height:100%;display:flex;flex-grow:1;border-radius:0}ui-dialog{height:100%;display:flex;flex-flow:column}.mat-mdc-dialog-content{max-height:unset;display:flex;flex-grow:1;flex-direction:column}}\n"] }]
|
|
4559
4576
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4560
4577
|
type: Optional
|
|
4561
4578
|
}, {
|
|
@@ -4580,6 +4597,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
4580
4597
|
type: Input
|
|
4581
4598
|
}], language: [{
|
|
4582
4599
|
type: Input
|
|
4600
|
+
}], primaryButtonDataTestId: [{
|
|
4601
|
+
type: Input
|
|
4602
|
+
}], secondaryButtonDataTestId: [{
|
|
4603
|
+
type: Input
|
|
4583
4604
|
}], companyColor: [{
|
|
4584
4605
|
type: HostBinding,
|
|
4585
4606
|
args: ['style.--color']
|
|
@@ -5347,6 +5368,27 @@ class ProgressBarComponent {
|
|
|
5347
5368
|
* @memberof ProgressBarComponent
|
|
5348
5369
|
*/
|
|
5349
5370
|
this.applicationTheme = 'light';
|
|
5371
|
+
/**
|
|
5372
|
+
* A string representing the ARIA requirement for accessibility.
|
|
5373
|
+
* This attribute is used to indicate whether an input field is required for form submission.
|
|
5374
|
+
* @type {string}
|
|
5375
|
+
* @memberof ProgressBarComponent
|
|
5376
|
+
*/
|
|
5377
|
+
this.ariaLabel = '';
|
|
5378
|
+
/**
|
|
5379
|
+
* A string representing the ARIA requirement for accessibility.
|
|
5380
|
+
* This attribute is used to indicate whether an input field is required for form submission.
|
|
5381
|
+
* @type {string}
|
|
5382
|
+
* @memberof ProgressBarComponent
|
|
5383
|
+
*/
|
|
5384
|
+
this.ariaDescribedBy = '';
|
|
5385
|
+
/**
|
|
5386
|
+
* The language to be used
|
|
5387
|
+
* @property language
|
|
5388
|
+
* @type {Language}
|
|
5389
|
+
* @memberof ProgressBarComponent
|
|
5390
|
+
*/
|
|
5391
|
+
this.language = LanguageService.defaultLanguage;
|
|
5350
5392
|
if (defaultAppTheme) {
|
|
5351
5393
|
this.applicationTheme = defaultAppTheme;
|
|
5352
5394
|
}
|
|
@@ -5357,11 +5399,11 @@ class ProgressBarComponent {
|
|
|
5357
5399
|
}
|
|
5358
5400
|
}
|
|
5359
5401
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ProgressBarComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5360
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: { companyColor: "companyColor", progress: "progress", mode: "mode", buffer: "buffer", applicationTheme: "applicationTheme" }, host: { properties: { "style.--color": "this.companyColor" } }, usesOnChanges: true, ngImport: i0, template: "<mat-progress-bar\n [mode]=\"mode\"\n [value]=\"progress\"\n [bufferValue]=\"buffer\"\n aria-label=\"Progress bar\"\n title=\"progress-bar\"\n class=\"progress-bar\"\n [attr.theme]=\"applicationTheme\"\n></mat-progress-bar>\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-progress-bar.progress-bar{--mdc-linear-progress-active-indicator-color: var(--color);--mdc-linear-progress-track-color: var(--color);--mdc-linear-progress-active-indicator-height: 8px;--mdc-linear-progress-track-height: 8px;height:8px;border-radius:8px}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"1\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:60% 8px!important;border-bottom-right-radius:60% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"2\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:35% 8px!important;border-bottom-right-radius:35% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"3\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:30% 8px!important;border-bottom-right-radius:30% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"4\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:20% 8px!important;border-bottom-right-radius:20% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"5\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:15% 8px!important;border-bottom-right-radius:15% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"6\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"7\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"8\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"9\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"10\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"11\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:10% 8px!important;border-bottom-right-radius:10% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"12\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"13\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:7% 8px!important;border-bottom-right-radius:7% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"14\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"15\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:6% 8px!important;border-bottom-right-radius:6% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"16\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:5% 8px!important;border-bottom-right-radius:5% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"17\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"18\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"19\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"20\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"21\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"22\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"23\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:4% 8px!important;border-bottom-right-radius:4% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"24\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"25\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"26\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"27\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:3% 8px!important;border-bottom-right-radius:3% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"28\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"29\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"30\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"31\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"32\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"33\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:2.5% 8px!important;border-bottom-right-radius:2.5% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"34\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"35\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"36\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"37\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"38\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"39\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"40\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"41\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:2.2% 8px!important;border-bottom-right-radius:2.2% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"42\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"43\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"44\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"45\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"46\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"47\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"48\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"49\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"50\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"51\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"52\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"53\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:2% 8px!important;border-bottom-right-radius:2% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"54\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"55\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"56\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"57\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"58\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"59\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"60\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"61\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"62\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"63\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"64\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:1.5% 8px!important;border-bottom-right-radius:1.5% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"65\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"66\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"67\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"68\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"69\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:1.4% 8px!important;border-bottom-right-radius:1.4% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"70\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"71\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"72\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"73\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"74\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:1.2% 8px!important;border-bottom-right-radius:1.2% 8px!important}.mat-mdc-progress-bar.progress-bar ::ng-deep .mdc-linear-progress__buffer-bar{background-color:#e0e0e0;height:8px}.mat-mdc-progress-bar.progress-bar ::ng-deep .mdc-linear-progress__bar-inner{border-top-width:8px;border-top-right-radius:1% 8px!important;border-bottom-right-radius:1% 8px!important}.mat-mdc-progress-bar.progress-bar[theme=dark] ::ng-deep .mdc-linear-progress__buffer-bar,.mat-mdc-progress-bar.progress-bar[theme=light] ::ng-deep .mdc-linear-progress__buffer-bar{background-color:#e9e9e9}\n"], dependencies: [{ kind: "component", type: i1$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5402
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: { companyColor: "companyColor", progress: "progress", mode: "mode", buffer: "buffer", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaDescribedBy: "ariaDescribedBy", language: "language" }, host: { properties: { "style.--color": "this.companyColor" } }, usesOnChanges: true, ngImport: i0, template: "<mat-progress-bar\n [mode]=\"mode\"\n [value]=\"progress\"\n [bufferValue]=\"buffer\"\n title=\"progress-bar\"\n class=\"progress-bar\"\n [attr.theme]=\"applicationTheme\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-live]=\"'polite'\"\n [attr.aria-describedby]=\"'describedBy'\"\n>\n</mat-progress-bar>\n<div style=\"position: absolute; left: -9999px\" role=\"alert\" *ngIf=\"mode === 'indeterminate'\">\n {{ 'COMMON.LOADING' | uiTranslate : language }}\n</div>\n<div style=\"display: none\" id=\"describedBy\">\n {{ ariaDescribedBy }}\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-mdc-progress-bar.progress-bar{--mdc-linear-progress-active-indicator-color: var(--color);--mdc-linear-progress-track-color: var(--color);--mdc-linear-progress-active-indicator-height: 8px;--mdc-linear-progress-track-height: 8px;height:8px;border-radius:8px}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"1\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:60% 8px!important;border-bottom-right-radius:60% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"2\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:35% 8px!important;border-bottom-right-radius:35% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"3\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:30% 8px!important;border-bottom-right-radius:30% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"4\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:20% 8px!important;border-bottom-right-radius:20% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"5\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:15% 8px!important;border-bottom-right-radius:15% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"6\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"7\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"8\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"9\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"10\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"11\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:10% 8px!important;border-bottom-right-radius:10% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"12\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"13\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:7% 8px!important;border-bottom-right-radius:7% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"14\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"15\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:6% 8px!important;border-bottom-right-radius:6% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"16\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:5% 8px!important;border-bottom-right-radius:5% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"17\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"18\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"19\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"20\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"21\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"22\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"23\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:4% 8px!important;border-bottom-right-radius:4% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"24\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"25\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"26\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"27\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:3% 8px!important;border-bottom-right-radius:3% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"28\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"29\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"30\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"31\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"32\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"33\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:2.5% 8px!important;border-bottom-right-radius:2.5% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"34\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"35\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"36\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"37\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"38\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"39\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"40\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"41\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:2.2% 8px!important;border-bottom-right-radius:2.2% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"42\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"43\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"44\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"45\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"46\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"47\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"48\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"49\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"50\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"51\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"52\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"53\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:2% 8px!important;border-bottom-right-radius:2% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"54\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"55\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"56\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"57\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"58\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"59\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"60\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"61\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"62\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"63\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"64\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:1.5% 8px!important;border-bottom-right-radius:1.5% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"65\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"66\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"67\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"68\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"69\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:1.4% 8px!important;border-bottom-right-radius:1.4% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"70\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"71\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"72\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"73\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"74\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:1.2% 8px!important;border-bottom-right-radius:1.2% 8px!important}.mat-mdc-progress-bar.progress-bar ::ng-deep .mdc-linear-progress__buffer-bar{background-color:#e0e0e0;height:8px}.mat-mdc-progress-bar.progress-bar ::ng-deep .mdc-linear-progress__bar-inner{border-top-width:8px;border-top-right-radius:1% 8px!important;border-bottom-right-radius:1% 8px!important}.mat-mdc-progress-bar.progress-bar[theme=dark] ::ng-deep .mdc-linear-progress__buffer-bar,.mat-mdc-progress-bar.progress-bar[theme=light] ::ng-deep .mdc-linear-progress__buffer-bar{background-color:#e9e9e9}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5361
5403
|
}
|
|
5362
5404
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
5363
5405
|
type: Component,
|
|
5364
|
-
args: [{ selector: 'ui-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-progress-bar\n [mode]=\"mode\"\n [value]=\"progress\"\n [bufferValue]=\"buffer\"\n aria-label=\"Progress bar\"\n title=\"progress-bar\"\n class=\"progress-bar\"\n [attr.theme]=\"applicationTheme\"\n></mat-progress-bar>\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-progress-bar.progress-bar{--mdc-linear-progress-active-indicator-color: var(--color);--mdc-linear-progress-track-color: var(--color);--mdc-linear-progress-active-indicator-height: 8px;--mdc-linear-progress-track-height: 8px;height:8px;border-radius:8px}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"1\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:60% 8px!important;border-bottom-right-radius:60% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"2\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:35% 8px!important;border-bottom-right-radius:35% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"3\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:30% 8px!important;border-bottom-right-radius:30% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"4\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:20% 8px!important;border-bottom-right-radius:20% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"5\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:15% 8px!important;border-bottom-right-radius:15% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"6\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"7\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"8\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"9\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"10\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"11\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:10% 8px!important;border-bottom-right-radius:10% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"12\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"13\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:7% 8px!important;border-bottom-right-radius:7% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"14\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"15\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:6% 8px!important;border-bottom-right-radius:6% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"16\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:5% 8px!important;border-bottom-right-radius:5% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"17\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"18\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"19\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"20\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"21\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"22\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"23\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:4% 8px!important;border-bottom-right-radius:4% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"24\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"25\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"26\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"27\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:3% 8px!important;border-bottom-right-radius:3% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"28\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"29\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"30\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"31\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"32\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"33\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:2.5% 8px!important;border-bottom-right-radius:2.5% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"34\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"35\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"36\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"37\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"38\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"39\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"40\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"41\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:2.2% 8px!important;border-bottom-right-radius:2.2% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"42\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"43\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"44\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"45\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"46\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"47\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"48\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"49\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"50\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"51\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"52\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"53\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:2% 8px!important;border-bottom-right-radius:2% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"54\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"55\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"56\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"57\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"58\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"59\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"60\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"61\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"62\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"63\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"64\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:1.5% 8px!important;border-bottom-right-radius:1.5% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"65\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"66\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"67\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"68\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"69\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:1.4% 8px!important;border-bottom-right-radius:1.4% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"70\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"71\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"72\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"73\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"74\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:1.2% 8px!important;border-bottom-right-radius:1.2% 8px!important}.mat-mdc-progress-bar.progress-bar ::ng-deep .mdc-linear-progress__buffer-bar{background-color:#e0e0e0;height:8px}.mat-mdc-progress-bar.progress-bar ::ng-deep .mdc-linear-progress__bar-inner{border-top-width:8px;border-top-right-radius:1% 8px!important;border-bottom-right-radius:1% 8px!important}.mat-mdc-progress-bar.progress-bar[theme=dark] ::ng-deep .mdc-linear-progress__buffer-bar,.mat-mdc-progress-bar.progress-bar[theme=light] ::ng-deep .mdc-linear-progress__buffer-bar{background-color:#e9e9e9}\n"] }]
|
|
5406
|
+
args: [{ selector: 'ui-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-progress-bar\n [mode]=\"mode\"\n [value]=\"progress\"\n [bufferValue]=\"buffer\"\n title=\"progress-bar\"\n class=\"progress-bar\"\n [attr.theme]=\"applicationTheme\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-live]=\"'polite'\"\n [attr.aria-describedby]=\"'describedBy'\"\n>\n</mat-progress-bar>\n<div style=\"position: absolute; left: -9999px\" role=\"alert\" *ngIf=\"mode === 'indeterminate'\">\n {{ 'COMMON.LOADING' | uiTranslate : language }}\n</div>\n<div style=\"display: none\" id=\"describedBy\">\n {{ ariaDescribedBy }}\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-mdc-progress-bar.progress-bar{--mdc-linear-progress-active-indicator-color: var(--color);--mdc-linear-progress-track-color: var(--color);--mdc-linear-progress-active-indicator-height: 8px;--mdc-linear-progress-track-height: 8px;height:8px;border-radius:8px}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"1\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:60% 8px!important;border-bottom-right-radius:60% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"2\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:35% 8px!important;border-bottom-right-radius:35% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"3\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:30% 8px!important;border-bottom-right-radius:30% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"4\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:20% 8px!important;border-bottom-right-radius:20% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"5\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:15% 8px!important;border-bottom-right-radius:15% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"6\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"7\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"8\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"9\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"10\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"11\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:10% 8px!important;border-bottom-right-radius:10% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"12\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"13\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:7% 8px!important;border-bottom-right-radius:7% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"14\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"15\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:6% 8px!important;border-bottom-right-radius:6% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"16\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:5% 8px!important;border-bottom-right-radius:5% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"17\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"18\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"19\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"20\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"21\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"22\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"23\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:4% 8px!important;border-bottom-right-radius:4% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"24\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"25\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"26\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"27\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:3% 8px!important;border-bottom-right-radius:3% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"28\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"29\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"30\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"31\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"32\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"33\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:2.5% 8px!important;border-bottom-right-radius:2.5% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"34\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"35\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"36\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"37\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"38\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"39\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"40\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"41\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:2.2% 8px!important;border-bottom-right-radius:2.2% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"42\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"43\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"44\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"45\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"46\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"47\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"48\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"49\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"50\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"51\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"52\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"53\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:2% 8px!important;border-bottom-right-radius:2% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"54\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"55\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"56\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"57\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"58\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"59\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"60\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"61\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"62\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"63\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"64\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:1.5% 8px!important;border-bottom-right-radius:1.5% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"65\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"66\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"67\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"68\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"69\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:1.4% 8px!important;border-bottom-right-radius:1.4% 8px!important}.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"70\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"71\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"72\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"73\"] ::ng-deep .mdc-linear-progress__bar-inner,.mat-mdc-progress-bar.progress-bar[aria-valuenow=\"74\"] ::ng-deep .mdc-linear-progress__bar-inner{border-top-right-radius:1.2% 8px!important;border-bottom-right-radius:1.2% 8px!important}.mat-mdc-progress-bar.progress-bar ::ng-deep .mdc-linear-progress__buffer-bar{background-color:#e0e0e0;height:8px}.mat-mdc-progress-bar.progress-bar ::ng-deep .mdc-linear-progress__bar-inner{border-top-width:8px;border-top-right-radius:1% 8px!important;border-bottom-right-radius:1% 8px!important}.mat-mdc-progress-bar.progress-bar[theme=dark] ::ng-deep .mdc-linear-progress__buffer-bar,.mat-mdc-progress-bar.progress-bar[theme=light] ::ng-deep .mdc-linear-progress__buffer-bar{background-color:#e9e9e9}\n"] }]
|
|
5365
5407
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
5366
5408
|
type: Optional
|
|
5367
5409
|
}, {
|
|
@@ -5380,6 +5422,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
5380
5422
|
type: Input
|
|
5381
5423
|
}], applicationTheme: [{
|
|
5382
5424
|
type: Input
|
|
5425
|
+
}], ariaLabel: [{
|
|
5426
|
+
type: Input
|
|
5427
|
+
}], ariaDescribedBy: [{
|
|
5428
|
+
type: Input
|
|
5429
|
+
}], language: [{
|
|
5430
|
+
type: Input
|
|
5383
5431
|
}] } });
|
|
5384
5432
|
|
|
5385
5433
|
class DragDropDirective {
|
|
@@ -5603,7 +5651,7 @@ class FileUploadComponent {
|
|
|
5603
5651
|
useExisting: forwardRef(() => FileUploadComponent),
|
|
5604
5652
|
multi: true,
|
|
5605
5653
|
},
|
|
5606
|
-
], viewQueries: [{ propertyName: "fileDrop", first: true, predicate: ["fileDrop"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <div\n class=\"upload-file-container\"\n uiDragDrop\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ 'upload-errors': !!errors || isMissedMinSize, 'upload-file-container-disabled': disabled }\"\n (fileDropped)=\"onFileDropped($event)\"\n [tabIndex]=\"0\"\n (keydown)=\"onKeydown($event)\"\n (click)=\"fileDrop.nativeElement.click()\"\n >\n <span style=\"position: absolute; left: -9999px;\" [attr.aria-live]=\"'polite'\">\n {{ success ? ('FILE_UPLOAD.FILE_UPLOADING_SUCCESS' | uiTranslate : language) : progress ? ('FILE_UPLOAD.UPLOADING' | uiTranslate : language) : '' }}\n </span>\n <div *ngIf=\"(browse && !(success && !!file && progress))\" [@inOutAnimation] class=\"upload-files\">\n <div class=\"upload-browse\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n\n <div class=\"errors\" *ngIf=\"!!errors || isMissedMinSize\" role=\"alert\">\n <ng-container *ngIf=\"!!errors\">\n <span *ngFor=\"let error of errors\"><ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n {{ error }}</span>\n </ng-container>\n\n <span *ngIf=\"isMissedMinSize\">\n <ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate : language : { min: minFileSizeMB } }}\n </span>\n </div>\n <input\n [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"'upload-supported-files'\"\n [tabIndex]=\"-1\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"file\"\n [accept]=\"supportedFileTypes\"\n [disabled]=\"disabled\"\n (change)=\"onChangeUpload($event)\"\n />\n <label for=\"file\" class=\"transparent\">{{ !!file && success ? '' : (translationContext + 'CHOOSE_FILE') | uiTranslate : language }}</label>\n <p\n *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate : language }}\n <span\n class=\"semibold\"> {{ (translationContext + 'BROWSE') | uiTranslate : language | lowercase }}</span> {{ (translationContext + 'YOUR_FILES') | uiTranslate : language }}\n </p>\n <span class=\"upload-text\">{{ maxFileSizeMB }}{{ (translationContext + 'MAX_SIZE') | uiTranslate : language }}</span>\n <span *ngIf=\"minFileSizeMB\" class=\"upload-text\">{{ minFileSizeMB }}{{ (translationContext + 'MIN_SIZE') | uiTranslate : language }}</span>\n </div>\n </div>\n <div class=\"upload-change\" [@inOutAnimationChange] *ngIf=\"!!success && !!file && !!progress\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n <input\n [tabIndex]=\"-1\"\n [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"success || progress ? '' : 'supported-file-types'\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"fileTest\"\n [accept]=\"supportedFileTypes\"\n (change)=\"onChangeUpload($event)\"\n [disabled]=\"disabled\"\n />\n <label for=\"file\" class=\"transparent\">{{ !!file && success ? '' : (translationContext + 'CHOOSE_FILE') | uiTranslate : language }}</label>\n <p\n *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate : language }} <span\n class=\"semibold\">{{ (translationContext + 'CHANGE') | uiTranslate : language | lowercase }}</span> {{ (translationContext + 'YOUR_FILES') | uiTranslate : language }}\n </p>\n <span class=\"upload-text\"\n ><strong>{{ file.name }}</strong></span\n >\n </div>\n <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n <p>{{ file.name }}</p>\n <ui-progress-bar [progress]=\"uploadProgress\"\n [companyColor]=\"compColor\"\n [applicationTheme]=\"applicationTheme\"></ui-progress-bar>\n <p class=\"upload-text\">\n {{ (translationContext + 'UPLOADING') | uiTranslate : language }} <span>{{ uploadProgress }}</span\n >%\n </p>\n </div>\n\n <ng-template #iconTpl>\n <ui-icon *ngIf=\"applicationTheme === 'classic'; else rebrandedIconTpl\" class=\"upload-icon\"\n name=\"File-upload\"></ui-icon>\n <ng-template #rebrandedIconTpl>\n <ui-icon class=\"upload-icon\"\n name=\"Upload\"\n [size]=\"'24'\"\n [applicationTheme]=\"applicationTheme\"></ui-icon>\n </ng-template>\n </ng-template>\n <ng-template #rebrandedDnDCopyTpl>\n <p id=\"'drag-and-drop'\">{{ (translationContext + 'DRAG_AND_DROP') | uiTranslate : language }}</p>\n </ng-template>\n\n <div\n *ngIf=\"!!supportedFileTypes\"\n [attr.theme]=\"applicationTheme\"\n class=\"upload-supported-files\"\n id=\"upload-supported-files\">\n <span >{{ (translationContext + 'SUPPORTED_FILE_TYPES') | uiTranslate : language }}</span>{{ supportedFileTypes }}\n </div>\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}.upload-file-container{border-radius:8px;border:1px dashed #888888;background:#fff;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px;cursor:pointer}.upload-file-container:focus-visible{outline-offset:2px;outline:2px solid #242424;animation:focus-ring-animation .4s forwards}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-change,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-change ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-change ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-change input,.upload-file-container .upload-browse input{visibility:hidden;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-change .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:20px}.upload-file-container .upload-change p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-change p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline;color:var(--color)}.upload-file-container .upload-change .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:20px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-change .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-change .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-change .errors .error-icon,.upload-file-container .upload-browse .errors .error-icon{margin-right:4px}.upload-file-container .upload-change .errors .error-icon svg,.upload-file-container .upload-browse .errors .error-icon svg{color:#cb7b7a}.upload-file-container .upload-change .errors .error-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors .error-icon mat-icon.size-16 svg{width:16px;height:16px}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-file-container[theme=dark],.upload-file-container[theme=light]{border-radius:10px;border-color:#242424}.upload-file-container[theme=dark].upload-file-container-disabled,.upload-file-container[theme=light].upload-file-container-disabled{border-color:#919191;color:#919191;background-color:#f4f4f4}.upload-file-container[theme=dark].upload-file-container-disabled .upload-icon svg,.upload-file-container[theme=light].upload-file-container-disabled .upload-icon svg{color:#919191}.upload-file-container[theme=dark].upload-errors,.upload-file-container[theme=light].upload-errors{border-color:#e02800}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):hover,.upload-file-container[theme=light]:not(.upload-file-container-disabled):hover{background:#f4f4f4;border-style:solid}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):active,.upload-file-container[theme=light]:not(.upload-file-container-disabled):active{background:#f4f4f4;transform:scale(.98)}.upload-file-container[theme=dark] .errors,.upload-file-container[theme=light] .errors{color:#e02800;font-size:14px}.upload-file-container[theme=dark] .errors .error-icon svg,.upload-file-container[theme=light] .errors .error-icon svg{color:#e02800}.upload-supported-files{left:0;position:absolute;top:100%;font-size:12px;line-height:16px;margin-top:8px;width:100%}.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:563px}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container,.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:100%}}.transparent{opacity: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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme"] }, { kind: "directive", type: DragDropDirective, selector: "[uiDragDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
|
|
5654
|
+
], viewQueries: [{ propertyName: "fileDrop", first: true, predicate: ["fileDrop"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <div\n class=\"upload-file-container\"\n uiDragDrop\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ 'upload-errors': !!errors || isMissedMinSize, 'upload-file-container-disabled': disabled }\"\n (fileDropped)=\"onFileDropped($event)\"\n [tabIndex]=\"0\"\n (keydown)=\"onKeydown($event)\"\n (click)=\"fileDrop.nativeElement.click()\"\n >\n <span style=\"position: absolute; left: -9999px;\" [attr.aria-live]=\"'polite'\">\n {{ success ? ('FILE_UPLOAD.FILE_UPLOADING_SUCCESS' | uiTranslate : language) : progress ? ('FILE_UPLOAD.UPLOADING' | uiTranslate : language) : '' }}\n </span>\n <div *ngIf=\"(browse && !(success && !!file && progress))\" [@inOutAnimation] class=\"upload-files\">\n <div class=\"upload-browse\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n\n <div class=\"errors\" *ngIf=\"!!errors || isMissedMinSize\" role=\"alert\">\n <ng-container *ngIf=\"!!errors\">\n <span *ngFor=\"let error of errors\"><ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n {{ error }}</span>\n </ng-container>\n\n <span *ngIf=\"isMissedMinSize\">\n <ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate : language : { min: minFileSizeMB } }}\n </span>\n </div>\n <input\n [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"'upload-supported-files'\"\n [tabIndex]=\"-1\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"file\"\n [accept]=\"supportedFileTypes\"\n [disabled]=\"disabled\"\n (change)=\"onChangeUpload($event)\"\n />\n <label for=\"file\" class=\"transparent\">{{ !!file && success ? '' : (translationContext + 'CHOOSE_FILE') | uiTranslate : language }}</label>\n <p\n *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate : language }}\n <span\n class=\"semibold\"> {{ (translationContext + 'BROWSE') | uiTranslate : language | lowercase }}</span> {{ (translationContext + 'YOUR_FILES') | uiTranslate : language }}\n </p>\n <span class=\"upload-text\">{{ maxFileSizeMB }}{{ (translationContext + 'MAX_SIZE') | uiTranslate : language }}</span>\n <span *ngIf=\"minFileSizeMB\" class=\"upload-text\">{{ minFileSizeMB }}{{ (translationContext + 'MIN_SIZE') | uiTranslate : language }}</span>\n </div>\n </div>\n <div class=\"upload-change\" [@inOutAnimationChange] *ngIf=\"!!success && !!file && !!progress\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n <input\n [tabIndex]=\"-1\"\n [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"success || progress ? '' : 'supported-file-types'\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"fileTest\"\n [accept]=\"supportedFileTypes\"\n (change)=\"onChangeUpload($event)\"\n [disabled]=\"disabled\"\n />\n <label for=\"file\" class=\"transparent\">{{ !!file && success ? '' : (translationContext + 'CHOOSE_FILE') | uiTranslate : language }}</label>\n <p\n *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate : language }} <span\n class=\"semibold\">{{ (translationContext + 'CHANGE') | uiTranslate : language | lowercase }}</span> {{ (translationContext + 'YOUR_FILES') | uiTranslate : language }}\n </p>\n <span class=\"upload-text\"\n ><strong>{{ file.name }}</strong></span\n >\n </div>\n <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n <p>{{ file.name }}</p>\n <ui-progress-bar [progress]=\"uploadProgress\"\n [companyColor]=\"compColor\"\n [applicationTheme]=\"applicationTheme\"></ui-progress-bar>\n <p class=\"upload-text\">\n {{ (translationContext + 'UPLOADING') | uiTranslate : language }} <span>{{ uploadProgress }}</span\n >%\n </p>\n </div>\n\n <ng-template #iconTpl>\n <ui-icon *ngIf=\"applicationTheme === 'classic'; else rebrandedIconTpl\" class=\"upload-icon\"\n name=\"File-upload\"></ui-icon>\n <ng-template #rebrandedIconTpl>\n <ui-icon class=\"upload-icon\"\n name=\"Upload\"\n [size]=\"'24'\"\n [applicationTheme]=\"applicationTheme\"></ui-icon>\n </ng-template>\n </ng-template>\n <ng-template #rebrandedDnDCopyTpl>\n <p id=\"'drag-and-drop'\">{{ (translationContext + 'DRAG_AND_DROP') | uiTranslate : language }}</p>\n </ng-template>\n\n <div\n *ngIf=\"!!supportedFileTypes\"\n [attr.theme]=\"applicationTheme\"\n class=\"upload-supported-files\"\n id=\"upload-supported-files\">\n <span >{{ (translationContext + 'SUPPORTED_FILE_TYPES') | uiTranslate : language }}</span>{{ supportedFileTypes }}\n </div>\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}.upload-file-container{border-radius:8px;border:1px dashed #888888;background:#fff;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px;cursor:pointer}.upload-file-container:focus-visible{outline-offset:2px;outline:2px solid #242424;animation:focus-ring-animation .4s forwards}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-change,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-change ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-change ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-change input,.upload-file-container .upload-browse input{visibility:hidden;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-change .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:20px}.upload-file-container .upload-change p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-change p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline;color:var(--color)}.upload-file-container .upload-change .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:20px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-change .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-change .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-change .errors .error-icon,.upload-file-container .upload-browse .errors .error-icon{margin-right:4px}.upload-file-container .upload-change .errors .error-icon svg,.upload-file-container .upload-browse .errors .error-icon svg{color:#cb7b7a}.upload-file-container .upload-change .errors .error-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors .error-icon mat-icon.size-16 svg{width:16px;height:16px}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-file-container[theme=dark],.upload-file-container[theme=light]{border-radius:10px;border-color:#242424}.upload-file-container[theme=dark].upload-file-container-disabled,.upload-file-container[theme=light].upload-file-container-disabled{border-color:#919191;color:#919191;background-color:#f4f4f4}.upload-file-container[theme=dark].upload-file-container-disabled .upload-icon svg,.upload-file-container[theme=light].upload-file-container-disabled .upload-icon svg{color:#919191}.upload-file-container[theme=dark].upload-errors,.upload-file-container[theme=light].upload-errors{border-color:#e02800}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):hover,.upload-file-container[theme=light]:not(.upload-file-container-disabled):hover{background:#f4f4f4;border-style:solid}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):active,.upload-file-container[theme=light]:not(.upload-file-container-disabled):active{background:#f4f4f4;transform:scale(.98)}.upload-file-container[theme=dark] .errors,.upload-file-container[theme=light] .errors{color:#e02800;font-size:14px}.upload-file-container[theme=dark] .errors .error-icon svg,.upload-file-container[theme=light] .errors .error-icon svg{color:#e02800}.upload-supported-files{left:0;position:absolute;top:100%;font-size:12px;line-height:16px;margin-top:8px;width:100%}.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:563px}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container,.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:100%}}.transparent{opacity: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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "language"] }, { kind: "directive", type: DragDropDirective, selector: "[uiDragDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
|
|
5607
5655
|
trigger('inOutAnimation', [
|
|
5608
5656
|
transition(':enter', [
|
|
5609
5657
|
style({ opacity: 0, height: 0 }),
|
|
@@ -5719,14 +5767,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
5719
5767
|
|
|
5720
5768
|
class ProgressBarComponentModule {
|
|
5721
5769
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ProgressBarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5722
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: ProgressBarComponentModule, declarations: [ProgressBarComponent], imports: [CommonModule, MatProgressBarModule], exports: [ProgressBarComponent] }); }
|
|
5770
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: ProgressBarComponentModule, declarations: [ProgressBarComponent], imports: [CommonModule, MatProgressBarModule, UiTranslatePipe], exports: [ProgressBarComponent] }); }
|
|
5723
5771
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ProgressBarComponentModule, imports: [CommonModule, MatProgressBarModule] }); }
|
|
5724
5772
|
}
|
|
5725
5773
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ProgressBarComponentModule, decorators: [{
|
|
5726
5774
|
type: NgModule,
|
|
5727
5775
|
args: [{
|
|
5728
5776
|
declarations: [ProgressBarComponent],
|
|
5729
|
-
imports: [CommonModule, MatProgressBarModule],
|
|
5777
|
+
imports: [CommonModule, MatProgressBarModule, UiTranslatePipe],
|
|
5730
5778
|
exports: [ProgressBarComponent],
|
|
5731
5779
|
providers: [],
|
|
5732
5780
|
}]
|
|
@@ -6710,13 +6758,13 @@ class NavbarComponent {
|
|
|
6710
6758
|
this.isOpened = isOpened;
|
|
6711
6759
|
this.menuState.emit({ isOpened, screenSize });
|
|
6712
6760
|
}
|
|
6713
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: NavbarComponent, deps: [{ token: i1$
|
|
6761
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", 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 }); }
|
|
6714
6762
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userName: "userName", email: "email", menuItems: "menuItems", language: "language", applicationTheme: "applicationTheme", contentTemplateRef: "contentTemplateRef", mobileBreakpoint: "mobileBreakpoint", isAvatar: "isAvatar", menuClass: "menuClass" }, 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: activedRoute === 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: language }}\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 [language]=\"language\"\n [applicationTheme]=\"applicationTheme\"\n [contentTemplateRef]=\"contentTemplateRef\"\n (menuItemClicked)=\"clickMenuItem($event)\"\n (logoutEvent)=\"logout()\"\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:1px solid transparent;position:relative}.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$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", 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", "applicationTheme"] }, { 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", "language", "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", "language", "preventDefault", "tooltipPosition"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: MobileNavbarSideSheetComponent, selector: "ui-mobile-navbar-side-sheet", inputs: ["routes", "activedRoute", "email", "userName", "menuItems", "language", "contentTemplateRef", "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 }); }
|
|
6715
6763
|
}
|
|
6716
6764
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
6717
6765
|
type: Component,
|
|
6718
6766
|
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: activedRoute === 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: language }}\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 [language]=\"language\"\n [applicationTheme]=\"applicationTheme\"\n [contentTemplateRef]=\"contentTemplateRef\"\n (menuItemClicked)=\"clickMenuItem($event)\"\n (logoutEvent)=\"logout()\"\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:1px solid transparent;position:relative}.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"] }]
|
|
6719
|
-
}], ctorParameters: () => [{ type: i1$
|
|
6767
|
+
}], ctorParameters: () => [{ type: i1$4.BreakpointObserver }, { type: undefined, decorators: [{
|
|
6720
6768
|
type: Optional
|
|
6721
6769
|
}, {
|
|
6722
6770
|
type: Inject,
|
|
@@ -6879,7 +6927,7 @@ class DeprecatedPaginatorComponent {
|
|
|
6879
6927
|
this.paginatorChangedEvent.emit(paginator);
|
|
6880
6928
|
}
|
|
6881
6929
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DeprecatedPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6882
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", 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$
|
|
6930
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", 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: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6883
6931
|
}
|
|
6884
6932
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DeprecatedPaginatorComponent, decorators: [{
|
|
6885
6933
|
type: Component,
|
|
@@ -7376,7 +7424,7 @@ class SnackbarComponent {
|
|
|
7376
7424
|
this.visible = false;
|
|
7377
7425
|
this.snackbarRef.dismiss();
|
|
7378
7426
|
}
|
|
7379
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SnackbarComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: MAT_SNACK_BAR_DATA }, { token: i1$
|
|
7427
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", 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 }); }
|
|
7380
7428
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: SnackbarComponent, selector: "ui-snackbar", inputs: { snackbarType: "snackbarType", message: "message", html: "html", seconds: "seconds", includeDismissButton: "includeDismissButton", fixed: "fixed", linkText: "linkText", linkUrl: "linkUrl", linkTarget: "linkTarget", language: "language", 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 : language }}</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: language\"\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: language)\"\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", "language", "preventDefault", "tooltipPosition"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
|
|
7381
7429
|
trigger('openClose', [
|
|
7382
7430
|
transition(':enter', [
|
|
@@ -7412,7 +7460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
7412
7460
|
}] }, { type: undefined, decorators: [{
|
|
7413
7461
|
type: Inject,
|
|
7414
7462
|
args: [MAT_SNACK_BAR_DATA]
|
|
7415
|
-
}] }, { type: i1$
|
|
7463
|
+
}] }, { type: i1$6.MatSnackBarRef }, { type: i2.DomSanitizer }], propDecorators: { snackbarType: [{
|
|
7416
7464
|
type: Input
|
|
7417
7465
|
}], message: [{
|
|
7418
7466
|
type: Input
|
|
@@ -7471,12 +7519,12 @@ class SnackbarService {
|
|
|
7471
7519
|
}
|
|
7472
7520
|
return componentRef;
|
|
7473
7521
|
}
|
|
7474
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SnackbarService, deps: [{ token: i1$
|
|
7522
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SnackbarService, deps: [{ token: i1$6.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
7475
7523
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SnackbarService }); }
|
|
7476
7524
|
}
|
|
7477
7525
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SnackbarService, decorators: [{
|
|
7478
7526
|
type: Injectable
|
|
7479
|
-
}], ctorParameters: () => [{ type: i1$
|
|
7527
|
+
}], ctorParameters: () => [{ type: i1$6.MatSnackBar }] });
|
|
7480
7528
|
|
|
7481
7529
|
class SnackbarComponentModule {
|
|
7482
7530
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SnackbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
@@ -7681,7 +7729,7 @@ class DeprecatedTableComponent {
|
|
|
7681
7729
|
this.dataSourceDetail = new MatTableDataSource(rowData);
|
|
7682
7730
|
}
|
|
7683
7731
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DeprecatedTableComponent, deps: [{ token: DataPropertyGetterPipe }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7684
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: DeprecatedTableComponent, selector: "ui-deprecated-table", inputs: { tableDetails: "tableDetails", tableData: "tableData", tableColumns: "tableColumns", tableDetailColumns: "tableDetailColumns" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent", onDetailRowClickEvent: "onDetailRowClickEvent" }, viewQueries: [{ propertyName: "matSort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table *ngIf=\"!tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n <ng-container *ngFor=\"let tableColumn of tableColumns; let i = index\" [matColumnDef]=\"tableColumn.headerName\">\n <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', onRowClickEvent.observed && i === tableColumns.length - 1 ? 'row-detail': '']\">\n <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n <mat-icon *ngIf=\"onRowClickEvent.observed && i === tableColumns.length - 1\" class=\"row-detail-icon\">navigate_next</mat-icon>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\" [ngClass]=\"{'row-clickable': onRowClickEvent.observed}\"></tr>\n</table>\n\n<table *ngIf=\"tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\"\n multiTemplateDataRows>\n <ng-container *ngFor=\"let tableColumn of tableColumns; let i = index\" [matColumnDef]=\"tableColumn.headerName\">\n <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', i === 0 ? 'row-expand' : '']\">\n <mat-icon *ngIf=\"i === 0\" class=\"row-expand-icon\">{{ element === elementDetail ? 'expand_less' : 'expand_more' }}</mat-icon>\n <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n </td>\n </ng-container>\n\n <!-- Expanded Content Column -->\n <ng-container matColumnDef=\"expandedDetail\">\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsToDisplay.length\">\n <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\n [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n <table mat-table [dataSource]=\"dataSourceDetail\">\n <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n [matColumnDef]=\"tableColumn.headerName\">\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.headerName | uppercase}}\n </th>\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]=\"{padding: tableColumn.styles?.padding}\">\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 <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n <tr mat-row *matRowDef=\"let element; columns: columnsToDisplay;\" class=\"element-row\"\n [ngClass]=\"{'expanded-row': elementDetail === element, 'row-clickable': tableDetails}\"\n (click)=\"toggleRow(element)\">\n </tr>\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n</table>\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.field}}\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)\">\n </ng-template>\n </ng-container>\n <ng-container *ngSwitchDefault>\n {{element | dataPropertyGetter: tableColumn.field}}\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #tableHeader let-tableColumn=\"tableColumn\">\n <div class=\"tooltip\" [ngStyle]=\"{'justify-content': tableColumn.styles?.alignment}\" [ngClass]=\"tableColumn.styles?.alignment\">\n <span>{{tableColumn.headerName | uppercase}}</span>\n <mat-icon *ngIf=\"tableColumn.headerTooltip\" [matTooltip]=\"tableColumn.headerTooltip\" class=\"tooltip-icon\" (click)=\"$event.stopPropagation()\">help</mat-icon>\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}table{cursor:initial;width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-mdc-header-cell{font-weight:700;color:#000;padding:16px}table .mat-mdc-header-cell .tooltip{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}table .mat-mdc-header-cell .tooltip mat-icon{color:#1b4754;font-size:18px;position:relative;top:3px;left:4px;cursor:pointer}table .mat-mdc-cell{padding:16px;text-align:justify}table td,table th,table .mat-mdc-row{border-width:.5px}table .mat-mdc-row:hover:not(.element-detail .mat-row).row-clickable{background-color:#ecf6f5;cursor:pointer}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}table th.th-right{text-align:right}table th.th-right ::ng-deep .mat-sort-header-container{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .mat-sort-header-container{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .mat-sort-header-container{justify-content:center}table .row-detail{display:flex;justify-content:space-between}table .row-detail-icon{align-self:center;font-size:16px;height:16px;width:16px}table .row-expand{display:flex}table .row-expand-icon{align-self:center;font-size:14px;height:14px;width:14px;margin-right:8px}table .align-wrapper{display:flex}table td.td-right{text-align:right}table td.td-right .align-wrapper{justify-content:end}table td.td-left{text-align:left}table td.td-left .align-wrapper{justify-content:start}table td.td-center{text-align:center}table td.td-center .align-wrapper{justify-content:center}table tr.detail-row{height:0}table tr.element-row:not(.expanded-row):hover{background:#fff}table tr.element-row:not(.expanded-row):active{background:#fff}table .element-row td{border-bottom-width:0}table .mat-column-expandedDetail{padding:0}table .element-detail{overflow:hidden;display:flex}table .element-detail table{background-color:#f6f6f6}table .element-detail table .mat-mdc-header-row{visibility:collapse}table .element-detail table .mat-mdc-cell{border-width:0px}\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$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i4$5.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: ["dynamicComponent"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: DataPropertyGetterPipe, name: "dataPropertyGetter" }], animations: [
|
|
7732
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: DeprecatedTableComponent, selector: "ui-deprecated-table", inputs: { tableDetails: "tableDetails", tableData: "tableData", tableColumns: "tableColumns", tableDetailColumns: "tableDetailColumns" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent", onDetailRowClickEvent: "onDetailRowClickEvent" }, viewQueries: [{ propertyName: "matSort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table *ngIf=\"!tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n <ng-container *ngFor=\"let tableColumn of tableColumns; let i = index\" [matColumnDef]=\"tableColumn.headerName\">\n <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', onRowClickEvent.observed && i === tableColumns.length - 1 ? 'row-detail': '']\">\n <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n <mat-icon *ngIf=\"onRowClickEvent.observed && i === tableColumns.length - 1\" class=\"row-detail-icon\">navigate_next</mat-icon>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\" [ngClass]=\"{'row-clickable': onRowClickEvent.observed}\"></tr>\n</table>\n\n<table *ngIf=\"tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\"\n multiTemplateDataRows>\n <ng-container *ngFor=\"let tableColumn of tableColumns; let i = index\" [matColumnDef]=\"tableColumn.headerName\">\n <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', i === 0 ? 'row-expand' : '']\">\n <mat-icon *ngIf=\"i === 0\" class=\"row-expand-icon\">{{ element === elementDetail ? 'expand_less' : 'expand_more' }}</mat-icon>\n <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n </td>\n </ng-container>\n\n <!-- Expanded Content Column -->\n <ng-container matColumnDef=\"expandedDetail\">\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsToDisplay.length\">\n <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\n [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n <table mat-table [dataSource]=\"dataSourceDetail\">\n <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n [matColumnDef]=\"tableColumn.headerName\">\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.headerName | uppercase}}\n </th>\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]=\"{padding: tableColumn.styles?.padding}\">\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 <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n <tr mat-row *matRowDef=\"let element; columns: columnsToDisplay;\" class=\"element-row\"\n [ngClass]=\"{'expanded-row': elementDetail === element, 'row-clickable': tableDetails}\"\n (click)=\"toggleRow(element)\">\n </tr>\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n</table>\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.field}}\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)\">\n </ng-template>\n </ng-container>\n <ng-container *ngSwitchDefault>\n {{element | dataPropertyGetter: tableColumn.field}}\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #tableHeader let-tableColumn=\"tableColumn\">\n <div class=\"tooltip\" [ngStyle]=\"{'justify-content': tableColumn.styles?.alignment}\" [ngClass]=\"tableColumn.styles?.alignment\">\n <span>{{tableColumn.headerName | uppercase}}</span>\n <mat-icon *ngIf=\"tableColumn.headerTooltip\" [matTooltip]=\"tableColumn.headerTooltip\" class=\"tooltip-icon\" (click)=\"$event.stopPropagation()\">help</mat-icon>\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}table{cursor:initial;width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-mdc-header-cell{font-weight:700;color:#000;padding:16px}table .mat-mdc-header-cell .tooltip{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}table .mat-mdc-header-cell .tooltip mat-icon{color:#1b4754;font-size:18px;position:relative;top:3px;left:4px;cursor:pointer}table .mat-mdc-cell{padding:16px;text-align:justify}table td,table th,table .mat-mdc-row{border-width:.5px}table .mat-mdc-row:hover:not(.element-detail .mat-row).row-clickable{background-color:#ecf6f5;cursor:pointer}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}table th.th-right{text-align:right}table th.th-right ::ng-deep .mat-sort-header-container{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .mat-sort-header-container{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .mat-sort-header-container{justify-content:center}table .row-detail{display:flex;justify-content:space-between}table .row-detail-icon{align-self:center;font-size:16px;height:16px;width:16px}table .row-expand{display:flex}table .row-expand-icon{align-self:center;font-size:14px;height:14px;width:14px;margin-right:8px}table .align-wrapper{display:flex}table td.td-right{text-align:right}table td.td-right .align-wrapper{justify-content:end}table td.td-left{text-align:left}table td.td-left .align-wrapper{justify-content:start}table td.td-center{text-align:center}table td.td-center .align-wrapper{justify-content:center}table tr.detail-row{height:0}table tr.element-row:not(.expanded-row):hover{background:#fff}table tr.element-row:not(.expanded-row):active{background:#fff}table .element-row td{border-bottom-width:0}table .mat-column-expandedDetail{padding:0}table .element-detail{overflow:hidden;display:flex}table .element-detail table{background-color:#f6f6f6}table .element-detail table .mat-mdc-header-row{visibility:collapse}table .element-detail table .mat-mdc-cell{border-width:0px}\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$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i4$5.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: ["dynamicComponent"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: DataPropertyGetterPipe, name: "dataPropertyGetter" }], animations: [
|
|
7685
7733
|
trigger('expandDetail', [
|
|
7686
7734
|
state('collapsed, void', style({ height: '0px' })),
|
|
7687
7735
|
state('expanded', style({ height: '*' })),
|
|
@@ -7752,6 +7800,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
7752
7800
|
}]
|
|
7753
7801
|
}] });
|
|
7754
7802
|
|
|
7803
|
+
var IKeyboardEvent;
|
|
7804
|
+
(function (IKeyboardEvent) {
|
|
7805
|
+
IKeyboardEvent["ENTER"] = "Enter";
|
|
7806
|
+
IKeyboardEvent["SPACE"] = " ";
|
|
7807
|
+
})(IKeyboardEvent || (IKeyboardEvent = {}));
|
|
7808
|
+
|
|
7755
7809
|
class TagComponent {
|
|
7756
7810
|
/**
|
|
7757
7811
|
* Tag's label
|
|
@@ -7849,6 +7903,13 @@ class TagComponent {
|
|
|
7849
7903
|
* @memberof TagComponent
|
|
7850
7904
|
*/
|
|
7851
7905
|
this.checkLabelEllipsis$ = new ReplaySubject(1);
|
|
7906
|
+
/**
|
|
7907
|
+
* The language to be used
|
|
7908
|
+
* @property language
|
|
7909
|
+
* @type {Language}
|
|
7910
|
+
* @memberof TagComponent
|
|
7911
|
+
*/
|
|
7912
|
+
this.language = LanguageService.defaultLanguage;
|
|
7852
7913
|
/**
|
|
7853
7914
|
* Observable that indicates if the Label is truncated
|
|
7854
7915
|
* debounceTime is used to wait for view to be initialized after receiving a new Label input
|
|
@@ -7863,6 +7924,7 @@ class TagComponent {
|
|
|
7863
7924
|
this.labelText = '';
|
|
7864
7925
|
this.isHovered = false;
|
|
7865
7926
|
this.shrink = false;
|
|
7927
|
+
this.closeBtnFocused = signal(false);
|
|
7866
7928
|
if (defaultAppTheme) {
|
|
7867
7929
|
this.applicationTheme = defaultAppTheme;
|
|
7868
7930
|
}
|
|
@@ -7907,12 +7969,20 @@ class TagComponent {
|
|
|
7907
7969
|
get filled() {
|
|
7908
7970
|
return this.readOnly || this.allowClose || this.isSelected;
|
|
7909
7971
|
}
|
|
7972
|
+
onKeydown($event) {
|
|
7973
|
+
if (($event.key === IKeyboardEvent.ENTER || $event.key === IKeyboardEvent.SPACE) && !this.closeBtnFocused()) {
|
|
7974
|
+
this.onPress();
|
|
7975
|
+
}
|
|
7976
|
+
else if (this.closeBtnFocused()) {
|
|
7977
|
+
this.onClose();
|
|
7978
|
+
}
|
|
7979
|
+
}
|
|
7910
7980
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TagComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7911
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: TagComponent, selector: "ui-tag", inputs: { label: "label", icon: "icon", allowClose: "allowClose", readOnly: "readOnly", isSelected: "isSelected", showIconWhenSelected: "showIconWhenSelected", isDisabled: "isDisabled", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired" }, outputs: { close: "close", press: "press" }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["labelElement"], descendants: true }], ngImport: i0, template: "<div class=\"tag-wrapper\"
|
|
7981
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: TagComponent, selector: "ui-tag", inputs: { label: "label", icon: "icon", allowClose: "allowClose", readOnly: "readOnly", isSelected: "isSelected", showIconWhenSelected: "showIconWhenSelected", isDisabled: "isDisabled", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", language: "language" }, outputs: { close: "close", press: "press" }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["labelElement"], descendants: true }], ngImport: i0, template: "<div class=\"tag-wrapper\">\n <div\n [matTooltip]=\"(isEllipseActiveObs$ | async) ? labelText : ''\" [matTooltipClass]=\"applicationTheme\"\n [tabindex]=\"tabIndex\"\n class=\"tag-container\"\n [attr.data-testid]=\"'tag--container'\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{\n filled: filled,\n readonly: readOnly,\n disabled: isDisabled,\n outlined: !isSelected,\n shrink\n }\"\n (click)=\"onPress()\"\n (mouseenter)=\"setHoverState(true)\" (mouseleave)=\"setHoverState(false)\"\n (mousedown)=\"setShrinkState(true)\" (mouseup)=\"setShrinkState(false)\"\n (touchstart)=\"setShrinkState(true)\" (touchend)=\"setShrinkState(false)\"\n (keydown)=\"onKeydown($event)\"\n [attr.aria-label]=\"ariaLabel || labelText\"\n [attr.aria-required]=\"ariaRequired\"\n >\n <ui-icon *ngIf=\"icon\" class=\"icon\" [color]=\"iconColor\" [name]=\"iconToPass\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n <ui-icon *ngIf=\"isSelected && showIconWhenSelected\" [color]=\"iconColor\" class=\"icon\" [name]=\"'Check'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n <ui-icon (focus)=\"closeBtnFocused.set(true)\" (blur)=\"closeBtnFocused.set(false)\" [tabindex]=\"tabIndex\" *ngIf=\"allowClose\" class=\"delete-icon\"\n [attr.aria-label]=\"'TAG.REMOVE' | uiTranslate : language\"\n [color]=\"iconColor\" (click)=\"onClose()\" [name]=\"'Close'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n </div>\n</div>\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 .tag-wrapper{max-width:264px}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .tag-container{height:32px;max-width:264px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:fit-content;cursor:pointer;margin:4px}:host .tag-container:focus-visible{outline:2px solid #242424;animation:focus-ring-animation .4s forwards;outline-offset:2px;position:relative}:host .tag-container:focus-visible:after{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:-2px;left:-2px;outline:2px solid #ffffff;border-radius:4px}:host .tag-container.outlined{border:1px solid #6894A0}:host .tag-container.filled{background:#e9f0f1;border:1px solid #E9F0F1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#a9c2c9;border:1px solid #1B4754}:host .tag-container:hover{background:#f6f6f6;border:1px solid #6894A0}:host .tag-container:active{background:#e9f0f1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#e9f0f1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border:1px solid transparent;border-radius:50px;padding:2px}:host .tag-container[theme=dark],:host .tag-container[theme=light]{background:#f4f4f4;border:2px solid transparent}:host .tag-container[theme=dark] .delete-icon:focus-visible,:host .tag-container[theme=light] .delete-icon:focus-visible{outline-color:#242424!important}:host .tag-container[theme=dark].filled,:host .tag-container[theme=light].filled{background-color:#fff;border-color:#242424}:host .tag-container[theme=dark]:hover,:host .tag-container[theme=light]:hover{background-color:#666;color:#fff;border-color:#666;border-width:2px}:host .tag-container[theme=dark].shrink,:host .tag-container[theme=light].shrink{transform:scale(.98)}::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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
7912
7982
|
}
|
|
7913
7983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TagComponent, decorators: [{
|
|
7914
7984
|
type: Component,
|
|
7915
|
-
args: [{ selector: 'ui-tag', template: "<div class=\"tag-wrapper\"
|
|
7985
|
+
args: [{ selector: 'ui-tag', template: "<div class=\"tag-wrapper\">\n <div\n [matTooltip]=\"(isEllipseActiveObs$ | async) ? labelText : ''\" [matTooltipClass]=\"applicationTheme\"\n [tabindex]=\"tabIndex\"\n class=\"tag-container\"\n [attr.data-testid]=\"'tag--container'\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{\n filled: filled,\n readonly: readOnly,\n disabled: isDisabled,\n outlined: !isSelected,\n shrink\n }\"\n (click)=\"onPress()\"\n (mouseenter)=\"setHoverState(true)\" (mouseleave)=\"setHoverState(false)\"\n (mousedown)=\"setShrinkState(true)\" (mouseup)=\"setShrinkState(false)\"\n (touchstart)=\"setShrinkState(true)\" (touchend)=\"setShrinkState(false)\"\n (keydown)=\"onKeydown($event)\"\n [attr.aria-label]=\"ariaLabel || labelText\"\n [attr.aria-required]=\"ariaRequired\"\n >\n <ui-icon *ngIf=\"icon\" class=\"icon\" [color]=\"iconColor\" [name]=\"iconToPass\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n <ui-icon *ngIf=\"isSelected && showIconWhenSelected\" [color]=\"iconColor\" class=\"icon\" [name]=\"'Check'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n <ui-icon (focus)=\"closeBtnFocused.set(true)\" (blur)=\"closeBtnFocused.set(false)\" [tabindex]=\"tabIndex\" *ngIf=\"allowClose\" class=\"delete-icon\"\n [attr.aria-label]=\"'TAG.REMOVE' | uiTranslate : language\"\n [color]=\"iconColor\" (click)=\"onClose()\" [name]=\"'Close'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n </div>\n</div>\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 .tag-wrapper{max-width:264px}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .tag-container{height:32px;max-width:264px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:fit-content;cursor:pointer;margin:4px}:host .tag-container:focus-visible{outline:2px solid #242424;animation:focus-ring-animation .4s forwards;outline-offset:2px;position:relative}:host .tag-container:focus-visible:after{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:-2px;left:-2px;outline:2px solid #ffffff;border-radius:4px}:host .tag-container.outlined{border:1px solid #6894A0}:host .tag-container.filled{background:#e9f0f1;border:1px solid #E9F0F1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#a9c2c9;border:1px solid #1B4754}:host .tag-container:hover{background:#f6f6f6;border:1px solid #6894A0}:host .tag-container:active{background:#e9f0f1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#e9f0f1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border:1px solid transparent;border-radius:50px;padding:2px}:host .tag-container[theme=dark],:host .tag-container[theme=light]{background:#f4f4f4;border:2px solid transparent}:host .tag-container[theme=dark] .delete-icon:focus-visible,:host .tag-container[theme=light] .delete-icon:focus-visible{outline-color:#242424!important}:host .tag-container[theme=dark].filled,:host .tag-container[theme=light].filled{background-color:#fff;border-color:#242424}:host .tag-container[theme=dark]:hover,:host .tag-container[theme=light]:hover{background-color:#666;color:#fff;border-color:#666;border-width:2px}:host .tag-container[theme=dark].shrink,:host .tag-container[theme=light].shrink{transform:scale(.98)}::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"] }]
|
|
7916
7986
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
7917
7987
|
type: Optional
|
|
7918
7988
|
}, {
|
|
@@ -7942,6 +8012,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
7942
8012
|
type: Output
|
|
7943
8013
|
}], press: [{
|
|
7944
8014
|
type: Output
|
|
8015
|
+
}], language: [{
|
|
8016
|
+
type: Input
|
|
7945
8017
|
}], labelElement: [{
|
|
7946
8018
|
type: ViewChild,
|
|
7947
8019
|
args: ['labelElement']
|
|
@@ -8046,14 +8118,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
8046
8118
|
|
|
8047
8119
|
class TagComponentModule {
|
|
8048
8120
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TagComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
8049
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: TagComponentModule, declarations: [TagComponent], imports: [CommonModule, IconComponentModule, TooltipComponentModule, MatTooltipModule, MatInputModule], exports: [TagComponent] }); }
|
|
8121
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: TagComponentModule, declarations: [TagComponent], imports: [CommonModule, IconComponentModule, TooltipComponentModule, MatTooltipModule, MatInputModule, UiTranslatePipe], exports: [TagComponent] }); }
|
|
8050
8122
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TagComponentModule, imports: [CommonModule, IconComponentModule, TooltipComponentModule, MatTooltipModule, MatInputModule] }); }
|
|
8051
8123
|
}
|
|
8052
8124
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TagComponentModule, decorators: [{
|
|
8053
8125
|
type: NgModule,
|
|
8054
8126
|
args: [{
|
|
8055
8127
|
declarations: [TagComponent],
|
|
8056
|
-
imports: [CommonModule, IconComponentModule, TooltipComponentModule, MatTooltipModule, MatInputModule],
|
|
8128
|
+
imports: [CommonModule, IconComponentModule, TooltipComponentModule, MatTooltipModule, MatInputModule, UiTranslatePipe],
|
|
8057
8129
|
exports: [TagComponent],
|
|
8058
8130
|
providers: [],
|
|
8059
8131
|
}]
|
|
@@ -8266,7 +8338,7 @@ class DropdownComponent {
|
|
|
8266
8338
|
--dropdown-color-option-hover: ${hover}`);
|
|
8267
8339
|
}
|
|
8268
8340
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", 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 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8269
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: DropdownComponent, selector: "ui-dropdown", inputs: { label: "label", name: "name", placeholder: "placeholder", id: "id", value: "value", errors: "errors", disabled: "disabled", valueList: "valueList", allowClear: "allowClear", allowMultipleSelection: "allowMultipleSelection", required: "required", language: "language", showBottomContent: "showBottomContent", applicationTheme: "applicationTheme", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", textField: "textField", valueField: "valueField", hasError: "hasError", companyColor: "companyColor" }, outputs: { closed: "closed", opened: "opened" }, host: { properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, 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 }\"\n >\n <mat-label>{{ label }} <span *ngIf=\"required\">*</span></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\"\n [disabled]=\"disabled\"\n [multiple]=\"!!allowMultipleSelection\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n (selectionChange)=\"onChangeOption($event)\"\n [attr.name]=\"name\">\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 {{ textField ? section[textField] : section.displayValue ?? section.value }}\n </mat-option>\n </div>\n </mat-select>\n <ui-button *ngIf=\"allowClear && !matSelect.empty\" variant=\"secondary\" [justIcon]=\"true\" class=\"clear\" [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\" [label]=\"('COMMON.CLEAR') | uiTranslate : language\" (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\" [language]=\"language\"></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}ui-dropdown{display:flex}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:fixed!important;right:14px!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: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { 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", "language", "preventDefault", "tooltipPosition"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i7$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i2$4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "language"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
8341
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: DropdownComponent, selector: "ui-dropdown", inputs: { label: "label", name: "name", placeholder: "placeholder", id: "id", value: "value", errors: "errors", disabled: "disabled", valueList: "valueList", allowClear: "allowClear", allowMultipleSelection: "allowMultipleSelection", required: "required", language: "language", showBottomContent: "showBottomContent", applicationTheme: "applicationTheme", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", textField: "textField", valueField: "valueField", hasError: "hasError", companyColor: "companyColor" }, outputs: { closed: "closed", opened: "opened" }, host: { properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, 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 }\"\n >\n <mat-label>{{ label }} <span *ngIf=\"required\">*</span></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\"\n [disabled]=\"disabled\"\n [multiple]=\"!!allowMultipleSelection\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n (selectionChange)=\"onChangeOption($event)\"\n [attr.name]=\"name\">\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 {{ textField ? section[textField] : section.displayValue ?? section.value }}\n </mat-option>\n </div>\n </mat-select>\n <ui-button *ngIf=\"allowClear && !matSelect.empty\" variant=\"secondary\" [justIcon]=\"true\" class=\"clear\" [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\" [label]=\"('COMMON.CLEAR') | uiTranslate : language\" (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\" [language]=\"language\"></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}ui-dropdown{display:flex}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:fixed!important;right:14px!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: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { 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", "language", "preventDefault", "tooltipPosition"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i7$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i2$5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "language"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
8270
8342
|
}
|
|
8271
8343
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
8272
8344
|
type: Component,
|
|
@@ -8386,6 +8458,13 @@ class SpinnerComponent {
|
|
|
8386
8458
|
* @memberof SpinnerComponent
|
|
8387
8459
|
*/
|
|
8388
8460
|
this.size = 'large';
|
|
8461
|
+
/**
|
|
8462
|
+
* The language to be used
|
|
8463
|
+
*
|
|
8464
|
+
* @type {string}
|
|
8465
|
+
* @memberof SpinnerComponent
|
|
8466
|
+
*/
|
|
8467
|
+
this.language = LanguageService.defaultLanguage;
|
|
8389
8468
|
/**
|
|
8390
8469
|
* Set position fixed on page
|
|
8391
8470
|
* Defaults to 'true'.
|
|
@@ -8416,11 +8495,11 @@ class SpinnerComponent {
|
|
|
8416
8495
|
this.classes = `${this.size === 'large' ? 'large' : 'small'} ${this.isLoader ? 'loader' : ''} ${this.applicationTheme}`;
|
|
8417
8496
|
}
|
|
8418
8497
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SpinnerComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8419
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: SpinnerComponent, selector: "ui-spinner", inputs: { size: "size", isLoader: "isLoader", applicationTheme: "applicationTheme" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"spinner-container\"
|
|
8498
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: SpinnerComponent, selector: "ui-spinner", inputs: { size: "size", language: "language", isLoader: "isLoader", applicationTheme: "applicationTheme" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"spinner-container\"\n [ngClass]=\"classes\"\n [attr.theme]=\"applicationTheme\"\n [attr.aria-label]=\"'COMMON.LOADING' | uiTranslate : language\"\n>\n <svg class=\"spinner\" viewBox=\"0 0 50 50\">\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\"></circle>\n </svg>\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}.spinner-container.large{width:48px;height:48px;stroke-width:8px}.spinner-container.large .spinner{width:48px;height:48px}.spinner-container.small{stroke-width:4px;width:16px;height:16px}.spinner-container.small .spinner{width:16px;height:16px}.spinner-container .spinner{animation:rotate 2s linear infinite;width:48px;height:48px}.spinner-container .spinner .path{stroke:#d410aa;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}.spinner-container.classic .spinner .path{stroke:#276678}.spinner-container.loader{position:fixed;top:50%;left:50%;z-index:999;margin:-25px 0 0 -25px}.spinner-container[theme=dark] .path{stroke:#fff!important}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
8420
8499
|
}
|
|
8421
8500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
8422
8501
|
type: Component,
|
|
8423
|
-
args: [{ selector: 'ui-spinner', template: "<div class=\"spinner-container\"
|
|
8502
|
+
args: [{ selector: 'ui-spinner', template: "<div class=\"spinner-container\"\n [ngClass]=\"classes\"\n [attr.theme]=\"applicationTheme\"\n [attr.aria-label]=\"'COMMON.LOADING' | uiTranslate : language\"\n>\n <svg class=\"spinner\" viewBox=\"0 0 50 50\">\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\"></circle>\n </svg>\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}.spinner-container.large{width:48px;height:48px;stroke-width:8px}.spinner-container.large .spinner{width:48px;height:48px}.spinner-container.small{stroke-width:4px;width:16px;height:16px}.spinner-container.small .spinner{width:16px;height:16px}.spinner-container .spinner{animation:rotate 2s linear infinite;width:48px;height:48px}.spinner-container .spinner .path{stroke:#d410aa;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}.spinner-container.classic .spinner .path{stroke:#276678}.spinner-container.loader{position:fixed;top:50%;left:50%;z-index:999;margin:-25px 0 0 -25px}.spinner-container[theme=dark] .path{stroke:#fff!important}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}\n"] }]
|
|
8424
8503
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
8425
8504
|
type: Optional
|
|
8426
8505
|
}, {
|
|
@@ -8428,6 +8507,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
8428
8507
|
args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
|
|
8429
8508
|
}] }], propDecorators: { size: [{
|
|
8430
8509
|
type: Input
|
|
8510
|
+
}], language: [{
|
|
8511
|
+
type: Input
|
|
8431
8512
|
}], isLoader: [{
|
|
8432
8513
|
type: Input
|
|
8433
8514
|
}], applicationTheme: [{
|
|
@@ -8436,7 +8517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
8436
8517
|
|
|
8437
8518
|
class SpinnerComponentModule {
|
|
8438
8519
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SpinnerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
8439
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: SpinnerComponentModule, declarations: [SpinnerComponent], imports: [NgClass], exports: [SpinnerComponent] }); }
|
|
8520
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: SpinnerComponentModule, declarations: [SpinnerComponent], imports: [NgClass, NgIf, UiTranslatePipe], exports: [SpinnerComponent] }); }
|
|
8440
8521
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SpinnerComponentModule }); }
|
|
8441
8522
|
}
|
|
8442
8523
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SpinnerComponentModule, decorators: [{
|
|
@@ -8444,7 +8525,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
8444
8525
|
args: [{
|
|
8445
8526
|
declarations: [SpinnerComponent],
|
|
8446
8527
|
exports: [SpinnerComponent],
|
|
8447
|
-
imports: [NgClass],
|
|
8528
|
+
imports: [NgClass, NgIf, UiTranslatePipe],
|
|
8448
8529
|
}]
|
|
8449
8530
|
}] });
|
|
8450
8531
|
|
|
@@ -8474,7 +8555,7 @@ class ConfirmDialogComponent {
|
|
|
8474
8555
|
}
|
|
8475
8556
|
}
|
|
8476
8557
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8477
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: ConfirmDialogComponent, selector: "ui-confirm-dialog", inputs: { applicationTheme: "applicationTheme" }, ngImport: i0, template: "<ng-container>\n <ui-dialog\n [title]=\"title ?? (('COMMON.CONFIRM') | uiTranslate : lang)\"\n [primaryButtonLabel]=\"confirmButtonText ?? (('COMMON.YES') | uiTranslate : lang)\"\n [secondaryButtonLabel]=\"cancelButtonText ?? (('COMMON.CANCEL') | uiTranslate : lang)\"\n (primaryButtonClickEvent)=\"dialogRef.close(true)\"\n (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n primaryButtonType=\"primary\"\n secondaryButtonType=\"outlined\"\n [applicationTheme]=\"applicationTheme\"\n [showCloseButton]=\"false\"\n >\n <div class=\"message\">{{ confirmMessage }}</div>\n @if (confirmMessageHtml) {\n <div class=\"message\" [innerHTML]=\"confirmMessageHtml\"></div>\n }\n </ui-dialog>\n\n</ng-container>\n", styles: ["::ng-deep .ui-dialog-wrapper{max-width:600px!important}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "ui-dialog", inputs: ["title", "showCloseButton", "canCloseFn", "secondaryButtonLabel", "primaryButtonLabel", "secondaryButtonType", "primaryButtonType", "language", "companyColor", "applicationTheme", "disablePrimaryButton", "disableClose", "shouldDisableButtons", "ariaLabelledby", "ariaDescribedby", "keyboardOpen"], outputs: ["closeEvent", "secondaryButtonClickEvent", "primaryButtonClickEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
8558
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: ConfirmDialogComponent, selector: "ui-confirm-dialog", inputs: { applicationTheme: "applicationTheme" }, ngImport: i0, template: "<ng-container>\n <ui-dialog\n [title]=\"title ?? (('COMMON.CONFIRM') | uiTranslate : lang)\"\n [primaryButtonLabel]=\"confirmButtonText ?? (('COMMON.YES') | uiTranslate : lang)\"\n [secondaryButtonLabel]=\"cancelButtonText ?? (('COMMON.CANCEL') | uiTranslate : lang)\"\n (primaryButtonClickEvent)=\"dialogRef.close(true)\"\n (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n primaryButtonType=\"primary\"\n secondaryButtonType=\"outlined\"\n [applicationTheme]=\"applicationTheme\"\n [showCloseButton]=\"false\"\n >\n <div class=\"message\">{{ confirmMessage }}</div>\n @if (confirmMessageHtml) {\n <div class=\"message\" [innerHTML]=\"confirmMessageHtml\"></div>\n }\n </ui-dialog>\n\n</ng-container>\n", styles: ["::ng-deep .ui-dialog-wrapper{max-width:600px!important}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "ui-dialog", inputs: ["title", "showCloseButton", "canCloseFn", "secondaryButtonLabel", "primaryButtonLabel", "secondaryButtonType", "primaryButtonType", "language", "primaryButtonDataTestId", "secondaryButtonDataTestId", "companyColor", "applicationTheme", "disablePrimaryButton", "disableClose", "shouldDisableButtons", "ariaLabelledby", "ariaDescribedby", "keyboardOpen"], outputs: ["closeEvent", "secondaryButtonClickEvent", "primaryButtonClickEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
8478
8559
|
}
|
|
8479
8560
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
|
|
8480
8561
|
type: Component,
|
|
@@ -9148,12 +9229,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
9148
9229
|
}]
|
|
9149
9230
|
}] });
|
|
9150
9231
|
|
|
9151
|
-
var IKeyboardEvent;
|
|
9152
|
-
(function (IKeyboardEvent) {
|
|
9153
|
-
IKeyboardEvent["ENTER"] = "Enter";
|
|
9154
|
-
IKeyboardEvent["SPACE"] = " ";
|
|
9155
|
-
})(IKeyboardEvent || (IKeyboardEvent = {}));
|
|
9156
|
-
|
|
9157
9232
|
class ToggleComponent {
|
|
9158
9233
|
constructor(defaultAppTheme) {
|
|
9159
9234
|
this.defaultAppTheme = defaultAppTheme;
|
|
@@ -9297,7 +9372,7 @@ class ToggleComponent {
|
|
|
9297
9372
|
useExisting: forwardRef(() => ToggleComponent),
|
|
9298
9373
|
multi: true,
|
|
9299
9374
|
},
|
|
9300
|
-
], usesOnChanges: true, ngImport: i0, template: "<div class=\"toggle\" [ngClass]=\"classes\">\n <div\n [style.--max-width]=\"maxWidth + 'px'\"\n [tabIndex]=\"0\"\n class=\"toggle-container\"\n [ngClass]=\"{ 'active': selected }\"\n (click)=\"onToggle()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n (keydown)=\"onKeydown($event)\"\n role=\"switch\"\n [attr.aria-labelledby]=\"'label'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n [attr.aria-checked]=\"selected\"\n >\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n <div\n class=\"label\"\n uiEllipseText\n [matTooltipShowDelay]=\"800\"\n [matTooltip]=\"showLabelTooltip ? label : ''\"\n (onChangeTextState)=\"changeTextState($event)\"\n id=\"label\"\n >\n {{ label }}\n </div>\n <div class=\"knob\" *ngIf=\"!loading; else loadingTemplate\" [ngClass]=\"{ selected }\">\n <ui-icon [color]=\"disabled ? 'grey' : 'white'\" *ngIf=\"selected && !label\" [size]=\"'16'\" [name]=\"'Check-round-filled'\"></ui-icon>\n </div>\n\n <ng-template #loadingTemplate>\n <ui-spinner [isLoader]=\"false\" [size]=\"'small'\" [applicationTheme]=\"'dark'\"></ui-spinner>\n </ng-template>\n </div>\n <div *ngIf=\"message && selected\" class=\"message\">{{ message }}</div>\n</div>\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{width:fit-content;display:block}:host .toggle{height:auto;width:fit-content;display:flex;flex-direction:column;align-items:center}:host .toggle .toggle-container{border:1px solid transparent}:host .toggle.disabled{opacity:.5}:host .toggle.disabled .label{color:#242424!important}:host .toggle.disabled .toggle-container{background:#e0e0e0;pointer-events:none}:host .toggle.disabled .toggle-container:focus{outline:none}:host .toggle.dark.disabled .toggle-container.active,:host .toggle.light.disabled .toggle-container.active{background:#e9e9e9;border:1px solid #242424}:host .toggle.dark.disabled .toggle-container.active .knob:after,:host .toggle.light.disabled .toggle-container.active .knob:after{background:#242424}:host .toggle.dark .toggle-container,:host .toggle.light .toggle-container{background:transparent;border:1px solid #242424}:host .toggle.dark .toggle-container .label,:host .toggle.light .toggle-container .label{color:#242424}:host .toggle.dark .toggle-container .knob:after,:host .toggle.light .toggle-container .knob:after{background:#242424}:host .toggle.dark .toggle-container.active,:host .toggle.light .toggle-container.active{background:#d410aa;border:1px solid #D410AA}:host .toggle.dark .toggle-container.active .label,:host .toggle.light .toggle-container.active .label{color:#fff}:host .toggle.dark .toggle-container.active .knob:after,:host .toggle.light .toggle-container.active .knob:after{background:#fff}:host .toggle.dark .message,:host .toggle.light .message{color:#242424}:host .toggle.dark.disabled .toggle-container.active{border-color:#fff}:host .toggle.dark.disabled .toggle-container.active .knob:after{background:#fff}:host .toggle.dark .toggle-container{border-color:#fff}:host .toggle.dark .toggle-container .label{color:#fff}:host .toggle.dark .toggle-container .knob:after{background:#fff}:host .toggle.dark .message{color:#fff}:host .toggle .toggle-container{min-height:20px;max-height:24px;max-width:var(--max-width);padding:0 3px 0 20px;width:fit-content;min-width:36px;border-radius:16px;background:#888;display:flex;align-items:center;cursor:pointer;position:relative;transition:transform .3s,padding .3s,background .3s}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .toggle .toggle-container:focus-visible{position:relative;outline:2px solid #242424;outline-offset:2px;animation:focus-ring-animation .4s forwards}:host .toggle .toggle-container:focus-visible:after{content:\"\";position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);top:-1px;left:-1px;outline:2px solid #ffffff;border-radius:16px}:host .toggle .toggle-container .knob{height:100%;width:100%;position:absolute;left:-1px;top:0;display:flex;align-items:center;padding:3px;max-height:20px;transition:transform .3s}:host .toggle .toggle-container .knob:after{content:\"\";display:block;border-radius:16px;width:12px;height:12px;background:#fff;transition:background .3s}:host .toggle .toggle-container .label{z-index:1;font-size:8px;font-weight:700;color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;pointer-events:visible;line-height:16px}:host .toggle .toggle-container.active{background:#276678;padding:0 20px 0 3px}:host .toggle .toggle-container.active .knob{transform:translate(calc(100% - 15px))}:host .toggle .message{margin-top:4px;font-weight:700;font-size:12px;line-height:16px;color:#276678;text-align:justify}:host .toggle.small-toggle .toggle-container .knob{left:0}:host .toggle.small-toggle .toggle-container .knob:after{width:10px;height:10px}:host .toggle.small-toggle .toggle-container .knob.selected{left:-8px}:host .toggle.small-toggle .toggle-container .knob.selected:after{display:none}:host .toggle.small-toggle .toggle-container .knob.selected ui-icon ::ng-deep svg{width:20px;height:20px}:host .toggle.loading .toggle-container{border-color:#d410aa;background-color:#d410aa;padding:0;display:flex;justify-content:center;cursor:default}::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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "applicationTheme"] }] }); }
|
|
9375
|
+
], usesOnChanges: true, ngImport: i0, template: "<div class=\"toggle\" [ngClass]=\"classes\">\n <div\n [style.--max-width]=\"maxWidth + 'px'\"\n [tabIndex]=\"0\"\n class=\"toggle-container\"\n [ngClass]=\"{ 'active': selected }\"\n (click)=\"onToggle()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n (keydown)=\"onKeydown($event)\"\n role=\"switch\"\n [attr.aria-labelledby]=\"'label'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n [attr.aria-checked]=\"selected\"\n >\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n <div\n class=\"label\"\n uiEllipseText\n [matTooltipShowDelay]=\"800\"\n [matTooltip]=\"showLabelTooltip ? label : ''\"\n (onChangeTextState)=\"changeTextState($event)\"\n id=\"label\"\n >\n {{ label }}\n </div>\n <div class=\"knob\" *ngIf=\"!loading; else loadingTemplate\" [ngClass]=\"{ selected }\">\n <ui-icon [color]=\"disabled ? 'grey' : 'white'\" *ngIf=\"selected && !label\" [size]=\"'16'\" [name]=\"'Check-round-filled'\"></ui-icon>\n </div>\n\n <ng-template #loadingTemplate>\n <ui-spinner [isLoader]=\"false\" [size]=\"'small'\" [applicationTheme]=\"'dark'\"></ui-spinner>\n </ng-template>\n </div>\n <div *ngIf=\"message && selected\" class=\"message\">{{ message }}</div>\n</div>\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{width:fit-content;display:block}:host .toggle{height:auto;width:fit-content;display:flex;flex-direction:column;align-items:center}:host .toggle .toggle-container{border:1px solid transparent}:host .toggle.disabled{opacity:.5}:host .toggle.disabled .label{color:#242424!important}:host .toggle.disabled .toggle-container{background:#e0e0e0;pointer-events:none}:host .toggle.disabled .toggle-container:focus{outline:none}:host .toggle.dark.disabled .toggle-container.active,:host .toggle.light.disabled .toggle-container.active{background:#e9e9e9;border:1px solid #242424}:host .toggle.dark.disabled .toggle-container.active .knob:after,:host .toggle.light.disabled .toggle-container.active .knob:after{background:#242424}:host .toggle.dark .toggle-container,:host .toggle.light .toggle-container{background:transparent;border:1px solid #242424}:host .toggle.dark .toggle-container .label,:host .toggle.light .toggle-container .label{color:#242424}:host .toggle.dark .toggle-container .knob:after,:host .toggle.light .toggle-container .knob:after{background:#242424}:host .toggle.dark .toggle-container.active,:host .toggle.light .toggle-container.active{background:#d410aa;border:1px solid #D410AA}:host .toggle.dark .toggle-container.active .label,:host .toggle.light .toggle-container.active .label{color:#fff}:host .toggle.dark .toggle-container.active .knob:after,:host .toggle.light .toggle-container.active .knob:after{background:#fff}:host .toggle.dark .message,:host .toggle.light .message{color:#242424}:host .toggle.dark.disabled .toggle-container.active{border-color:#fff}:host .toggle.dark.disabled .toggle-container.active .knob:after{background:#fff}:host .toggle.dark .toggle-container{border-color:#fff}:host .toggle.dark .toggle-container .label{color:#fff}:host .toggle.dark .toggle-container .knob:after{background:#fff}:host .toggle.dark .message{color:#fff}:host .toggle .toggle-container{min-height:20px;max-height:24px;max-width:var(--max-width);padding:0 3px 0 20px;width:fit-content;min-width:36px;border-radius:16px;background:#888;display:flex;align-items:center;cursor:pointer;position:relative;transition:transform .3s,padding .3s,background .3s}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .toggle .toggle-container:focus-visible{position:relative;outline:2px solid #242424;outline-offset:2px;animation:focus-ring-animation .4s forwards}:host .toggle .toggle-container:focus-visible:after{content:\"\";position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);top:-1px;left:-1px;outline:2px solid #ffffff;border-radius:16px}:host .toggle .toggle-container .knob{height:100%;width:100%;position:absolute;left:-1px;top:0;display:flex;align-items:center;padding:3px;max-height:20px;transition:transform .3s}:host .toggle .toggle-container .knob:after{content:\"\";display:block;border-radius:16px;width:12px;height:12px;background:#fff;transition:background .3s}:host .toggle .toggle-container .label{z-index:1;font-size:8px;font-weight:700;color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;pointer-events:visible;line-height:16px}:host .toggle .toggle-container.active{background:#276678;padding:0 20px 0 3px}:host .toggle .toggle-container.active .knob{transform:translate(calc(100% - 15px))}:host .toggle .message{margin-top:4px;font-weight:700;font-size:12px;line-height:16px;color:#276678;text-align:justify}:host .toggle.small-toggle .toggle-container .knob{left:0}:host .toggle.small-toggle .toggle-container .knob:after{width:10px;height:10px}:host .toggle.small-toggle .toggle-container .knob.selected{left:-8px}:host .toggle.small-toggle .toggle-container .knob.selected:after{display:none}:host .toggle.small-toggle .toggle-container .knob.selected ui-icon ::ng-deep svg{width:20px;height:20px}:host .toggle.loading .toggle-container{border-color:#d410aa;background-color:#d410aa;padding:0;display:flex;justify-content:center;cursor:default}::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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "language", "isLoader", "applicationTheme"] }] }); }
|
|
9301
9376
|
}
|
|
9302
9377
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
9303
9378
|
type: Component,
|
|
@@ -10633,7 +10708,7 @@ class AutocompleteComponent {
|
|
|
10633
10708
|
return this.value ? !!Object.keys(this.value).length : false;
|
|
10634
10709
|
}
|
|
10635
10710
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", 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: i0.Renderer2 }, { token: PLATFORM_ID }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10636
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", 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", language: "language", 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" }, outputs: { selectionChange: "selectionChange", searchTextChange: "searchTextChange", blur: "blur", focus: "focus" }, 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 }], 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) ) ? 'warn' : 'accent'\"\n [appearance]=\"'outline'\"\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent }\"\n >\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <div #formField class=\"input-container\">\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 : language : { numberSelected: (value | slice: overlapIndex).length }) }}\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 <input\n #trigger=\"matAutocompleteTrigger\"\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 [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\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 [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 [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 <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 (value?.length < maxItemSelected) {\n <ng-container *ngIf=\"!(searchResult$ | async)\">\n <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | 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 : language | 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 <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | 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; else defaultViewPort\" [itemSize]=\"48\"\n [style.height]=\"'200px'\" class=\"virtual-scroll\">\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 </cdk-virtual-scroll-viewport>\n\n <ng-template #defaultViewPort>\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 </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 <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | 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; 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 : language | uppercase\"\n *ngIf=\"filteredItemsList.length\">\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 <ng-container *ngIf=\"!filteredItemsList.length && !filteredSuggestionList.length && inputValue\">\n <ng-container *ngIf=\"allowAdd; else notFound\">\n <mat-option (mousedown)=$event.preventDefault() [value]=\"inputValue\">\n <span>{{ ('COMMON.ADD') | uiTranslate : language }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n </ng-container>\n\n <ng-template #notFound>\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate : language }}</span>\n </mat-option>\n </ng-template>\n </ng-container>\n </ng-container>\n </ng-container>\n }\n </mat-autocomplete>\n <mat-hint class=\"error\" *ngIf=\"safeErrors.length || (ngControl?.errors | hasValidationError) || (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue)\">\n <div class=\"errors\" *ngIf=\"(AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue)\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ (translationContext + 'MAX_SELECTED_ERROR') | uiTranslate : language : { max: maxItemSelected } }}</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\" [language]=\"language\"></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:block}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled{opacity:.5}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.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:4px}.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}.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}\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: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i2$4.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i7.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", "applicationTheme"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "language"] }, { kind: "directive", type: i11.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i11.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i11.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: PreventInputDirective, selector: "[uiPreventInput]", inputs: ["uiPreventInput"] }, { 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 }); }
|
|
10711
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", 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", language: "language", 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" }, outputs: { selectionChange: "selectionChange", searchTextChange: "searchTextChange", blur: "blur", focus: "focus" }, 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 }], 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) ) ? 'warn' : 'accent'\"\n [appearance]=\"'outline'\"\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent }\"\n >\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <div #formField class=\"input-container\">\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 : language : { numberSelected: (value | slice: overlapIndex).length }) }}\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 <input\n #trigger=\"matAutocompleteTrigger\"\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 [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\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 [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 [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 <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 (value?.length < maxItemSelected) {\n <ng-container *ngIf=\"!(searchResult$ | async)\">\n <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | 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 : language | 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 <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | 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; else defaultViewPort\" [itemSize]=\"48\"\n [style.height]=\"'200px'\" class=\"virtual-scroll\">\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 </cdk-virtual-scroll-viewport>\n\n <ng-template #defaultViewPort>\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 </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 <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | 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; 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 : language | uppercase\"\n *ngIf=\"filteredItemsList.length\">\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 <ng-container *ngIf=\"!filteredItemsList.length && !filteredSuggestionList.length && inputValue\">\n <ng-container *ngIf=\"allowAdd; else notFound\">\n <mat-option (mousedown)=$event.preventDefault() [value]=\"inputValue\">\n <span>{{ ('COMMON.ADD') | uiTranslate : language }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n </ng-container>\n\n <ng-template #notFound>\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate : language }}</span>\n </mat-option>\n </ng-template>\n </ng-container>\n </ng-container>\n </ng-container>\n }\n </mat-autocomplete>\n <mat-hint class=\"error\" *ngIf=\"safeErrors.length || (ngControl?.errors | hasValidationError) || (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue)\">\n <div class=\"errors\" *ngIf=\"(AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue)\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ (translationContext + 'MAX_SELECTED_ERROR') | uiTranslate : language : { max: maxItemSelected } }}</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\" [language]=\"language\"></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:block}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled{opacity:.5}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.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:4px}.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}.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}\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: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i2$5.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i7.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", "language"], outputs: ["close", "press"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "language"] }, { kind: "directive", type: i11.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i11.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i11.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: PreventInputDirective, selector: "[uiPreventInput]", inputs: ["uiPreventInput"] }, { 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 }); }
|
|
10637
10712
|
}
|
|
10638
10713
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
10639
10714
|
type: Component,
|
|
@@ -11077,7 +11152,7 @@ class SkeletonComponent {
|
|
|
11077
11152
|
}
|
|
11078
11153
|
}
|
|
11079
11154
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SkeletonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11080
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: SkeletonComponent, isStandalone: true, selector: "ui-skeleton", inputs: { count: "count", theme: "theme", appearance: "appearance", applicationTheme: "applicationTheme" }, ngImport: i0, template: "<ngx-skeleton-loader\n [count]=\"count\"\n [theme]=\"currentTheme$ | async\"\n [appearance]=\"(appearance$ | async) || 'line'\"\n></ngx-skeleton-loader>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i2$
|
|
11155
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: SkeletonComponent, isStandalone: true, selector: "ui-skeleton", inputs: { count: "count", theme: "theme", appearance: "appearance", applicationTheme: "applicationTheme" }, ngImport: i0, template: "<ngx-skeleton-loader\n [count]=\"count\"\n [theme]=\"currentTheme$ | async\"\n [appearance]=\"(appearance$ | async) || 'line'\"\n></ngx-skeleton-loader>\n", styles: [""], 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"] }] }); }
|
|
11081
11156
|
}
|
|
11082
11157
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SkeletonComponent, decorators: [{
|
|
11083
11158
|
type: Component,
|
|
@@ -11155,7 +11230,7 @@ class PaginatorComponent {
|
|
|
11155
11230
|
this.paginatorChange.emit(paginator);
|
|
11156
11231
|
}
|
|
11157
11232
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PaginatorComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11158
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", 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$
|
|
11233
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", 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: ["disabled"], exportAs: ["matPaginator"] }] }); }
|
|
11159
11234
|
}
|
|
11160
11235
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
11161
11236
|
type: Component,
|
|
@@ -11384,7 +11459,7 @@ class TableComponent {
|
|
|
11384
11459
|
this.dataSourceDetail = new MatTableDataSource(rowData);
|
|
11385
11460
|
}
|
|
11386
11461
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TableComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.DestroyRef }, { token: IS_MOBILE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11387
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: TableComponent, selector: "ui-table", inputs: { config: "config", data: "data", loading: "loading", applicationTheme: "applicationTheme", tableDetailColumns: "tableDetailColumns", tableDetails: "tableDetails", disableBorderRadius: "disableBorderRadius" }, 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 <table\n class=\"main-table\"\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 *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 [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [style.font-weight]=\"'bold'\"\n [matTooltipClass]=\"applicationTheme\"\n [matTooltip]=\"(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title ) : '') || ''\"\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 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title | sentencecase }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element; let rowIndex = dataIndex\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n (click)=\"onRowClick(element); 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 <ui-icon\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"!i && tableDetails\"\n size=\"24\"\n [ngClass]=\"{ opened: elementDetail && element == elementDetail }\"\n [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-in-line'\"\n ></ui-icon>\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[column.key] }}</span>\n </ng-template>\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 [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [style.font-weight]=\"'bold'\"\n [matTooltipClass]=\"applicationTheme\"\n [matTooltip]=\"(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title ) : '') || ''\"\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 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title | sentencecase }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element; let rowIndex = dataIndex\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n (click)=\"onRowClick(element); 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 <ui-icon\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"!i && tableDetails\"\n size=\"24\"\n [ngClass]=\"{ opened: elementDetail && element == elementDetail }\"\n [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-in-line'\"\n ></ui-icon>\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[column.key] }}</span>\n </ng-template>\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 [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [matTooltipClass]=\"applicationTheme\"\n [matTooltip]=\"(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title ) : '') || ''\"\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 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title | sentencecase }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element; let rowIndex = dataIndex\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n (click)=\"onRowClick(element); 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 <ui-icon\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"!i && tableDetails\"\n size=\"24\"\n [ngClass]=\"{ opened: elementDetail && element == elementDetail }\"\n [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-in-line'\"\n ></ui-icon>\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[column.key] }}</span>\n </ng-template>\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 [matTooltipClass]=\"applicationTheme\"\n [matTooltip]=\"(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title ) : '') ?? ''\"\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 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title | sentencecase }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element; let rowIndex = dataIndex\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n (click)=\"onRowClick(element); 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 <ui-icon\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"!i && tableDetails\"\n size=\"24\"\n [ngClass]=\"{ opened: elementDetail && element == elementDetail }\"\n [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-in-line'\"\n ></ui-icon>\n\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[column.key] }}</span>\n </ng-template>\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\"></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\"\n [disabled]=\"loading\"\n [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\n [pageSize]=\"tableConfig.pagination.itemsPerPage\"\n [length]=\"tableConfig.pagination.totalItems\"\n [currentPage]=\"tableConfig.pagination.currentPage\"\n [pageSizeOptions]=\"tableConfig.pagination.itemsPerPageOptions\"\n (paginatorChange)=\"onPaginatorChange($event)\"\n ></ui-paginator>\n</div>\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}.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 table.main-table{width:100%;box-shadow:unset;border-top:1px #E0E0E0 solid}.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 th{font-size:14px;line-height:16px;text-transform:uppercase}.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 .column-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;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 #242424,8%!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 #242424,8%!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}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$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "applicationTheme"] }, { kind: "component", type: PaginatorComponent, selector: "ui-paginator", inputs: ["pageSizeOptions", "length", "pageSize", "disabled", "applicationTheme", "currentPage"], outputs: ["paginatorChange"] }, { kind: "directive", type: i4$5.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { 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: [
|
|
11462
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: TableComponent, selector: "ui-table", inputs: { config: "config", data: "data", loading: "loading", applicationTheme: "applicationTheme", tableDetailColumns: "tableDetailColumns", tableDetails: "tableDetails", disableBorderRadius: "disableBorderRadius" }, 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 <table\n class=\"main-table\"\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 *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 [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [style.font-weight]=\"'bold'\"\n [matTooltipClass]=\"applicationTheme\"\n [matTooltip]=\"(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title ) : '') || ''\"\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 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title | sentencecase }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element; let rowIndex = dataIndex\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n (click)=\"onRowClick(element); 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 <ui-icon\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"!i && tableDetails\"\n size=\"24\"\n [ngClass]=\"{ opened: elementDetail && element == elementDetail }\"\n [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-in-line'\"\n ></ui-icon>\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[column.key] }}</span>\n </ng-template>\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 [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [style.font-weight]=\"'bold'\"\n [matTooltipClass]=\"applicationTheme\"\n [matTooltip]=\"(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title ) : '') || ''\"\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 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title | sentencecase }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element; let rowIndex = dataIndex\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n (click)=\"onRowClick(element); 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 <ui-icon\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"!i && tableDetails\"\n size=\"24\"\n [ngClass]=\"{ opened: elementDetail && element == elementDetail }\"\n [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-in-line'\"\n ></ui-icon>\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[column.key] }}</span>\n </ng-template>\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 [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n [matTooltipClass]=\"applicationTheme\"\n [matTooltip]=\"(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title ) : '') || ''\"\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 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title | sentencecase }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element; let rowIndex = dataIndex\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n (click)=\"onRowClick(element); 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 <ui-icon\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"!i && tableDetails\"\n size=\"24\"\n [ngClass]=\"{ opened: elementDetail && element == elementDetail }\"\n [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-in-line'\"\n ></ui-icon>\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[column.key] }}</span>\n </ng-template>\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 [matTooltipClass]=\"applicationTheme\"\n [matTooltip]=\"(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title ) : '') ?? ''\"\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 <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\"\n class=\"column-title\">{{ column.title | sentencecase }}</span>\n </ng-template>\n </th>\n\n <td mat-cell\n *matCellDef=\"let element; let rowIndex = dataIndex\"\n [style.width]=\"column.widthPerc + '%'\"\n [style.min-width]=\"column.minWidthPx + 'px'\"\n (click)=\"onRowClick(element); 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 <ui-icon\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"!i && tableDetails\"\n size=\"24\"\n [ngClass]=\"{ opened: elementDetail && element == elementDetail }\"\n [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-in-line'\"\n ></ui-icon>\n\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[column.key] }}</span>\n </ng-template>\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\"></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\"\n [disabled]=\"loading\"\n [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\n [pageSize]=\"tableConfig.pagination.itemsPerPage\"\n [length]=\"tableConfig.pagination.totalItems\"\n [currentPage]=\"tableConfig.pagination.currentPage\"\n [pageSizeOptions]=\"tableConfig.pagination.itemsPerPageOptions\"\n (paginatorChange)=\"onPaginatorChange($event)\"\n ></ui-paginator>\n</div>\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}.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 table.main-table{width:100%;box-shadow:unset;border-top:1px #E0E0E0 solid}.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 th{font-size:14px;line-height:16px;text-transform:uppercase}.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 .column-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;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 #242424,8%!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 #242424,8%!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}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$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$4.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "applicationTheme"] }, { kind: "component", type: PaginatorComponent, selector: "ui-paginator", inputs: ["pageSizeOptions", "length", "pageSize", "disabled", "applicationTheme", "currentPage"], outputs: ["paginatorChange"] }, { kind: "directive", type: i4$5.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { 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: [
|
|
11388
11463
|
trigger('expandDetail', [
|
|
11389
11464
|
state('collapsed, void', style({ height: '0px' })),
|
|
11390
11465
|
state('expanded', style({ height: '*' })),
|
|
@@ -11651,7 +11726,7 @@ class SliderComponent {
|
|
|
11651
11726
|
useExisting: forwardRef(() => SliderComponent),
|
|
11652
11727
|
multi: true,
|
|
11653
11728
|
},
|
|
11654
|
-
], ngImport: i0, template: "<ng-container>\n <div class=\"slider-container\" [attr.theme]=\"applicationTheme\" [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\">\n <div class=\"slider-label\" *ngIf=\"label\">{{ label }}</div>\n\n <div class=\"slider\">\n <div class=\"min-value\" *ngIf=\"!isBasicSlider\">{{ percentage ? min + '%' : min }}</div>\n <mat-slider\n [disableRipple]=\"applicationTheme !== 'classic'\" #sliderElement discrete [disabled]=\"disabled\" [max]=\"max\" [min]=\"min\" [step]=\"step\" (mouseenter)=\"sliderElement.discrete = true\" (mouseleave)=\"sliderElement.discrete = false\">\n <ng-container *ngIf=\"isBasicSlider; else rangeTemplate\">\n <input\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange($event)\"\n [(ngModel)]=\"sliderStart\"\n matSliderThumb\n >\n </ng-container>\n\n <ng-template #rangeTemplate>\n <input\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange()\"\n [(ngModel)]=\"sliderStart\"\n matSliderStartThumb\n >\n <input\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange()\"\n [(ngModel)]=\"sliderEnd\"\n matSliderEndThumb\n >\n\n </ng-template>\n </mat-slider>\n <div class=\"max-value\" *ngIf=\"!isBasicSlider\">{{ percentage ? max + '%' : max }}</div>\n </div>\n\n <div class=\"slider-input\" *ngIf=\"showInputs && !this.isBasicSlider\">\n <mat-form-field [appearance]=\"'outline'\">\n <mat-label>{{ ('COMMON.MIN') | uiTranslate : language }} <span *ngIf=\"percentage\">%</span></mat-label>\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 >\n </mat-form-field>\n\n <mat-form-field [appearance]=\"'outline'\">\n <mat-label>{{ ('COMMON.MAX') | uiTranslate : language }} <span *ngIf=\"percentage\">%</span></mat-label>\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 >\n </mat-form-field>\n </div>\n\n <mat-error *ngIf=\"hasError && touchedControlName\">\n <div class=\"validation-error\" *ngIf=\"touchedControlName === 'start' && sliderStart > sliderEnd\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ (translationContext + 'MIN_MORE_THAN_MAX') | uiTranslate : language : { min: sliderStart, max: sliderEnd } }}</span>\n </div>\n\n <div class=\"validation-error\" *ngIf=\"touchedControlName === 'end' && sliderStart > sliderEnd\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ (translationContext + 'MAX_LESS_THAN_MIN') | uiTranslate : language : { min: sliderStart, max: sliderEnd } }}</span>\n </div>\n\n <div class=\"validation-error\" *ngIf=\"sliderStart < min\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ ('COMMON.MIN') | uiTranslate : language }} {{ min }}</span>\n </div>\n <div class=\"validation-error\" *ngIf=\"sliderEnd > max\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ ('COMMON.MAX') | uiTranslate : language }} {{ max }}</span>\n </div>\n </mat-error>\n </div>\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}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#cb7b7a!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#cb7b7a!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled *{pointer-events:none;cursor:initial}::ng-deep .slider-container.disabled .mat-mdc-slider *{border-color:#919191!important}::ng-deep .slider-container.disabled .mat-mdc-slider .mdc-slider__thumb:after{display:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#a9c2c9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:30px;margin-right:8px}::ng-deep .slider-container .slider .max-value{width:35px;margin-left:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between;margin-bottom:8px}::ng-deep .slider-container .slider-input mat-form-field{width:80px;min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#cb7b7a}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .slider-container[theme=light],::ng-deep .slider-container[theme=dark]{color:#242424}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary{--mdc-slider-active-track-color: #D410AA;--mdc-slider-handle-color: #D410AA;--mdc-slider-focus-handle-color: #D410AA;--mdc-slider-hover-handle-color: #D410AA;--mdc-slider-inactive-track-color: #D3D3D3;--mdc-slider-with-tick-marks-inactive-container-color: #D410AA;--mat-mdc-slider-ripple-color: #D410AA;--mat-mdc-slider-hover-ripple-color: rgba(255, 179, 238, .56);--mat-mdc-slider-focus-ripple-color: rgba(255, 179, 238, .56);height:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive{opacity:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb{z-index:1;height:40px;width:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill{z-index:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container{bottom:60px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator{background:#242424;opacity:1;color:#fff;position:relative;width:100%;display:flex;justify-content:center;align-items:center}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before{content:\"\";display:flex;position:absolute;left:calc(50% - 7px);bottom:-8px;height:15px;width:15px;border-top:1px solid #ffffff;border-right:1px solid #ffffff;background:#242424;z-index:10;border-top-right-radius:4px;transform:rotate(135deg)}\n"], dependencies: [{ kind: "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$6.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$6.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i2$6.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { 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: "directive", type: i7.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: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11729
|
+
], ngImport: i0, template: "<ng-container>\n <div class=\"slider-container\" [attr.theme]=\"applicationTheme\" [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\">\n <div class=\"slider-label\" *ngIf=\"label\">{{ label }}</div>\n\n <div class=\"slider\">\n <div class=\"min-value\" *ngIf=\"!isBasicSlider\">{{ percentage ? min + '%' : min }}</div>\n <mat-slider\n [disableRipple]=\"applicationTheme !== 'classic'\" #sliderElement discrete [disabled]=\"disabled\" [max]=\"max\" [min]=\"min\" [step]=\"step\" (mouseenter)=\"sliderElement.discrete = true\" (mouseleave)=\"sliderElement.discrete = false\">\n <ng-container *ngIf=\"isBasicSlider; else rangeTemplate\">\n <input\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange($event)\"\n [(ngModel)]=\"sliderStart\"\n matSliderThumb\n >\n </ng-container>\n\n <ng-template #rangeTemplate>\n <input\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange()\"\n [(ngModel)]=\"sliderStart\"\n matSliderStartThumb\n >\n <input\n [disabled]=\"disabled\"\n (valueChange)=\"onValueChange()\"\n [(ngModel)]=\"sliderEnd\"\n matSliderEndThumb\n >\n\n </ng-template>\n </mat-slider>\n <div class=\"max-value\" *ngIf=\"!isBasicSlider\">{{ percentage ? max + '%' : max }}</div>\n </div>\n\n <div class=\"slider-input\" *ngIf=\"showInputs && !this.isBasicSlider\">\n <mat-form-field [appearance]=\"'outline'\">\n <mat-label>{{ ('COMMON.MIN') | uiTranslate : language }} <span *ngIf=\"percentage\">%</span></mat-label>\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 >\n </mat-form-field>\n\n <mat-form-field [appearance]=\"'outline'\">\n <mat-label>{{ ('COMMON.MAX') | uiTranslate : language }} <span *ngIf=\"percentage\">%</span></mat-label>\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 >\n </mat-form-field>\n </div>\n\n <mat-error *ngIf=\"hasError && touchedControlName\">\n <div class=\"validation-error\" *ngIf=\"touchedControlName === 'start' && sliderStart > sliderEnd\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ (translationContext + 'MIN_MORE_THAN_MAX') | uiTranslate : language : { min: sliderStart, max: sliderEnd } }}</span>\n </div>\n\n <div class=\"validation-error\" *ngIf=\"touchedControlName === 'end' && sliderStart > sliderEnd\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ (translationContext + 'MAX_LESS_THAN_MIN') | uiTranslate : language : { min: sliderStart, max: sliderEnd } }}</span>\n </div>\n\n <div class=\"validation-error\" *ngIf=\"sliderStart < min\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ ('COMMON.MIN') | uiTranslate : language }} {{ min }}</span>\n </div>\n <div class=\"validation-error\" *ngIf=\"sliderEnd > max\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ ('COMMON.MAX') | uiTranslate : language }} {{ max }}</span>\n </div>\n </mat-error>\n </div>\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}::ng-deep .slider-container{min-width:240px;width:100%}::ng-deep .slider-container .mat-mdc-form-field-bottom-align:before{content:none}::ng-deep .slider-container.error .mdc-notched-outline__leading,::ng-deep .slider-container.error .mdc-notched-outline__notch,::ng-deep .slider-container.error .mdc-notched-outline__trailing{border-color:#cb7b7a!important}::ng-deep .slider-container.error .mdc-notched-outline__leading label,::ng-deep .slider-container.error .mdc-notched-outline__notch label,::ng-deep .slider-container.error .mdc-notched-outline__trailing label{color:#cb7b7a!important}::ng-deep .slider-container.error .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch{border-left:none!important}::ng-deep .slider-container.disabled *{pointer-events:none;cursor:initial}::ng-deep .slider-container.disabled .mat-mdc-slider *{border-color:#919191!important}::ng-deep .slider-container.disabled .mat-mdc-slider .mdc-slider__thumb:after{display:none}::ng-deep .slider-container.disabled .slider,::ng-deep .slider-container.disabled .slider-input{opacity:.5}::ng-deep .slider-container .slider-label{font-size:14px;font-weight:700;line-height:20px}::ng-deep .slider-container .slider{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:16px 0}::ng-deep .slider-container .slider mat-slider{width:100%}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-floating-label{top:23px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator-container{bottom:54px}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator{background:#a9c2c9;color:#000}::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:after,::ng-deep .slider-container .slider .mat-mdc-slider .mdc-slider__value-indicator:before{display:none}::ng-deep .slider-container .slider .min-value{width:30px;margin-right:8px}::ng-deep .slider-container .slider .max-value{width:35px;margin-left:8px}::ng-deep .slider-container .slider-input{display:flex;justify-content:space-between;margin-bottom:8px}::ng-deep .slider-container .slider-input mat-form-field{width:80px;min-width:80px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-flex,::ng-deep .slider-container .slider-input .mdc-notched-outline{height:48px!important}::ng-deep .slider-container .slider-input .mat-mdc-form-field-subscript-wrapper,::ng-deep .slider-container .slider-input .mdc-text-field__input::-webkit-inner-spin-button{display:none}::ng-deep .slider-container mat-error{font-size:12px;gap:4px}::ng-deep .slider-container mat-error ui-icon svg{color:#cb7b7a}::ng-deep .slider-container mat-error .validation-error{display:flex;flex-direction:row;align-items:center}::ng-deep .slider-container mat-error .validation-error ui-icon{margin-right:4px}::ng-deep .slider-container[theme=light],::ng-deep .slider-container[theme=dark]{color:#242424}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary{--mdc-slider-active-track-color: #D410AA;--mdc-slider-handle-color: #D410AA;--mdc-slider-focus-handle-color: #D410AA;--mdc-slider-hover-handle-color: #D410AA;--mdc-slider-inactive-track-color: #D3D3D3;--mdc-slider-with-tick-marks-inactive-container-color: #D410AA;--mat-mdc-slider-ripple-color: #D410AA;--mat-mdc-slider-hover-ripple-color: rgba(255, 179, 238, .56);--mat-mdc-slider-focus-ripple-color: rgba(255, 179, 238, .56);height:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--inactive{opacity:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mat-mdc-focus-indicator{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb-knob{border-radius:100%}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__thumb,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__thumb{z-index:1;height:40px;width:40px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill{z-index:1}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator-container{bottom:60px}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator{background:#242424;opacity:1;color:#fff;position:relative;width:100%;display:flex;justify-content:center;align-items:center}::ng-deep .slider-container[theme=light] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before,::ng-deep .slider-container[theme=dark] .mat-mdc-slider.mat-primary .mdc-slider__value-indicator:before{content:\"\";display:flex;position:absolute;left:calc(50% - 7px);bottom:-8px;height:15px;width:15px;border-top:1px solid #ffffff;border-right:1px solid #ffffff;background:#242424;z-index:10;border-top-right-radius:4px;transform:rotate(135deg)}\n"], dependencies: [{ kind: "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$7.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$7.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i2$7.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "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: "directive", type: i7.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: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11655
11730
|
}
|
|
11656
11731
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SliderComponent, decorators: [{
|
|
11657
11732
|
type: Component,
|
|
@@ -11813,7 +11888,7 @@ class TooltipTemplateDirective {
|
|
|
11813
11888
|
.withPush(true);
|
|
11814
11889
|
this._overlayRef = this._overlay.create({ positionStrategy });
|
|
11815
11890
|
}
|
|
11816
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TooltipTemplateDirective, deps: [{ token: i1$
|
|
11891
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TooltipTemplateDirective, deps: [{ token: i1$7.Overlay }, { token: i1$7.OverlayPositionBuilder }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
11817
11892
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.7", type: TooltipTemplateDirective, isStandalone: true, selector: "[uiTooltipTemplate]", inputs: { tooltipPosition: "tooltipPosition", showTooltip: "showTooltip", templateRef: ["uiTooltipTemplate", "templateRef"] }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()" } }, usesOnChanges: true, ngImport: i0 }); }
|
|
11818
11893
|
}
|
|
11819
11894
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TooltipTemplateDirective, decorators: [{
|
|
@@ -11822,7 +11897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
11822
11897
|
selector: '[uiTooltipTemplate]',
|
|
11823
11898
|
standalone: true,
|
|
11824
11899
|
}]
|
|
11825
|
-
}], ctorParameters: () => [{ type: i1$
|
|
11900
|
+
}], ctorParameters: () => [{ type: i1$7.Overlay }, { type: i1$7.OverlayPositionBuilder }, { type: i0.ElementRef }], propDecorators: { tooltipPosition: [{
|
|
11826
11901
|
type: Input
|
|
11827
11902
|
}], showTooltip: [{
|
|
11828
11903
|
type: Input
|
|
@@ -12076,7 +12151,7 @@ class DividerComponent {
|
|
|
12076
12151
|
}
|
|
12077
12152
|
}
|
|
12078
12153
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DividerComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12079
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", 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$
|
|
12154
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", 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$8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
|
|
12080
12155
|
}
|
|
12081
12156
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DividerComponent, decorators: [{
|
|
12082
12157
|
type: Component,
|
|
@@ -12251,7 +12326,7 @@ class TabsComponent {
|
|
|
12251
12326
|
}
|
|
12252
12327
|
}
|
|
12253
12328
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TabsComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: IS_MOBILE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12254
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: TabsComponent, selector: "ui-tabs", inputs: { companyColor: "companyColor", type: "type", animationDuration: "animationDuration", headerContentPadding: ["headerContentPadding", "headerContentPadding", (value) => value + 'px'], dynamicHeight: ["dynamicHeight", "dynamicHeight", booleanAttribute], applicationTheme: "applicationTheme" }, 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 [attr.theme]=\"applicationTheme\"\n [dynamicHeight]=\"dynamicHeight\"\n [selectedIndex]=\"tabIndex()\"\n [animationDuration]=\"animationDuration\"\n (selectedTabChange)=\"onTabChange($event)\"\n>\n <mat-tab *ngFor=\"let tab of tabs; trackBy: trackByTabName\" [disabled]=\"tab.disabled ?? false\">\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 [tabindex]=\"0\"\n [href]=\"tab?.linkUrl ? tab.linkUrl : '#'\"\n (click)=\"$event.preventDefault()\"\n >\n <ui-icon [size]=\"'24'\" [tabindex]=\"1\" class=\"left-icon\" [name]=\"tab.iconLeft!\" *ngIf=\"tab?.iconLeft\"></ui-icon>\n <span class=\"label\">{{ tab.tabLabel }}</span>\n <ui-icon\n [size]=\"'24'\"\n [tabindex]=\"2\"\n class=\"right-icon\"\n [name]=\"tab.iconRight!\"\n *ngIf=\"tab?.iconRight\"\n ></ui-icon>\n </a>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"tab.contentTemplateRef\"></ng-container>\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%}::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:#000;outline:unset;font-size:16px;line-height:24px;width:100%}::ng-deep .tabs-container .tab-name:focus{outline:1px dashed #888888}::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 black,.5px 0 black}::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 .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 .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$8.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i2$8.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i2$8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
|
|
12329
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: TabsComponent, selector: "ui-tabs", inputs: { companyColor: "companyColor", type: "type", animationDuration: "animationDuration", headerContentPadding: ["headerContentPadding", "headerContentPadding", (value) => value + 'px'], dynamicHeight: ["dynamicHeight", "dynamicHeight", booleanAttribute], applicationTheme: "applicationTheme" }, 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 [attr.theme]=\"applicationTheme\"\n [dynamicHeight]=\"dynamicHeight\"\n [selectedIndex]=\"tabIndex()\"\n [animationDuration]=\"animationDuration\"\n (selectedTabChange)=\"onTabChange($event)\"\n>\n <mat-tab *ngFor=\"let tab of tabs; trackBy: trackByTabName\" [disabled]=\"tab.disabled ?? false\">\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 [tabindex]=\"0\"\n [href]=\"tab?.linkUrl ? tab.linkUrl : '#'\"\n (click)=\"$event.preventDefault()\"\n >\n <ui-icon [size]=\"'24'\" [tabindex]=\"1\" class=\"left-icon\" [name]=\"tab.iconLeft!\" *ngIf=\"tab?.iconLeft\"></ui-icon>\n <span class=\"label\">{{ tab.tabLabel }}</span>\n <ui-icon\n [size]=\"'24'\"\n [tabindex]=\"2\"\n class=\"right-icon\"\n [name]=\"tab.iconRight!\"\n *ngIf=\"tab?.iconRight\"\n ></ui-icon>\n </a>\n </ng-template>\n <ng-container *ngTemplateOutlet=\"tab.contentTemplateRef\"></ng-container>\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%}::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:#000;outline:unset;font-size:16px;line-height:24px;width:100%}::ng-deep .tabs-container .tab-name:focus{outline:1px dashed #888888}::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 black,.5px 0 black}::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 .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 .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"], exportAs: ["matTab"] }, { kind: "component", type: i2$9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
|
|
12255
12330
|
}
|
|
12256
12331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: TabsComponent, decorators: [{
|
|
12257
12332
|
type: Component,
|
|
@@ -12632,7 +12707,7 @@ class SegmentedButtonComponent {
|
|
|
12632
12707
|
useExisting: forwardRef(() => SegmentedButtonComponent),
|
|
12633
12708
|
multi: true,
|
|
12634
12709
|
},
|
|
12635
|
-
], 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 (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}.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] .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$9.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$9.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12710
|
+
], 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 (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}.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] .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"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$a.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12636
12711
|
}
|
|
12637
12712
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SegmentedButtonComponent, decorators: [{
|
|
12638
12713
|
type: Component,
|
|
@@ -12758,7 +12833,7 @@ class PasswordComponent {
|
|
|
12758
12833
|
useExisting: forwardRef(() => PasswordComponent),
|
|
12759
12834
|
multi: true,
|
|
12760
12835
|
},
|
|
12761
|
-
], ngImport: i0, template: "<div class=\"password-criteria-container\">\n\n <ui-field [applicationTheme]=\"'dark'\"\n [formControl]=\"formControl\"\n [type]=\"'password'\"\n [placeholder]=\"('PASSWORD.PASSWORD_PLACEHOLDER' | uiTranslate : language) + (required ? ' *' : '')\"\n (keydown.enter)=\"showError = true\"\n (focusout)=\"showError = true\"\n ></ui-field>\n\n <div class=\"criteria-container\" *ngIf=\"showCriteria\">\n\n <div class=\"progress\">\n <ui-progress-bar [progress]=\"progressValue === 1 ? 0 : progressValue\" [applicationTheme]=\"'dark'\"></ui-progress-bar>\n </div>\n\n <div\n *ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [ngClass]=\"{ 'passed': criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n >\n <ui-icon [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] && showError ? 'Info-in-line' : 'Check-round-in-line'\"\n applicationTheme=\"dark\"\n ></ui-icon>\n <span>{{ criterion.translateKey | uiTranslate : language }}</span>\n </div>\n </div>\n\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}.password-criteria-container .criteria-container{margin-top:14px}.password-criteria-container .criteria-container .progress{margin-bottom:16px}.password-criteria-container .criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.password-criteria-container .criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.password-criteria-container .criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.password-criteria-container .criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.password-criteria-container .criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.password-criteria-container .criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.password-criteria-container .criteria-container .criterion.error span{color:#e02800}\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: "component", type: FieldComponent, selector: "ui-field", inputs: ["fullWidth", "label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "allowNegative", "language", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12836
|
+
], ngImport: i0, template: "<div class=\"password-criteria-container\">\n\n <ui-field [applicationTheme]=\"'dark'\"\n [formControl]=\"formControl\"\n [type]=\"'password'\"\n [placeholder]=\"('PASSWORD.PASSWORD_PLACEHOLDER' | uiTranslate : language) + (required ? ' *' : '')\"\n (keydown.enter)=\"showError = true\"\n (focusout)=\"showError = true\"\n ></ui-field>\n\n <div class=\"criteria-container\" *ngIf=\"showCriteria\">\n\n <div class=\"progress\">\n <ui-progress-bar [progress]=\"progressValue === 1 ? 0 : progressValue\" [applicationTheme]=\"'dark'\"></ui-progress-bar>\n </div>\n\n <div\n *ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [ngClass]=\"{ 'passed': criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n >\n <ui-icon [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] && showError ? 'Info-in-line' : 'Check-round-in-line'\"\n applicationTheme=\"dark\"\n ></ui-icon>\n <span>{{ criterion.translateKey | uiTranslate : language }}</span>\n </div>\n </div>\n\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}.password-criteria-container .criteria-container{margin-top:14px}.password-criteria-container .criteria-container .progress{margin-bottom:16px}.password-criteria-container .criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.password-criteria-container .criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.password-criteria-container .criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.password-criteria-container .criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.password-criteria-container .criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.password-criteria-container .criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.password-criteria-container .criteria-container .criterion.error span{color:#e02800}\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: "component", type: FieldComponent, selector: "ui-field", inputs: ["fullWidth", "label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "allowNegative", "language", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "language"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12762
12837
|
}
|
|
12763
12838
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PasswordComponent, decorators: [{
|
|
12764
12839
|
type: Component,
|
|
@@ -13093,13 +13168,13 @@ class PhoneInputComponent {
|
|
|
13093
13168
|
ev.preventDefault();
|
|
13094
13169
|
ev.stopPropagation();
|
|
13095
13170
|
}
|
|
13096
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PhoneInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i2$
|
|
13171
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PhoneInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i2$5.ErrorStateMatcher }, { token: i1$2.UntypedFormBuilder }, { token: i2$2.FocusMonitor }, { token: i0.ChangeDetectorRef }, { token: i2.DomSanitizer }, { token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13097
13172
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", 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", language: "language" }, host: { properties: { "attr.disabled": "this.disabled", "attr.theme": "this.applicationTheme", "id": "this.id", "class.floated": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, providers: [
|
|
13098
13173
|
{
|
|
13099
13174
|
provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
|
|
13100
13175
|
useValue: { overlayPanelClass: 'phone-number-autocomplete' },
|
|
13101
13176
|
},
|
|
13102
|
-
], 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 : language }} <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 : language)\" [language]=\"language\"></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: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i7$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.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"], outputs: ["toggleAll"] }, { kind: "directive", type: i9.MatSelectSearchClearDirective, selector: "[ngxMatSelectSearchClear]" }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "language"] }, { 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 }); }
|
|
13177
|
+
], 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 : language }} <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 : language)\" [language]=\"language\"></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: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i7$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i7$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.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"], outputs: ["toggleAll"] }, { kind: "directive", type: i9.MatSelectSearchClearDirective, selector: "[ngxMatSelectSearchClear]" }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "language"] }, { 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 }); }
|
|
13103
13178
|
}
|
|
13104
13179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PhoneInputComponent, decorators: [{
|
|
13105
13180
|
type: Component,
|
|
@@ -13113,7 +13188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
13113
13188
|
type: Optional
|
|
13114
13189
|
}, {
|
|
13115
13190
|
type: Self
|
|
13116
|
-
}] }, { type: i2$
|
|
13191
|
+
}] }, { type: i2$5.ErrorStateMatcher }, { type: i1$2.UntypedFormBuilder }, { type: i2$2.FocusMonitor }, { type: i0.ChangeDetectorRef }, { type: i2.DomSanitizer }, { type: undefined, decorators: [{
|
|
13117
13192
|
type: Optional
|
|
13118
13193
|
}, {
|
|
13119
13194
|
type: Inject,
|
|
@@ -13363,7 +13438,7 @@ class PasswordStrengthComponent {
|
|
|
13363
13438
|
return this.applicationTheme === 'classic' ? 'Round-check' : 'Check-round-in-line';
|
|
13364
13439
|
}
|
|
13365
13440
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PasswordStrengthComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13366
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: PasswordStrengthComponent, selector: "ui-password-strength", inputs: { applicationTheme: "applicationTheme", language: "language", password: "password" }, outputs: { validationCheck: "validationCheck" }, ngImport: i0, template: "<div class=\"criteria-container\">\n\n <div class=\"progress\">\n <ui-progress-bar [progress]=\"progressValue === 1 ? 0 : progressValue\" [applicationTheme]=\"applicationTheme\"></ui-progress-bar>\n </div>\n\n <div\n *ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [ngClass]=\"{ 'passed': criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] }\"\n >\n <ui-icon [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n <span>{{ criterion.translateKey | uiTranslate : language }}</span>\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}.criteria-container{margin-top:14px}.criteria-container .progress{margin-bottom:16px}.criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.criteria-container .criterion.error span{color:#e02800}\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: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
13441
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: PasswordStrengthComponent, selector: "ui-password-strength", inputs: { applicationTheme: "applicationTheme", language: "language", password: "password" }, outputs: { validationCheck: "validationCheck" }, ngImport: i0, template: "<div class=\"criteria-container\">\n\n <div class=\"progress\">\n <ui-progress-bar [progress]=\"progressValue === 1 ? 0 : progressValue\" [applicationTheme]=\"applicationTheme\"></ui-progress-bar>\n </div>\n\n <div\n *ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [ngClass]=\"{ 'passed': criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] }\"\n >\n <ui-icon [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n <span>{{ criterion.translateKey | uiTranslate : language }}</span>\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}.criteria-container{margin-top:14px}.criteria-container .progress{margin-bottom:16px}.criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.criteria-container .criterion.error span{color:#e02800}\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: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "language"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
13367
13442
|
}
|
|
13368
13443
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PasswordStrengthComponent, decorators: [{
|
|
13369
13444
|
type: Component,
|