@testgorilla/tgo-ui 2.23.17 → 2.23.19
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/button/button.component.d.ts +9 -1
- package/components/dialog/dialog.service.d.ts +1 -1
- package/components/field/field.component.d.ts +31 -5
- package/components/icon/icon.component.d.ts +1 -0
- package/components/overflow-menu/overflow-menu.component.d.ts +39 -5
- package/components/overflow-menu/overflow-menu.component.module.d.ts +5 -1
- package/components/overflow-menu/overflow-menu.model.d.ts +10 -0
- package/directives/ellipse-text.directive.d.ts +4 -1
- package/esm2022/assets/i18n/en.json +3 -0
- package/esm2022/components/alert-banner/alert-banner.component.mjs +2 -2
- package/esm2022/components/avatar/avatar.component.mjs +1 -1
- package/esm2022/components/button/button.component.mjs +12 -3
- package/esm2022/components/checkbox/checkbox.component.mjs +9 -3
- package/esm2022/components/dialog/dialog.component.mjs +1 -1
- package/esm2022/components/dialog/dialog.service.mjs +3 -2
- package/esm2022/components/dropdown/dropdown.component.mjs +1 -1
- package/esm2022/components/empty-state/empty-state.component.mjs +1 -1
- package/esm2022/components/field/field.component.mjs +55 -17
- package/esm2022/components/icon/icon.component.mjs +7 -7
- package/esm2022/components/multi-input/multi-input.component.mjs +1 -1
- package/esm2022/components/navbar/mobile-navbar-side-sheet/mobile-navbar-side-sheet.component.mjs +1 -1
- package/esm2022/components/navbar/navbar.component.mjs +1 -1
- package/esm2022/components/overflow-menu/overflow-menu.component.mjs +128 -11
- package/esm2022/components/overflow-menu/overflow-menu.component.module.mjs +8 -4
- package/esm2022/components/overflow-menu/overflow-menu.model.mjs +1 -1
- package/esm2022/components/page-header/page-header.component.mjs +1 -1
- package/esm2022/components/password-criteria/password.component.mjs +1 -1
- package/esm2022/components/radial-progress/radial-progress.component.mjs +1 -1
- package/esm2022/components/radio-button/radio-button.component.mjs +1 -1
- package/esm2022/components/side-sheet/side-sheet.component.mjs +1 -1
- package/esm2022/components/snackbar/snackbar.component.mjs +2 -2
- package/esm2022/components/table/table.component.mjs +2 -2
- package/esm2022/components/toggle/toggle.component.mjs +1 -1
- package/esm2022/directives/ellipse-text.directive.mjs +15 -6
- package/fesm2022/testgorilla-tgo-ui.mjs +233 -58
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +3 -2
- package/projects/tgo-canopy-ui/assets/i18n/en.json +3 -0
- package/projects/tgo-canopy-ui/theme/_button.scss +74 -0
- package/projects/tgo-canopy-ui/theme/theme.scss +1 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { trigger, transition, animate, style, state } from '@angular/animations';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { Injectable, Component, ViewEncapsulation, Optional, Inject, HostBinding, Input, EventEmitter, Directive, Output, HostListener, Pipe, booleanAttribute, ViewChild, ChangeDetectionStrategy, NgModule, Self, forwardRef, ViewContainerRef, Host, InjectionToken, inject, PLATFORM_ID,
|
|
3
|
+
import { Injectable, Component, ViewEncapsulation, Optional, Inject, HostBinding, Input, EventEmitter, Directive, Output, HostListener, Pipe, booleanAttribute, ViewChild, ChangeDetectionStrategy, NgModule, Self, signal, forwardRef, ViewContainerRef, Host, InjectionToken, inject, PLATFORM_ID, input, TemplateRef, effect, DestroyRef, ViewChildren, ElementRef } from '@angular/core';
|
|
4
4
|
import * as i2 from '@angular/platform-browser';
|
|
5
5
|
import * as i1$1 from '@angular/common';
|
|
6
6
|
import { CommonModule, NgIf, NgForOf, NgClass, NgTemplateOutlet, formatDate, isPlatformBrowser, NgOptimizedImage } from '@angular/common';
|
|
@@ -13,7 +13,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
|
13
13
|
import * as i3 from '@angular/material/tooltip';
|
|
14
14
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
15
15
|
import * as i4$6 from 'rxjs';
|
|
16
|
-
import { Subject, startWith, debounceTime, ReplaySubject, switchMap, map, tap, Subscription, BehaviorSubject,
|
|
16
|
+
import { Subject, combineLatest, startWith, debounceTime, ReplaySubject, switchMap, map, tap, Subscription, BehaviorSubject, fromEvent, take, filter, first, delay } from 'rxjs';
|
|
17
17
|
import { HttpClientModule } from '@angular/common/http';
|
|
18
18
|
import * as i4$4 from '@angular/material/radio';
|
|
19
19
|
import { MatRadioModule } from '@angular/material/radio';
|
|
@@ -23,24 +23,24 @@ import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormGroup, FormCon
|
|
|
23
23
|
import * as i2$2 from '@angular/cdk/a11y';
|
|
24
24
|
import * as i4$1 from '@angular/material/checkbox';
|
|
25
25
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
26
|
-
import * as
|
|
26
|
+
import * as i6 from '@angular/material/form-field';
|
|
27
27
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
28
|
-
import * as
|
|
28
|
+
import * as i7 from '@angular/material/input';
|
|
29
29
|
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
|
-
import * as
|
|
32
|
+
import * as i8 from '@angular/cdk/text-field';
|
|
33
33
|
import * as i1$4 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
|
-
import { MatMenuModule } from '@angular/material/menu';
|
|
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
39
|
import * as i1$5 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
|
-
import * as i5
|
|
43
|
+
import * as i5 from '@angular/material/sidenav';
|
|
44
44
|
import { MatSidenavModule } from '@angular/material/sidenav';
|
|
45
45
|
import * as i2$4 from '@angular/material/core';
|
|
46
46
|
import { MatRippleModule, NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
|
|
@@ -58,7 +58,7 @@ import * as i7$3 from '@angular/material/datepicker';
|
|
|
58
58
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
59
59
|
import * as i11 from '@angular/cdk/scrolling';
|
|
60
60
|
import { CdkVirtualScrollViewport, CdkVirtualForOf, CdkFixedSizeVirtualScroll } from '@angular/cdk/scrolling';
|
|
61
|
-
import * as i5$
|
|
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
64
|
import * as i2$5 from 'ngx-skeleton-loader';
|
|
@@ -1052,7 +1052,7 @@ class IconComponent {
|
|
|
1052
1052
|
addIcon() {
|
|
1053
1053
|
let filename;
|
|
1054
1054
|
if (this.filled || this.name?.includes('filled')) {
|
|
1055
|
-
this.
|
|
1055
|
+
this._name = this.name.replace(/-in-line/, '');
|
|
1056
1056
|
filename =
|
|
1057
1057
|
this.applicationTheme === 'classic'
|
|
1058
1058
|
? tgoIcons.find(icon => icon === this.filledIconName)
|
|
@@ -1065,9 +1065,9 @@ class IconComponent {
|
|
|
1065
1065
|
: this.inlineIconFileName;
|
|
1066
1066
|
}
|
|
1067
1067
|
if (!filename) {
|
|
1068
|
-
filename = tgoIcons.find(icon => icon === this.
|
|
1068
|
+
filename = tgoIcons.find(icon => icon === this._name);
|
|
1069
1069
|
}
|
|
1070
|
-
this.
|
|
1070
|
+
this._name = filename;
|
|
1071
1071
|
const path = this.applicationTheme === 'classic' ? '/icons/' : '/icons/rebrand/';
|
|
1072
1072
|
if (filename && !this.iconsService.isIconLoaded(filename)) {
|
|
1073
1073
|
this.matIconRegistry.addSvgIcon(filename, this.domSanitzer.bypassSecurityTrustResourceUrl(`${path}${filename}.svg`));
|
|
@@ -1084,14 +1084,14 @@ class IconComponent {
|
|
|
1084
1084
|
return this.name?.includes('filled') ? this.name.replace('filled', 'in-line') : this.inlineIconName;
|
|
1085
1085
|
}
|
|
1086
1086
|
get isIconLoaded() {
|
|
1087
|
-
return this.iconsService.isIconLoaded(this.
|
|
1087
|
+
return this.iconsService.isIconLoaded(this._name);
|
|
1088
1088
|
}
|
|
1089
1089
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: IconComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1.MatIconRegistry }, { token: i2.DomSanitizer }, { token: IconsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1090
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: IconComponent, selector: "ui-icon", inputs: { size: "size", cssClass: "cssClass", name: "name", color: "color", filled: "filled", applicationTheme: "applicationTheme" }, host: { properties: { "style.--icon-size": "this.size" } }, usesOnChanges: true, ngImport: i0, template: "@if (isIconLoaded) {\n <mat-icon [svgIcon]=\"
|
|
1090
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: IconComponent, selector: "ui-icon", inputs: { size: "size", cssClass: "cssClass", name: "name", color: "color", filled: "filled", applicationTheme: "applicationTheme" }, host: { properties: { "style.--icon-size": "this.size" } }, usesOnChanges: true, ngImport: i0, template: "@if (isIconLoaded) {\n <mat-icon [svgIcon]=\"_name\" [attr.class]=\"customCssClass\"></mat-icon>\n} @else {\n <div class=\"empty-icon-placeholder\"></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}:host{width:calc(var(--icon-size) * 1px)!important;height:calc(var(--icon-size) * 1px)!important}.empty-icon-placeholder{width:calc(var(--icon-size) * 1px)!important;height:calc(var(--icon-size) * 1px)!important}mat-icon{display:flex}mat-icon.size-16 svg{width:16px;height:16px}mat-icon.size-24 svg{width:24px;height:24px}mat-icon.size-40 svg{width:40px;height:40px}mat-icon.size-80 svg{width:80px;height:80px}mat-icon.dark svg{color:#888}mat-icon.white svg{color:#fff}mat-icon.teal svg{color:#46a997}mat-icon.petrol svg{color:#276678}mat-icon.black svg{color:#000}mat-icon.red svg{color:#e02800}mat-icon.gray svg{color:#666}mat-icon.orange svg{color:#d07d00}mat-icon.rebrand-black svg{color:#242424}\n"], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1091
1091
|
}
|
|
1092
1092
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: IconComponent, decorators: [{
|
|
1093
1093
|
type: Component,
|
|
1094
|
-
args: [{ selector: 'ui-icon', encapsulation: ViewEncapsulation.None, template: "@if (isIconLoaded) {\n <mat-icon [svgIcon]=\"
|
|
1094
|
+
args: [{ selector: 'ui-icon', encapsulation: ViewEncapsulation.None, template: "@if (isIconLoaded) {\n <mat-icon [svgIcon]=\"_name\" [attr.class]=\"customCssClass\"></mat-icon>\n} @else {\n <div class=\"empty-icon-placeholder\"></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}:host{width:calc(var(--icon-size) * 1px)!important;height:calc(var(--icon-size) * 1px)!important}.empty-icon-placeholder{width:calc(var(--icon-size) * 1px)!important;height:calc(var(--icon-size) * 1px)!important}mat-icon{display:flex}mat-icon.size-16 svg{width:16px;height:16px}mat-icon.size-24 svg{width:24px;height:24px}mat-icon.size-40 svg{width:40px;height:40px}mat-icon.size-80 svg{width:80px;height:80px}mat-icon.dark svg{color:#888}mat-icon.white svg{color:#fff}mat-icon.teal svg{color:#46a997}mat-icon.petrol svg{color:#276678}mat-icon.black svg{color:#000}mat-icon.red svg{color:#e02800}mat-icon.gray svg{color:#666}mat-icon.orange svg{color:#d07d00}mat-icon.rebrand-black svg{color:#242424}\n"] }]
|
|
1095
1095
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1096
1096
|
type: Optional
|
|
1097
1097
|
}, {
|
|
@@ -1252,25 +1252,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
1252
1252
|
* Checks if element ellipsis
|
|
1253
1253
|
*/
|
|
1254
1254
|
class EllipseTextDirective {
|
|
1255
|
+
set refresh(_) {
|
|
1256
|
+
this.refreshEllipsis$.next();
|
|
1257
|
+
}
|
|
1255
1258
|
resize() {
|
|
1256
1259
|
this.checkEllipsis$.next();
|
|
1257
1260
|
}
|
|
1258
1261
|
constructor(el) {
|
|
1259
1262
|
this.el = el;
|
|
1260
1263
|
this.isMultiline = false;
|
|
1264
|
+
this.maxDiffPixels = 0;
|
|
1261
1265
|
this.checkEllipsis$ = new Subject();
|
|
1266
|
+
this.refreshEllipsis$ = new Subject();
|
|
1262
1267
|
this.onChangeTextState = new EventEmitter();
|
|
1263
1268
|
}
|
|
1264
1269
|
ngOnInit() {
|
|
1265
|
-
this.checkEllipsis$.pipe(startWith(null), debounceTime(100)).subscribe(() => {
|
|
1270
|
+
combineLatest([this.checkEllipsis$.pipe(startWith(null)), this.refreshEllipsis$.pipe(startWith(null))]).pipe(debounceTime(100)).subscribe(() => {
|
|
1266
1271
|
const textElement = this.el.nativeElement;
|
|
1267
1272
|
this.onChangeTextState.emit(this.isMultiline
|
|
1268
|
-
? textElement.clientHeight < textElement.scrollHeight
|
|
1269
|
-
: textElement.clientWidth < textElement.scrollWidth);
|
|
1273
|
+
? (textElement.clientHeight + this.maxDiffPixels) < textElement.scrollHeight
|
|
1274
|
+
: (textElement.clientWidth + this.maxDiffPixels) < textElement.scrollWidth);
|
|
1270
1275
|
});
|
|
1271
1276
|
}
|
|
1272
1277
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: EllipseTextDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1273
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.7", type: EllipseTextDirective, isStandalone: true, selector: "[uiEllipseText]", inputs: { isMultiline: "isMultiline" }, outputs: { onChangeTextState: "onChangeTextState" }, host: { listeners: { "window:resize": "resize()" } }, ngImport: i0 }); }
|
|
1278
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.7", type: EllipseTextDirective, isStandalone: true, selector: "[uiEllipseText]", inputs: { isMultiline: "isMultiline", maxDiffPixels: "maxDiffPixels", refresh: "refresh" }, outputs: { onChangeTextState: "onChangeTextState" }, host: { listeners: { "window:resize": "resize()" } }, ngImport: i0 }); }
|
|
1274
1279
|
}
|
|
1275
1280
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: EllipseTextDirective, decorators: [{
|
|
1276
1281
|
type: Directive,
|
|
@@ -1280,6 +1285,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
1280
1285
|
}]
|
|
1281
1286
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { isMultiline: [{
|
|
1282
1287
|
type: Input
|
|
1288
|
+
}], maxDiffPixels: [{
|
|
1289
|
+
type: Input
|
|
1290
|
+
}], refresh: [{
|
|
1291
|
+
type: Input
|
|
1283
1292
|
}], onChangeTextState: [{
|
|
1284
1293
|
type: Output
|
|
1285
1294
|
}], resize: [{
|
|
@@ -1392,6 +1401,9 @@ var SCALE_TABLE = {
|
|
|
1392
1401
|
var BUTTON = {
|
|
1393
1402
|
PREMIUM_FEATURE: "Premium Feature"
|
|
1394
1403
|
};
|
|
1404
|
+
var MENU = {
|
|
1405
|
+
MENUITEM_DISABLED: "This menu item is disabled"
|
|
1406
|
+
};
|
|
1395
1407
|
var en = {
|
|
1396
1408
|
SNACKBAR: SNACKBAR$b,
|
|
1397
1409
|
AUTOCOMPLETE: AUTOCOMPLETE$b,
|
|
@@ -1406,7 +1418,8 @@ var en = {
|
|
|
1406
1418
|
PASSWORD: PASSWORD,
|
|
1407
1419
|
ERRORS: ERRORS,
|
|
1408
1420
|
SCALE_TABLE: SCALE_TABLE,
|
|
1409
|
-
BUTTON: BUTTON
|
|
1421
|
+
BUTTON: BUTTON,
|
|
1422
|
+
MENU: MENU
|
|
1410
1423
|
};
|
|
1411
1424
|
|
|
1412
1425
|
var SNACKBAR$a = {
|
|
@@ -2698,6 +2711,13 @@ class ButtonComponent {
|
|
|
2698
2711
|
* @memberof ButtonComponent
|
|
2699
2712
|
*/
|
|
2700
2713
|
this.preventDefault = false;
|
|
2714
|
+
/**
|
|
2715
|
+
* Sets tooltip position
|
|
2716
|
+
*
|
|
2717
|
+
* @type {TooltipPosition}
|
|
2718
|
+
* @memberof ButtonComponent
|
|
2719
|
+
*/
|
|
2720
|
+
this.tooltipPosition = 'below';
|
|
2701
2721
|
this.buttonClickEvent = new EventEmitter();
|
|
2702
2722
|
this.buttonHoverEvent = new EventEmitter();
|
|
2703
2723
|
this.hover = false;
|
|
@@ -2866,11 +2886,11 @@ class ButtonComponent {
|
|
|
2866
2886
|
this.labelEllipsis = state;
|
|
2867
2887
|
}
|
|
2868
2888
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ButtonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2869
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: ButtonComponent, selector: "ui-button", inputs: { size: "size", variant: "variant", label: "label", iconPosition: "iconPosition", justIcon: "justIcon", iconName: "iconName", disabled: "disabled", loading: "loading", fullWidth: "fullWidth", url: "url", urlTarget: "urlTarget", value: "value", tooltip: "tooltip", isPremium: "isPremium", type: "type", companyColor: "companyColor", buttonBadgeConfig: "buttonBadgeConfig", applicationTheme: "applicationTheme", disabledScaleOnClick: "disabledScaleOnClick", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", language: "language", preventDefault: ["preventDefault", "preventDefault", booleanAttribute] }, outputs: { buttonClickEvent: "buttonClickEvent", buttonHoverEvent: "buttonHoverEvent" }, host: { properties: { "style.pointer-events": "this.enabled", "attr.btn-variant": "this.variant", "attr.theme": "this.applicationTheme", "style.--color": "this.compColor" } }, viewQueries: [{ propertyName: "tooltipElement", first: true, predicate: ["tooltipElement"], descendants: true }, { propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #tooltipElement class=\"tooltip\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n></div>\n<div\n class=\"button-wrapper\"\n [ngClass]=\"{ 'full-width': fullWidth, 'rounded-icon': applicationTheme !== 'classic' && iconName && !label, link: !isButtonLink }\"\n>\n <div class=\"button-container\"\n [ngClass]=\"{ 'disabled': disabled, 'button-scale': buttonState === 'pressed' && applicationTheme !== 'classic' && !disabledScaleOnClick }\"\n >\n <span *ngIf=\"isPremium && typeIncluded\" class=\"right-top\">\n <img [attr.src]=\"'/images/premium.svg'\" [alt]=\"'premium-icon'\">\n </span>\n <ui-badge\n id=\"badge\"\n *ngIf=\"buttonBadgeConfig?.badgeType\"\n [rebrandColor]=\"buttonBadgeConfig?.rebrandColor ?? 'brand'\"\n [variant]=\"buttonBadgeConfig!.badgeType!\"\n [label]=\"buttonBadgeConfig?.badgeLabel ?? ''\"\n [notificationsAmount]=\"buttonBadgeConfig?.badgeNotificationAmount ?? 0\"\n class=\"right-top\"\n [ngClass]=\"{ 'badge-primary': buttonBadgeConfig?.badgeType === 'primary', 'badge-notification': buttonBadgeConfig?.badgeType === 'notification' }\"\n ></ui-badge>\n <button\n [style]=\"'--icon-button-size:' + iconButtonSize + 'px'\"\n [ngClass]=\"classCss\"\n [ngStyle]=\"styleCss\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick($event)\"\n (mouseleave)=\"buttonHover($event)\"\n (mouseenter)=\"buttonHover($event)\"\n (mousedown)=\"onPressed($event)\"\n (mouseup)=\"onPressed($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\"\n *ngIf=\"isButtonLink\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-disabled]=\"disabled\"\n [type]=\"type\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n #buttonElement\n role=\"button\"\n mat-flat-button>\n <span id=\"describedby\" [style.display]=\"'none'\">\n {{ (isPremium ? (label + ' ' + ('BUTTON.PREMIUM_FEATURE' | uiTranslate : language)) : ariaDescribedby) }}\n </span>\n <span id=\"labelledby\" [style.display]=\"'none'\">\n {{ ariaLabelledby }}\n </span>\n <ng-container *ngIf=\"showSpinner; else icons\">\n <span class=\"spinner-wrapper\">\n <mat-spinner class=\"position-spinner\" aria-label=\"loading\" mode=\"indeterminate\" diameter=\"24\"></mat-spinner>\n </span>\n </ng-container>\n <ng-template #icons>\n <span class=\"icon-only-wrapper\" *ngIf=\"justIcon && !!iconName\">\n <span\n class=\"icon only\"\n role=\"label\"\n >\n <ui-icon\n [color]=\"'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"iconName\"\n [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"\n ></ui-icon>\n </span>\n </span>\n\n <span class=\"icon-label-wrapper\" [ngClass]=\"{'center-text': iconName === ''}\" *ngIf=\"!justIcon\">\n <span\n class=\"icon\"\n *ngIf=\"iconPosition === 'left' && !!iconName\"\n aria-hidden=\"true\"\n >\n <ui-icon\n [color]=\"'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"iconName\"\n [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"\n ></ui-icon>\n </span>\n <span\n *ngIf=\"isLabel\"\n class=\"label\"\n id=\"label\"\n uiEllipseText\n [isMultiline]=\"true\"\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n >\n {{ label }}\n </span>\n <span class=\"icon\" *ngIf=\"iconPosition === 'right' && !!iconName\" aria-hidden=\"true\"><ui-icon\n [color]=\"'inherit'\" [applicationTheme]=\"applicationTheme\" [name]=\"iconName\" [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"></ui-icon></span>\n </span>\n </ng-template>\n </button>\n <a\n #buttonElement\n [ngClass]=\"classCss\"\n [ngStyle]=\"styleCss\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick($event)\"\n (mouseenter)=\"buttonHover($event)\"\n (mouseleave)=\"buttonHover($event)\"\n (mousedown)=\"onPressed($event)\"\n (mouseup)=\"onPressed($event)\"\n (keydown)=\"onKeydown($event);\"\n (keyup)=\"onKeyup($event)\"\n [disableRipple]=\"true\"\n *ngIf=\"!isButtonLink\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"'labelledby-link'\"\n [attr.aria-describedby]=\"'describedby-link'\"\n [attr.aria-disabled]=\"disabled\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n role=\"link\"\n [href]=\"url\"\n [target]=\"urlTarget\"\n mat-flat-button>\n <span id=\"describedby-link\" [style.display]=\"'none'\">\n {{ ariaDescribedby }}\n </span>\n <span class=\"icon-label-wrapper\" id=\"labelledby-link\">\n {{ ariaLabelledby }}\n </span>\n </a>\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}::ng-deep .mat-mdc-button-persistent-ripple:before{opacity:0!important}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host{position:relative}:host ::ng-deep button.cdk-keyboard-focused:not(.text),:host a:focus-visible.cdk-keyboard-focused:not(.text){outline-color:#242424!important;outline-style:solid!important;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}:host ::ng-deep button.icon-button.cdk-keyboard-focused,:host ::ng-deep button.menuTrigger.cdk-keyboard-focused,:host a:focus-visible.icon-button.cdk-keyboard-focused,:host a:focus-visible.menuTrigger.cdk-keyboard-focused{border:unset!important}:host a:focus-visible{border-radius:2px!important}:host .tooltip{position:absolute;top:0;left:0;width:fit-content;height:100%;pointer-events:auto}.rounded-icon button{min-width:unset}.rounded-icon .mdc-button{width:48px!important;min-width:unset}.rounded-icon .mdc-button .icon{margin:0!important}.rounded-icon .big,.rounded-icon .small{padding:0!important}:host{display:flex}:host .button-container{width:100%}:host .button-container.disabled{pointer-events:none}:host .button-container.button-scale{transform:scale(.98)}:host .button-wrapper.full-width{width:100%}:host .button-wrapper ::ng-deep .mdc-button__label,:host .button-wrapper ::ng-deep .icon-label-wrapper{width:100%}:host .button-wrapper ::ng-deep .label{text-align:left;overflow:hidden;-webkit-line-clamp:2;display:-webkit-box!important;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal}:host .button-wrapper ::ng-deep button{width:100%}button.mat-mdc-unelevated-button,a.mat-mdc-unelevated-button{font-size:14px;font-weight:600;line-height:normal;letter-spacing:normal}button.mat-mdc-unelevated-button .spinner-wrapper,a.mat-mdc-unelevated-button .spinner-wrapper{display:flex;align-items:center;flex-flow:column;width:100%}button.mat-mdc-unelevated-button .icon,a.mat-mdc-unelevated-button .icon{display:flex;height:100%;align-items:center}button.mat-mdc-unelevated-button .icon.only,a.mat-mdc-unelevated-button .icon.only{align-items:center;flex-flow:column;justify-content:center;margin-left:0}button.mat-mdc-unelevated-button .icon-label-wrapper,a.mat-mdc-unelevated-button .icon-label-wrapper{display:flex;align-items:center;justify-content:center;height:100%}button.mat-mdc-unelevated-button .icon-label-wrapper.center-text,a.mat-mdc-unelevated-button .icon-label-wrapper.center-text{flex-flow:column;width:100%}button.mat-mdc-unelevated-button .icon-label-wrapper .label,a.mat-mdc-unelevated-button .icon-label-wrapper .label{display:flex;height:100%;align-items:center}button.mat-mdc-unelevated-button.big,a.mat-mdc-unelevated-button.big{height:48px;padding:12px 24px}button.mat-mdc-unelevated-button.small,a.mat-mdc-unelevated-button.small{height:38px;padding:7px 11px}button.mat-mdc-unelevated-button.classic-theme.big,a.mat-mdc-unelevated-button.classic-theme.big{height:48px;padding:12px 16px}button.mat-mdc-unelevated-button.small.left .icon,button.mat-mdc-unelevated-button.big.left .icon,a.mat-mdc-unelevated-button.small.left .icon,a.mat-mdc-unelevated-button.big.left .icon{margin-right:8px}button.mat-mdc-unelevated-button.small.right .icon,button.mat-mdc-unelevated-button.big.right .icon,a.mat-mdc-unelevated-button.small.right .icon,a.mat-mdc-unelevated-button.big.right .icon{margin-left:8px}button.mat-mdc-unelevated-button.small.only-icon .icon,button.mat-mdc-unelevated-button.big.only-icon .icon,a.mat-mdc-unelevated-button.small.only-icon .icon,a.mat-mdc-unelevated-button.big.only-icon .icon{margin-left:0}button.mat-mdc-unelevated-button.primary,button.mat-mdc-unelevated-button.secondary,button.mat-mdc-unelevated-button.ghost,button.mat-mdc-unelevated-button.outlined,button.mat-mdc-unelevated-button.destructive,button.mat-mdc-unelevated-button.tertiary,button.mat-mdc-unelevated-button.link,a.mat-mdc-unelevated-button.primary,a.mat-mdc-unelevated-button.secondary,a.mat-mdc-unelevated-button.ghost,a.mat-mdc-unelevated-button.outlined,a.mat-mdc-unelevated-button.destructive,a.mat-mdc-unelevated-button.tertiary,a.mat-mdc-unelevated-button.link{min-width:80px}button.mat-mdc-unelevated-button.primary.only-icon,button.mat-mdc-unelevated-button.secondary.only-icon,button.mat-mdc-unelevated-button.ghost.only-icon,button.mat-mdc-unelevated-button.outlined.only-icon,button.mat-mdc-unelevated-button.destructive.only-icon,button.mat-mdc-unelevated-button.tertiary.only-icon,button.mat-mdc-unelevated-button.link.only-icon,a.mat-mdc-unelevated-button.primary.only-icon,a.mat-mdc-unelevated-button.secondary.only-icon,a.mat-mdc-unelevated-button.ghost.only-icon,a.mat-mdc-unelevated-button.outlined.only-icon,a.mat-mdc-unelevated-button.destructive.only-icon,a.mat-mdc-unelevated-button.tertiary.only-icon,a.mat-mdc-unelevated-button.link.only-icon{min-width:1px}button.mat-mdc-unelevated-button.primary.full-width,button.mat-mdc-unelevated-button.secondary.full-width,button.mat-mdc-unelevated-button.ghost.full-width,button.mat-mdc-unelevated-button.outlined.full-width,button.mat-mdc-unelevated-button.destructive.full-width,button.mat-mdc-unelevated-button.tertiary.full-width,button.mat-mdc-unelevated-button.link.full-width,a.mat-mdc-unelevated-button.primary.full-width,a.mat-mdc-unelevated-button.secondary.full-width,a.mat-mdc-unelevated-button.ghost.full-width,a.mat-mdc-unelevated-button.outlined.full-width,a.mat-mdc-unelevated-button.destructive.full-width,a.mat-mdc-unelevated-button.tertiary.full-width,a.mat-mdc-unelevated-button.link.full-width{width:100%;min-width:100%}button.mat-mdc-unelevated-button.primary.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.secondary.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.ghost.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.outlined.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.destructive.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.tertiary.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.link.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.primary.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.secondary.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.ghost.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.outlined.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.destructive.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.tertiary.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.link.full-width .icon-label-wrapper{justify-content:center}button.mat-mdc-unelevated-button.primary,a.mat-mdc-unelevated-button.primary{background-color:var(--color);color:#fff;border-radius:1000px}button.mat-mdc-unelevated-button.primary-disabled,a.mat-mdc-unelevated-button.primary-disabled{opacity:.75}button.mat-mdc-unelevated-button.primary.classic-theme,a.mat-mdc-unelevated-button.primary.classic-theme{border-radius:4px}button.mat-mdc-unelevated-button.primary.classic-theme:disabled,button.mat-mdc-unelevated-button.primary.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.classic-theme:disabled,a.mat-mdc-unelevated-button.primary.classic-theme:disabled:hover{background-color:#b5ddd5}button.mat-mdc-unelevated-button.primary.light-theme:disabled,button.mat-mdc-unelevated-button.primary.light-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.light-theme:disabled,a.mat-mdc-unelevated-button.primary.light-theme:disabled:hover{background-color:#e9e9e9;color:#666}button.mat-mdc-unelevated-button.primary.light-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.primary.light-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.light-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.light-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#666}button.mat-mdc-unelevated-button.primary.dark-theme:disabled,button.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.dark-theme:disabled,a.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover{background-color:#666;color:#d3d3d3}button.mat-mdc-unelevated-button.primary.dark-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.dark-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3}button.mat-mdc-unelevated-button.primary ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.primary .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.primary .mat-mdc-progress-spinner ::ng-deep circle{stroke:#fff}button.mat-mdc-unelevated-button.secondary,a.mat-mdc-unelevated-button.secondary{border-radius:1000px}button.mat-mdc-unelevated-button.secondary.light-theme,a.mat-mdc-unelevated-button.secondary.light-theme{background-color:#242424;color:#fff}button.mat-mdc-unelevated-button.secondary.light-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.secondary.light-theme:disabled,button.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.light-theme:disabled,a.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover{opacity:.75;background-color:#e9e9e9;color:#666}button.mat-mdc-unelevated-button.secondary.light-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3!important}button.mat-mdc-unelevated-button.secondary.dark-theme,a.mat-mdc-unelevated-button.secondary.dark-theme{background-color:#fff;color:#242424}button.mat-mdc-unelevated-button.secondary.dark-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme ::ng-deep mat-icon.black svg{color:#242424}button.mat-mdc-unelevated-button.secondary.dark-theme:disabled,button.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover{opacity:.75;background-color:#666;color:#d3d3d3}button.mat-mdc-unelevated-button.secondary.dark-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3}button.mat-mdc-unelevated-button.secondary:hover,a.mat-mdc-unelevated-button.secondary:hover{background-color:#666;color:#fff}button.mat-mdc-unelevated-button.secondary:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary:hover ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.secondary .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.secondary .mat-mdc-progress-spinner ::ng-deep circle{stroke:#fff}button.mat-mdc-unelevated-button.secondary.classic-theme,a.mat-mdc-unelevated-button.secondary.classic-theme{border-radius:4px;background-color:#ededed;color:#000}button.mat-mdc-unelevated-button.secondary.classic-theme:hover,a.mat-mdc-unelevated-button.secondary.classic-theme:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.secondary.classic-theme:disabled,button.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover{background-color:#ededed;color:#888}button.mat-mdc-unelevated-button.secondary.classic-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.secondary.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.secondary.classic-theme .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.outlined,a.mat-mdc-unelevated-button.outlined{background-color:#fff;color:#000;border-width:1px;border-style:solid;border-color:#000}button.mat-mdc-unelevated-button.outlined:hover,a.mat-mdc-unelevated-button.outlined:hover{background-color:#f6f6f6}button.mat-mdc-unelevated-button.outlined:disabled,button.mat-mdc-unelevated-button.outlined:disabled:hover,a.mat-mdc-unelevated-button.outlined:disabled,a.mat-mdc-unelevated-button.outlined:disabled:hover{color:#ededed;border-color:#ededed}button.mat-mdc-unelevated-button.outlined:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.outlined:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.outlined:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.outlined:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.outlined:focus.cdk-focused,a.mat-mdc-unelevated-button.outlined:focus.cdk-focused{background-color:#e0e0e0}button.mat-mdc-unelevated-button.outlined .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.outlined .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.ghost,a.mat-mdc-unelevated-button.ghost{border-width:1px;border-style:solid;border-radius:1000px}button.mat-mdc-unelevated-button.ghost.light-theme,a.mat-mdc-unelevated-button.ghost.light-theme{background-color:transparent;color:#242424;border-color:#242424}button.mat-mdc-unelevated-button.ghost.light-theme.only-icon,a.mat-mdc-unelevated-button.ghost.light-theme.only-icon{width:48px;height:48px;padding:0}button.mat-mdc-unelevated-button.ghost.light-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.ghost.light-theme ::ng-deep mat-icon.black svg{color:#242424}button.mat-mdc-unelevated-button.ghost.light-theme:hover,a.mat-mdc-unelevated-button.ghost.light-theme:hover{background-color:#f4f4f4}button.mat-mdc-unelevated-button.ghost.dark-theme,a.mat-mdc-unelevated-button.ghost.dark-theme{background-color:transparent;color:#fff;border-color:#fff}button.mat-mdc-unelevated-button.ghost.dark-theme.only-icon,a.mat-mdc-unelevated-button.ghost.dark-theme.only-icon{width:48px;height:48px;padding:0}button.mat-mdc-unelevated-button.ghost.dark-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.ghost.dark-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.ghost.dark-theme:hover,a.mat-mdc-unelevated-button.ghost.dark-theme:hover{background-color:#666}button.mat-mdc-unelevated-button.ghost:disabled,button.mat-mdc-unelevated-button.ghost:disabled:hover,a.mat-mdc-unelevated-button.ghost:disabled,a.mat-mdc-unelevated-button.ghost:disabled:hover{opacity:.5;background-color:transparent}button.mat-mdc-unelevated-button.ghost .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.ghost .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.mat-mdc-unelevated-button.destructive,a.mat-mdc-unelevated-button.destructive{border:1px solid #E02800;background-color:#fff;color:#e02800;border-radius:1000px}button.mat-mdc-unelevated-button.destructive:hover,a.mat-mdc-unelevated-button.destructive:hover{background-color:#e02800;color:#fff}button.mat-mdc-unelevated-button.destructive:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive:hover ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.destructive:disabled,button.mat-mdc-unelevated-button.destructive:disabled:hover,a.mat-mdc-unelevated-button.destructive:disabled,a.mat-mdc-unelevated-button.destructive:disabled:hover{border-color:#919191;color:#919191;background:transparent}button.mat-mdc-unelevated-button.destructive ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive ::ng-deep mat-icon.black svg{color:#e02800}button.mat-mdc-unelevated-button.destructive .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.destructive .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.mat-mdc-unelevated-button.destructive.classic-theme,a.mat-mdc-unelevated-button.destructive.classic-theme{border:unset;border-radius:4px;background-color:#cb7b7a;color:#fff}button.mat-mdc-unelevated-button.destructive.classic-theme:hover,a.mat-mdc-unelevated-button.destructive.classic-theme:hover{background-color:#8e5655}button.mat-mdc-unelevated-button.destructive.classic-theme:disabled,button.mat-mdc-unelevated-button.destructive.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.destructive.classic-theme:disabled,a.mat-mdc-unelevated-button.destructive.classic-theme:disabled:hover{background-color:#e3c3c6}button.mat-mdc-unelevated-button.destructive.classic-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive.classic-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.destructive.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.destructive.classic-theme .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.tertiary,a.mat-mdc-unelevated-button.tertiary{background-color:transparent;color:#46a997}button.mat-mdc-unelevated-button.tertiary:hover,a.mat-mdc-unelevated-button.tertiary:hover{background-color:#f6f6f6;color:#31766a}button.mat-mdc-unelevated-button.tertiary:disabled,button.mat-mdc-unelevated-button.tertiary:disabled:hover,a.mat-mdc-unelevated-button.tertiary:disabled,a.mat-mdc-unelevated-button.tertiary:disabled:hover{opacity:.75;background-color:#fff;color:#b5ddd5}button.mat-mdc-unelevated-button.tertiary:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.tertiary:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary:disabled:hover ::ng-deep mat-icon.black svg{color:#b5ddd5}button.mat-mdc-unelevated-button.tertiary ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary ::ng-deep mat-icon.black svg{color:var(--color)}button.mat-mdc-unelevated-button.tertiary .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.tertiary .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.link,a.mat-mdc-unelevated-button.link{background-color:transparent;color:#d410aa;border-radius:0}button.mat-mdc-unelevated-button.link ::ng-deep .mat-mdc-button-persistent-ripple,a.mat-mdc-unelevated-button.link ::ng-deep .mat-mdc-button-persistent-ripple{display:none}button.mat-mdc-unelevated-button.link span.icon-label-wrapper,a.mat-mdc-unelevated-button.link span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.link:hover,a.mat-mdc-unelevated-button.link:hover{color:#a90686!important}button.mat-mdc-unelevated-button.link:active,a.mat-mdc-unelevated-button.link:active{color:#ff54da!important}button.mat-mdc-unelevated-button.link ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.link ::ng-deep .mdc-button__label{padding:4px}button.mat-mdc-unelevated-button.link:active ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.link:active ::ng-deep .mdc-button__label{padding:4px;outline:1px dashed #666666}button.mat-mdc-unelevated-button.link:disabled,button.mat-mdc-unelevated-button.link:disabled:hover,a.mat-mdc-unelevated-button.link:disabled,a.mat-mdc-unelevated-button.link:disabled:hover{color:#d3d3d3}button.mat-mdc-unelevated-button.link ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.link ::ng-deep mat-icon.black svg{color:var(--color)}button.mat-mdc-unelevated-button.link.classic-theme,a.mat-mdc-unelevated-button.link.classic-theme{background-color:transparent;color:#46a997;border-radius:0}button.mat-mdc-unelevated-button.link.classic-theme span.icon-label-wrapper,a.mat-mdc-unelevated-button.link.classic-theme span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.link.classic-theme:hover,a.mat-mdc-unelevated-button.link.classic-theme:hover{color:#31766a}button.mat-mdc-unelevated-button.link.classic-theme:disabled,button.mat-mdc-unelevated-button.link.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.link.classic-theme:disabled,a.mat-mdc-unelevated-button.link.classic-theme:disabled:hover{color:#b5ddd5}button.mat-mdc-unelevated-button.link.classic-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.link.classic-theme ::ng-deep mat-icon.black svg{color:var(--color)}button.mat-mdc-unelevated-button.text,a.mat-mdc-unelevated-button.text{background-color:transparent;border-radius:0;text-decoration:underline}button.mat-mdc-unelevated-button.text.light-theme,a.mat-mdc-unelevated-button.text.light-theme{color:var(--color)}button.mat-mdc-unelevated-button.text.light-theme:active,a.mat-mdc-unelevated-button.text.light-theme:active,button.mat-mdc-unelevated-button.text.light-theme:hover,a.mat-mdc-unelevated-button.text.light-theme:hover{color:var(--active-color)!important}button.mat-mdc-unelevated-button.text.dark-theme,a.mat-mdc-unelevated-button.text.dark-theme{color:var(--color)}button.mat-mdc-unelevated-button.text.dark-theme:active,a.mat-mdc-unelevated-button.text.dark-theme:active{color:var(--active-color)!important}button.mat-mdc-unelevated-button.text.dark-theme:hover,a.mat-mdc-unelevated-button.text.dark-theme:hover{color:var(--active-color)}button.mat-mdc-unelevated-button.text ::ng-deep .mat-mdc-button-persistent-ripple,a.mat-mdc-unelevated-button.text ::ng-deep .mat-mdc-button-persistent-ripple{display:none}button.mat-mdc-unelevated-button.text span.icon-label-wrapper,a.mat-mdc-unelevated-button.text span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.text:disabled,button.mat-mdc-unelevated-button.text:disabled:hover,a.mat-mdc-unelevated-button.text:disabled,a.mat-mdc-unelevated-button.text:disabled:hover{color:#d3d3d3}button.mat-mdc-unelevated-button.text:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.text:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3}button.mat-mdc-unelevated-button.text ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text ::ng-deep .mdc-button__label{padding:4px}button.mat-mdc-unelevated-button.text:focus ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text:focus ::ng-deep .mdc-button__label{padding:4px;outline:1px dashed #666666}button.mat-mdc-unelevated-button.text:focus-visible ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text:focus-visible ::ng-deep .mdc-button__label{border-radius:2px;outline-color:#242424!important;outline-style:solid!important;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}button.mat-mdc-unelevated-button.text .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.text .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.mat-mdc-unelevated-button.text.classic-theme,a.mat-mdc-unelevated-button.text.classic-theme{background-color:transparent;color:#000;border-radius:0;text-decoration:underline}button.mat-mdc-unelevated-button.text.classic-theme span.icon-label-wrapper,a.mat-mdc-unelevated-button.text.classic-theme span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.text.classic-theme:hover,a.mat-mdc-unelevated-button.text.classic-theme:hover{color:#000}button.mat-mdc-unelevated-button.text.classic-theme:disabled,button.mat-mdc-unelevated-button.text.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.text.classic-theme:disabled,a.mat-mdc-unelevated-button.text.classic-theme:disabled:hover{color:#888}button.mat-mdc-unelevated-button.text.classic-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.text.classic-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text.classic-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text.classic-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.text.classic-theme:focus.cdk-focused,a.mat-mdc-unelevated-button.text.classic-theme:focus.cdk-focused{color:#000}button.mat-mdc-unelevated-button.text.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.text.classic-theme .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.squareicon,a.mat-mdc-unelevated-button.squareicon{background-color:#ededed;color:#000;min-width:56px}button.mat-mdc-unelevated-button.squareicon:hover,a.mat-mdc-unelevated-button.squareicon:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.squareicon:disabled,button.mat-mdc-unelevated-button.squareicon:disabled:hover,a.mat-mdc-unelevated-button.squareicon:disabled,a.mat-mdc-unelevated-button.squareicon:disabled:hover{background-color:#ededed;color:#888}button.mat-mdc-unelevated-button.squareicon:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.squareicon:focus.cdk-focused.cdk-mouse-focused{background-color:#ededed}button.mat-mdc-unelevated-button.squareicon .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.squareicon .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.squareicon .icon-label-wrapper,a.mat-mdc-unelevated-button.squareicon .icon-label-wrapper{flex-flow:column}button.mat-mdc-unelevated-button.squareicon.left .icon,button.mat-mdc-unelevated-button.squareicon.right .icon,a.mat-mdc-unelevated-button.squareicon.left .icon,a.mat-mdc-unelevated-button.squareicon.right .icon{margin:0 auto}button.mat-mdc-unelevated-button.tab,a.mat-mdc-unelevated-button.tab{background-color:#fff;color:#000;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#e0e0e0;border-radius:0}button.mat-mdc-unelevated-button.tab:hover .label,button.mat-mdc-unelevated-button.tab:hover .icon.only,a.mat-mdc-unelevated-button.tab:hover .label,a.mat-mdc-unelevated-button.tab:hover .icon.only{text-decoration:underline}button.mat-mdc-unelevated-button.tab:disabled,button.mat-mdc-unelevated-button.tab:disabled:hover,a.mat-mdc-unelevated-button.tab:disabled,a.mat-mdc-unelevated-button.tab:disabled:hover{color:#888}button.mat-mdc-unelevated-button.tab:disabled .label,button.mat-mdc-unelevated-button.tab:disabled:hover .label,a.mat-mdc-unelevated-button.tab:disabled .label,a.mat-mdc-unelevated-button.tab:disabled:hover .label{text-decoration:none}button.mat-mdc-unelevated-button.tab:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.tab:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tab:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tab:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.tab:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.tab:focus.cdk-focused.cdk-mouse-focused{font-weight:700;border-color:#276678}button.mat-mdc-unelevated-button.menuTrigger.classic-theme,a.mat-mdc-unelevated-button.menuTrigger.classic-theme{background:transparent;min-width:24px;height:24px;padding:0}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:hover,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled,button.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled:hover{background-color:#fff;color:#888}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:focus.cdk-focused.cdk-mouse-focused{background-color:transparent}button.mat-mdc-unelevated-button.menuTrigger.classic-theme .icon-label-wrapper,a.mat-mdc-unelevated-button.menuTrigger.classic-theme .icon-label-wrapper{flex-flow:column}button.mat-mdc-unelevated-button.menuTrigger.classic-theme.left .icon,button.mat-mdc-unelevated-button.menuTrigger.classic-theme.right .icon,a.mat-mdc-unelevated-button.menuTrigger.classic-theme.left .icon,a.mat-mdc-unelevated-button.menuTrigger.classic-theme.right .icon{margin:0 auto}button.mat-mdc-unelevated-button.menuCell,a.mat-mdc-unelevated-button.menuCell{background-color:#fff;color:#000;font-weight:400;border-radius:0;min-width:100%;justify-content:flex-start}button.mat-mdc-unelevated-button.menuCell.classic-theme.big.left .icon,a.mat-mdc-unelevated-button.menuCell.classic-theme.big.left .icon{margin-right:16px}button.mat-mdc-unelevated-button.menuCell.big.left .icon,a.mat-mdc-unelevated-button.menuCell.big.left .icon{margin-right:8px}button.mat-mdc-unelevated-button.menuCell .icon-label-wrapper,a.mat-mdc-unelevated-button.menuCell .icon-label-wrapper{justify-content:flex-start}button.mat-mdc-unelevated-button.menuCell:hover,a.mat-mdc-unelevated-button.menuCell:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.menuCell:disabled,button.mat-mdc-unelevated-button.menuCell:disabled:hover,a.mat-mdc-unelevated-button.menuCell:disabled,a.mat-mdc-unelevated-button.menuCell:disabled:hover{background-color:#fff;color:#888}button.mat-mdc-unelevated-button.menuCell:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.menuCell:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.menuCell:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.menuCell:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.menuCell .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.menuCell .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}.button-wrapper{position:relative;height:fit-content}.button-wrapper[aria-disabled=true]{pointer-events:none}.button-wrapper .menuTrigger:not(.classic-theme),.button-wrapper .icon-button{border:none;border-radius:100%;width:var(--icon-button-size)!important;height:var(--icon-button-size)!important;cursor:pointer;background-color:unset}::ng-deep .button-wrapper .menuTrigger:not(.classic-theme).mat-mdc-unelevated-button:not(:disabled),::ng-deep .button-wrapper .icon-button.mat-mdc-unelevated-button:not(:disabled){background-color:unset}::ng-deep .button-wrapper .menuTrigger:not(.classic-theme).mdc-button,::ng-deep .button-wrapper .icon-button.mdc-button{min-width:var(--icon-button-size)!important}.button-wrapper .menuTrigger:not(.classic-theme) ::ng-deep .mat-mdc-button-touch-target,.button-wrapper .icon-button ::ng-deep .mat-mdc-button-touch-target{height:var(--icon-button-size)!important}.button-wrapper .menuTrigger:not(.classic-theme):disabled,.button-wrapper .icon-button:disabled{pointer-events:none;background:unset}.button-wrapper .menuTrigger:not(.classic-theme):disabled.classic-theme ::ng-deep mat-icon svg,.button-wrapper .icon-button:disabled.classic-theme ::ng-deep mat-icon svg{color:#888}.button-wrapper .menuTrigger:not(.classic-theme):hover,.button-wrapper .icon-button:hover{background-color:#f6f6f6}.button-wrapper .menuTrigger:not(.classic-theme):focus.cdk-focused,.button-wrapper .icon-button:focus.cdk-focused{padding:1px;border:1px dashed #888888;outline:0}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:disabled,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:disabled,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .icon-button:not(.has-company-color).light-theme:disabled,.button-wrapper .icon-button:not(.has-company-color).light-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .icon-button:not(.has-company-color).dark-theme:disabled,.button-wrapper .icon-button:not(.has-company-color).dark-theme:disabled:hover ::ng-deep mat-icon svg{color:#919191!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme,.button-wrapper .icon-button:not(.has-company-color).light-theme{color:#242424!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:hover,.button-wrapper .icon-button:not(.has-company-color).light-theme:hover{background-color:#e9e9e9}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:focus.cdk-focused,.button-wrapper .icon-button:not(.has-company-color).light-theme:focus.cdk-focused{border-color:#666}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme,.button-wrapper .icon-button:not(.has-company-color).dark-theme{color:#fff!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:hover,.button-wrapper .icon-button:not(.has-company-color).dark-theme:hover{background-color:#666}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:focus.cdk-focused,.button-wrapper .icon-button:not(.has-company-color).dark-theme:focus.cdk-focused{border-color:#e9e9e9}.button-wrapper .menuTrigger:focus.cdk-focused.cdk-mouse-focused.light-theme{border:none;background-color:#e9e9e9;color:#242424}.button-wrapper .menuTrigger:focus.cdk-focused.cdk-mouse-focused.dark-theme{border:none;background-color:#666;color:#fff}.button-wrapper .right-top{position:absolute;right:-8px;top:-8px;z-index:1}.button-wrapper .right-top.badge-notification{top:-4px;right:0;border:1px solid #ffffff;border-radius:100%}.button-wrapper .right-top.badge-primary{right:-4px}::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}:host[btn-variant=link]{display:inline-flex}::ng-deep .link .button-container{display:flex}::ng-deep .link a.mat-mdc-unelevated-button.link{height:unset!important;min-width:unset!important;border-radius:10px}::ng-deep .link a.mat-mdc-unelevated-button.link:active{outline:1px dashed #666666!important}::ng-deep .link a.mat-mdc-unelevated-button.link:active .mdc-button__label{padding:0!important;outline:none!important}::ng-deep .link a.mat-mdc-unelevated-button{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button .mdc-button__label{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big,::ng-deep .link a.mat-mdc-unelevated-button.small{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big .mdc-button__label,::ng-deep .link a.mat-mdc-unelevated-button.small .mdc-button__label{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper{font-size:16px!important;line-height:24px!important}::ng-deep .link a.mat-mdc-unelevated-button.small .mdc-button__label .icon-label-wrapper{font-size:12px!important;line-height:16px!important}::ng-deep .link a.mat-mdc-unelevated-button .mat-mdc-button-touch-target{height:unset!important}\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: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { 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: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: BadgeComponent, selector: "ui-badge", inputs: ["label", "icon", "color", "variant", "notificationsAmount", "applicationTheme", "rebrandColor"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline"], outputs: ["onChangeTextState"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
2889
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: ButtonComponent, selector: "ui-button", inputs: { size: "size", variant: "variant", label: "label", iconPosition: "iconPosition", justIcon: "justIcon", iconName: "iconName", disabled: "disabled", loading: "loading", fullWidth: "fullWidth", url: "url", urlTarget: "urlTarget", value: "value", tooltip: "tooltip", isPremium: "isPremium", type: "type", companyColor: "companyColor", buttonBadgeConfig: "buttonBadgeConfig", applicationTheme: "applicationTheme", disabledScaleOnClick: "disabledScaleOnClick", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", language: "language", preventDefault: ["preventDefault", "preventDefault", booleanAttribute], tooltipPosition: "tooltipPosition" }, outputs: { buttonClickEvent: "buttonClickEvent", buttonHoverEvent: "buttonHoverEvent" }, host: { properties: { "style.pointer-events": "this.enabled", "attr.btn-variant": "this.variant", "attr.theme": "this.applicationTheme", "style.--color": "this.compColor" } }, viewQueries: [{ propertyName: "tooltipElement", first: true, predicate: ["tooltipElement"], descendants: true }, { propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #tooltipElement class=\"tooltip\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n></div>\n<div\n class=\"button-wrapper\"\n [ngClass]=\"{ 'full-width': fullWidth, 'rounded-icon': applicationTheme !== 'classic' && iconName && !label, link: !isButtonLink }\"\n>\n <div class=\"button-container\"\n [ngClass]=\"{ 'disabled': disabled, 'button-scale': buttonState === 'pressed' && applicationTheme !== 'classic' && !disabledScaleOnClick }\"\n >\n <span *ngIf=\"isPremium && typeIncluded\" class=\"right-top\">\n <img [attr.src]=\"'/images/premium.svg'\" [alt]=\"'premium-icon'\">\n </span>\n <ui-badge\n id=\"badge\"\n *ngIf=\"buttonBadgeConfig?.badgeType\"\n [rebrandColor]=\"buttonBadgeConfig?.rebrandColor ?? 'brand'\"\n [variant]=\"buttonBadgeConfig!.badgeType!\"\n [label]=\"buttonBadgeConfig?.badgeLabel ?? ''\"\n [notificationsAmount]=\"buttonBadgeConfig?.badgeNotificationAmount ?? 0\"\n class=\"right-top\"\n [ngClass]=\"{ 'badge-primary': buttonBadgeConfig?.badgeType === 'primary', 'badge-notification': buttonBadgeConfig?.badgeType === 'notification' }\"\n ></ui-badge>\n <button\n [style]=\"'--icon-button-size:' + iconButtonSize + 'px'\"\n [ngClass]=\"classCss\"\n [ngStyle]=\"styleCss\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick($event)\"\n (mouseleave)=\"buttonHover($event)\"\n (mouseenter)=\"buttonHover($event)\"\n (mousedown)=\"onPressed($event)\"\n (mouseup)=\"onPressed($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\"\n *ngIf=\"isButtonLink\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-disabled]=\"disabled\"\n [type]=\"type\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n [matTooltipPosition]=\"tooltipPosition\"\n #buttonElement\n role=\"button\"\n mat-flat-button>\n <span id=\"describedby\" [style.display]=\"'none'\">\n {{ (isPremium ? (label + ' ' + ('BUTTON.PREMIUM_FEATURE' | uiTranslate : language)) : ariaDescribedby) }}\n </span>\n <span id=\"labelledby\" [style.display]=\"'none'\">\n {{ ariaLabelledby }}\n </span>\n <ng-container *ngIf=\"showSpinner; else icons\">\n <span class=\"spinner-wrapper\">\n <mat-spinner class=\"position-spinner\" aria-label=\"loading\" mode=\"indeterminate\" diameter=\"24\"></mat-spinner>\n </span>\n </ng-container>\n <ng-template #icons>\n <span class=\"icon-only-wrapper\" *ngIf=\"justIcon && !!iconName\">\n <span\n class=\"icon only\"\n role=\"label\"\n >\n <ui-icon\n [color]=\"'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"iconName\"\n [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"\n ></ui-icon>\n </span>\n </span>\n\n <span class=\"icon-label-wrapper\" [ngClass]=\"{'center-text': iconName === ''}\" *ngIf=\"!justIcon\">\n <span\n class=\"icon\"\n *ngIf=\"iconPosition === 'left' && !!iconName\"\n aria-hidden=\"true\"\n >\n <ui-icon\n [color]=\"'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"iconName\"\n [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"\n ></ui-icon>\n </span>\n <span\n *ngIf=\"isLabel\"\n class=\"label\"\n id=\"label\"\n uiEllipseText\n [isMultiline]=\"true\"\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n >\n {{ label }}\n </span>\n <span class=\"icon\" *ngIf=\"iconPosition === 'right' && !!iconName\" aria-hidden=\"true\"><ui-icon\n [color]=\"'inherit'\" [applicationTheme]=\"applicationTheme\" [name]=\"iconName\" [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"></ui-icon></span>\n </span>\n </ng-template>\n </button>\n <a\n #buttonElement\n [ngClass]=\"classCss\"\n [ngStyle]=\"styleCss\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick($event)\"\n (mouseenter)=\"buttonHover($event)\"\n (mouseleave)=\"buttonHover($event)\"\n (mousedown)=\"onPressed($event)\"\n (mouseup)=\"onPressed($event)\"\n (keydown)=\"onKeydown($event);\"\n (keyup)=\"onKeyup($event)\"\n [disableRipple]=\"true\"\n *ngIf=\"!isButtonLink\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"'labelledby-link'\"\n [attr.aria-describedby]=\"'describedby-link'\"\n [attr.aria-disabled]=\"disabled\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n role=\"link\"\n [href]=\"url\"\n [target]=\"urlTarget\"\n mat-flat-button>\n <span id=\"describedby-link\" [style.display]=\"'none'\">\n {{ ariaDescribedby }}\n </span>\n <span id=\"labelledby-link\" [style.display]=\"'none'\">\n {{ ariaLabelledby }}\n </span>\n <span class=\"icon-label-wrapper\">\n {{ label }}\n </span>\n </a>\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}::ng-deep .mat-mdc-button-persistent-ripple:before{opacity:0!important}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host{position:relative}:host ::ng-deep button.cdk-keyboard-focused:not(.text),:host a:focus-visible.cdk-keyboard-focused:not(.text){outline-color:#242424!important;outline-style:solid!important;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}:host ::ng-deep button.icon-button.cdk-keyboard-focused,:host ::ng-deep button.menuTrigger.cdk-keyboard-focused,:host a:focus-visible.icon-button.cdk-keyboard-focused,:host a:focus-visible.menuTrigger.cdk-keyboard-focused{border:unset!important}:host a:focus-visible{border-radius:2px!important}:host .tooltip{position:absolute;top:0;left:0;width:fit-content;height:100%;pointer-events:auto}.rounded-icon button{min-width:unset}.rounded-icon .mdc-button{width:48px!important;min-width:unset}.rounded-icon .mdc-button .icon{margin:0!important}.rounded-icon .big,.rounded-icon .small{padding:0!important}:host{display:flex}:host .button-container{width:100%}:host .button-container.disabled{pointer-events:none}:host .button-container.button-scale{transform:scale(.98)}:host .button-wrapper.full-width{width:100%}:host .button-wrapper ::ng-deep .mdc-button__label,:host .button-wrapper ::ng-deep .icon-label-wrapper{width:100%}:host .button-wrapper ::ng-deep .label{text-align:left;overflow:hidden;-webkit-line-clamp:2;display:-webkit-box!important;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal}:host .button-wrapper ::ng-deep button{width:100%}button.mat-mdc-unelevated-button,a.mat-mdc-unelevated-button{font-size:14px;font-weight:600;line-height:normal;letter-spacing:normal}button.mat-mdc-unelevated-button .spinner-wrapper,a.mat-mdc-unelevated-button .spinner-wrapper{display:flex;align-items:center;flex-flow:column;width:100%}button.mat-mdc-unelevated-button .icon,a.mat-mdc-unelevated-button .icon{display:flex;height:100%;align-items:center}button.mat-mdc-unelevated-button .icon.only,a.mat-mdc-unelevated-button .icon.only{align-items:center;flex-flow:column;justify-content:center;margin-left:0}button.mat-mdc-unelevated-button .icon-label-wrapper,a.mat-mdc-unelevated-button .icon-label-wrapper{display:flex;align-items:center;justify-content:center;height:100%}button.mat-mdc-unelevated-button .icon-label-wrapper.center-text,a.mat-mdc-unelevated-button .icon-label-wrapper.center-text{flex-flow:column;width:100%}button.mat-mdc-unelevated-button .icon-label-wrapper .label,a.mat-mdc-unelevated-button .icon-label-wrapper .label{display:flex;height:100%;align-items:center}button.mat-mdc-unelevated-button.big,a.mat-mdc-unelevated-button.big{height:48px;padding:12px 24px}button.mat-mdc-unelevated-button.small,a.mat-mdc-unelevated-button.small{height:38px;padding:7px 11px}button.mat-mdc-unelevated-button.classic-theme.big,a.mat-mdc-unelevated-button.classic-theme.big{height:48px;padding:12px 16px}button.mat-mdc-unelevated-button.small.left .icon,button.mat-mdc-unelevated-button.big.left .icon,a.mat-mdc-unelevated-button.small.left .icon,a.mat-mdc-unelevated-button.big.left .icon{margin-right:8px}button.mat-mdc-unelevated-button.small.right .icon,button.mat-mdc-unelevated-button.big.right .icon,a.mat-mdc-unelevated-button.small.right .icon,a.mat-mdc-unelevated-button.big.right .icon{margin-left:8px}button.mat-mdc-unelevated-button.small.only-icon .icon,button.mat-mdc-unelevated-button.big.only-icon .icon,a.mat-mdc-unelevated-button.small.only-icon .icon,a.mat-mdc-unelevated-button.big.only-icon .icon{margin-left:0}button.mat-mdc-unelevated-button.primary,button.mat-mdc-unelevated-button.secondary,button.mat-mdc-unelevated-button.ghost,button.mat-mdc-unelevated-button.outlined,button.mat-mdc-unelevated-button.destructive,button.mat-mdc-unelevated-button.tertiary,button.mat-mdc-unelevated-button.link,a.mat-mdc-unelevated-button.primary,a.mat-mdc-unelevated-button.secondary,a.mat-mdc-unelevated-button.ghost,a.mat-mdc-unelevated-button.outlined,a.mat-mdc-unelevated-button.destructive,a.mat-mdc-unelevated-button.tertiary,a.mat-mdc-unelevated-button.link{min-width:80px}button.mat-mdc-unelevated-button.primary.only-icon,button.mat-mdc-unelevated-button.secondary.only-icon,button.mat-mdc-unelevated-button.ghost.only-icon,button.mat-mdc-unelevated-button.outlined.only-icon,button.mat-mdc-unelevated-button.destructive.only-icon,button.mat-mdc-unelevated-button.tertiary.only-icon,button.mat-mdc-unelevated-button.link.only-icon,a.mat-mdc-unelevated-button.primary.only-icon,a.mat-mdc-unelevated-button.secondary.only-icon,a.mat-mdc-unelevated-button.ghost.only-icon,a.mat-mdc-unelevated-button.outlined.only-icon,a.mat-mdc-unelevated-button.destructive.only-icon,a.mat-mdc-unelevated-button.tertiary.only-icon,a.mat-mdc-unelevated-button.link.only-icon{min-width:1px}button.mat-mdc-unelevated-button.primary.full-width,button.mat-mdc-unelevated-button.secondary.full-width,button.mat-mdc-unelevated-button.ghost.full-width,button.mat-mdc-unelevated-button.outlined.full-width,button.mat-mdc-unelevated-button.destructive.full-width,button.mat-mdc-unelevated-button.tertiary.full-width,button.mat-mdc-unelevated-button.link.full-width,a.mat-mdc-unelevated-button.primary.full-width,a.mat-mdc-unelevated-button.secondary.full-width,a.mat-mdc-unelevated-button.ghost.full-width,a.mat-mdc-unelevated-button.outlined.full-width,a.mat-mdc-unelevated-button.destructive.full-width,a.mat-mdc-unelevated-button.tertiary.full-width,a.mat-mdc-unelevated-button.link.full-width{width:100%;min-width:100%}button.mat-mdc-unelevated-button.primary.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.secondary.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.ghost.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.outlined.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.destructive.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.tertiary.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.link.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.primary.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.secondary.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.ghost.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.outlined.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.destructive.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.tertiary.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.link.full-width .icon-label-wrapper{justify-content:center}button.mat-mdc-unelevated-button.primary,a.mat-mdc-unelevated-button.primary{background-color:var(--color);color:#fff;border-radius:1000px}button.mat-mdc-unelevated-button.primary-disabled,a.mat-mdc-unelevated-button.primary-disabled{opacity:.75}button.mat-mdc-unelevated-button.primary.classic-theme,a.mat-mdc-unelevated-button.primary.classic-theme{border-radius:4px}button.mat-mdc-unelevated-button.primary.classic-theme:disabled,button.mat-mdc-unelevated-button.primary.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.classic-theme:disabled,a.mat-mdc-unelevated-button.primary.classic-theme:disabled:hover{background-color:#b5ddd5}button.mat-mdc-unelevated-button.primary.light-theme:disabled,button.mat-mdc-unelevated-button.primary.light-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.light-theme:disabled,a.mat-mdc-unelevated-button.primary.light-theme:disabled:hover{background-color:#e9e9e9;color:#666}button.mat-mdc-unelevated-button.primary.light-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.primary.light-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.light-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.light-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#666}button.mat-mdc-unelevated-button.primary.dark-theme:disabled,button.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.dark-theme:disabled,a.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover{background-color:#666;color:#d3d3d3}button.mat-mdc-unelevated-button.primary.dark-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.dark-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3}button.mat-mdc-unelevated-button.primary ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.primary .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.primary .mat-mdc-progress-spinner ::ng-deep circle{stroke:#fff}button.mat-mdc-unelevated-button.secondary,a.mat-mdc-unelevated-button.secondary{border-radius:1000px}button.mat-mdc-unelevated-button.secondary.light-theme,a.mat-mdc-unelevated-button.secondary.light-theme{background-color:#242424;color:#fff}button.mat-mdc-unelevated-button.secondary.light-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.secondary.light-theme:disabled,button.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.light-theme:disabled,a.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover{opacity:.75;background-color:#e9e9e9;color:#666}button.mat-mdc-unelevated-button.secondary.light-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3!important}button.mat-mdc-unelevated-button.secondary.dark-theme,a.mat-mdc-unelevated-button.secondary.dark-theme{background-color:#fff;color:#242424}button.mat-mdc-unelevated-button.secondary.dark-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme ::ng-deep mat-icon.black svg{color:#242424}button.mat-mdc-unelevated-button.secondary.dark-theme:disabled,button.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover{opacity:.75;background-color:#666;color:#d3d3d3}button.mat-mdc-unelevated-button.secondary.dark-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3}button.mat-mdc-unelevated-button.secondary:hover,a.mat-mdc-unelevated-button.secondary:hover{background-color:#666;color:#fff}button.mat-mdc-unelevated-button.secondary:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary:hover ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.secondary .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.secondary .mat-mdc-progress-spinner ::ng-deep circle{stroke:#fff}button.mat-mdc-unelevated-button.secondary.classic-theme,a.mat-mdc-unelevated-button.secondary.classic-theme{border-radius:4px;background-color:#ededed;color:#000}button.mat-mdc-unelevated-button.secondary.classic-theme:hover,a.mat-mdc-unelevated-button.secondary.classic-theme:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.secondary.classic-theme:disabled,button.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover{background-color:#ededed;color:#888}button.mat-mdc-unelevated-button.secondary.classic-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.secondary.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.secondary.classic-theme .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.outlined,a.mat-mdc-unelevated-button.outlined{background-color:#fff;color:#000;border-width:1px;border-style:solid;border-color:#000}button.mat-mdc-unelevated-button.outlined:hover,a.mat-mdc-unelevated-button.outlined:hover{background-color:#f6f6f6}button.mat-mdc-unelevated-button.outlined:disabled,button.mat-mdc-unelevated-button.outlined:disabled:hover,a.mat-mdc-unelevated-button.outlined:disabled,a.mat-mdc-unelevated-button.outlined:disabled:hover{color:#ededed;border-color:#ededed}button.mat-mdc-unelevated-button.outlined:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.outlined:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.outlined:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.outlined:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.outlined:focus.cdk-focused,a.mat-mdc-unelevated-button.outlined:focus.cdk-focused{background-color:#e0e0e0}button.mat-mdc-unelevated-button.outlined .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.outlined .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.ghost,a.mat-mdc-unelevated-button.ghost{border-width:1px;border-style:solid;border-radius:1000px}button.mat-mdc-unelevated-button.ghost.light-theme,a.mat-mdc-unelevated-button.ghost.light-theme{background-color:transparent;color:#242424;border-color:#242424}button.mat-mdc-unelevated-button.ghost.light-theme.only-icon,a.mat-mdc-unelevated-button.ghost.light-theme.only-icon{width:48px;height:48px;padding:0}button.mat-mdc-unelevated-button.ghost.light-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.ghost.light-theme ::ng-deep mat-icon.black svg{color:#242424}button.mat-mdc-unelevated-button.ghost.light-theme:hover,a.mat-mdc-unelevated-button.ghost.light-theme:hover{background-color:#f4f4f4}button.mat-mdc-unelevated-button.ghost.dark-theme,a.mat-mdc-unelevated-button.ghost.dark-theme{background-color:transparent;color:#fff;border-color:#fff}button.mat-mdc-unelevated-button.ghost.dark-theme.only-icon,a.mat-mdc-unelevated-button.ghost.dark-theme.only-icon{width:48px;height:48px;padding:0}button.mat-mdc-unelevated-button.ghost.dark-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.ghost.dark-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.ghost.dark-theme:hover,a.mat-mdc-unelevated-button.ghost.dark-theme:hover{background-color:#666}button.mat-mdc-unelevated-button.ghost:disabled,button.mat-mdc-unelevated-button.ghost:disabled:hover,a.mat-mdc-unelevated-button.ghost:disabled,a.mat-mdc-unelevated-button.ghost:disabled:hover{opacity:.5;background-color:transparent}button.mat-mdc-unelevated-button.ghost .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.ghost .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.mat-mdc-unelevated-button.destructive,a.mat-mdc-unelevated-button.destructive{border:1px solid #E02800;background-color:#fff;color:#e02800;border-radius:1000px}button.mat-mdc-unelevated-button.destructive:hover,a.mat-mdc-unelevated-button.destructive:hover{background-color:#e02800;color:#fff}button.mat-mdc-unelevated-button.destructive:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive:hover ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.destructive:disabled,button.mat-mdc-unelevated-button.destructive:disabled:hover,a.mat-mdc-unelevated-button.destructive:disabled,a.mat-mdc-unelevated-button.destructive:disabled:hover{border-color:#919191;color:#919191;background:transparent}button.mat-mdc-unelevated-button.destructive ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive ::ng-deep mat-icon.black svg{color:#e02800}button.mat-mdc-unelevated-button.destructive .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.destructive .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.mat-mdc-unelevated-button.destructive.classic-theme,a.mat-mdc-unelevated-button.destructive.classic-theme{border:unset;border-radius:4px;background-color:#cb7b7a;color:#fff}button.mat-mdc-unelevated-button.destructive.classic-theme:hover,a.mat-mdc-unelevated-button.destructive.classic-theme:hover{background-color:#8e5655}button.mat-mdc-unelevated-button.destructive.classic-theme:disabled,button.mat-mdc-unelevated-button.destructive.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.destructive.classic-theme:disabled,a.mat-mdc-unelevated-button.destructive.classic-theme:disabled:hover{background-color:#e3c3c6}button.mat-mdc-unelevated-button.destructive.classic-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive.classic-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.destructive.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.destructive.classic-theme .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.tertiary,a.mat-mdc-unelevated-button.tertiary{background-color:transparent;color:#46a997}button.mat-mdc-unelevated-button.tertiary:hover,a.mat-mdc-unelevated-button.tertiary:hover{background-color:#f6f6f6;color:#31766a}button.mat-mdc-unelevated-button.tertiary:disabled,button.mat-mdc-unelevated-button.tertiary:disabled:hover,a.mat-mdc-unelevated-button.tertiary:disabled,a.mat-mdc-unelevated-button.tertiary:disabled:hover{opacity:.75;background-color:#fff;color:#b5ddd5}button.mat-mdc-unelevated-button.tertiary:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.tertiary:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary:disabled:hover ::ng-deep mat-icon.black svg{color:#b5ddd5}button.mat-mdc-unelevated-button.tertiary ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary ::ng-deep mat-icon.black svg{color:var(--color)}button.mat-mdc-unelevated-button.tertiary .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.tertiary .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.link,a.mat-mdc-unelevated-button.link{background-color:transparent;color:#d410aa;border-radius:0}button.mat-mdc-unelevated-button.link ::ng-deep .mat-mdc-button-persistent-ripple,a.mat-mdc-unelevated-button.link ::ng-deep .mat-mdc-button-persistent-ripple{display:none}button.mat-mdc-unelevated-button.link span.icon-label-wrapper,a.mat-mdc-unelevated-button.link span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.link:hover,a.mat-mdc-unelevated-button.link:hover{color:#a90686!important}button.mat-mdc-unelevated-button.link:active,a.mat-mdc-unelevated-button.link:active{color:#ff54da!important}button.mat-mdc-unelevated-button.link ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.link ::ng-deep .mdc-button__label{padding:4px}button.mat-mdc-unelevated-button.link:active ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.link:active ::ng-deep .mdc-button__label{padding:4px;outline:1px dashed #666666}button.mat-mdc-unelevated-button.link:disabled,button.mat-mdc-unelevated-button.link:disabled:hover,a.mat-mdc-unelevated-button.link:disabled,a.mat-mdc-unelevated-button.link:disabled:hover{color:#d3d3d3}button.mat-mdc-unelevated-button.link ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.link ::ng-deep mat-icon.black svg{color:var(--color)}button.mat-mdc-unelevated-button.link.classic-theme,a.mat-mdc-unelevated-button.link.classic-theme{background-color:transparent;color:#46a997;border-radius:0}button.mat-mdc-unelevated-button.link.classic-theme span.icon-label-wrapper,a.mat-mdc-unelevated-button.link.classic-theme span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.link.classic-theme:hover,a.mat-mdc-unelevated-button.link.classic-theme:hover{color:#31766a}button.mat-mdc-unelevated-button.link.classic-theme:disabled,button.mat-mdc-unelevated-button.link.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.link.classic-theme:disabled,a.mat-mdc-unelevated-button.link.classic-theme:disabled:hover{color:#b5ddd5}button.mat-mdc-unelevated-button.link.classic-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.link.classic-theme ::ng-deep mat-icon.black svg{color:var(--color)}button.mat-mdc-unelevated-button.text,a.mat-mdc-unelevated-button.text{background-color:transparent;border-radius:0;text-decoration:underline}button.mat-mdc-unelevated-button.text.light-theme,a.mat-mdc-unelevated-button.text.light-theme{color:var(--color)}button.mat-mdc-unelevated-button.text.light-theme:active,a.mat-mdc-unelevated-button.text.light-theme:active,button.mat-mdc-unelevated-button.text.light-theme:hover,a.mat-mdc-unelevated-button.text.light-theme:hover{color:var(--active-color)!important}button.mat-mdc-unelevated-button.text.dark-theme,a.mat-mdc-unelevated-button.text.dark-theme{color:var(--color)}button.mat-mdc-unelevated-button.text.dark-theme:active,a.mat-mdc-unelevated-button.text.dark-theme:active{color:var(--active-color)!important}button.mat-mdc-unelevated-button.text.dark-theme:hover,a.mat-mdc-unelevated-button.text.dark-theme:hover{color:var(--active-color)}button.mat-mdc-unelevated-button.text ::ng-deep .mat-mdc-button-persistent-ripple,a.mat-mdc-unelevated-button.text ::ng-deep .mat-mdc-button-persistent-ripple{display:none}button.mat-mdc-unelevated-button.text span.icon-label-wrapper,a.mat-mdc-unelevated-button.text span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.text:disabled,button.mat-mdc-unelevated-button.text:disabled:hover,a.mat-mdc-unelevated-button.text:disabled,a.mat-mdc-unelevated-button.text:disabled:hover{color:#d3d3d3}button.mat-mdc-unelevated-button.text:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.text:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3}button.mat-mdc-unelevated-button.text ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text ::ng-deep .mdc-button__label{padding:4px}button.mat-mdc-unelevated-button.text:focus ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text:focus ::ng-deep .mdc-button__label{padding:4px;outline:1px dashed #666666}button.mat-mdc-unelevated-button.text:focus-visible ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text:focus-visible ::ng-deep .mdc-button__label{border-radius:2px;outline-color:#242424!important;outline-style:solid!important;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}button.mat-mdc-unelevated-button.text .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.text .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.mat-mdc-unelevated-button.text.classic-theme,a.mat-mdc-unelevated-button.text.classic-theme{background-color:transparent;color:#000;border-radius:0;text-decoration:underline}button.mat-mdc-unelevated-button.text.classic-theme span.icon-label-wrapper,a.mat-mdc-unelevated-button.text.classic-theme span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.text.classic-theme:hover,a.mat-mdc-unelevated-button.text.classic-theme:hover{color:#000}button.mat-mdc-unelevated-button.text.classic-theme:disabled,button.mat-mdc-unelevated-button.text.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.text.classic-theme:disabled,a.mat-mdc-unelevated-button.text.classic-theme:disabled:hover{color:#888}button.mat-mdc-unelevated-button.text.classic-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.text.classic-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text.classic-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text.classic-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.text.classic-theme:focus.cdk-focused,a.mat-mdc-unelevated-button.text.classic-theme:focus.cdk-focused{color:#000}button.mat-mdc-unelevated-button.text.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.text.classic-theme .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.squareicon,a.mat-mdc-unelevated-button.squareicon{background-color:#ededed;color:#000;min-width:56px}button.mat-mdc-unelevated-button.squareicon:hover,a.mat-mdc-unelevated-button.squareicon:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.squareicon:disabled,button.mat-mdc-unelevated-button.squareicon:disabled:hover,a.mat-mdc-unelevated-button.squareicon:disabled,a.mat-mdc-unelevated-button.squareicon:disabled:hover{background-color:#ededed;color:#888}button.mat-mdc-unelevated-button.squareicon:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.squareicon:focus.cdk-focused.cdk-mouse-focused{background-color:#ededed}button.mat-mdc-unelevated-button.squareicon .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.squareicon .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.squareicon .icon-label-wrapper,a.mat-mdc-unelevated-button.squareicon .icon-label-wrapper{flex-flow:column}button.mat-mdc-unelevated-button.squareicon.left .icon,button.mat-mdc-unelevated-button.squareicon.right .icon,a.mat-mdc-unelevated-button.squareicon.left .icon,a.mat-mdc-unelevated-button.squareicon.right .icon{margin:0 auto}button.mat-mdc-unelevated-button.tab,a.mat-mdc-unelevated-button.tab{background-color:#fff;color:#000;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#e0e0e0;border-radius:0}button.mat-mdc-unelevated-button.tab:hover .label,button.mat-mdc-unelevated-button.tab:hover .icon.only,a.mat-mdc-unelevated-button.tab:hover .label,a.mat-mdc-unelevated-button.tab:hover .icon.only{text-decoration:underline}button.mat-mdc-unelevated-button.tab:disabled,button.mat-mdc-unelevated-button.tab:disabled:hover,a.mat-mdc-unelevated-button.tab:disabled,a.mat-mdc-unelevated-button.tab:disabled:hover{color:#888}button.mat-mdc-unelevated-button.tab:disabled .label,button.mat-mdc-unelevated-button.tab:disabled:hover .label,a.mat-mdc-unelevated-button.tab:disabled .label,a.mat-mdc-unelevated-button.tab:disabled:hover .label{text-decoration:none}button.mat-mdc-unelevated-button.tab:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.tab:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tab:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tab:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.tab:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.tab:focus.cdk-focused.cdk-mouse-focused{font-weight:700;border-color:#276678}button.mat-mdc-unelevated-button.menuTrigger.classic-theme,a.mat-mdc-unelevated-button.menuTrigger.classic-theme{background:transparent;min-width:24px;height:24px;padding:0}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:hover,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled,button.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled:hover{background-color:#fff;color:#888}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:focus.cdk-focused.cdk-mouse-focused{background-color:transparent}button.mat-mdc-unelevated-button.menuTrigger.classic-theme .icon-label-wrapper,a.mat-mdc-unelevated-button.menuTrigger.classic-theme .icon-label-wrapper{flex-flow:column}button.mat-mdc-unelevated-button.menuTrigger.classic-theme.left .icon,button.mat-mdc-unelevated-button.menuTrigger.classic-theme.right .icon,a.mat-mdc-unelevated-button.menuTrigger.classic-theme.left .icon,a.mat-mdc-unelevated-button.menuTrigger.classic-theme.right .icon{margin:0 auto}button.mat-mdc-unelevated-button.menuCell,a.mat-mdc-unelevated-button.menuCell{background-color:#fff;color:#000;font-weight:400;border-radius:0;min-width:100%;justify-content:flex-start}button.mat-mdc-unelevated-button.menuCell.classic-theme.big.left .icon,a.mat-mdc-unelevated-button.menuCell.classic-theme.big.left .icon{margin-right:16px}button.mat-mdc-unelevated-button.menuCell.big.left .icon,a.mat-mdc-unelevated-button.menuCell.big.left .icon{margin-right:8px}button.mat-mdc-unelevated-button.menuCell .icon-label-wrapper,a.mat-mdc-unelevated-button.menuCell .icon-label-wrapper{justify-content:flex-start}button.mat-mdc-unelevated-button.menuCell:hover,a.mat-mdc-unelevated-button.menuCell:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.menuCell:disabled,button.mat-mdc-unelevated-button.menuCell:disabled:hover,a.mat-mdc-unelevated-button.menuCell:disabled,a.mat-mdc-unelevated-button.menuCell:disabled:hover{background-color:#fff;color:#888}button.mat-mdc-unelevated-button.menuCell:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.menuCell:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.menuCell:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.menuCell:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.menuCell .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.menuCell .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}.button-wrapper{position:relative;height:fit-content}.button-wrapper[aria-disabled=true]{pointer-events:none}.button-wrapper .menuTrigger:not(.classic-theme),.button-wrapper .icon-button{border:none;border-radius:100%;width:var(--icon-button-size)!important;height:var(--icon-button-size)!important;cursor:pointer;background-color:unset}::ng-deep .button-wrapper .menuTrigger:not(.classic-theme).mat-mdc-unelevated-button:not(:disabled),::ng-deep .button-wrapper .icon-button.mat-mdc-unelevated-button:not(:disabled){background-color:unset}::ng-deep .button-wrapper .menuTrigger:not(.classic-theme).mdc-button,::ng-deep .button-wrapper .icon-button.mdc-button{min-width:var(--icon-button-size)!important}.button-wrapper .menuTrigger:not(.classic-theme) ::ng-deep .mat-mdc-button-touch-target,.button-wrapper .icon-button ::ng-deep .mat-mdc-button-touch-target{height:var(--icon-button-size)!important}.button-wrapper .menuTrigger:not(.classic-theme):disabled,.button-wrapper .icon-button:disabled{pointer-events:none;background:unset}.button-wrapper .menuTrigger:not(.classic-theme):disabled.classic-theme ::ng-deep mat-icon svg,.button-wrapper .icon-button:disabled.classic-theme ::ng-deep mat-icon svg{color:#888}.button-wrapper .menuTrigger:not(.classic-theme):hover,.button-wrapper .icon-button:hover{background-color:#f6f6f6}.button-wrapper .menuTrigger:not(.classic-theme):focus.cdk-focused,.button-wrapper .icon-button:focus.cdk-focused{padding:1px;border:1px dashed #888888;outline:0}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:disabled,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:disabled,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .icon-button:not(.has-company-color).light-theme:disabled,.button-wrapper .icon-button:not(.has-company-color).light-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .icon-button:not(.has-company-color).dark-theme:disabled,.button-wrapper .icon-button:not(.has-company-color).dark-theme:disabled:hover ::ng-deep mat-icon svg{color:#919191!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme,.button-wrapper .icon-button:not(.has-company-color).light-theme{color:#242424!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:hover,.button-wrapper .icon-button:not(.has-company-color).light-theme:hover{background-color:#e9e9e9}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:focus.cdk-focused,.button-wrapper .icon-button:not(.has-company-color).light-theme:focus.cdk-focused{border-color:#666}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme,.button-wrapper .icon-button:not(.has-company-color).dark-theme{color:#fff!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:hover,.button-wrapper .icon-button:not(.has-company-color).dark-theme:hover{background-color:#666}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:focus.cdk-focused,.button-wrapper .icon-button:not(.has-company-color).dark-theme:focus.cdk-focused{border-color:#e9e9e9}.button-wrapper .menuTrigger:focus.cdk-focused.cdk-mouse-focused.light-theme{border:none;background-color:#e9e9e9;color:#242424}.button-wrapper .menuTrigger:focus.cdk-focused.cdk-mouse-focused.dark-theme{border:none;background-color:#666;color:#fff}.button-wrapper .right-top{position:absolute;right:-8px;top:-8px;z-index:1}.button-wrapper .right-top.badge-notification{top:-4px;right:0;border:1px solid #ffffff;border-radius:100%}.button-wrapper .right-top.badge-primary{right:-4px}::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}:host[btn-variant=link]{display:inline-flex}::ng-deep .link .button-container{display:flex}::ng-deep .link a.mat-mdc-unelevated-button.link{height:unset!important;min-width:unset!important;border-radius:10px}::ng-deep .link a.mat-mdc-unelevated-button.link:active{outline:1px dashed #666666!important}::ng-deep .link a.mat-mdc-unelevated-button.link:active .mdc-button__label{padding:0!important;outline:none!important}::ng-deep .link a.mat-mdc-unelevated-button{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button .mdc-button__label{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big,::ng-deep .link a.mat-mdc-unelevated-button.small{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big .mdc-button__label,::ng-deep .link a.mat-mdc-unelevated-button.small .mdc-button__label{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper{font-size:16px!important;line-height:24px!important}::ng-deep .link a.mat-mdc-unelevated-button.small .mdc-button__label .icon-label-wrapper{font-size:12px!important;line-height:16px!important}::ng-deep .link a.mat-mdc-unelevated-button .mat-mdc-button-touch-target{height:unset!important}\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: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { 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: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: BadgeComponent, selector: "ui-badge", inputs: ["label", "icon", "color", "variant", "notificationsAmount", "applicationTheme", "rebrandColor"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
2870
2890
|
}
|
|
2871
2891
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
2872
2892
|
type: Component,
|
|
2873
|
-
args: [{ selector: 'ui-button', template: "<div #tooltipElement class=\"tooltip\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n></div>\n<div\n class=\"button-wrapper\"\n [ngClass]=\"{ 'full-width': fullWidth, 'rounded-icon': applicationTheme !== 'classic' && iconName && !label, link: !isButtonLink }\"\n>\n <div class=\"button-container\"\n [ngClass]=\"{ 'disabled': disabled, 'button-scale': buttonState === 'pressed' && applicationTheme !== 'classic' && !disabledScaleOnClick }\"\n >\n <span *ngIf=\"isPremium && typeIncluded\" class=\"right-top\">\n <img [attr.src]=\"'/images/premium.svg'\" [alt]=\"'premium-icon'\">\n </span>\n <ui-badge\n id=\"badge\"\n *ngIf=\"buttonBadgeConfig?.badgeType\"\n [rebrandColor]=\"buttonBadgeConfig?.rebrandColor ?? 'brand'\"\n [variant]=\"buttonBadgeConfig!.badgeType!\"\n [label]=\"buttonBadgeConfig?.badgeLabel ?? ''\"\n [notificationsAmount]=\"buttonBadgeConfig?.badgeNotificationAmount ?? 0\"\n class=\"right-top\"\n [ngClass]=\"{ 'badge-primary': buttonBadgeConfig?.badgeType === 'primary', 'badge-notification': buttonBadgeConfig?.badgeType === 'notification' }\"\n ></ui-badge>\n <button\n [style]=\"'--icon-button-size:' + iconButtonSize + 'px'\"\n [ngClass]=\"classCss\"\n [ngStyle]=\"styleCss\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick($event)\"\n (mouseleave)=\"buttonHover($event)\"\n (mouseenter)=\"buttonHover($event)\"\n (mousedown)=\"onPressed($event)\"\n (mouseup)=\"onPressed($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\"\n *ngIf=\"isButtonLink\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-disabled]=\"disabled\"\n [type]=\"type\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n #buttonElement\n role=\"button\"\n mat-flat-button>\n <span id=\"describedby\" [style.display]=\"'none'\">\n {{ (isPremium ? (label + ' ' + ('BUTTON.PREMIUM_FEATURE' | uiTranslate : language)) : ariaDescribedby) }}\n </span>\n <span id=\"labelledby\" [style.display]=\"'none'\">\n {{ ariaLabelledby }}\n </span>\n <ng-container *ngIf=\"showSpinner; else icons\">\n <span class=\"spinner-wrapper\">\n <mat-spinner class=\"position-spinner\" aria-label=\"loading\" mode=\"indeterminate\" diameter=\"24\"></mat-spinner>\n </span>\n </ng-container>\n <ng-template #icons>\n <span class=\"icon-only-wrapper\" *ngIf=\"justIcon && !!iconName\">\n <span\n class=\"icon only\"\n role=\"label\"\n >\n <ui-icon\n [color]=\"'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"iconName\"\n [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"\n ></ui-icon>\n </span>\n </span>\n\n <span class=\"icon-label-wrapper\" [ngClass]=\"{'center-text': iconName === ''}\" *ngIf=\"!justIcon\">\n <span\n class=\"icon\"\n *ngIf=\"iconPosition === 'left' && !!iconName\"\n aria-hidden=\"true\"\n >\n <ui-icon\n [color]=\"'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"iconName\"\n [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"\n ></ui-icon>\n </span>\n <span\n *ngIf=\"isLabel\"\n class=\"label\"\n id=\"label\"\n uiEllipseText\n [isMultiline]=\"true\"\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n >\n {{ label }}\n </span>\n <span class=\"icon\" *ngIf=\"iconPosition === 'right' && !!iconName\" aria-hidden=\"true\"><ui-icon\n [color]=\"'inherit'\" [applicationTheme]=\"applicationTheme\" [name]=\"iconName\" [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"></ui-icon></span>\n </span>\n </ng-template>\n </button>\n <a\n #buttonElement\n [ngClass]=\"classCss\"\n [ngStyle]=\"styleCss\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick($event)\"\n (mouseenter)=\"buttonHover($event)\"\n (mouseleave)=\"buttonHover($event)\"\n (mousedown)=\"onPressed($event)\"\n (mouseup)=\"onPressed($event)\"\n (keydown)=\"onKeydown($event);\"\n (keyup)=\"onKeyup($event)\"\n [disableRipple]=\"true\"\n *ngIf=\"!isButtonLink\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"'labelledby-link'\"\n [attr.aria-describedby]=\"'describedby-link'\"\n [attr.aria-disabled]=\"disabled\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n role=\"link\"\n [href]=\"url\"\n [target]=\"urlTarget\"\n mat-flat-button>\n <span id=\"describedby-link\" [style.display]=\"'none'\">\n {{ ariaDescribedby }}\n </span>\n <span class=\"icon-label-wrapper\" id=\"labelledby-link\">\n {{ ariaLabelledby }}\n </span>\n </a>\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}::ng-deep .mat-mdc-button-persistent-ripple:before{opacity:0!important}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host{position:relative}:host ::ng-deep button.cdk-keyboard-focused:not(.text),:host a:focus-visible.cdk-keyboard-focused:not(.text){outline-color:#242424!important;outline-style:solid!important;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}:host ::ng-deep button.icon-button.cdk-keyboard-focused,:host ::ng-deep button.menuTrigger.cdk-keyboard-focused,:host a:focus-visible.icon-button.cdk-keyboard-focused,:host a:focus-visible.menuTrigger.cdk-keyboard-focused{border:unset!important}:host a:focus-visible{border-radius:2px!important}:host .tooltip{position:absolute;top:0;left:0;width:fit-content;height:100%;pointer-events:auto}.rounded-icon button{min-width:unset}.rounded-icon .mdc-button{width:48px!important;min-width:unset}.rounded-icon .mdc-button .icon{margin:0!important}.rounded-icon .big,.rounded-icon .small{padding:0!important}:host{display:flex}:host .button-container{width:100%}:host .button-container.disabled{pointer-events:none}:host .button-container.button-scale{transform:scale(.98)}:host .button-wrapper.full-width{width:100%}:host .button-wrapper ::ng-deep .mdc-button__label,:host .button-wrapper ::ng-deep .icon-label-wrapper{width:100%}:host .button-wrapper ::ng-deep .label{text-align:left;overflow:hidden;-webkit-line-clamp:2;display:-webkit-box!important;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal}:host .button-wrapper ::ng-deep button{width:100%}button.mat-mdc-unelevated-button,a.mat-mdc-unelevated-button{font-size:14px;font-weight:600;line-height:normal;letter-spacing:normal}button.mat-mdc-unelevated-button .spinner-wrapper,a.mat-mdc-unelevated-button .spinner-wrapper{display:flex;align-items:center;flex-flow:column;width:100%}button.mat-mdc-unelevated-button .icon,a.mat-mdc-unelevated-button .icon{display:flex;height:100%;align-items:center}button.mat-mdc-unelevated-button .icon.only,a.mat-mdc-unelevated-button .icon.only{align-items:center;flex-flow:column;justify-content:center;margin-left:0}button.mat-mdc-unelevated-button .icon-label-wrapper,a.mat-mdc-unelevated-button .icon-label-wrapper{display:flex;align-items:center;justify-content:center;height:100%}button.mat-mdc-unelevated-button .icon-label-wrapper.center-text,a.mat-mdc-unelevated-button .icon-label-wrapper.center-text{flex-flow:column;width:100%}button.mat-mdc-unelevated-button .icon-label-wrapper .label,a.mat-mdc-unelevated-button .icon-label-wrapper .label{display:flex;height:100%;align-items:center}button.mat-mdc-unelevated-button.big,a.mat-mdc-unelevated-button.big{height:48px;padding:12px 24px}button.mat-mdc-unelevated-button.small,a.mat-mdc-unelevated-button.small{height:38px;padding:7px 11px}button.mat-mdc-unelevated-button.classic-theme.big,a.mat-mdc-unelevated-button.classic-theme.big{height:48px;padding:12px 16px}button.mat-mdc-unelevated-button.small.left .icon,button.mat-mdc-unelevated-button.big.left .icon,a.mat-mdc-unelevated-button.small.left .icon,a.mat-mdc-unelevated-button.big.left .icon{margin-right:8px}button.mat-mdc-unelevated-button.small.right .icon,button.mat-mdc-unelevated-button.big.right .icon,a.mat-mdc-unelevated-button.small.right .icon,a.mat-mdc-unelevated-button.big.right .icon{margin-left:8px}button.mat-mdc-unelevated-button.small.only-icon .icon,button.mat-mdc-unelevated-button.big.only-icon .icon,a.mat-mdc-unelevated-button.small.only-icon .icon,a.mat-mdc-unelevated-button.big.only-icon .icon{margin-left:0}button.mat-mdc-unelevated-button.primary,button.mat-mdc-unelevated-button.secondary,button.mat-mdc-unelevated-button.ghost,button.mat-mdc-unelevated-button.outlined,button.mat-mdc-unelevated-button.destructive,button.mat-mdc-unelevated-button.tertiary,button.mat-mdc-unelevated-button.link,a.mat-mdc-unelevated-button.primary,a.mat-mdc-unelevated-button.secondary,a.mat-mdc-unelevated-button.ghost,a.mat-mdc-unelevated-button.outlined,a.mat-mdc-unelevated-button.destructive,a.mat-mdc-unelevated-button.tertiary,a.mat-mdc-unelevated-button.link{min-width:80px}button.mat-mdc-unelevated-button.primary.only-icon,button.mat-mdc-unelevated-button.secondary.only-icon,button.mat-mdc-unelevated-button.ghost.only-icon,button.mat-mdc-unelevated-button.outlined.only-icon,button.mat-mdc-unelevated-button.destructive.only-icon,button.mat-mdc-unelevated-button.tertiary.only-icon,button.mat-mdc-unelevated-button.link.only-icon,a.mat-mdc-unelevated-button.primary.only-icon,a.mat-mdc-unelevated-button.secondary.only-icon,a.mat-mdc-unelevated-button.ghost.only-icon,a.mat-mdc-unelevated-button.outlined.only-icon,a.mat-mdc-unelevated-button.destructive.only-icon,a.mat-mdc-unelevated-button.tertiary.only-icon,a.mat-mdc-unelevated-button.link.only-icon{min-width:1px}button.mat-mdc-unelevated-button.primary.full-width,button.mat-mdc-unelevated-button.secondary.full-width,button.mat-mdc-unelevated-button.ghost.full-width,button.mat-mdc-unelevated-button.outlined.full-width,button.mat-mdc-unelevated-button.destructive.full-width,button.mat-mdc-unelevated-button.tertiary.full-width,button.mat-mdc-unelevated-button.link.full-width,a.mat-mdc-unelevated-button.primary.full-width,a.mat-mdc-unelevated-button.secondary.full-width,a.mat-mdc-unelevated-button.ghost.full-width,a.mat-mdc-unelevated-button.outlined.full-width,a.mat-mdc-unelevated-button.destructive.full-width,a.mat-mdc-unelevated-button.tertiary.full-width,a.mat-mdc-unelevated-button.link.full-width{width:100%;min-width:100%}button.mat-mdc-unelevated-button.primary.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.secondary.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.ghost.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.outlined.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.destructive.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.tertiary.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.link.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.primary.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.secondary.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.ghost.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.outlined.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.destructive.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.tertiary.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.link.full-width .icon-label-wrapper{justify-content:center}button.mat-mdc-unelevated-button.primary,a.mat-mdc-unelevated-button.primary{background-color:var(--color);color:#fff;border-radius:1000px}button.mat-mdc-unelevated-button.primary-disabled,a.mat-mdc-unelevated-button.primary-disabled{opacity:.75}button.mat-mdc-unelevated-button.primary.classic-theme,a.mat-mdc-unelevated-button.primary.classic-theme{border-radius:4px}button.mat-mdc-unelevated-button.primary.classic-theme:disabled,button.mat-mdc-unelevated-button.primary.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.classic-theme:disabled,a.mat-mdc-unelevated-button.primary.classic-theme:disabled:hover{background-color:#b5ddd5}button.mat-mdc-unelevated-button.primary.light-theme:disabled,button.mat-mdc-unelevated-button.primary.light-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.light-theme:disabled,a.mat-mdc-unelevated-button.primary.light-theme:disabled:hover{background-color:#e9e9e9;color:#666}button.mat-mdc-unelevated-button.primary.light-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.primary.light-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.light-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.light-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#666}button.mat-mdc-unelevated-button.primary.dark-theme:disabled,button.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.dark-theme:disabled,a.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover{background-color:#666;color:#d3d3d3}button.mat-mdc-unelevated-button.primary.dark-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.dark-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3}button.mat-mdc-unelevated-button.primary ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.primary .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.primary .mat-mdc-progress-spinner ::ng-deep circle{stroke:#fff}button.mat-mdc-unelevated-button.secondary,a.mat-mdc-unelevated-button.secondary{border-radius:1000px}button.mat-mdc-unelevated-button.secondary.light-theme,a.mat-mdc-unelevated-button.secondary.light-theme{background-color:#242424;color:#fff}button.mat-mdc-unelevated-button.secondary.light-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.secondary.light-theme:disabled,button.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.light-theme:disabled,a.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover{opacity:.75;background-color:#e9e9e9;color:#666}button.mat-mdc-unelevated-button.secondary.light-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3!important}button.mat-mdc-unelevated-button.secondary.dark-theme,a.mat-mdc-unelevated-button.secondary.dark-theme{background-color:#fff;color:#242424}button.mat-mdc-unelevated-button.secondary.dark-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme ::ng-deep mat-icon.black svg{color:#242424}button.mat-mdc-unelevated-button.secondary.dark-theme:disabled,button.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover{opacity:.75;background-color:#666;color:#d3d3d3}button.mat-mdc-unelevated-button.secondary.dark-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3}button.mat-mdc-unelevated-button.secondary:hover,a.mat-mdc-unelevated-button.secondary:hover{background-color:#666;color:#fff}button.mat-mdc-unelevated-button.secondary:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary:hover ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.secondary .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.secondary .mat-mdc-progress-spinner ::ng-deep circle{stroke:#fff}button.mat-mdc-unelevated-button.secondary.classic-theme,a.mat-mdc-unelevated-button.secondary.classic-theme{border-radius:4px;background-color:#ededed;color:#000}button.mat-mdc-unelevated-button.secondary.classic-theme:hover,a.mat-mdc-unelevated-button.secondary.classic-theme:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.secondary.classic-theme:disabled,button.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover{background-color:#ededed;color:#888}button.mat-mdc-unelevated-button.secondary.classic-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.secondary.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.secondary.classic-theme .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.outlined,a.mat-mdc-unelevated-button.outlined{background-color:#fff;color:#000;border-width:1px;border-style:solid;border-color:#000}button.mat-mdc-unelevated-button.outlined:hover,a.mat-mdc-unelevated-button.outlined:hover{background-color:#f6f6f6}button.mat-mdc-unelevated-button.outlined:disabled,button.mat-mdc-unelevated-button.outlined:disabled:hover,a.mat-mdc-unelevated-button.outlined:disabled,a.mat-mdc-unelevated-button.outlined:disabled:hover{color:#ededed;border-color:#ededed}button.mat-mdc-unelevated-button.outlined:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.outlined:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.outlined:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.outlined:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.outlined:focus.cdk-focused,a.mat-mdc-unelevated-button.outlined:focus.cdk-focused{background-color:#e0e0e0}button.mat-mdc-unelevated-button.outlined .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.outlined .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.ghost,a.mat-mdc-unelevated-button.ghost{border-width:1px;border-style:solid;border-radius:1000px}button.mat-mdc-unelevated-button.ghost.light-theme,a.mat-mdc-unelevated-button.ghost.light-theme{background-color:transparent;color:#242424;border-color:#242424}button.mat-mdc-unelevated-button.ghost.light-theme.only-icon,a.mat-mdc-unelevated-button.ghost.light-theme.only-icon{width:48px;height:48px;padding:0}button.mat-mdc-unelevated-button.ghost.light-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.ghost.light-theme ::ng-deep mat-icon.black svg{color:#242424}button.mat-mdc-unelevated-button.ghost.light-theme:hover,a.mat-mdc-unelevated-button.ghost.light-theme:hover{background-color:#f4f4f4}button.mat-mdc-unelevated-button.ghost.dark-theme,a.mat-mdc-unelevated-button.ghost.dark-theme{background-color:transparent;color:#fff;border-color:#fff}button.mat-mdc-unelevated-button.ghost.dark-theme.only-icon,a.mat-mdc-unelevated-button.ghost.dark-theme.only-icon{width:48px;height:48px;padding:0}button.mat-mdc-unelevated-button.ghost.dark-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.ghost.dark-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.ghost.dark-theme:hover,a.mat-mdc-unelevated-button.ghost.dark-theme:hover{background-color:#666}button.mat-mdc-unelevated-button.ghost:disabled,button.mat-mdc-unelevated-button.ghost:disabled:hover,a.mat-mdc-unelevated-button.ghost:disabled,a.mat-mdc-unelevated-button.ghost:disabled:hover{opacity:.5;background-color:transparent}button.mat-mdc-unelevated-button.ghost .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.ghost .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.mat-mdc-unelevated-button.destructive,a.mat-mdc-unelevated-button.destructive{border:1px solid #E02800;background-color:#fff;color:#e02800;border-radius:1000px}button.mat-mdc-unelevated-button.destructive:hover,a.mat-mdc-unelevated-button.destructive:hover{background-color:#e02800;color:#fff}button.mat-mdc-unelevated-button.destructive:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive:hover ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.destructive:disabled,button.mat-mdc-unelevated-button.destructive:disabled:hover,a.mat-mdc-unelevated-button.destructive:disabled,a.mat-mdc-unelevated-button.destructive:disabled:hover{border-color:#919191;color:#919191;background:transparent}button.mat-mdc-unelevated-button.destructive ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive ::ng-deep mat-icon.black svg{color:#e02800}button.mat-mdc-unelevated-button.destructive .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.destructive .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.mat-mdc-unelevated-button.destructive.classic-theme,a.mat-mdc-unelevated-button.destructive.classic-theme{border:unset;border-radius:4px;background-color:#cb7b7a;color:#fff}button.mat-mdc-unelevated-button.destructive.classic-theme:hover,a.mat-mdc-unelevated-button.destructive.classic-theme:hover{background-color:#8e5655}button.mat-mdc-unelevated-button.destructive.classic-theme:disabled,button.mat-mdc-unelevated-button.destructive.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.destructive.classic-theme:disabled,a.mat-mdc-unelevated-button.destructive.classic-theme:disabled:hover{background-color:#e3c3c6}button.mat-mdc-unelevated-button.destructive.classic-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive.classic-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.destructive.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.destructive.classic-theme .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.tertiary,a.mat-mdc-unelevated-button.tertiary{background-color:transparent;color:#46a997}button.mat-mdc-unelevated-button.tertiary:hover,a.mat-mdc-unelevated-button.tertiary:hover{background-color:#f6f6f6;color:#31766a}button.mat-mdc-unelevated-button.tertiary:disabled,button.mat-mdc-unelevated-button.tertiary:disabled:hover,a.mat-mdc-unelevated-button.tertiary:disabled,a.mat-mdc-unelevated-button.tertiary:disabled:hover{opacity:.75;background-color:#fff;color:#b5ddd5}button.mat-mdc-unelevated-button.tertiary:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.tertiary:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary:disabled:hover ::ng-deep mat-icon.black svg{color:#b5ddd5}button.mat-mdc-unelevated-button.tertiary ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary ::ng-deep mat-icon.black svg{color:var(--color)}button.mat-mdc-unelevated-button.tertiary .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.tertiary .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.link,a.mat-mdc-unelevated-button.link{background-color:transparent;color:#d410aa;border-radius:0}button.mat-mdc-unelevated-button.link ::ng-deep .mat-mdc-button-persistent-ripple,a.mat-mdc-unelevated-button.link ::ng-deep .mat-mdc-button-persistent-ripple{display:none}button.mat-mdc-unelevated-button.link span.icon-label-wrapper,a.mat-mdc-unelevated-button.link span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.link:hover,a.mat-mdc-unelevated-button.link:hover{color:#a90686!important}button.mat-mdc-unelevated-button.link:active,a.mat-mdc-unelevated-button.link:active{color:#ff54da!important}button.mat-mdc-unelevated-button.link ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.link ::ng-deep .mdc-button__label{padding:4px}button.mat-mdc-unelevated-button.link:active ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.link:active ::ng-deep .mdc-button__label{padding:4px;outline:1px dashed #666666}button.mat-mdc-unelevated-button.link:disabled,button.mat-mdc-unelevated-button.link:disabled:hover,a.mat-mdc-unelevated-button.link:disabled,a.mat-mdc-unelevated-button.link:disabled:hover{color:#d3d3d3}button.mat-mdc-unelevated-button.link ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.link ::ng-deep mat-icon.black svg{color:var(--color)}button.mat-mdc-unelevated-button.link.classic-theme,a.mat-mdc-unelevated-button.link.classic-theme{background-color:transparent;color:#46a997;border-radius:0}button.mat-mdc-unelevated-button.link.classic-theme span.icon-label-wrapper,a.mat-mdc-unelevated-button.link.classic-theme span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.link.classic-theme:hover,a.mat-mdc-unelevated-button.link.classic-theme:hover{color:#31766a}button.mat-mdc-unelevated-button.link.classic-theme:disabled,button.mat-mdc-unelevated-button.link.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.link.classic-theme:disabled,a.mat-mdc-unelevated-button.link.classic-theme:disabled:hover{color:#b5ddd5}button.mat-mdc-unelevated-button.link.classic-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.link.classic-theme ::ng-deep mat-icon.black svg{color:var(--color)}button.mat-mdc-unelevated-button.text,a.mat-mdc-unelevated-button.text{background-color:transparent;border-radius:0;text-decoration:underline}button.mat-mdc-unelevated-button.text.light-theme,a.mat-mdc-unelevated-button.text.light-theme{color:var(--color)}button.mat-mdc-unelevated-button.text.light-theme:active,a.mat-mdc-unelevated-button.text.light-theme:active,button.mat-mdc-unelevated-button.text.light-theme:hover,a.mat-mdc-unelevated-button.text.light-theme:hover{color:var(--active-color)!important}button.mat-mdc-unelevated-button.text.dark-theme,a.mat-mdc-unelevated-button.text.dark-theme{color:var(--color)}button.mat-mdc-unelevated-button.text.dark-theme:active,a.mat-mdc-unelevated-button.text.dark-theme:active{color:var(--active-color)!important}button.mat-mdc-unelevated-button.text.dark-theme:hover,a.mat-mdc-unelevated-button.text.dark-theme:hover{color:var(--active-color)}button.mat-mdc-unelevated-button.text ::ng-deep .mat-mdc-button-persistent-ripple,a.mat-mdc-unelevated-button.text ::ng-deep .mat-mdc-button-persistent-ripple{display:none}button.mat-mdc-unelevated-button.text span.icon-label-wrapper,a.mat-mdc-unelevated-button.text span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.text:disabled,button.mat-mdc-unelevated-button.text:disabled:hover,a.mat-mdc-unelevated-button.text:disabled,a.mat-mdc-unelevated-button.text:disabled:hover{color:#d3d3d3}button.mat-mdc-unelevated-button.text:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.text:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3}button.mat-mdc-unelevated-button.text ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text ::ng-deep .mdc-button__label{padding:4px}button.mat-mdc-unelevated-button.text:focus ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text:focus ::ng-deep .mdc-button__label{padding:4px;outline:1px dashed #666666}button.mat-mdc-unelevated-button.text:focus-visible ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text:focus-visible ::ng-deep .mdc-button__label{border-radius:2px;outline-color:#242424!important;outline-style:solid!important;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}button.mat-mdc-unelevated-button.text .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.text .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.mat-mdc-unelevated-button.text.classic-theme,a.mat-mdc-unelevated-button.text.classic-theme{background-color:transparent;color:#000;border-radius:0;text-decoration:underline}button.mat-mdc-unelevated-button.text.classic-theme span.icon-label-wrapper,a.mat-mdc-unelevated-button.text.classic-theme span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.text.classic-theme:hover,a.mat-mdc-unelevated-button.text.classic-theme:hover{color:#000}button.mat-mdc-unelevated-button.text.classic-theme:disabled,button.mat-mdc-unelevated-button.text.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.text.classic-theme:disabled,a.mat-mdc-unelevated-button.text.classic-theme:disabled:hover{color:#888}button.mat-mdc-unelevated-button.text.classic-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.text.classic-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text.classic-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text.classic-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.text.classic-theme:focus.cdk-focused,a.mat-mdc-unelevated-button.text.classic-theme:focus.cdk-focused{color:#000}button.mat-mdc-unelevated-button.text.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.text.classic-theme .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.squareicon,a.mat-mdc-unelevated-button.squareicon{background-color:#ededed;color:#000;min-width:56px}button.mat-mdc-unelevated-button.squareicon:hover,a.mat-mdc-unelevated-button.squareicon:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.squareicon:disabled,button.mat-mdc-unelevated-button.squareicon:disabled:hover,a.mat-mdc-unelevated-button.squareicon:disabled,a.mat-mdc-unelevated-button.squareicon:disabled:hover{background-color:#ededed;color:#888}button.mat-mdc-unelevated-button.squareicon:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.squareicon:focus.cdk-focused.cdk-mouse-focused{background-color:#ededed}button.mat-mdc-unelevated-button.squareicon .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.squareicon .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.squareicon .icon-label-wrapper,a.mat-mdc-unelevated-button.squareicon .icon-label-wrapper{flex-flow:column}button.mat-mdc-unelevated-button.squareicon.left .icon,button.mat-mdc-unelevated-button.squareicon.right .icon,a.mat-mdc-unelevated-button.squareicon.left .icon,a.mat-mdc-unelevated-button.squareicon.right .icon{margin:0 auto}button.mat-mdc-unelevated-button.tab,a.mat-mdc-unelevated-button.tab{background-color:#fff;color:#000;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#e0e0e0;border-radius:0}button.mat-mdc-unelevated-button.tab:hover .label,button.mat-mdc-unelevated-button.tab:hover .icon.only,a.mat-mdc-unelevated-button.tab:hover .label,a.mat-mdc-unelevated-button.tab:hover .icon.only{text-decoration:underline}button.mat-mdc-unelevated-button.tab:disabled,button.mat-mdc-unelevated-button.tab:disabled:hover,a.mat-mdc-unelevated-button.tab:disabled,a.mat-mdc-unelevated-button.tab:disabled:hover{color:#888}button.mat-mdc-unelevated-button.tab:disabled .label,button.mat-mdc-unelevated-button.tab:disabled:hover .label,a.mat-mdc-unelevated-button.tab:disabled .label,a.mat-mdc-unelevated-button.tab:disabled:hover .label{text-decoration:none}button.mat-mdc-unelevated-button.tab:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.tab:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tab:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tab:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.tab:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.tab:focus.cdk-focused.cdk-mouse-focused{font-weight:700;border-color:#276678}button.mat-mdc-unelevated-button.menuTrigger.classic-theme,a.mat-mdc-unelevated-button.menuTrigger.classic-theme{background:transparent;min-width:24px;height:24px;padding:0}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:hover,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled,button.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled:hover{background-color:#fff;color:#888}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:focus.cdk-focused.cdk-mouse-focused{background-color:transparent}button.mat-mdc-unelevated-button.menuTrigger.classic-theme .icon-label-wrapper,a.mat-mdc-unelevated-button.menuTrigger.classic-theme .icon-label-wrapper{flex-flow:column}button.mat-mdc-unelevated-button.menuTrigger.classic-theme.left .icon,button.mat-mdc-unelevated-button.menuTrigger.classic-theme.right .icon,a.mat-mdc-unelevated-button.menuTrigger.classic-theme.left .icon,a.mat-mdc-unelevated-button.menuTrigger.classic-theme.right .icon{margin:0 auto}button.mat-mdc-unelevated-button.menuCell,a.mat-mdc-unelevated-button.menuCell{background-color:#fff;color:#000;font-weight:400;border-radius:0;min-width:100%;justify-content:flex-start}button.mat-mdc-unelevated-button.menuCell.classic-theme.big.left .icon,a.mat-mdc-unelevated-button.menuCell.classic-theme.big.left .icon{margin-right:16px}button.mat-mdc-unelevated-button.menuCell.big.left .icon,a.mat-mdc-unelevated-button.menuCell.big.left .icon{margin-right:8px}button.mat-mdc-unelevated-button.menuCell .icon-label-wrapper,a.mat-mdc-unelevated-button.menuCell .icon-label-wrapper{justify-content:flex-start}button.mat-mdc-unelevated-button.menuCell:hover,a.mat-mdc-unelevated-button.menuCell:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.menuCell:disabled,button.mat-mdc-unelevated-button.menuCell:disabled:hover,a.mat-mdc-unelevated-button.menuCell:disabled,a.mat-mdc-unelevated-button.menuCell:disabled:hover{background-color:#fff;color:#888}button.mat-mdc-unelevated-button.menuCell:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.menuCell:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.menuCell:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.menuCell:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.menuCell .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.menuCell .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}.button-wrapper{position:relative;height:fit-content}.button-wrapper[aria-disabled=true]{pointer-events:none}.button-wrapper .menuTrigger:not(.classic-theme),.button-wrapper .icon-button{border:none;border-radius:100%;width:var(--icon-button-size)!important;height:var(--icon-button-size)!important;cursor:pointer;background-color:unset}::ng-deep .button-wrapper .menuTrigger:not(.classic-theme).mat-mdc-unelevated-button:not(:disabled),::ng-deep .button-wrapper .icon-button.mat-mdc-unelevated-button:not(:disabled){background-color:unset}::ng-deep .button-wrapper .menuTrigger:not(.classic-theme).mdc-button,::ng-deep .button-wrapper .icon-button.mdc-button{min-width:var(--icon-button-size)!important}.button-wrapper .menuTrigger:not(.classic-theme) ::ng-deep .mat-mdc-button-touch-target,.button-wrapper .icon-button ::ng-deep .mat-mdc-button-touch-target{height:var(--icon-button-size)!important}.button-wrapper .menuTrigger:not(.classic-theme):disabled,.button-wrapper .icon-button:disabled{pointer-events:none;background:unset}.button-wrapper .menuTrigger:not(.classic-theme):disabled.classic-theme ::ng-deep mat-icon svg,.button-wrapper .icon-button:disabled.classic-theme ::ng-deep mat-icon svg{color:#888}.button-wrapper .menuTrigger:not(.classic-theme):hover,.button-wrapper .icon-button:hover{background-color:#f6f6f6}.button-wrapper .menuTrigger:not(.classic-theme):focus.cdk-focused,.button-wrapper .icon-button:focus.cdk-focused{padding:1px;border:1px dashed #888888;outline:0}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:disabled,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:disabled,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .icon-button:not(.has-company-color).light-theme:disabled,.button-wrapper .icon-button:not(.has-company-color).light-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .icon-button:not(.has-company-color).dark-theme:disabled,.button-wrapper .icon-button:not(.has-company-color).dark-theme:disabled:hover ::ng-deep mat-icon svg{color:#919191!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme,.button-wrapper .icon-button:not(.has-company-color).light-theme{color:#242424!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:hover,.button-wrapper .icon-button:not(.has-company-color).light-theme:hover{background-color:#e9e9e9}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:focus.cdk-focused,.button-wrapper .icon-button:not(.has-company-color).light-theme:focus.cdk-focused{border-color:#666}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme,.button-wrapper .icon-button:not(.has-company-color).dark-theme{color:#fff!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:hover,.button-wrapper .icon-button:not(.has-company-color).dark-theme:hover{background-color:#666}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:focus.cdk-focused,.button-wrapper .icon-button:not(.has-company-color).dark-theme:focus.cdk-focused{border-color:#e9e9e9}.button-wrapper .menuTrigger:focus.cdk-focused.cdk-mouse-focused.light-theme{border:none;background-color:#e9e9e9;color:#242424}.button-wrapper .menuTrigger:focus.cdk-focused.cdk-mouse-focused.dark-theme{border:none;background-color:#666;color:#fff}.button-wrapper .right-top{position:absolute;right:-8px;top:-8px;z-index:1}.button-wrapper .right-top.badge-notification{top:-4px;right:0;border:1px solid #ffffff;border-radius:100%}.button-wrapper .right-top.badge-primary{right:-4px}::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}:host[btn-variant=link]{display:inline-flex}::ng-deep .link .button-container{display:flex}::ng-deep .link a.mat-mdc-unelevated-button.link{height:unset!important;min-width:unset!important;border-radius:10px}::ng-deep .link a.mat-mdc-unelevated-button.link:active{outline:1px dashed #666666!important}::ng-deep .link a.mat-mdc-unelevated-button.link:active .mdc-button__label{padding:0!important;outline:none!important}::ng-deep .link a.mat-mdc-unelevated-button{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button .mdc-button__label{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big,::ng-deep .link a.mat-mdc-unelevated-button.small{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big .mdc-button__label,::ng-deep .link a.mat-mdc-unelevated-button.small .mdc-button__label{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper{font-size:16px!important;line-height:24px!important}::ng-deep .link a.mat-mdc-unelevated-button.small .mdc-button__label .icon-label-wrapper{font-size:12px!important;line-height:16px!important}::ng-deep .link a.mat-mdc-unelevated-button .mat-mdc-button-touch-target{height:unset!important}\n"] }]
|
|
2893
|
+
args: [{ selector: 'ui-button', template: "<div #tooltipElement class=\"tooltip\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n></div>\n<div\n class=\"button-wrapper\"\n [ngClass]=\"{ 'full-width': fullWidth, 'rounded-icon': applicationTheme !== 'classic' && iconName && !label, link: !isButtonLink }\"\n>\n <div class=\"button-container\"\n [ngClass]=\"{ 'disabled': disabled, 'button-scale': buttonState === 'pressed' && applicationTheme !== 'classic' && !disabledScaleOnClick }\"\n >\n <span *ngIf=\"isPremium && typeIncluded\" class=\"right-top\">\n <img [attr.src]=\"'/images/premium.svg'\" [alt]=\"'premium-icon'\">\n </span>\n <ui-badge\n id=\"badge\"\n *ngIf=\"buttonBadgeConfig?.badgeType\"\n [rebrandColor]=\"buttonBadgeConfig?.rebrandColor ?? 'brand'\"\n [variant]=\"buttonBadgeConfig!.badgeType!\"\n [label]=\"buttonBadgeConfig?.badgeLabel ?? ''\"\n [notificationsAmount]=\"buttonBadgeConfig?.badgeNotificationAmount ?? 0\"\n class=\"right-top\"\n [ngClass]=\"{ 'badge-primary': buttonBadgeConfig?.badgeType === 'primary', 'badge-notification': buttonBadgeConfig?.badgeType === 'notification' }\"\n ></ui-badge>\n <button\n [style]=\"'--icon-button-size:' + iconButtonSize + 'px'\"\n [ngClass]=\"classCss\"\n [ngStyle]=\"styleCss\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick($event)\"\n (mouseleave)=\"buttonHover($event)\"\n (mouseenter)=\"buttonHover($event)\"\n (mousedown)=\"onPressed($event)\"\n (mouseup)=\"onPressed($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\"\n *ngIf=\"isButtonLink\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-disabled]=\"disabled\"\n [type]=\"type\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n [matTooltipPosition]=\"tooltipPosition\"\n #buttonElement\n role=\"button\"\n mat-flat-button>\n <span id=\"describedby\" [style.display]=\"'none'\">\n {{ (isPremium ? (label + ' ' + ('BUTTON.PREMIUM_FEATURE' | uiTranslate : language)) : ariaDescribedby) }}\n </span>\n <span id=\"labelledby\" [style.display]=\"'none'\">\n {{ ariaLabelledby }}\n </span>\n <ng-container *ngIf=\"showSpinner; else icons\">\n <span class=\"spinner-wrapper\">\n <mat-spinner class=\"position-spinner\" aria-label=\"loading\" mode=\"indeterminate\" diameter=\"24\"></mat-spinner>\n </span>\n </ng-container>\n <ng-template #icons>\n <span class=\"icon-only-wrapper\" *ngIf=\"justIcon && !!iconName\">\n <span\n class=\"icon only\"\n role=\"label\"\n >\n <ui-icon\n [color]=\"'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"iconName\"\n [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"\n ></ui-icon>\n </span>\n </span>\n\n <span class=\"icon-label-wrapper\" [ngClass]=\"{'center-text': iconName === ''}\" *ngIf=\"!justIcon\">\n <span\n class=\"icon\"\n *ngIf=\"iconPosition === 'left' && !!iconName\"\n aria-hidden=\"true\"\n >\n <ui-icon\n [color]=\"'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"iconName\"\n [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"\n ></ui-icon>\n </span>\n <span\n *ngIf=\"isLabel\"\n class=\"label\"\n id=\"label\"\n uiEllipseText\n [isMultiline]=\"true\"\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n >\n {{ label }}\n </span>\n <span class=\"icon\" *ngIf=\"iconPosition === 'right' && !!iconName\" aria-hidden=\"true\"><ui-icon\n [color]=\"'inherit'\" [applicationTheme]=\"applicationTheme\" [name]=\"iconName\" [filled]=\"isFilledIcon\"\n [size]=\"size === 'small' ? '16' : '24'\"></ui-icon></span>\n </span>\n </ng-template>\n </button>\n <a\n #buttonElement\n [ngClass]=\"classCss\"\n [ngStyle]=\"styleCss\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick($event)\"\n (mouseenter)=\"buttonHover($event)\"\n (mouseleave)=\"buttonHover($event)\"\n (mousedown)=\"onPressed($event)\"\n (mouseup)=\"onPressed($event)\"\n (keydown)=\"onKeydown($event);\"\n (keyup)=\"onKeyup($event)\"\n [disableRipple]=\"true\"\n *ngIf=\"!isButtonLink\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"'labelledby-link'\"\n [attr.aria-describedby]=\"'describedby-link'\"\n [attr.aria-disabled]=\"disabled\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n role=\"link\"\n [href]=\"url\"\n [target]=\"urlTarget\"\n mat-flat-button>\n <span id=\"describedby-link\" [style.display]=\"'none'\">\n {{ ariaDescribedby }}\n </span>\n <span id=\"labelledby-link\" [style.display]=\"'none'\">\n {{ ariaLabelledby }}\n </span>\n <span class=\"icon-label-wrapper\">\n {{ label }}\n </span>\n </a>\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}::ng-deep .mat-mdc-button-persistent-ripple:before{opacity:0!important}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host{position:relative}:host ::ng-deep button.cdk-keyboard-focused:not(.text),:host a:focus-visible.cdk-keyboard-focused:not(.text){outline-color:#242424!important;outline-style:solid!important;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}:host ::ng-deep button.icon-button.cdk-keyboard-focused,:host ::ng-deep button.menuTrigger.cdk-keyboard-focused,:host a:focus-visible.icon-button.cdk-keyboard-focused,:host a:focus-visible.menuTrigger.cdk-keyboard-focused{border:unset!important}:host a:focus-visible{border-radius:2px!important}:host .tooltip{position:absolute;top:0;left:0;width:fit-content;height:100%;pointer-events:auto}.rounded-icon button{min-width:unset}.rounded-icon .mdc-button{width:48px!important;min-width:unset}.rounded-icon .mdc-button .icon{margin:0!important}.rounded-icon .big,.rounded-icon .small{padding:0!important}:host{display:flex}:host .button-container{width:100%}:host .button-container.disabled{pointer-events:none}:host .button-container.button-scale{transform:scale(.98)}:host .button-wrapper.full-width{width:100%}:host .button-wrapper ::ng-deep .mdc-button__label,:host .button-wrapper ::ng-deep .icon-label-wrapper{width:100%}:host .button-wrapper ::ng-deep .label{text-align:left;overflow:hidden;-webkit-line-clamp:2;display:-webkit-box!important;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal}:host .button-wrapper ::ng-deep button{width:100%}button.mat-mdc-unelevated-button,a.mat-mdc-unelevated-button{font-size:14px;font-weight:600;line-height:normal;letter-spacing:normal}button.mat-mdc-unelevated-button .spinner-wrapper,a.mat-mdc-unelevated-button .spinner-wrapper{display:flex;align-items:center;flex-flow:column;width:100%}button.mat-mdc-unelevated-button .icon,a.mat-mdc-unelevated-button .icon{display:flex;height:100%;align-items:center}button.mat-mdc-unelevated-button .icon.only,a.mat-mdc-unelevated-button .icon.only{align-items:center;flex-flow:column;justify-content:center;margin-left:0}button.mat-mdc-unelevated-button .icon-label-wrapper,a.mat-mdc-unelevated-button .icon-label-wrapper{display:flex;align-items:center;justify-content:center;height:100%}button.mat-mdc-unelevated-button .icon-label-wrapper.center-text,a.mat-mdc-unelevated-button .icon-label-wrapper.center-text{flex-flow:column;width:100%}button.mat-mdc-unelevated-button .icon-label-wrapper .label,a.mat-mdc-unelevated-button .icon-label-wrapper .label{display:flex;height:100%;align-items:center}button.mat-mdc-unelevated-button.big,a.mat-mdc-unelevated-button.big{height:48px;padding:12px 24px}button.mat-mdc-unelevated-button.small,a.mat-mdc-unelevated-button.small{height:38px;padding:7px 11px}button.mat-mdc-unelevated-button.classic-theme.big,a.mat-mdc-unelevated-button.classic-theme.big{height:48px;padding:12px 16px}button.mat-mdc-unelevated-button.small.left .icon,button.mat-mdc-unelevated-button.big.left .icon,a.mat-mdc-unelevated-button.small.left .icon,a.mat-mdc-unelevated-button.big.left .icon{margin-right:8px}button.mat-mdc-unelevated-button.small.right .icon,button.mat-mdc-unelevated-button.big.right .icon,a.mat-mdc-unelevated-button.small.right .icon,a.mat-mdc-unelevated-button.big.right .icon{margin-left:8px}button.mat-mdc-unelevated-button.small.only-icon .icon,button.mat-mdc-unelevated-button.big.only-icon .icon,a.mat-mdc-unelevated-button.small.only-icon .icon,a.mat-mdc-unelevated-button.big.only-icon .icon{margin-left:0}button.mat-mdc-unelevated-button.primary,button.mat-mdc-unelevated-button.secondary,button.mat-mdc-unelevated-button.ghost,button.mat-mdc-unelevated-button.outlined,button.mat-mdc-unelevated-button.destructive,button.mat-mdc-unelevated-button.tertiary,button.mat-mdc-unelevated-button.link,a.mat-mdc-unelevated-button.primary,a.mat-mdc-unelevated-button.secondary,a.mat-mdc-unelevated-button.ghost,a.mat-mdc-unelevated-button.outlined,a.mat-mdc-unelevated-button.destructive,a.mat-mdc-unelevated-button.tertiary,a.mat-mdc-unelevated-button.link{min-width:80px}button.mat-mdc-unelevated-button.primary.only-icon,button.mat-mdc-unelevated-button.secondary.only-icon,button.mat-mdc-unelevated-button.ghost.only-icon,button.mat-mdc-unelevated-button.outlined.only-icon,button.mat-mdc-unelevated-button.destructive.only-icon,button.mat-mdc-unelevated-button.tertiary.only-icon,button.mat-mdc-unelevated-button.link.only-icon,a.mat-mdc-unelevated-button.primary.only-icon,a.mat-mdc-unelevated-button.secondary.only-icon,a.mat-mdc-unelevated-button.ghost.only-icon,a.mat-mdc-unelevated-button.outlined.only-icon,a.mat-mdc-unelevated-button.destructive.only-icon,a.mat-mdc-unelevated-button.tertiary.only-icon,a.mat-mdc-unelevated-button.link.only-icon{min-width:1px}button.mat-mdc-unelevated-button.primary.full-width,button.mat-mdc-unelevated-button.secondary.full-width,button.mat-mdc-unelevated-button.ghost.full-width,button.mat-mdc-unelevated-button.outlined.full-width,button.mat-mdc-unelevated-button.destructive.full-width,button.mat-mdc-unelevated-button.tertiary.full-width,button.mat-mdc-unelevated-button.link.full-width,a.mat-mdc-unelevated-button.primary.full-width,a.mat-mdc-unelevated-button.secondary.full-width,a.mat-mdc-unelevated-button.ghost.full-width,a.mat-mdc-unelevated-button.outlined.full-width,a.mat-mdc-unelevated-button.destructive.full-width,a.mat-mdc-unelevated-button.tertiary.full-width,a.mat-mdc-unelevated-button.link.full-width{width:100%;min-width:100%}button.mat-mdc-unelevated-button.primary.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.secondary.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.ghost.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.outlined.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.destructive.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.tertiary.full-width .icon-label-wrapper,button.mat-mdc-unelevated-button.link.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.primary.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.secondary.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.ghost.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.outlined.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.destructive.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.tertiary.full-width .icon-label-wrapper,a.mat-mdc-unelevated-button.link.full-width .icon-label-wrapper{justify-content:center}button.mat-mdc-unelevated-button.primary,a.mat-mdc-unelevated-button.primary{background-color:var(--color);color:#fff;border-radius:1000px}button.mat-mdc-unelevated-button.primary-disabled,a.mat-mdc-unelevated-button.primary-disabled{opacity:.75}button.mat-mdc-unelevated-button.primary.classic-theme,a.mat-mdc-unelevated-button.primary.classic-theme{border-radius:4px}button.mat-mdc-unelevated-button.primary.classic-theme:disabled,button.mat-mdc-unelevated-button.primary.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.classic-theme:disabled,a.mat-mdc-unelevated-button.primary.classic-theme:disabled:hover{background-color:#b5ddd5}button.mat-mdc-unelevated-button.primary.light-theme:disabled,button.mat-mdc-unelevated-button.primary.light-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.light-theme:disabled,a.mat-mdc-unelevated-button.primary.light-theme:disabled:hover{background-color:#e9e9e9;color:#666}button.mat-mdc-unelevated-button.primary.light-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.primary.light-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.light-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.light-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#666}button.mat-mdc-unelevated-button.primary.dark-theme:disabled,button.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover,a.mat-mdc-unelevated-button.primary.dark-theme:disabled,a.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover{background-color:#666;color:#d3d3d3}button.mat-mdc-unelevated-button.primary.dark-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.dark-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3}button.mat-mdc-unelevated-button.primary ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.primary ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.primary .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.primary .mat-mdc-progress-spinner ::ng-deep circle{stroke:#fff}button.mat-mdc-unelevated-button.secondary,a.mat-mdc-unelevated-button.secondary{border-radius:1000px}button.mat-mdc-unelevated-button.secondary.light-theme,a.mat-mdc-unelevated-button.secondary.light-theme{background-color:#242424;color:#fff}button.mat-mdc-unelevated-button.secondary.light-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.secondary.light-theme:disabled,button.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.light-theme:disabled,a.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover{opacity:.75;background-color:#e9e9e9;color:#666}button.mat-mdc-unelevated-button.secondary.light-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.light-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3!important}button.mat-mdc-unelevated-button.secondary.dark-theme,a.mat-mdc-unelevated-button.secondary.dark-theme{background-color:#fff;color:#242424}button.mat-mdc-unelevated-button.secondary.dark-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme ::ng-deep mat-icon.black svg{color:#242424}button.mat-mdc-unelevated-button.secondary.dark-theme:disabled,button.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover{opacity:.75;background-color:#666;color:#d3d3d3}button.mat-mdc-unelevated-button.secondary.dark-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.dark-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3}button.mat-mdc-unelevated-button.secondary:hover,a.mat-mdc-unelevated-button.secondary:hover{background-color:#666;color:#fff}button.mat-mdc-unelevated-button.secondary:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary:hover ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.secondary .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.secondary .mat-mdc-progress-spinner ::ng-deep circle{stroke:#fff}button.mat-mdc-unelevated-button.secondary.classic-theme,a.mat-mdc-unelevated-button.secondary.classic-theme{border-radius:4px;background-color:#ededed;color:#000}button.mat-mdc-unelevated-button.secondary.classic-theme:hover,a.mat-mdc-unelevated-button.secondary.classic-theme:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.secondary.classic-theme:disabled,button.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover{background-color:#ededed;color:#888}button.mat-mdc-unelevated-button.secondary.classic-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary.classic-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.secondary.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.secondary.classic-theme .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.outlined,a.mat-mdc-unelevated-button.outlined{background-color:#fff;color:#000;border-width:1px;border-style:solid;border-color:#000}button.mat-mdc-unelevated-button.outlined:hover,a.mat-mdc-unelevated-button.outlined:hover{background-color:#f6f6f6}button.mat-mdc-unelevated-button.outlined:disabled,button.mat-mdc-unelevated-button.outlined:disabled:hover,a.mat-mdc-unelevated-button.outlined:disabled,a.mat-mdc-unelevated-button.outlined:disabled:hover{color:#ededed;border-color:#ededed}button.mat-mdc-unelevated-button.outlined:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.outlined:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.outlined:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.outlined:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.outlined:focus.cdk-focused,a.mat-mdc-unelevated-button.outlined:focus.cdk-focused{background-color:#e0e0e0}button.mat-mdc-unelevated-button.outlined .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.outlined .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.ghost,a.mat-mdc-unelevated-button.ghost{border-width:1px;border-style:solid;border-radius:1000px}button.mat-mdc-unelevated-button.ghost.light-theme,a.mat-mdc-unelevated-button.ghost.light-theme{background-color:transparent;color:#242424;border-color:#242424}button.mat-mdc-unelevated-button.ghost.light-theme.only-icon,a.mat-mdc-unelevated-button.ghost.light-theme.only-icon{width:48px;height:48px;padding:0}button.mat-mdc-unelevated-button.ghost.light-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.ghost.light-theme ::ng-deep mat-icon.black svg{color:#242424}button.mat-mdc-unelevated-button.ghost.light-theme:hover,a.mat-mdc-unelevated-button.ghost.light-theme:hover{background-color:#f4f4f4}button.mat-mdc-unelevated-button.ghost.dark-theme,a.mat-mdc-unelevated-button.ghost.dark-theme{background-color:transparent;color:#fff;border-color:#fff}button.mat-mdc-unelevated-button.ghost.dark-theme.only-icon,a.mat-mdc-unelevated-button.ghost.dark-theme.only-icon{width:48px;height:48px;padding:0}button.mat-mdc-unelevated-button.ghost.dark-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.ghost.dark-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.ghost.dark-theme:hover,a.mat-mdc-unelevated-button.ghost.dark-theme:hover{background-color:#666}button.mat-mdc-unelevated-button.ghost:disabled,button.mat-mdc-unelevated-button.ghost:disabled:hover,a.mat-mdc-unelevated-button.ghost:disabled,a.mat-mdc-unelevated-button.ghost:disabled:hover{opacity:.5;background-color:transparent}button.mat-mdc-unelevated-button.ghost .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.ghost .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.mat-mdc-unelevated-button.destructive,a.mat-mdc-unelevated-button.destructive{border:1px solid #E02800;background-color:#fff;color:#e02800;border-radius:1000px}button.mat-mdc-unelevated-button.destructive:hover,a.mat-mdc-unelevated-button.destructive:hover{background-color:#e02800;color:#fff}button.mat-mdc-unelevated-button.destructive:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive:hover ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.destructive:disabled,button.mat-mdc-unelevated-button.destructive:disabled:hover,a.mat-mdc-unelevated-button.destructive:disabled,a.mat-mdc-unelevated-button.destructive:disabled:hover{border-color:#919191;color:#919191;background:transparent}button.mat-mdc-unelevated-button.destructive ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive ::ng-deep mat-icon.black svg{color:#e02800}button.mat-mdc-unelevated-button.destructive .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.destructive .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.mat-mdc-unelevated-button.destructive.classic-theme,a.mat-mdc-unelevated-button.destructive.classic-theme{border:unset;border-radius:4px;background-color:#cb7b7a;color:#fff}button.mat-mdc-unelevated-button.destructive.classic-theme:hover,a.mat-mdc-unelevated-button.destructive.classic-theme:hover{background-color:#8e5655}button.mat-mdc-unelevated-button.destructive.classic-theme:disabled,button.mat-mdc-unelevated-button.destructive.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.destructive.classic-theme:disabled,a.mat-mdc-unelevated-button.destructive.classic-theme:disabled:hover{background-color:#e3c3c6}button.mat-mdc-unelevated-button.destructive.classic-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.destructive.classic-theme ::ng-deep mat-icon.black svg{color:#fff}button.mat-mdc-unelevated-button.destructive.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.destructive.classic-theme .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.tertiary,a.mat-mdc-unelevated-button.tertiary{background-color:transparent;color:#46a997}button.mat-mdc-unelevated-button.tertiary:hover,a.mat-mdc-unelevated-button.tertiary:hover{background-color:#f6f6f6;color:#31766a}button.mat-mdc-unelevated-button.tertiary:disabled,button.mat-mdc-unelevated-button.tertiary:disabled:hover,a.mat-mdc-unelevated-button.tertiary:disabled,a.mat-mdc-unelevated-button.tertiary:disabled:hover{opacity:.75;background-color:#fff;color:#b5ddd5}button.mat-mdc-unelevated-button.tertiary:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.tertiary:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary:disabled:hover ::ng-deep mat-icon.black svg{color:#b5ddd5}button.mat-mdc-unelevated-button.tertiary ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tertiary ::ng-deep mat-icon.black svg{color:var(--color)}button.mat-mdc-unelevated-button.tertiary .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.tertiary .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.link,a.mat-mdc-unelevated-button.link{background-color:transparent;color:#d410aa;border-radius:0}button.mat-mdc-unelevated-button.link ::ng-deep .mat-mdc-button-persistent-ripple,a.mat-mdc-unelevated-button.link ::ng-deep .mat-mdc-button-persistent-ripple{display:none}button.mat-mdc-unelevated-button.link span.icon-label-wrapper,a.mat-mdc-unelevated-button.link span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.link:hover,a.mat-mdc-unelevated-button.link:hover{color:#a90686!important}button.mat-mdc-unelevated-button.link:active,a.mat-mdc-unelevated-button.link:active{color:#ff54da!important}button.mat-mdc-unelevated-button.link ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.link ::ng-deep .mdc-button__label{padding:4px}button.mat-mdc-unelevated-button.link:active ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.link:active ::ng-deep .mdc-button__label{padding:4px;outline:1px dashed #666666}button.mat-mdc-unelevated-button.link:disabled,button.mat-mdc-unelevated-button.link:disabled:hover,a.mat-mdc-unelevated-button.link:disabled,a.mat-mdc-unelevated-button.link:disabled:hover{color:#d3d3d3}button.mat-mdc-unelevated-button.link ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.link ::ng-deep mat-icon.black svg{color:var(--color)}button.mat-mdc-unelevated-button.link.classic-theme,a.mat-mdc-unelevated-button.link.classic-theme{background-color:transparent;color:#46a997;border-radius:0}button.mat-mdc-unelevated-button.link.classic-theme span.icon-label-wrapper,a.mat-mdc-unelevated-button.link.classic-theme span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.link.classic-theme:hover,a.mat-mdc-unelevated-button.link.classic-theme:hover{color:#31766a}button.mat-mdc-unelevated-button.link.classic-theme:disabled,button.mat-mdc-unelevated-button.link.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.link.classic-theme:disabled,a.mat-mdc-unelevated-button.link.classic-theme:disabled:hover{color:#b5ddd5}button.mat-mdc-unelevated-button.link.classic-theme ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.link.classic-theme ::ng-deep mat-icon.black svg{color:var(--color)}button.mat-mdc-unelevated-button.text,a.mat-mdc-unelevated-button.text{background-color:transparent;border-radius:0;text-decoration:underline}button.mat-mdc-unelevated-button.text.light-theme,a.mat-mdc-unelevated-button.text.light-theme{color:var(--color)}button.mat-mdc-unelevated-button.text.light-theme:active,a.mat-mdc-unelevated-button.text.light-theme:active,button.mat-mdc-unelevated-button.text.light-theme:hover,a.mat-mdc-unelevated-button.text.light-theme:hover{color:var(--active-color)!important}button.mat-mdc-unelevated-button.text.dark-theme,a.mat-mdc-unelevated-button.text.dark-theme{color:var(--color)}button.mat-mdc-unelevated-button.text.dark-theme:active,a.mat-mdc-unelevated-button.text.dark-theme:active{color:var(--active-color)!important}button.mat-mdc-unelevated-button.text.dark-theme:hover,a.mat-mdc-unelevated-button.text.dark-theme:hover{color:var(--active-color)}button.mat-mdc-unelevated-button.text ::ng-deep .mat-mdc-button-persistent-ripple,a.mat-mdc-unelevated-button.text ::ng-deep .mat-mdc-button-persistent-ripple{display:none}button.mat-mdc-unelevated-button.text span.icon-label-wrapper,a.mat-mdc-unelevated-button.text span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.text:disabled,button.mat-mdc-unelevated-button.text:disabled:hover,a.mat-mdc-unelevated-button.text:disabled,a.mat-mdc-unelevated-button.text:disabled:hover{color:#d3d3d3}button.mat-mdc-unelevated-button.text:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.text:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text:disabled:hover ::ng-deep mat-icon.black svg{color:#d3d3d3}button.mat-mdc-unelevated-button.text ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text ::ng-deep .mdc-button__label{padding:4px}button.mat-mdc-unelevated-button.text:focus ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text:focus ::ng-deep .mdc-button__label{padding:4px;outline:1px dashed #666666}button.mat-mdc-unelevated-button.text:focus-visible ::ng-deep .mdc-button__label,a.mat-mdc-unelevated-button.text:focus-visible ::ng-deep .mdc-button__label{border-radius:2px;outline-color:#242424!important;outline-style:solid!important;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}button.mat-mdc-unelevated-button.text .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.text .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.mat-mdc-unelevated-button.text.classic-theme,a.mat-mdc-unelevated-button.text.classic-theme{background-color:transparent;color:#000;border-radius:0;text-decoration:underline}button.mat-mdc-unelevated-button.text.classic-theme span.icon-label-wrapper,a.mat-mdc-unelevated-button.text.classic-theme span.icon-label-wrapper{text-decoration:underline}button.mat-mdc-unelevated-button.text.classic-theme:hover,a.mat-mdc-unelevated-button.text.classic-theme:hover{color:#000}button.mat-mdc-unelevated-button.text.classic-theme:disabled,button.mat-mdc-unelevated-button.text.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.text.classic-theme:disabled,a.mat-mdc-unelevated-button.text.classic-theme:disabled:hover{color:#888}button.mat-mdc-unelevated-button.text.classic-theme:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.text.classic-theme:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text.classic-theme:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.text.classic-theme:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.text.classic-theme:focus.cdk-focused,a.mat-mdc-unelevated-button.text.classic-theme:focus.cdk-focused{color:#000}button.mat-mdc-unelevated-button.text.classic-theme .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.text.classic-theme .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.squareicon,a.mat-mdc-unelevated-button.squareicon{background-color:#ededed;color:#000;min-width:56px}button.mat-mdc-unelevated-button.squareicon:hover,a.mat-mdc-unelevated-button.squareicon:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.squareicon:disabled,button.mat-mdc-unelevated-button.squareicon:disabled:hover,a.mat-mdc-unelevated-button.squareicon:disabled,a.mat-mdc-unelevated-button.squareicon:disabled:hover{background-color:#ededed;color:#888}button.mat-mdc-unelevated-button.squareicon:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.squareicon:focus.cdk-focused.cdk-mouse-focused{background-color:#ededed}button.mat-mdc-unelevated-button.squareicon .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.squareicon .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button.mat-mdc-unelevated-button.squareicon .icon-label-wrapper,a.mat-mdc-unelevated-button.squareicon .icon-label-wrapper{flex-flow:column}button.mat-mdc-unelevated-button.squareicon.left .icon,button.mat-mdc-unelevated-button.squareicon.right .icon,a.mat-mdc-unelevated-button.squareicon.left .icon,a.mat-mdc-unelevated-button.squareicon.right .icon{margin:0 auto}button.mat-mdc-unelevated-button.tab,a.mat-mdc-unelevated-button.tab{background-color:#fff;color:#000;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#e0e0e0;border-radius:0}button.mat-mdc-unelevated-button.tab:hover .label,button.mat-mdc-unelevated-button.tab:hover .icon.only,a.mat-mdc-unelevated-button.tab:hover .label,a.mat-mdc-unelevated-button.tab:hover .icon.only{text-decoration:underline}button.mat-mdc-unelevated-button.tab:disabled,button.mat-mdc-unelevated-button.tab:disabled:hover,a.mat-mdc-unelevated-button.tab:disabled,a.mat-mdc-unelevated-button.tab:disabled:hover{color:#888}button.mat-mdc-unelevated-button.tab:disabled .label,button.mat-mdc-unelevated-button.tab:disabled:hover .label,a.mat-mdc-unelevated-button.tab:disabled .label,a.mat-mdc-unelevated-button.tab:disabled:hover .label{text-decoration:none}button.mat-mdc-unelevated-button.tab:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.tab:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tab:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.tab:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.tab:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.tab:focus.cdk-focused.cdk-mouse-focused{font-weight:700;border-color:#276678}button.mat-mdc-unelevated-button.menuTrigger.classic-theme,a.mat-mdc-unelevated-button.menuTrigger.classic-theme{background:transparent;min-width:24px;height:24px;padding:0}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:hover,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled,button.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled:hover,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:disabled:hover{background-color:#fff;color:#888}button.mat-mdc-unelevated-button.menuTrigger.classic-theme:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.menuTrigger.classic-theme:focus.cdk-focused.cdk-mouse-focused{background-color:transparent}button.mat-mdc-unelevated-button.menuTrigger.classic-theme .icon-label-wrapper,a.mat-mdc-unelevated-button.menuTrigger.classic-theme .icon-label-wrapper{flex-flow:column}button.mat-mdc-unelevated-button.menuTrigger.classic-theme.left .icon,button.mat-mdc-unelevated-button.menuTrigger.classic-theme.right .icon,a.mat-mdc-unelevated-button.menuTrigger.classic-theme.left .icon,a.mat-mdc-unelevated-button.menuTrigger.classic-theme.right .icon{margin:0 auto}button.mat-mdc-unelevated-button.menuCell,a.mat-mdc-unelevated-button.menuCell{background-color:#fff;color:#000;font-weight:400;border-radius:0;min-width:100%;justify-content:flex-start}button.mat-mdc-unelevated-button.menuCell.classic-theme.big.left .icon,a.mat-mdc-unelevated-button.menuCell.classic-theme.big.left .icon{margin-right:16px}button.mat-mdc-unelevated-button.menuCell.big.left .icon,a.mat-mdc-unelevated-button.menuCell.big.left .icon{margin-right:8px}button.mat-mdc-unelevated-button.menuCell .icon-label-wrapper,a.mat-mdc-unelevated-button.menuCell .icon-label-wrapper{justify-content:flex-start}button.mat-mdc-unelevated-button.menuCell:hover,a.mat-mdc-unelevated-button.menuCell:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.menuCell:disabled,button.mat-mdc-unelevated-button.menuCell:disabled:hover,a.mat-mdc-unelevated-button.menuCell:disabled,a.mat-mdc-unelevated-button.menuCell:disabled:hover{background-color:#fff;color:#888}button.mat-mdc-unelevated-button.menuCell:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.menuCell:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.menuCell:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.menuCell:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.menuCell .mat-mdc-progress-spinner ::ng-deep circle,a.mat-mdc-unelevated-button.menuCell .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}.button-wrapper{position:relative;height:fit-content}.button-wrapper[aria-disabled=true]{pointer-events:none}.button-wrapper .menuTrigger:not(.classic-theme),.button-wrapper .icon-button{border:none;border-radius:100%;width:var(--icon-button-size)!important;height:var(--icon-button-size)!important;cursor:pointer;background-color:unset}::ng-deep .button-wrapper .menuTrigger:not(.classic-theme).mat-mdc-unelevated-button:not(:disabled),::ng-deep .button-wrapper .icon-button.mat-mdc-unelevated-button:not(:disabled){background-color:unset}::ng-deep .button-wrapper .menuTrigger:not(.classic-theme).mdc-button,::ng-deep .button-wrapper .icon-button.mdc-button{min-width:var(--icon-button-size)!important}.button-wrapper .menuTrigger:not(.classic-theme) ::ng-deep .mat-mdc-button-touch-target,.button-wrapper .icon-button ::ng-deep .mat-mdc-button-touch-target{height:var(--icon-button-size)!important}.button-wrapper .menuTrigger:not(.classic-theme):disabled,.button-wrapper .icon-button:disabled{pointer-events:none;background:unset}.button-wrapper .menuTrigger:not(.classic-theme):disabled.classic-theme ::ng-deep mat-icon svg,.button-wrapper .icon-button:disabled.classic-theme ::ng-deep mat-icon svg{color:#888}.button-wrapper .menuTrigger:not(.classic-theme):hover,.button-wrapper .icon-button:hover{background-color:#f6f6f6}.button-wrapper .menuTrigger:not(.classic-theme):focus.cdk-focused,.button-wrapper .icon-button:focus.cdk-focused{padding:1px;border:1px dashed #888888;outline:0}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:disabled,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:disabled,.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .icon-button:not(.has-company-color).light-theme:disabled,.button-wrapper .icon-button:not(.has-company-color).light-theme:disabled:hover ::ng-deep mat-icon svg,.button-wrapper .icon-button:not(.has-company-color).dark-theme:disabled,.button-wrapper .icon-button:not(.has-company-color).dark-theme:disabled:hover ::ng-deep mat-icon svg{color:#919191!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme,.button-wrapper .icon-button:not(.has-company-color).light-theme{color:#242424!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:hover,.button-wrapper .icon-button:not(.has-company-color).light-theme:hover{background-color:#e9e9e9}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).light-theme:focus.cdk-focused,.button-wrapper .icon-button:not(.has-company-color).light-theme:focus.cdk-focused{border-color:#666}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme,.button-wrapper .icon-button:not(.has-company-color).dark-theme{color:#fff!important}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:hover,.button-wrapper .icon-button:not(.has-company-color).dark-theme:hover{background-color:#666}.button-wrapper .menuTrigger:not(.classic-theme):not(.has-company-color).dark-theme:focus.cdk-focused,.button-wrapper .icon-button:not(.has-company-color).dark-theme:focus.cdk-focused{border-color:#e9e9e9}.button-wrapper .menuTrigger:focus.cdk-focused.cdk-mouse-focused.light-theme{border:none;background-color:#e9e9e9;color:#242424}.button-wrapper .menuTrigger:focus.cdk-focused.cdk-mouse-focused.dark-theme{border:none;background-color:#666;color:#fff}.button-wrapper .right-top{position:absolute;right:-8px;top:-8px;z-index:1}.button-wrapper .right-top.badge-notification{top:-4px;right:0;border:1px solid #ffffff;border-radius:100%}.button-wrapper .right-top.badge-primary{right:-4px}::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}:host[btn-variant=link]{display:inline-flex}::ng-deep .link .button-container{display:flex}::ng-deep .link a.mat-mdc-unelevated-button.link{height:unset!important;min-width:unset!important;border-radius:10px}::ng-deep .link a.mat-mdc-unelevated-button.link:active{outline:1px dashed #666666!important}::ng-deep .link a.mat-mdc-unelevated-button.link:active .mdc-button__label{padding:0!important;outline:none!important}::ng-deep .link a.mat-mdc-unelevated-button{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button .mdc-button__label{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big,::ng-deep .link a.mat-mdc-unelevated-button.small{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big .mdc-button__label,::ng-deep .link a.mat-mdc-unelevated-button.small .mdc-button__label{padding:0!important}::ng-deep .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper{font-size:16px!important;line-height:24px!important}::ng-deep .link a.mat-mdc-unelevated-button.small .mdc-button__label .icon-label-wrapper{font-size:12px!important;line-height:16px!important}::ng-deep .link a.mat-mdc-unelevated-button .mat-mdc-button-touch-target{height:unset!important}\n"] }]
|
|
2874
2894
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2875
2895
|
type: Optional
|
|
2876
2896
|
}, {
|
|
@@ -2939,6 +2959,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
2939
2959
|
}], preventDefault: [{
|
|
2940
2960
|
type: Input,
|
|
2941
2961
|
args: [{ transform: booleanAttribute }]
|
|
2962
|
+
}], tooltipPosition: [{
|
|
2963
|
+
type: Input
|
|
2942
2964
|
}], buttonClickEvent: [{
|
|
2943
2965
|
type: Output
|
|
2944
2966
|
}], buttonHoverEvent: [{
|
|
@@ -3062,7 +3084,7 @@ class AlertBannerComponent {
|
|
|
3062
3084
|
}, 200);
|
|
3063
3085
|
}
|
|
3064
3086
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AlertBannerComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3065
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: AlertBannerComponent, selector: "ui-alert-banner", inputs: { alertType: "alertType", alertVariant: "alertVariant", message: "message", includeDismissButton: "includeDismissButton", shadow: "shadow", linkText: "linkText", linkUrl: "linkUrl", linkTarget: "linkTarget", applicationTheme: "applicationTheme", isFullWidth: "isFullWidth", closeButtonTooltip: "closeButtonTooltip", language: "language", secondaryAlerts: "secondaryAlerts" }, host: { properties: { "class.display-none": "this.isDismissed" } }, ngImport: i0, template: "<div [ngClass]=\"cssClass\" [@openClose] *ngIf=\"visible\" class=\"alert-container\" [attr.theme]=\"applicationTheme\" [class.shadow]=\"alertVariant === 'callout' && shadow ? true : false\">\n\n <div class=\"primary-alert-container\">\n <div class=\"alert-text\">\n <ui-icon class=\"left-icon\" [name]=\"iconName\" size=\"24\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n <span [innerHTML]=\"_message\"></span>\n <a *ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n </div>\n <ui-button\n *ngIf=\"includeDismissButton && applicationTheme === 'classic'\"\n variant=\"text\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n (buttonClickEvent)=\"dismissClick()\"\n ></ui-button>\n <ui-button\n *ngIf=\"includeDismissButton && applicationTheme !== 'classic' && alertVariant !== 'callout'\"\n class=\"right-icon\"\n [variant]=\"'icon-button'\"\n [applicationTheme]=\"applicationTheme\"\n [iconName]=\"'Close-in-line'\"\n [size]=\"'small'\"\n [tooltip]=\"closeButtonTooltip || ('COMMON.CLOSE' | uiTranslate : language)\"\n (click)=\"dismissClick()\"\n ></ui-button>\n </div>\n <div class=\"secondary-alerts-container\">\n <div class=\"alert-text\" *ngFor=\"let alert of _secondaryAlerts\">\n <ui-icon class=\"left-icon\" [name]=\"'Stop-filled'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n <span [innerHTML]=\"alert\"></span>\n </div>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}: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 .alert-container{max-width:1312px;flex-direction:column}:host .alert-container.fixed{top:0;z-index:98}:host .alert-container.full-width{width:100%;min-width:100%}:host .alert-container a{margin-left:7px}:host .alert-container[theme=dark] .alert-text,:host .alert-container[theme=light] .alert-text{padding:12px 0}:host .alert-container[theme=dark].banner,:host .alert-container[theme=light].banner{border-radius:0}:host .alert-container[theme=dark].callout,:host .alert-container[theme=light].callout{border-radius:10px}:host .alert-container[theme=dark].shadow,:host .alert-container[theme=light].shadow{box-shadow:0 4px 16px #2424240a}:host .alert-container[theme=dark] .left-icon,:host .alert-container[theme=light] .left-icon{margin-right:8px}:host .alert-container[theme=dark] .right-icon,:host .alert-container[theme=light] .right-icon{cursor:pointer;margin-left:8px;margin-right:2px}:host .alert-container .primary-alert-container{display:flex;justify-content:space-between;align-items:center;width:100%}:host .alert-container .secondary-alerts-container{padding-left:8px;display:flex;width:100%;flex-direction:column}:host .alert-container .secondary-alerts-container .alert-text{padding:4px 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: "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"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
|
|
3087
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: AlertBannerComponent, selector: "ui-alert-banner", inputs: { alertType: "alertType", alertVariant: "alertVariant", message: "message", includeDismissButton: "includeDismissButton", shadow: "shadow", linkText: "linkText", linkUrl: "linkUrl", linkTarget: "linkTarget", applicationTheme: "applicationTheme", isFullWidth: "isFullWidth", closeButtonTooltip: "closeButtonTooltip", language: "language", secondaryAlerts: "secondaryAlerts" }, host: { properties: { "class.display-none": "this.isDismissed" } }, ngImport: i0, template: "<div [ngClass]=\"cssClass\" [@openClose] *ngIf=\"visible\" class=\"alert-container\" [attr.theme]=\"applicationTheme\" [class.shadow]=\"alertVariant === 'callout' && shadow ? true : false\">\n\n <div class=\"primary-alert-container\">\n <div class=\"alert-text\">\n <ui-icon class=\"left-icon\" [name]=\"iconName\" size=\"24\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n <span [innerHTML]=\"_message\"></span>\n <a *ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n </div>\n <ui-button\n *ngIf=\"includeDismissButton && applicationTheme === 'classic'\"\n variant=\"text\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n (buttonClickEvent)=\"dismissClick()\"\n ></ui-button>\n <ui-button\n *ngIf=\"includeDismissButton && applicationTheme !== 'classic' && alertVariant !== 'callout'\"\n class=\"right-icon\"\n [variant]=\"'icon-button'\"\n [applicationTheme]=\"applicationTheme\"\n [iconName]=\"'Close-in-line'\"\n [size]=\"'small'\"\n [tooltip]=\"closeButtonTooltip || ('COMMON.CLOSE' | uiTranslate : language)\"\n (click)=\"dismissClick()\"\n ></ui-button>\n </div>\n <div class=\"secondary-alerts-container\">\n <div class=\"alert-text\" *ngFor=\"let alert of _secondaryAlerts\">\n <ui-icon class=\"left-icon\" [name]=\"'Stop-filled'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n <span [innerHTML]=\"alert\"></span>\n </div>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}: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 .alert-container{max-width:1312px;flex-direction:column}:host .alert-container.fixed{top:0;z-index:98}:host .alert-container.full-width{width:100%;min-width:100%}:host .alert-container a{margin-left:7px}:host .alert-container[theme=dark] .alert-text,:host .alert-container[theme=light] .alert-text{padding:12px 0}:host .alert-container[theme=dark].banner,:host .alert-container[theme=light].banner{border-radius:0}:host .alert-container[theme=dark].callout,:host .alert-container[theme=light].callout{border-radius:10px}:host .alert-container[theme=dark].shadow,:host .alert-container[theme=light].shadow{box-shadow:0 4px 16px #2424240a}:host .alert-container[theme=dark] .left-icon,:host .alert-container[theme=light] .left-icon{margin-right:8px}:host .alert-container[theme=dark] .right-icon,:host .alert-container[theme=light] .right-icon{cursor:pointer;margin-left:8px;margin-right:2px}:host .alert-container .primary-alert-container{display:flex;justify-content:space-between;align-items:center;width:100%}:host .alert-container .secondary-alerts-container{padding-left:8px;display:flex;width:100%;flex-direction:column}:host .alert-container .secondary-alerts-container .alert-text{padding:4px 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: "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: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
|
|
3066
3088
|
trigger('openClose', [
|
|
3067
3089
|
transition(':enter', [animate('0.2s ease-out', style({ opacity: 1 }))]),
|
|
3068
3090
|
transition(':leave', [animate('0.2s ease-in', style({ opacity: 0 }))]),
|
|
@@ -3540,7 +3562,11 @@ class CheckboxComponent {
|
|
|
3540
3562
|
}
|
|
3541
3563
|
}
|
|
3542
3564
|
ngAfterViewInit() {
|
|
3543
|
-
this.checkboxElement._inputElement.nativeElement
|
|
3565
|
+
const checkboxNativeInput = this.checkboxElement._inputElement.nativeElement;
|
|
3566
|
+
checkboxNativeInput.setAttribute('role', 'checkbox');
|
|
3567
|
+
checkboxNativeInput.setAttribute('aria-checked', this.checked.toString());
|
|
3568
|
+
checkboxNativeInput.setAttribute('aria-disabled', this.disabled.toString());
|
|
3569
|
+
checkboxNativeInput.setAttribute('aria-label', this.label);
|
|
3544
3570
|
this.focusMonitor.monitor(this.checkboxElement._inputElement.nativeElement).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(origin => this.ngZone.run(() => {
|
|
3545
3571
|
this.origin = origin;
|
|
3546
3572
|
this.cdr.markForCheck();
|
|
@@ -3567,6 +3593,8 @@ class CheckboxComponent {
|
|
|
3567
3593
|
this.indeterminate = false;
|
|
3568
3594
|
this.classMultiple = this.setClass();
|
|
3569
3595
|
}
|
|
3596
|
+
this.checkboxElement._inputElement.nativeElement.setAttribute('aria-checked', this.checked.toString());
|
|
3597
|
+
this.checkboxElement._inputElement.nativeElement.setAttribute('aria-disabled', this.disabled.toString());
|
|
3570
3598
|
}
|
|
3571
3599
|
setClass() {
|
|
3572
3600
|
if (this.multiple) {
|
|
@@ -3599,7 +3627,7 @@ class CheckboxComponent {
|
|
|
3599
3627
|
this.companyColor = this.companyColor ? this.companyColor : this.applicationTheme === 'classic' ? '#46A997' : '#D410AA';
|
|
3600
3628
|
}
|
|
3601
3629
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CheckboxComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i1$2.NgControl, optional: true, self: true }, { token: i2$2.FocusMonitor }, { token: i0.NgZone }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3602
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: CheckboxComponent, selector: "ui-checkbox", inputs: { disabled: "disabled", checked: "checked", indeterminate: "indeterminate", companyColor: "companyColor", name: "name", label: "label", multiple: "multiple", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", hasError: "hasError", language: "language", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", truncateText: "truncateText", alignment: "alignment" }, outputs: { changed: "changed" }, host: { listeners: { "focus": "checkboxElement.focus()" }, properties: { "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "style.--color": "this.companyColor" } }, viewQueries: [{ propertyName: "tooltipElement", first: true, predicate: ["tooltip"], descendants: true }, { propertyName: "checkboxElement", first: true, predicate: ["checkbox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #checkboxContainer\n [class]=\"multiple ? 'checkbox-container' : 'checkbox'\"\n [ngClass]=\"classMultiple\"\n [attr.alignment]=\"alignment\"\n [attr.truncate-text]=\"truncateText\"\n [attr.theme]=\"applicationTheme\"\n [attr.hasError]=\"hasError\"\n (keydown.enter)=\"toggleChecked(); checkboxContainer.focus()\"\n (keydown.space)=\"toggleChecked(); checkboxContainer.focus()\"\n>\n <mat-checkbox\n #checkbox\n (mouseleave)=\"checkbox.disableRipple = true\"\n (mouseenter)=\"checkbox.disableRipple = false\"\n [indeterminate]=\"indeterminate\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [ngClass]=\"[checkbox.disableRipple ? 'disable-ripple' : '', origin ? 'cdk-' + origin + '-focused' : '']\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n [aria-describedby]=\"ariaDescribedby || 'ariaDescribedby'\"\n (click)=\"toggleChecked()\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown.space)=\"$event.preventDefault()\"\n class=\"checkbox\"\n >\n <span\n #tooltip=\"matTooltip\"\n class=\"label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n [matTooltip]=\"showTooltip && truncateText ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >\n {{ label }}\n </span>\n <ng-content select=\"[checkbox-label]\"></ng-content>\n </mat-checkbox>\n\n <mat-hint class=\"error\" *ngIf=\"ngControl?.errors | hasValidationError\">\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n </mat-hint>\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-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff!important}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__ripple{background-color:var(--color)}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mdc-checkbox__native-control:indeterminate~.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888;--color: $tgo-dark !important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox{opacity:.5}.checkbox,.checkbox-container{--border-width-default-state: 4px;--border-width-animation-state: 6px;width:100%}.checkbox[alignment=top] ::ng-deep .mdc-form-field,.checkbox-container[alignment=top] ::ng-deep .mdc-form-field{align-items:start}.checkbox[alignment=top] .label,.checkbox-container[alignment=top] .label{margin-top:10px}.checkbox[truncate-text=true] .label,.checkbox[truncate-text=true] ::ng-deep label,.checkbox-container[truncate-text=true] .label,.checkbox-container[truncate-text=true] ::ng-deep label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes focus-ring-animation{0%{outline-width:var(--border-width-animation-state)}to{outline-width:var(--border-width-default-state)}}.checkbox .cdk-keyboard-focused,.checkbox-container .cdk-keyboard-focused{outline:none}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__ripple,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__ripple{display:none}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background{outline:3px solid #242424;animation:focus-ring-animation .4s forwards}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background:after,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background:after{content:\"\";position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);top:-1px;left:-1px;outline:2px solid #ffffff;border-radius:4px}.checkbox[hasError=true],.checkbox-container[hasError=true]{--border-width-default-state: 6px;--border-width-animation-state: 8px}.checkbox[hasError=true]:focus-visible ::ng-deep .mdc-checkbox__background:after,.checkbox-container[hasError=true]:focus-visible ::ng-deep .mdc-checkbox__background:after{width:calc(100% + 4px);height:calc(100% + 4px);top:-2px;left:-2px}[theme=dark],[theme=light],.dark,.light{--mdc-checkbox-unselected-icon-color: #242424 !important}[theme=dark] .mat-mdc-checkbox,[theme=light] .mat-mdc-checkbox,.dark .mat-mdc-checkbox,.light .mat-mdc-checkbox{width:100%}[theme=dark] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,[theme=light] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.dark .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.light .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple{display:none}[theme=dark] ::ng-deep .mdc-form-field,[theme=light] ::ng-deep .mdc-form-field,.dark ::ng-deep .mdc-form-field,.light ::ng-deep .mdc-form-field{width:100%}[theme=dark] ::ng-deep .mdc-checkbox__background,[theme=light] ::ng-deep .mdc-checkbox__background,.dark ::ng-deep .mdc-checkbox__background,.light ::ng-deep .mdc-checkbox__background{border-radius:4px;transform:scale(.9);background:#fff!important;border-width:1px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox{opacity:1!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#e9e9e9!important;border-color:#919191!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#919191;width:8px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg{color:#919191!important}[theme=dark] ::ng-deep .mdc-checkbox__checkmark,[theme=light] ::ng-deep .mdc-checkbox__checkmark,.dark ::ng-deep .mdc-checkbox__checkmark,.light ::ng-deep .mdc-checkbox__checkmark{width:12px;height:12px;left:calc(50% - 6px);top:calc(50% - 6px)}[theme=dark] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark{width:12px}::ng-deep .mdc-checkbox__ripple{background:var(--color)!important}::ng-deep .mat-mdc-checkbox .mdc-form-field .mdc-label{padding-left:0}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-checked ::ng-deep .mdc-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-checked[theme=classic] .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background{border:1px solid #ffffff!important;border-color:#fff!important}.multiple-checked ::ng-deep label{color:#fff}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#fff;border-radius:10px;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-checked[theme=classic][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800}.multiple-unchecked{border:1px solid #E0E0E0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-unchecked ::ng-deep .mdc-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #E0E0E0}.multiple-unchecked ::ng-deep .mdc-checkbox__background{border:1px solid #000000}.multiple-unchecked ::ng-deep .mdc-checkbox__native-control:not([disabled]):focus~.mdc-checkbox__ripple{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff;border-radius:10px}.multiple-unchecked[theme=dark][hasError=false] ::ng-deep .mdc-checkbox__background,.multiple-unchecked[theme=light][hasError=false] ::ng-deep .mdc-checkbox__background{border:1px solid #242424!important}.multiple-unchecked[theme=dark][hasError=false]:hover,.multiple-unchecked[theme=light][hasError=false]:hover{outline:1px solid #242424;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}*[hasError=true]{--mdc-checkbox-unselected-icon-color: #E02800 !important;--mdc-checkbox-unselected-hover-icon-color: #E02800 !important;--mdc-checkbox-unselected-focus-icon-color: #E02800 !important}*[hasError=true] ::ng-deep .mdc-checkbox__background{border-width:2px!important}.checkbox-container{cursor:pointer}.checkbox-container .label{-webkit-user-select:none;user-select:none}.checkbox .label{display:block;width:100%;cursor:pointer}\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: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "language"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline"], outputs: ["onChangeTextState"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3630
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: CheckboxComponent, selector: "ui-checkbox", inputs: { disabled: "disabled", checked: "checked", indeterminate: "indeterminate", companyColor: "companyColor", name: "name", label: "label", multiple: "multiple", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", hasError: "hasError", language: "language", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", truncateText: "truncateText", alignment: "alignment" }, outputs: { changed: "changed" }, host: { listeners: { "focus": "checkboxElement.focus()" }, properties: { "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "style.--color": "this.companyColor" } }, viewQueries: [{ propertyName: "tooltipElement", first: true, predicate: ["tooltip"], descendants: true }, { propertyName: "checkboxElement", first: true, predicate: ["checkbox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #checkboxContainer\n [class]=\"multiple ? 'checkbox-container' : 'checkbox'\"\n [ngClass]=\"classMultiple\"\n [attr.alignment]=\"alignment\"\n [attr.truncate-text]=\"truncateText\"\n [attr.theme]=\"applicationTheme\"\n [attr.hasError]=\"hasError\"\n (keydown.enter)=\"toggleChecked(); checkboxContainer.focus()\"\n (keydown.space)=\"toggleChecked(); checkboxContainer.focus()\"\n>\n <mat-checkbox\n #checkbox\n (mouseleave)=\"checkbox.disableRipple = true\"\n (mouseenter)=\"checkbox.disableRipple = false\"\n [indeterminate]=\"indeterminate\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [ngClass]=\"[checkbox.disableRipple ? 'disable-ripple' : '', origin ? 'cdk-' + origin + '-focused' : '']\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n [aria-describedby]=\"ariaDescribedby || 'ariaDescribedby'\"\n (click)=\"toggleChecked()\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown.space)=\"$event.preventDefault()\"\n class=\"checkbox\"\n >\n <span\n #tooltip=\"matTooltip\"\n class=\"label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n [matTooltip]=\"showTooltip && truncateText ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >\n {{ label }}\n </span>\n <ng-content select=\"[checkbox-label]\"></ng-content>\n </mat-checkbox>\n\n <mat-hint class=\"error\" *ngIf=\"ngControl?.errors | hasValidationError\">\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n </mat-hint>\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-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff!important}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__ripple{background-color:var(--color)}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mdc-checkbox__native-control:indeterminate~.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888;--color: $tgo-dark !important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox{opacity:.5}.checkbox,.checkbox-container{--border-width-default-state: 4px;--border-width-animation-state: 6px;width:100%}.checkbox[alignment=top] ::ng-deep .mdc-form-field,.checkbox-container[alignment=top] ::ng-deep .mdc-form-field{align-items:start}.checkbox[alignment=top] .label,.checkbox-container[alignment=top] .label{margin-top:10px}.checkbox[truncate-text=true] .label,.checkbox[truncate-text=true] ::ng-deep label,.checkbox-container[truncate-text=true] .label,.checkbox-container[truncate-text=true] ::ng-deep label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes focus-ring-animation{0%{outline-width:var(--border-width-animation-state)}to{outline-width:var(--border-width-default-state)}}.checkbox .cdk-keyboard-focused,.checkbox-container .cdk-keyboard-focused{outline:none}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__ripple,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__ripple{display:none}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background{outline:3px solid #242424;animation:focus-ring-animation .4s forwards}.checkbox .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background:after,.checkbox-container .cdk-keyboard-focused ::ng-deep .mdc-checkbox__background:after{content:\"\";position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);top:-1px;left:-1px;outline:2px solid #ffffff;border-radius:4px}.checkbox[hasError=true],.checkbox-container[hasError=true]{--border-width-default-state: 6px;--border-width-animation-state: 8px}.checkbox[hasError=true]:focus-visible ::ng-deep .mdc-checkbox__background:after,.checkbox-container[hasError=true]:focus-visible ::ng-deep .mdc-checkbox__background:after{width:calc(100% + 4px);height:calc(100% + 4px);top:-2px;left:-2px}[theme=dark],[theme=light],.dark,.light{--mdc-checkbox-unselected-icon-color: #242424 !important}[theme=dark] .mat-mdc-checkbox,[theme=light] .mat-mdc-checkbox,.dark .mat-mdc-checkbox,.light .mat-mdc-checkbox{width:100%}[theme=dark] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,[theme=light] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.dark .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.light .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple{display:none}[theme=dark] ::ng-deep .mdc-form-field,[theme=light] ::ng-deep .mdc-form-field,.dark ::ng-deep .mdc-form-field,.light ::ng-deep .mdc-form-field{width:100%}[theme=dark] ::ng-deep .mdc-checkbox__background,[theme=light] ::ng-deep .mdc-checkbox__background,.dark ::ng-deep .mdc-checkbox__background,.light ::ng-deep .mdc-checkbox__background{border-radius:4px;transform:scale(.9);background:#fff!important;border-width:1px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox{opacity:1!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#e9e9e9!important;border-color:#919191!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#919191;width:8px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg{color:#919191!important}[theme=dark] ::ng-deep .mdc-checkbox__checkmark,[theme=light] ::ng-deep .mdc-checkbox__checkmark,.dark ::ng-deep .mdc-checkbox__checkmark,.light ::ng-deep .mdc-checkbox__checkmark{width:12px;height:12px;left:calc(50% - 6px);top:calc(50% - 6px)}[theme=dark] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark{width:12px}::ng-deep .mdc-checkbox__ripple{background:var(--color)!important}::ng-deep .mat-mdc-checkbox .mdc-form-field .mdc-label{padding-left:0}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-checked ::ng-deep .mdc-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-checked[theme=classic] .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background{border:1px solid #ffffff!important;border-color:#fff!important}.multiple-checked ::ng-deep label{color:#fff}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#fff;border-radius:10px;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-checked[theme=classic][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800}.multiple-unchecked{border:1px solid #E0E0E0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-unchecked ::ng-deep .mdc-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #E0E0E0}.multiple-unchecked ::ng-deep .mdc-checkbox__background{border:1px solid #000000}.multiple-unchecked ::ng-deep .mdc-checkbox__native-control:not([disabled]):focus~.mdc-checkbox__ripple{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff;border-radius:10px}.multiple-unchecked[theme=dark][hasError=false] ::ng-deep .mdc-checkbox__background,.multiple-unchecked[theme=light][hasError=false] ::ng-deep .mdc-checkbox__background{border:1px solid #242424!important}.multiple-unchecked[theme=dark][hasError=false]:hover,.multiple-unchecked[theme=light][hasError=false]:hover{outline:1px solid #242424;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}*[hasError=true]{--mdc-checkbox-unselected-icon-color: #E02800 !important;--mdc-checkbox-unselected-hover-icon-color: #E02800 !important;--mdc-checkbox-unselected-focus-icon-color: #E02800 !important}*[hasError=true] ::ng-deep .mdc-checkbox__background{border-width:2px!important}.checkbox-container{cursor:pointer}.checkbox-container .label{-webkit-user-select:none;user-select:none}.checkbox .label{display:block;width:100%;cursor:pointer}\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: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "language"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3603
3631
|
}
|
|
3604
3632
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
3605
3633
|
type: Component,
|
|
@@ -3886,7 +3914,7 @@ class DialogComponent {
|
|
|
3886
3914
|
this.primaryButtonClickEvent.emit(event);
|
|
3887
3915
|
}
|
|
3888
3916
|
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 }); }
|
|
3889
|
-
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" }, outputs: { closeEvent: "closeEvent", secondaryButtonClickEvent: "secondaryButtonClickEvent", primaryButtonClickEvent: "primaryButtonClickEvent" }, host: { properties: { "style.--color": "this.companyColor" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n <div mat-dialog-title class=\"dialog-title\">\n <h3 class=\"bold\">{{ title }}</h3>\n <div *ngIf=\"showCloseButton\">\n <ui-button\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</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;flex-flow:column}.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"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3917
|
+
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" }, outputs: { closeEvent: "closeEvent", secondaryButtonClickEvent: "secondaryButtonClickEvent", primaryButtonClickEvent: "primaryButtonClickEvent" }, host: { properties: { "style.--color": "this.companyColor" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n <div mat-dialog-title class=\"dialog-title\">\n <h3 class=\"bold\">{{ title }}</h3>\n <div *ngIf=\"showCloseButton\">\n <ui-button\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</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;flex-flow:column}.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 }); }
|
|
3890
3918
|
}
|
|
3891
3919
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DialogComponent, decorators: [{
|
|
3892
3920
|
type: Component,
|
|
@@ -3941,13 +3969,14 @@ class DialogService {
|
|
|
3941
3969
|
this.matDialog = matDialog;
|
|
3942
3970
|
this.defaultAppTheme = defaultAppTheme;
|
|
3943
3971
|
}
|
|
3944
|
-
open(dialogComponent, applicationTheme = 'light', size = 'small', panelClass = '', extraData) {
|
|
3972
|
+
open(dialogComponent, applicationTheme = 'light', size = 'small', panelClass = '', extraData, backdropClass = '') {
|
|
3945
3973
|
// Open the dialog using UI custom styles
|
|
3946
3974
|
return this.matDialog.open(dialogComponent, {
|
|
3947
3975
|
data: {
|
|
3948
3976
|
applicationTheme: this.defaultAppTheme ?? applicationTheme,
|
|
3949
3977
|
...extraData,
|
|
3950
3978
|
},
|
|
3979
|
+
backdropClass: backdropClass || '',
|
|
3951
3980
|
panelClass: applicationTheme === 'classic'
|
|
3952
3981
|
? ['ui-dialog-wrapper', panelClass, size]
|
|
3953
3982
|
: ['ui-dialog-wrapper', panelClass, applicationTheme, size],
|
|
@@ -4144,12 +4173,15 @@ class FieldComponent {
|
|
|
4144
4173
|
}
|
|
4145
4174
|
}
|
|
4146
4175
|
}
|
|
4147
|
-
constructor(defaultAppTheme, matIconRegistry, domSanitizer, cdr, ngControl) {
|
|
4176
|
+
constructor(defaultAppTheme, matIconRegistry, domSanitizer, cdr, ngControl, focusMonitor, ngZone, destroyRef) {
|
|
4148
4177
|
this.defaultAppTheme = defaultAppTheme;
|
|
4149
4178
|
this.matIconRegistry = matIconRegistry;
|
|
4150
4179
|
this.domSanitizer = domSanitizer;
|
|
4151
4180
|
this.cdr = cdr;
|
|
4152
4181
|
this.ngControl = ngControl;
|
|
4182
|
+
this.focusMonitor = focusMonitor;
|
|
4183
|
+
this.ngZone = ngZone;
|
|
4184
|
+
this.destroyRef = destroyRef;
|
|
4153
4185
|
this.class = 'ui-field';
|
|
4154
4186
|
/**
|
|
4155
4187
|
* Indicator of the autocomplete width
|
|
@@ -4306,11 +4338,31 @@ class FieldComponent {
|
|
|
4306
4338
|
* @memberof FieldComponent
|
|
4307
4339
|
*/
|
|
4308
4340
|
this.textareaHeight = 110;
|
|
4341
|
+
/**
|
|
4342
|
+
* A string representing the ARIA requirement for accessibility.
|
|
4343
|
+
* This attribute is used to indicate whether an input field is required for form submission.
|
|
4344
|
+
* @type {string}
|
|
4345
|
+
* @memberof FieldComponent
|
|
4346
|
+
*/
|
|
4347
|
+
this.ariaLabelledby = '';
|
|
4348
|
+
/**
|
|
4349
|
+
* A string representing the ARIA requirement for accessibility.
|
|
4350
|
+
* This attribute is used to indicate whether an input field is required for form submission.
|
|
4351
|
+
* @type {string}
|
|
4352
|
+
* @memberof FieldComponent
|
|
4353
|
+
*/
|
|
4354
|
+
this.ariaDescribedby = '';
|
|
4355
|
+
/**
|
|
4356
|
+
* Show state of error
|
|
4357
|
+
* @type {boolean}
|
|
4358
|
+
* @memberof FieldComponent
|
|
4359
|
+
*/
|
|
4309
4360
|
this.hasError = false;
|
|
4310
4361
|
this.validateEvent = new EventEmitter();
|
|
4311
4362
|
this.fieldBlur = new EventEmitter();
|
|
4312
4363
|
this.isActiveField = false;
|
|
4313
4364
|
this.isActiveHover = false;
|
|
4365
|
+
this.keyboardFocused = signal(false);
|
|
4314
4366
|
this.translationContext = 'FIELD.';
|
|
4315
4367
|
/**
|
|
4316
4368
|
* @ignore
|
|
@@ -4328,6 +4380,12 @@ class FieldComponent {
|
|
|
4328
4380
|
this.ngControl.valueAccessor = this;
|
|
4329
4381
|
}
|
|
4330
4382
|
}
|
|
4383
|
+
ngAfterViewInit() {
|
|
4384
|
+
this.focusMonitor.monitor(this.field).pipe(takeUntilDestroyed(this.destroyRef))
|
|
4385
|
+
.subscribe(origin => this.ngZone.run(() => {
|
|
4386
|
+
this.keyboardFocused.set(origin === 'keyboard');
|
|
4387
|
+
}));
|
|
4388
|
+
}
|
|
4331
4389
|
/**
|
|
4332
4390
|
* Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors
|
|
4333
4391
|
* to display validation errors that might happen (e.g. required)
|
|
@@ -4454,12 +4512,12 @@ class FieldComponent {
|
|
|
4454
4512
|
onBlur() {
|
|
4455
4513
|
this.fieldBlur.emit();
|
|
4456
4514
|
}
|
|
4457
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: FieldComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1.MatIconRegistry }, { token: i2.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4458
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: FieldComponent, selector: "ui-field", inputs: { fullWidth: "fullWidth", label: "label", fieldName: "fieldName", placeholder: "placeholder", id: "id", value: "value", errors: "errors", disabled: "disabled", required: "required", hintMessage: "hintMessage", type: "type", updateOnBlur: "updateOnBlur", allowOnlyDigits: "allowOnlyDigits", allowNegative: "allowNegative", language: "language", showBottomContent: "showBottomContent", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", loading: "loading", isValid: "isValid", maxCharacters: "maxCharacters", trimOnBlur: "trimOnBlur", trimOnSubmit: "trimOnSubmit", maxRows: "maxRows", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", max: "max", min: "min", textareaHeight: "textareaHeight", hasError: "hasError" }, outputs: { validateEvent: "validateEvent", fieldBlur: "fieldBlur" }, host: { properties: { "class": "this.class", "class.full-width": "this.fullWidth", "attr.field-class": "this.type", "attr.theme": "this.applicationTheme" } }, ngImport: i0, template: "<ng-container>\n <mat-form-field\n [ngStyle]=\"{ '--textarea-height': (textareaHeight - 10) + 'px', '--textarea-height-container': textareaHeight + 'px' }\"\n (click)=\"onFieldClick($event)\"\n #uiField\n appearance=\"outline\"\n [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched ) || hasError) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, textarea: type === 'textarea', 'multi-line': type === 'multi-line' }\"\n (mouseenter)=\"onActive(true, 'hover')\"\n (mouseleave)=\"onActive(false, 'hover')\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"required\"\n >\n <mat-label *ngIf=\"label && ((type !== 'search' && applicationTheme === 'classic') || (applicationTheme !== 'classic'))\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <mat-icon *ngIf=\"type === 'search' || type === 'collapsed-search'\" matIconPrefix class=\"search-icon\" [svgIcon]=\"'Search'\"></mat-icon>\n <input\n *ngIf=\"type !== 'textarea' && type !== 'multi-line'; else textarea\"\n matInput\n (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n (input)=\"onInput($event)\"\n [id]=\"id!\"\n (keyup)=\"onChangeInputSearch()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled || loading\"\n [type]=\"currentType\"\n (keyup.enter)=\"onSubmit()\"\n [max]=\"max\"\n [min]=\"min\"\n [name]=\"fieldName!\"\n digitsOnly\n [allowOnlyDigits]=\"allowOnlyDigits\"\n [allowNegative]=\"allowNegative\"\n (focusin)=\"onActive(true, 'focus')\"\n />\n\n <ng-template #textarea>\n <textarea\n matInput\n (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n (input)=\"onInput($event)\"\n [id]=\"id!\"\n (keyup)=\"onChangeInputSearch()\"\n (keyup.enter)=\"onSubmit()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [type]=\"currentType\"\n [name]=\"fieldName!\"\n [cdkTextareaAutosize]=\"type === 'multi-line'\"\n [cdkAutosizeMinRows]=\"type === 'multi-line' ? 1 : 5\"\n [cdkAutosizeMaxRows]=\"type === 'multi-line' ? maxRows : 5 \"\n (focusin)=\"onActive(true, 'focus')\"\n ></textarea>\n </ng-template>\n\n <div class=\"options\" *ngIf=\"type === 'search' || type === 'password' || type === 'validation-text'\">\n <div class=\"options-container\">\n <ui-button\n *ngIf=\"showClose\"\n variant=\"secondary\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n [label]=\"('COMMON.CLEAR') | uiTranslate : language\"\n (buttonClickEvent)=\"clearValue()\"\n [ariaLabel]=\"ariaLabel + '--' + ('COMMON.CLEAR') | uiTranslate : language\"\n ></ui-button>\n <ui-icon\n [size]=\"'24'\"\n class=\"password\"\n *ngIf=\"type === 'password'\"\n [name]=\"getPasswordIcon\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"showPasswordClick()\"\n ></ui-icon>\n\n <ng-container\n *ngIf=\"type === 'validation-text' && (applicationTheme === 'dark' || applicationTheme === 'light') && value.length\"\n >\n <ui-button\n *ngIf=\"!isValid\"\n class=\"validation\"\n [variant]=\"'text'\"\n [applicationTheme]=\"'light'\"\n [label]=\"'Validate'\"\n [loading]=\"loading\"\n (click)=\"validate()\"\n [disabled]=\"disabled\"\n [size]=\"'small'\"\n ></ui-button>\n <ui-icon class=\"valid\" [color]=\"'white'\" applicationTheme=\"light\" [name]=\"'Check'\" *ngIf=\"isValid\"></ui-icon>\n </ng-container>\n </div>\n </div>\n <mat-hint class=\"info\" *ngIf=\"type === 'textarea' && !errorsLength && !(ngControl?.errors | hasValidationError)\">{{ value.length }} / {{ maxCharacters }}</mat-hint>\n <mat-hint class=\"info\" *ngIf=\"hintMessage && !errorsLength && !(ngControl?.errors | hasValidationError) && type !== 'textarea'\">{{ hintMessage }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n <ng-template [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-template>\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", 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}.active-field .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[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-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[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-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[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-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.ui-field{display:block;width:320px}.ui-field.full-width{width:100%}.ui-field[field-class=collapsed-search]{width:56px!important;display:block}.ui-field[field-class=collapsed-search] mat-form-field{width:56px!important}.ui-field[field-class=collapsed-search] .mat-mdc-floating-label{display:none!important}.ui-field[field-class=collapsed-search] .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;width:100vw!important}.ui-field .mat-mdc-form-field-subscript-wrapper{margin:0!important}.ui-field[field-class=search][theme=classic] .mat-mdc-form-field:hover.mat-form-field-appearance-outline .mdc-notched-outline__notch,.ui-field[field-class=search][theme=classic] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__notch{border-top:2px solid #276678!important}.ui-field[field-class=search][theme=classic] .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__notch{border-top:1px solid var(--mdc-outlined-text-field-outline-color)!important}.ui-field[field-class=search][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-field[field-class=search][theme=light] .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{top:28px!important}.ui-field[field-class=search][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:not(.mdc-floating-label--float-above),.ui-field[field-class=search][theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field input[type=search]::-webkit-search-decoration,.ui-field input[type=search]::-webkit-search-cancel-button,.ui-field input[type=search]::-webkit-search-results-button,.ui-field input[type=search]::-webkit-search-results-decoration{display:none}.ui-field .mat-mdc-form-field{margin-top:0;width:100%}.ui-field .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-field .mat-mdc-form-field.multi-line .mat-mdc-text-field-wrapper{height:auto!important}.ui-field .mat-mdc-form-field.multi-line .mat-mdc-form-field-infix{min-height:48px!important}.ui-field .mat-mdc-form-field.multi-line textarea{margin-top:8px;min-height:32px!important}.ui-field .mat-mdc-form-field.textarea .mat-mdc-text-field-wrapper{height:var(--textarea-height-container)!important}.ui-field .mat-mdc-form-field.textarea textarea{max-height:var(--textarea-height)!important;min-height:var(--textarea-height)!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-color:#276678!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-color:#cb7b7a!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field .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-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-field .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-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:4px;font-size:12px;line-height:16px;position:relative}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%;text-align:right}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-prefix,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .search-icon{padding:12px 8px 12px 16px;color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-field .mat-mdc-form-field.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-field .mat-mdc-form-field.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-field .mat-mdc-form-field.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-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.search svg,.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.password svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-icon svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button.close svg{color:#888}.ui-field .mat-mdc-form-field .options .options-container{display:flex;column-gap:8px;padding-left:8px}.ui-field .mat-mdc-form-field .options .options-container ui-icon.valid mat-icon{background:#3c9a13;border-radius:100%}.ui-field .mat-mdc-form-field .options .options-container ui-icon.valid mat-icon svg{color:#fff!important}.ui-field .mat-mdc-form-field .options .options-container ui-button.validation svg circle{stroke:#d410aa}.ui-field .mat-mdc-form-field .options .options-container ui-button.validation *{color:#d410aa}.ui-field .mat-mdc-form-field .options .options-container ui-button,.ui-field .mat-mdc-form-field .options .options-container ui-icon{display:flex}.ui-field .mat-mdc-form-field .options .options-container ui-button svg,.ui-field .mat-mdc-form-field .options .options-container ui-icon svg{color:#888}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon{padding:0;height:auto;background:transparent}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:hover,.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element,.ui-field .mat-mdc-form-field.mat-form-field-disabled .mdc-floating-label{pointer-events:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch label,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch label{color:#919191!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-notched-outline__notch label,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-notched-outline__notch label{color:#e9e9e9!important}.ui-field[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-field[theme=light] .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:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading{border-top-left-radius:10px;border-bottom-left-radius:10px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-top-right-radius:10px;border-bottom-right-radius:10px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .password .icon-only-wrapper svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .password .icon-only-wrapper svg{color:#242424!important}.ui-field[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:not(.mdc-floating-label--float-above),.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[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-field[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-field[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-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#242424!important}.ui-field[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-field[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-field[theme=light] .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-field[theme=light] .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{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error svg{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#e02800!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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.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: i7.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { 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"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "language"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[digitsOnly]", inputs: ["allowNegative", "allowDecimal", "allowOnlyDigits"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4515
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: FieldComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1.MatIconRegistry }, { token: i2.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: i1$2.NgControl, optional: true, self: true }, { token: i2$2.FocusMonitor }, { token: i0.NgZone }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4516
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: FieldComponent, selector: "ui-field", inputs: { fullWidth: "fullWidth", label: "label", fieldName: "fieldName", placeholder: "placeholder", id: "id", value: "value", errors: "errors", disabled: "disabled", required: "required", hintMessage: "hintMessage", type: "type", updateOnBlur: "updateOnBlur", allowOnlyDigits: "allowOnlyDigits", allowNegative: "allowNegative", language: "language", showBottomContent: "showBottomContent", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", loading: "loading", isValid: "isValid", maxCharacters: "maxCharacters", trimOnBlur: "trimOnBlur", trimOnSubmit: "trimOnSubmit", maxRows: "maxRows", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", max: "max", min: "min", textareaHeight: "textareaHeight", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", hasError: "hasError" }, outputs: { validateEvent: "validateEvent", fieldBlur: "fieldBlur" }, host: { properties: { "class": "this.class", "class.full-width": "this.fullWidth", "attr.field-class": "this.type", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "field", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<ng-container>\n <mat-form-field\n [ngStyle]=\"{ '--textarea-height': (textareaHeight - 10) + 'px', '--textarea-height-container': textareaHeight + 'px' }\"\n (click)=\"onFieldClick($event)\"\n #uiField\n appearance=\"outline\"\n [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched ) || hasError) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, textarea: type === 'textarea', 'multi-line': type === 'multi-line', 'keyboard-focused': keyboardFocused(), 'has-label': !!label }\"\n (mouseenter)=\"onActive(true, 'hover')\"\n (mouseleave)=\"onActive(false, 'hover')\"\n >\n <span [style.display]=\"'none'\" [id]=\"'ariaDescribedby'\">\n <span *ngIf=\"required\">{{ 'ERRORS.REQUIRED' | uiTranslate : language }}</span>\n {{ ariaDescribedby }}\n </span>\n <span [style.display]=\"'none'\" [id]=\"'ariaLabelledby'\">\n {{ ariaLabelledby || label }}\n </span>\n <mat-label [id]=\"'label'\" *ngIf=\"label && ((type !== 'search' && applicationTheme === 'classic') || (applicationTheme !== 'classic'))\">{{ label }}</mat-label>\n <mat-icon *ngIf=\"type === 'search' || type === 'collapsed-search'\" matIconPrefix class=\"search-icon\" [svgIcon]=\"'Search'\"></mat-icon>\n <input\n *ngIf=\"type !== 'textarea' && type !== 'multi-line'; else textarea\"\n matInput\n #inputElement\n (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n (input)=\"onInput($event)\"\n [id]=\"id!\"\n (keyup)=\"onChangeInputSearch()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled || loading\"\n [type]=\"currentType\"\n (keyup.enter)=\"onSubmit()\"\n [max]=\"max\"\n [min]=\"min\"\n [name]=\"fieldName!\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-invalid]=\"errorsLength || (ngControl?.errors && ngControl?.touched ) || hasError\"\n [attr.aria-labelledby]=\"'ariaLabelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n role=\"textbox\"\n digitsOnly\n [allowOnlyDigits]=\"allowOnlyDigits\"\n [allowNegative]=\"allowNegative\"\n (focusin)=\"onActive(true, 'focus')\"\n />\n\n <ng-template #textarea>\n <textarea\n matInput\n #inputElement\n (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n (input)=\"onInput($event)\"\n [id]=\"id!\"\n (keyup)=\"onChangeInputSearch()\"\n (keyup.enter)=\"onSubmit()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [type]=\"currentType\"\n [name]=\"fieldName!\"\n [required]=\"required\"\n [attr.aria-label]=\"!label ? ariaLabel : ''\"\n [attr.aria-invalid]=\"errorsLength || (ngControl?.errors && ngControl?.touched ) || hasError\"\n [attr.aria-labelledby]=\"'ariaLabelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n role=\"textbox\"\n [cdkTextareaAutosize]=\"type === 'multi-line'\"\n [cdkAutosizeMinRows]=\"type === 'multi-line' ? 1 : 5\"\n [cdkAutosizeMaxRows]=\"type === 'multi-line' ? maxRows : 5 \"\n (focusin)=\"onActive(true, 'focus')\"\n ></textarea>\n </ng-template>\n\n <div class=\"options\" *ngIf=\"type === 'search' || type === 'password' || type === 'validation-text'\">\n <div class=\"options-container\">\n <ui-button\n *ngIf=\"showClose\"\n variant=\"secondary\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n [label]=\"('COMMON.CLEAR') | uiTranslate : language\"\n (buttonClickEvent)=\"clearValue()\"\n [ariaLabel]=\"ariaLabel + '--' + ('COMMON.CLEAR') | uiTranslate : language\"\n ></ui-button>\n <ui-icon\n [size]=\"'24'\"\n class=\"password\"\n *ngIf=\"type === 'password'\"\n [name]=\"getPasswordIcon\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"showPasswordClick()\"\n ></ui-icon>\n\n <ng-container\n *ngIf=\"type === 'validation-text' && (applicationTheme === 'dark' || applicationTheme === 'light') && value.length\"\n >\n <ui-button\n *ngIf=\"!isValid\"\n class=\"validation\"\n [variant]=\"'text'\"\n [applicationTheme]=\"'light'\"\n [label]=\"'Validate'\"\n [loading]=\"loading\"\n (click)=\"validate()\"\n [disabled]=\"disabled\"\n [size]=\"'small'\"\n ></ui-button>\n <ui-icon class=\"valid\" [color]=\"'white'\" applicationTheme=\"light\" [name]=\"'Check'\" *ngIf=\"isValid\"></ui-icon>\n </ng-container>\n </div>\n </div>\n <mat-hint class=\"info\" *ngIf=\"type === 'textarea' && !errorsLength && !(ngControl?.errors | hasValidationError)\">{{ value.length }} / {{ maxCharacters }}</mat-hint>\n <mat-hint class=\"info\" *ngIf=\"hintMessage && !errorsLength && !(ngControl?.errors | hasValidationError) && type !== 'textarea'\">{{ hintMessage }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n <ng-template [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-template>\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", 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-form-field.keyboard-focused{position:relative}.mat-mdc-form-field.keyboard-focused .mat-mdc-text-field-wrapper:after{content:\"\";position:absolute;top:0;border-radius:10px;left:0;width:100%;height:100%;outline:2px solid #ffffff;z-index:1}.mat-mdc-form-field.keyboard-focused .mat-mdc-form-field-subscript-wrapper{z-index:-1}.mat-mdc-form-field.has-label .mdc-notched-outline__notch{position:relative}.mat-mdc-form-field.has-label .mdc-notched-outline__notch:after{content:\"\";position:absolute;top:0;left:0;background:#fff;width:100%;height:5px;z-index:-1}.active-field .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[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-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[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-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[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-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.ui-field{display:block;width:320px}.ui-field.full-width{width:100%}.ui-field[field-class=collapsed-search]{width:56px!important;display:block}.ui-field[field-class=collapsed-search] mat-form-field{width:56px!important}.ui-field[field-class=collapsed-search] .mat-mdc-floating-label{display:none!important}.ui-field[field-class=collapsed-search] .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;width:100vw!important}.ui-field .mat-mdc-form-field-subscript-wrapper{margin:0!important}.ui-field[field-class=search][theme=classic] .mat-mdc-form-field:hover.mat-form-field-appearance-outline .mdc-notched-outline__notch,.ui-field[field-class=search][theme=classic] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__notch{border-top:2px solid #276678!important}.ui-field[field-class=search][theme=classic] .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__notch{border-top:1px solid var(--mdc-outlined-text-field-outline-color)!important}.ui-field[field-class=search][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-field[field-class=search][theme=light] .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{top:28px!important}.ui-field[field-class=search][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:not(.mdc-floating-label--float-above),.ui-field[field-class=search][theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field input[type=search]::-webkit-search-decoration,.ui-field input[type=search]::-webkit-search-cancel-button,.ui-field input[type=search]::-webkit-search-results-button,.ui-field input[type=search]::-webkit-search-results-decoration{display:none}.ui-field .mat-mdc-form-field{margin-top:0;width:100%}.ui-field .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-field .mat-mdc-form-field.multi-line .mat-mdc-text-field-wrapper{height:auto!important}.ui-field .mat-mdc-form-field.multi-line .mat-mdc-form-field-infix{min-height:48px!important}.ui-field .mat-mdc-form-field.multi-line textarea{margin-top:8px;min-height:32px!important}.ui-field .mat-mdc-form-field.textarea .mat-mdc-text-field-wrapper{height:var(--textarea-height-container)!important}.ui-field .mat-mdc-form-field.textarea textarea{max-height:var(--textarea-height)!important;min-height:var(--textarea-height)!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-color:#276678!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-color:#cb7b7a!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-field .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-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:4px;font-size:12px;line-height:16px;position:relative}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%;text-align:right}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-prefix,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .search-icon{padding:12px 8px 12px 16px;color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-field .mat-mdc-form-field.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-field .mat-mdc-form-field.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-field .mat-mdc-form-field.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-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.search svg,.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.password svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-icon svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button.close svg{color:#888}.ui-field .mat-mdc-form-field .options .options-container{display:flex;column-gap:8px;padding-left:8px}.ui-field .mat-mdc-form-field .options .options-container ui-icon.valid mat-icon{background:#3c9a13;border-radius:100%}.ui-field .mat-mdc-form-field .options .options-container ui-icon.valid mat-icon svg{color:#fff!important}.ui-field .mat-mdc-form-field .options .options-container ui-button.validation svg circle{stroke:#d410aa}.ui-field .mat-mdc-form-field .options .options-container ui-button.validation *{color:#d410aa}.ui-field .mat-mdc-form-field .options .options-container ui-button,.ui-field .mat-mdc-form-field .options .options-container ui-icon{display:flex}.ui-field .mat-mdc-form-field .options .options-container ui-button svg,.ui-field .mat-mdc-form-field .options .options-container ui-icon svg{color:#888}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon{padding:0;height:auto;background:transparent}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:hover,.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element,.ui-field .mat-mdc-form-field.mat-form-field-disabled .mdc-floating-label{pointer-events:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch label,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch label{color:#919191!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-notched-outline__notch label,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-notched-outline__notch label{color:#e9e9e9!important}.ui-field[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-field[theme=light] .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:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading{border-top-left-radius:10px;border-bottom-left-radius:10px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-top-right-radius:10px;border-bottom-right-radius:10px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .password .icon-only-wrapper svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .password .icon-only-wrapper svg{color:#242424!important}.ui-field[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:not(.mdc-floating-label--float-above),.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[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-field[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-field[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-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#242424!important}.ui-field[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-field[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-field[theme=light] .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-field[theme=light] .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{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error svg{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#e02800!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.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: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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: i8.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { 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: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "language"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[digitsOnly]", inputs: ["allowNegative", "allowDecimal", "allowOnlyDigits"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4459
4517
|
}
|
|
4460
4518
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: FieldComponent, decorators: [{
|
|
4461
4519
|
type: Component,
|
|
4462
|
-
args: [{ selector: 'ui-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <mat-form-field\n [ngStyle]=\"{ '--textarea-height': (textareaHeight - 10) + 'px', '--textarea-height-container': textareaHeight + 'px' }\"\n (click)=\"onFieldClick($event)\"\n #uiField\n appearance=\"outline\"\n [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched ) || hasError) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, textarea: type === 'textarea', 'multi-line': type === 'multi-line' }\"\n (mouseenter)=\"onActive(true, 'hover')\"\n (mouseleave)=\"onActive(false, 'hover')\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"required\"\n >\n <mat-label *ngIf=\"label && ((type !== 'search' && applicationTheme === 'classic') || (applicationTheme !== 'classic'))\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <mat-icon *ngIf=\"type === 'search' || type === 'collapsed-search'\" matIconPrefix class=\"search-icon\" [svgIcon]=\"'Search'\"></mat-icon>\n <input\n *ngIf=\"type !== 'textarea' && type !== 'multi-line'; else textarea\"\n matInput\n (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n (input)=\"onInput($event)\"\n [id]=\"id!\"\n (keyup)=\"onChangeInputSearch()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled || loading\"\n [type]=\"currentType\"\n (keyup.enter)=\"onSubmit()\"\n [max]=\"max\"\n [min]=\"min\"\n [name]=\"fieldName!\"\n digitsOnly\n [allowOnlyDigits]=\"allowOnlyDigits\"\n [allowNegative]=\"allowNegative\"\n (focusin)=\"onActive(true, 'focus')\"\n />\n\n <ng-template #textarea>\n <textarea\n matInput\n (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n (input)=\"onInput($event)\"\n [id]=\"id!\"\n (keyup)=\"onChangeInputSearch()\"\n (keyup.enter)=\"onSubmit()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [type]=\"currentType\"\n [name]=\"fieldName!\"\n [cdkTextareaAutosize]=\"type === 'multi-line'\"\n [cdkAutosizeMinRows]=\"type === 'multi-line' ? 1 : 5\"\n [cdkAutosizeMaxRows]=\"type === 'multi-line' ? maxRows : 5 \"\n (focusin)=\"onActive(true, 'focus')\"\n ></textarea>\n </ng-template>\n\n <div class=\"options\" *ngIf=\"type === 'search' || type === 'password' || type === 'validation-text'\">\n <div class=\"options-container\">\n <ui-button\n *ngIf=\"showClose\"\n variant=\"secondary\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n [label]=\"('COMMON.CLEAR') | uiTranslate : language\"\n (buttonClickEvent)=\"clearValue()\"\n [ariaLabel]=\"ariaLabel + '--' + ('COMMON.CLEAR') | uiTranslate : language\"\n ></ui-button>\n <ui-icon\n [size]=\"'24'\"\n class=\"password\"\n *ngIf=\"type === 'password'\"\n [name]=\"getPasswordIcon\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"showPasswordClick()\"\n ></ui-icon>\n\n <ng-container\n *ngIf=\"type === 'validation-text' && (applicationTheme === 'dark' || applicationTheme === 'light') && value.length\"\n >\n <ui-button\n *ngIf=\"!isValid\"\n class=\"validation\"\n [variant]=\"'text'\"\n [applicationTheme]=\"'light'\"\n [label]=\"'Validate'\"\n [loading]=\"loading\"\n (click)=\"validate()\"\n [disabled]=\"disabled\"\n [size]=\"'small'\"\n ></ui-button>\n <ui-icon class=\"valid\" [color]=\"'white'\" applicationTheme=\"light\" [name]=\"'Check'\" *ngIf=\"isValid\"></ui-icon>\n </ng-container>\n </div>\n </div>\n <mat-hint class=\"info\" *ngIf=\"type === 'textarea' && !errorsLength && !(ngControl?.errors | hasValidationError)\">{{ value.length }} / {{ maxCharacters }}</mat-hint>\n <mat-hint class=\"info\" *ngIf=\"hintMessage && !errorsLength && !(ngControl?.errors | hasValidationError) && type !== 'textarea'\">{{ hintMessage }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n <ng-template [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-template>\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", 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}.active-field .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[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-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[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-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[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-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.ui-field{display:block;width:320px}.ui-field.full-width{width:100%}.ui-field[field-class=collapsed-search]{width:56px!important;display:block}.ui-field[field-class=collapsed-search] mat-form-field{width:56px!important}.ui-field[field-class=collapsed-search] .mat-mdc-floating-label{display:none!important}.ui-field[field-class=collapsed-search] .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;width:100vw!important}.ui-field .mat-mdc-form-field-subscript-wrapper{margin:0!important}.ui-field[field-class=search][theme=classic] .mat-mdc-form-field:hover.mat-form-field-appearance-outline .mdc-notched-outline__notch,.ui-field[field-class=search][theme=classic] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__notch{border-top:2px solid #276678!important}.ui-field[field-class=search][theme=classic] .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__notch{border-top:1px solid var(--mdc-outlined-text-field-outline-color)!important}.ui-field[field-class=search][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-field[field-class=search][theme=light] .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{top:28px!important}.ui-field[field-class=search][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:not(.mdc-floating-label--float-above),.ui-field[field-class=search][theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field input[type=search]::-webkit-search-decoration,.ui-field input[type=search]::-webkit-search-cancel-button,.ui-field input[type=search]::-webkit-search-results-button,.ui-field input[type=search]::-webkit-search-results-decoration{display:none}.ui-field .mat-mdc-form-field{margin-top:0;width:100%}.ui-field .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-field .mat-mdc-form-field.multi-line .mat-mdc-text-field-wrapper{height:auto!important}.ui-field .mat-mdc-form-field.multi-line .mat-mdc-form-field-infix{min-height:48px!important}.ui-field .mat-mdc-form-field.multi-line textarea{margin-top:8px;min-height:32px!important}.ui-field .mat-mdc-form-field.textarea .mat-mdc-text-field-wrapper{height:var(--textarea-height-container)!important}.ui-field .mat-mdc-form-field.textarea textarea{max-height:var(--textarea-height)!important;min-height:var(--textarea-height)!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-color:#276678!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-color:#cb7b7a!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field .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-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-field .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-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:4px;font-size:12px;line-height:16px;position:relative}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%;text-align:right}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-prefix,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .search-icon{padding:12px 8px 12px 16px;color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-field .mat-mdc-form-field.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-field .mat-mdc-form-field.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-field .mat-mdc-form-field.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-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.search svg,.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.password svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-icon svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button.close svg{color:#888}.ui-field .mat-mdc-form-field .options .options-container{display:flex;column-gap:8px;padding-left:8px}.ui-field .mat-mdc-form-field .options .options-container ui-icon.valid mat-icon{background:#3c9a13;border-radius:100%}.ui-field .mat-mdc-form-field .options .options-container ui-icon.valid mat-icon svg{color:#fff!important}.ui-field .mat-mdc-form-field .options .options-container ui-button.validation svg circle{stroke:#d410aa}.ui-field .mat-mdc-form-field .options .options-container ui-button.validation *{color:#d410aa}.ui-field .mat-mdc-form-field .options .options-container ui-button,.ui-field .mat-mdc-form-field .options .options-container ui-icon{display:flex}.ui-field .mat-mdc-form-field .options .options-container ui-button svg,.ui-field .mat-mdc-form-field .options .options-container ui-icon svg{color:#888}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon{padding:0;height:auto;background:transparent}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:hover,.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element,.ui-field .mat-mdc-form-field.mat-form-field-disabled .mdc-floating-label{pointer-events:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch label,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch label{color:#919191!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-notched-outline__notch label,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-notched-outline__notch label{color:#e9e9e9!important}.ui-field[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-field[theme=light] .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:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading{border-top-left-radius:10px;border-bottom-left-radius:10px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-top-right-radius:10px;border-bottom-right-radius:10px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .password .icon-only-wrapper svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .password .icon-only-wrapper svg{color:#242424!important}.ui-field[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:not(.mdc-floating-label--float-above),.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[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-field[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-field[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-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#242424!important}.ui-field[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-field[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-field[theme=light] .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-field[theme=light] .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{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error svg{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#e02800!important}\n"] }]
|
|
4520
|
+
args: [{ selector: 'ui-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <mat-form-field\n [ngStyle]=\"{ '--textarea-height': (textareaHeight - 10) + 'px', '--textarea-height-container': textareaHeight + 'px' }\"\n (click)=\"onFieldClick($event)\"\n #uiField\n appearance=\"outline\"\n [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched ) || hasError) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, textarea: type === 'textarea', 'multi-line': type === 'multi-line', 'keyboard-focused': keyboardFocused(), 'has-label': !!label }\"\n (mouseenter)=\"onActive(true, 'hover')\"\n (mouseleave)=\"onActive(false, 'hover')\"\n >\n <span [style.display]=\"'none'\" [id]=\"'ariaDescribedby'\">\n <span *ngIf=\"required\">{{ 'ERRORS.REQUIRED' | uiTranslate : language }}</span>\n {{ ariaDescribedby }}\n </span>\n <span [style.display]=\"'none'\" [id]=\"'ariaLabelledby'\">\n {{ ariaLabelledby || label }}\n </span>\n <mat-label [id]=\"'label'\" *ngIf=\"label && ((type !== 'search' && applicationTheme === 'classic') || (applicationTheme !== 'classic'))\">{{ label }}</mat-label>\n <mat-icon *ngIf=\"type === 'search' || type === 'collapsed-search'\" matIconPrefix class=\"search-icon\" [svgIcon]=\"'Search'\"></mat-icon>\n <input\n *ngIf=\"type !== 'textarea' && type !== 'multi-line'; else textarea\"\n matInput\n #inputElement\n (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n (input)=\"onInput($event)\"\n [id]=\"id!\"\n (keyup)=\"onChangeInputSearch()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled || loading\"\n [type]=\"currentType\"\n (keyup.enter)=\"onSubmit()\"\n [max]=\"max\"\n [min]=\"min\"\n [name]=\"fieldName!\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-invalid]=\"errorsLength || (ngControl?.errors && ngControl?.touched ) || hasError\"\n [attr.aria-labelledby]=\"'ariaLabelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n role=\"textbox\"\n digitsOnly\n [allowOnlyDigits]=\"allowOnlyDigits\"\n [allowNegative]=\"allowNegative\"\n (focusin)=\"onActive(true, 'focus')\"\n />\n\n <ng-template #textarea>\n <textarea\n matInput\n #inputElement\n (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n (input)=\"onInput($event)\"\n [id]=\"id!\"\n (keyup)=\"onChangeInputSearch()\"\n (keyup.enter)=\"onSubmit()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [type]=\"currentType\"\n [name]=\"fieldName!\"\n [required]=\"required\"\n [attr.aria-label]=\"!label ? ariaLabel : ''\"\n [attr.aria-invalid]=\"errorsLength || (ngControl?.errors && ngControl?.touched ) || hasError\"\n [attr.aria-labelledby]=\"'ariaLabelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n role=\"textbox\"\n [cdkTextareaAutosize]=\"type === 'multi-line'\"\n [cdkAutosizeMinRows]=\"type === 'multi-line' ? 1 : 5\"\n [cdkAutosizeMaxRows]=\"type === 'multi-line' ? maxRows : 5 \"\n (focusin)=\"onActive(true, 'focus')\"\n ></textarea>\n </ng-template>\n\n <div class=\"options\" *ngIf=\"type === 'search' || type === 'password' || type === 'validation-text'\">\n <div class=\"options-container\">\n <ui-button\n *ngIf=\"showClose\"\n variant=\"secondary\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n [label]=\"('COMMON.CLEAR') | uiTranslate : language\"\n (buttonClickEvent)=\"clearValue()\"\n [ariaLabel]=\"ariaLabel + '--' + ('COMMON.CLEAR') | uiTranslate : language\"\n ></ui-button>\n <ui-icon\n [size]=\"'24'\"\n class=\"password\"\n *ngIf=\"type === 'password'\"\n [name]=\"getPasswordIcon\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"showPasswordClick()\"\n ></ui-icon>\n\n <ng-container\n *ngIf=\"type === 'validation-text' && (applicationTheme === 'dark' || applicationTheme === 'light') && value.length\"\n >\n <ui-button\n *ngIf=\"!isValid\"\n class=\"validation\"\n [variant]=\"'text'\"\n [applicationTheme]=\"'light'\"\n [label]=\"'Validate'\"\n [loading]=\"loading\"\n (click)=\"validate()\"\n [disabled]=\"disabled\"\n [size]=\"'small'\"\n ></ui-button>\n <ui-icon class=\"valid\" [color]=\"'white'\" applicationTheme=\"light\" [name]=\"'Check'\" *ngIf=\"isValid\"></ui-icon>\n </ng-container>\n </div>\n </div>\n <mat-hint class=\"info\" *ngIf=\"type === 'textarea' && !errorsLength && !(ngControl?.errors | hasValidationError)\">{{ value.length }} / {{ maxCharacters }}</mat-hint>\n <mat-hint class=\"info\" *ngIf=\"hintMessage && !errorsLength && !(ngControl?.errors | hasValidationError) && type !== 'textarea'\">{{ hintMessage }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n <ng-template [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-template>\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", 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-form-field.keyboard-focused{position:relative}.mat-mdc-form-field.keyboard-focused .mat-mdc-text-field-wrapper:after{content:\"\";position:absolute;top:0;border-radius:10px;left:0;width:100%;height:100%;outline:2px solid #ffffff;z-index:1}.mat-mdc-form-field.keyboard-focused .mat-mdc-form-field-subscript-wrapper{z-index:-1}.mat-mdc-form-field.has-label .mdc-notched-outline__notch{position:relative}.mat-mdc-form-field.has-label .mdc-notched-outline__notch:after{content:\"\";position:absolute;top:0;left:0;background:#fff;width:100%;height:5px;z-index:-1}.active-field .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[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-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[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-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[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-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.ui-field{display:block;width:320px}.ui-field.full-width{width:100%}.ui-field[field-class=collapsed-search]{width:56px!important;display:block}.ui-field[field-class=collapsed-search] mat-form-field{width:56px!important}.ui-field[field-class=collapsed-search] .mat-mdc-floating-label{display:none!important}.ui-field[field-class=collapsed-search] .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;width:100vw!important}.ui-field .mat-mdc-form-field-subscript-wrapper{margin:0!important}.ui-field[field-class=search][theme=classic] .mat-mdc-form-field:hover.mat-form-field-appearance-outline .mdc-notched-outline__notch,.ui-field[field-class=search][theme=classic] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__notch{border-top:2px solid #276678!important}.ui-field[field-class=search][theme=classic] .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__notch{border-top:1px solid var(--mdc-outlined-text-field-outline-color)!important}.ui-field[field-class=search][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-field[field-class=search][theme=light] .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{top:28px!important}.ui-field[field-class=search][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:not(.mdc-floating-label--float-above),.ui-field[field-class=search][theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field input[type=search]::-webkit-search-decoration,.ui-field input[type=search]::-webkit-search-cancel-button,.ui-field input[type=search]::-webkit-search-results-button,.ui-field input[type=search]::-webkit-search-results-decoration{display:none}.ui-field .mat-mdc-form-field{margin-top:0;width:100%}.ui-field .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-field .mat-mdc-form-field.multi-line .mat-mdc-text-field-wrapper{height:auto!important}.ui-field .mat-mdc-form-field.multi-line .mat-mdc-form-field-infix{min-height:48px!important}.ui-field .mat-mdc-form-field.multi-line textarea{margin-top:8px;min-height:32px!important}.ui-field .mat-mdc-form-field.textarea .mat-mdc-text-field-wrapper{height:var(--textarea-height-container)!important}.ui-field .mat-mdc-form-field.textarea textarea{max-height:var(--textarea-height)!important;min-height:var(--textarea-height)!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-color:#276678!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-color:#cb7b7a!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-field .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-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:4px;font-size:12px;line-height:16px;position:relative}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%;text-align:right}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-prefix,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .search-icon{padding:12px 8px 12px 16px;color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-field .mat-mdc-form-field.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-field .mat-mdc-form-field.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-field .mat-mdc-form-field.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-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.search svg,.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.password svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-icon svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button.close svg{color:#888}.ui-field .mat-mdc-form-field .options .options-container{display:flex;column-gap:8px;padding-left:8px}.ui-field .mat-mdc-form-field .options .options-container ui-icon.valid mat-icon{background:#3c9a13;border-radius:100%}.ui-field .mat-mdc-form-field .options .options-container ui-icon.valid mat-icon svg{color:#fff!important}.ui-field .mat-mdc-form-field .options .options-container ui-button.validation svg circle{stroke:#d410aa}.ui-field .mat-mdc-form-field .options .options-container ui-button.validation *{color:#d410aa}.ui-field .mat-mdc-form-field .options .options-container ui-button,.ui-field .mat-mdc-form-field .options .options-container ui-icon{display:flex}.ui-field .mat-mdc-form-field .options .options-container ui-button svg,.ui-field .mat-mdc-form-field .options .options-container ui-icon svg{color:#888}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon{padding:0;height:auto;background:transparent}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:hover,.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element,.ui-field .mat-mdc-form-field.mat-form-field-disabled .mdc-floating-label{pointer-events:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch label,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch label{color:#919191!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-notched-outline__notch label,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-notched-outline__notch label{color:#e9e9e9!important}.ui-field[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-field[theme=light] .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:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading{border-top-left-radius:10px;border-bottom-left-radius:10px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-top-right-radius:10px;border-bottom-right-radius:10px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .password .icon-only-wrapper svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .password .icon-only-wrapper svg{color:#242424!important}.ui-field[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:not(.mdc-floating-label--float-above),.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[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-field[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-field[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-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#242424!important}.ui-field[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-field[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-field[theme=light] .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-field[theme=light] .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{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error svg{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#e02800!important}\n"] }]
|
|
4463
4521
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4464
4522
|
type: Optional
|
|
4465
4523
|
}, {
|
|
@@ -4469,7 +4527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
4469
4527
|
type: Optional
|
|
4470
4528
|
}, {
|
|
4471
4529
|
type: Self
|
|
4472
|
-
}] }], propDecorators: { class: [{
|
|
4530
|
+
}] }, { type: i2$2.FocusMonitor }, { type: i0.NgZone }, { type: i0.DestroyRef }], propDecorators: { class: [{
|
|
4473
4531
|
type: HostBinding
|
|
4474
4532
|
}], fullWidth: [{
|
|
4475
4533
|
type: HostBinding,
|
|
@@ -4538,12 +4596,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
4538
4596
|
type: Input
|
|
4539
4597
|
}], textareaHeight: [{
|
|
4540
4598
|
type: Input
|
|
4599
|
+
}], ariaLabelledby: [{
|
|
4600
|
+
type: Input
|
|
4601
|
+
}], ariaDescribedby: [{
|
|
4602
|
+
type: Input
|
|
4541
4603
|
}], hasError: [{
|
|
4542
4604
|
type: Input
|
|
4543
4605
|
}], validateEvent: [{
|
|
4544
4606
|
type: Output
|
|
4545
4607
|
}], fieldBlur: [{
|
|
4546
4608
|
type: Output
|
|
4609
|
+
}], field: [{
|
|
4610
|
+
type: ViewChild,
|
|
4611
|
+
args: ['inputElement']
|
|
4547
4612
|
}] } });
|
|
4548
4613
|
|
|
4549
4614
|
class FieldComponentModule {
|
|
@@ -5567,7 +5632,7 @@ class AvatarComponent {
|
|
|
5567
5632
|
this.editClick.emit(event);
|
|
5568
5633
|
}
|
|
5569
5634
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AvatarComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5570
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: AvatarComponent, selector: "ui-avatar", inputs: { size: "size", imageUrl: "imageUrl", name: "name", tooltipText: "tooltipText", allowEdit: "allowEdit", applicationTheme: "applicationTheme", backgroundColor: "backgroundColor" }, outputs: { editClick: "editClick" }, ngImport: i0, template: "<div\n class=\"avatar-container\"\n [attr.type]=\"!imageUrl && !name ? 'icon' : 'initials'\"\n [ngClass]=\"[size]\"\n [attr.theme]=\"applicationTheme\"\n [ngStyle]=\"{ backgroundColor: backgroundAvatarColor }\"\n>\n <span *ngIf=\"name && !imageUrl\">\n {{ name | nameInitials }}\n </span>\n <img *ngIf=\"imageUrl\" [attr.src]=\"imageUrl\" [alt]=\"'profile-image'\">\n <ui-icon [color]=\"applicationTheme === 'classic' ? 'dark' : 'rebrand-black'\" [applicationTheme]=\"applicationTheme\" [size]=\"iconSize[size]\" *ngIf=\"!imageUrl && !name\" [name]=\"'User-profile'\"></ui-icon>\n <div class=\"edit-avatar\" *ngIf=\"size === avatarSize.LARGE && allowEdit\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n [companyColor]=\"'black'\"\n [size]=\"'small'\"\n [iconName]=\"'Edit'\"\n [variant]=\"'icon-button'\"\n [tooltip]=\"tooltipText\"\n (buttonClickEvent)=\"onEditClick($event)\"\n ></ui-button>\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}:host .clickable{cursor:pointer}:host .non-clickable{pointer-events:none}:host .avatar-container{font-family:Open Sans,sans-serif;font-weight:400;display:flex;justify-content:center;align-items:center;border-radius:100%;background:#cbd6cb;position:relative;-webkit-user-select:none;user-select:none}:host .avatar-container[type=icon]{background:#e0e0e0}:host .avatar-container img{width:100%;height:100%;object-fit:cover;border-radius:100%}:host .avatar-container.small{width:24px;height:24px;font-size:10px}:host .avatar-container.smallMedium{width:36px;height:36px;font-size:14px}:host .avatar-container.medium{width:48px;height:48px;font-size:20px}:host .avatar-container.large{width:120px;height:120px;font-size:50px;letter-spacing:-2}:host .avatar-container .edit-avatar{display:flex;justify-content:center;align-items:center;position:absolute;right:0;bottom:0;background:#f6f6f6;width:32px;height:32px;border-radius:100%}:host .avatar-container[theme=dark],:host .avatar-container[theme=light]{background:#e9e9e9;color:#242424}:host .avatar-container[theme=dark] .edit-avatar,:host .avatar-container[theme=light] .edit-avatar{box-shadow:0 4px 16px #24242414;background:#fff}\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: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: NameInitialsPipe, name: "nameInitials" }] }); }
|
|
5635
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: AvatarComponent, selector: "ui-avatar", inputs: { size: "size", imageUrl: "imageUrl", name: "name", tooltipText: "tooltipText", allowEdit: "allowEdit", applicationTheme: "applicationTheme", backgroundColor: "backgroundColor" }, outputs: { editClick: "editClick" }, ngImport: i0, template: "<div\n class=\"avatar-container\"\n [attr.type]=\"!imageUrl && !name ? 'icon' : 'initials'\"\n [ngClass]=\"[size]\"\n [attr.theme]=\"applicationTheme\"\n [ngStyle]=\"{ backgroundColor: backgroundAvatarColor }\"\n>\n <span *ngIf=\"name && !imageUrl\">\n {{ name | nameInitials }}\n </span>\n <img *ngIf=\"imageUrl\" [attr.src]=\"imageUrl\" [alt]=\"'profile-image'\">\n <ui-icon [color]=\"applicationTheme === 'classic' ? 'dark' : 'rebrand-black'\" [applicationTheme]=\"applicationTheme\" [size]=\"iconSize[size]\" *ngIf=\"!imageUrl && !name\" [name]=\"'User-profile'\"></ui-icon>\n <div class=\"edit-avatar\" *ngIf=\"size === avatarSize.LARGE && allowEdit\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n [companyColor]=\"'black'\"\n [size]=\"'small'\"\n [iconName]=\"'Edit'\"\n [variant]=\"'icon-button'\"\n [tooltip]=\"tooltipText\"\n (buttonClickEvent)=\"onEditClick($event)\"\n ></ui-button>\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}:host .clickable{cursor:pointer}:host .non-clickable{pointer-events:none}:host .avatar-container{font-family:Open Sans,sans-serif;font-weight:400;display:flex;justify-content:center;align-items:center;border-radius:100%;background:#cbd6cb;position:relative;-webkit-user-select:none;user-select:none}:host .avatar-container[type=icon]{background:#e0e0e0}:host .avatar-container img{width:100%;height:100%;object-fit:cover;border-radius:100%}:host .avatar-container.small{width:24px;height:24px;font-size:10px}:host .avatar-container.smallMedium{width:36px;height:36px;font-size:14px}:host .avatar-container.medium{width:48px;height:48px;font-size:20px}:host .avatar-container.large{width:120px;height:120px;font-size:50px;letter-spacing:-2}:host .avatar-container .edit-avatar{display:flex;justify-content:center;align-items:center;position:absolute;right:0;bottom:0;background:#f6f6f6;width:32px;height:32px;border-radius:100%}:host .avatar-container[theme=dark],:host .avatar-container[theme=light]{background:#e9e9e9;color:#242424}:host .avatar-container[theme=dark] .edit-avatar,:host .avatar-container[theme=light] .edit-avatar{box-shadow:0 4px 16px #24242414;background:#fff}\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: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "pipe", type: NameInitialsPipe, name: "nameInitials" }] }); }
|
|
5571
5636
|
}
|
|
5572
5637
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
5573
5638
|
type: Component,
|
|
@@ -5635,7 +5700,7 @@ class MobileNavbarSideSheetComponent {
|
|
|
5635
5700
|
this.menuItemClicked.emit(id);
|
|
5636
5701
|
}
|
|
5637
5702
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: MobileNavbarSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5638
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: MobileNavbarSideSheetComponent, isStandalone: true, selector: "ui-mobile-navbar-side-sheet", inputs: { routes: "routes", activedRoute: "activedRoute", email: "email", userName: "userName", menuItems: "menuItems", language: "language", contentTemplateRef: "contentTemplateRef", isDesktop: "isDesktop", applicationTheme: "applicationTheme" }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<div class=\"mobile-navbar-container\">\n <ng-container *ngIf=\"isDesktop\" [ngTemplateOutlet]=\"userInfo\"></ng-container>\n\n <div class=\"routes\">\n <div\n *ngFor=\"let route of routes\"\n [attr.data-testid]=\"route.id\"\n data-test-role=\"nav-route\"\n (click)=\"navigate(route.id)\"\n class=\"route\"\n [ngClass]=\"{ active: activedRoute === route.id }\"\n >\n <span>{{ route.title }}</span>\n </div>\n </div>\n\n <div class=\"settings\">\n <ng-container *ngFor=\"let e of menuItems\">\n <div *ngIf=\"e\" class=\"menu-item\">\n <ui-button\n [attr.data-testid]=\"e.id\"\n data-test-role=\"menu-item\"\n [applicationTheme]=\"applicationTheme\"\n [fullWidth]=\"true\"\n [disabledScaleOnClick]=\"true\"\n [variant]=\"'menuCell'\"\n iconPosition=\"left\"\n [iconName]=\"e.icon\"\n [label]=\"e.text\"\n (buttonClickEvent)=\"clickMenuItem(e.id)\"\n (keydown.Tab)=\"$event.stopPropagation()\"\n (keydown.shift.tab)=\"$event.stopPropagation()\"\n [ariaLabel]=\"e.text + '--' + e.text\"\n ></ui-button>\n </div>\n </ng-container>\n </div>\n</div>\n\n<div class=\"bottom-content\" [ngClass]=\"{ desktop: isDesktop }\">\n <ng-container *ngIf=\"!isDesktop\" [ngTemplateOutlet]=\"contentTemplateRef\"></ng-container>\n <ng-container *ngIf=\"isDesktop; else tablet\">\n <div class=\"menu-item\">\n <ui-button\n data-testid=\"logout-button\"\n [applicationTheme]=\"applicationTheme\"\n [fullWidth]=\"true\"\n [disabledScaleOnClick]=\"true\"\n [variant]=\"'menuCell'\"\n iconPosition=\"left\"\n [iconName]=\"'Logout-in-line'\"\n [label]=\"translationContext + 'LOG_OUT' | uiTranslate: language\"\n (buttonClickEvent)=\"logout()\"\n (keydown.Tab)=\"$event.stopPropagation()\"\n (keydown.shift.tab)=\"$event.stopPropagation()\"\n ></ui-button>\n </div>\n </ng-container>\n\n <ng-template #tablet>\n <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n </ng-template>\n</div>\n\n<ng-template #userInfo>\n <div class=\"user-info\" [ngClass]=\"{ desktop: isDesktop }\">\n <ui-avatar [size]=\"avatarSize.MEDIUM\" [name]=\"userName\"></ui-avatar>\n <div class=\"details-container\">\n <div class=\"name-container\">\n <span class=\"user-name\">{{ userName }}</span>\n <span class=\"user-email\">{{ email }}</span>\n </div>\n <ui-button\n *ngIf=\"!isDesktop\"\n data-testid=\"logout-button\"\n [tooltip]=\"translationContext + 'LOG_OUT' | uiTranslate: language\"\n [iconName]=\"'Logout-in-line'\"\n [applicationTheme]=\"'light'\"\n [variant]=\"'icon-button'\"\n (click)=\"logout()\"\n ></ui-button>\n </div>\n </div>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;flex-direction:column;height:100%}.mobile-navbar-container{min-width:340px;padding-top:16px;height:100%}.mobile-navbar-container .routes{display:none}.mobile-navbar-container .routes .route{padding:0 16px;width:100%;height:48px;display:flex;justify-content:flex-start;align-items:center;font-size:14px;cursor:pointer}.mobile-navbar-container .routes .route.active{background-color:#f4f4f4;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .routes .route:hover{background-color:#fff2fc;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .routes .route:active{background-color:#ffe6fa}@media (max-width: 600px){.mobile-navbar-container .routes{display:block}}.menu-item{width:100%;height:48px;display:flex;font-size:14px;font-weight:700;font-family:ModernGothic,sans-serif;flex-direction:row;align-items:center;cursor:pointer}.menu-item ::ng-deep ui-button{width:100%}.menu-item ::ng-deep ui-button button{padding-left:16px!important}.menu-item ::ng-deep ui-button button span.icon{margin-right:16px!important}.menu-item ::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}.menu-item ::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}.bottom-content{width:100%;display:flex;align-items:center;flex-direction:column;position:sticky;bottom:0;background:#fff;z-index:1}.bottom-content.desktop{position:relative;border-top:1px #D3D3D3 solid;margin-top:16px;padding:16px 0 8px}.user-info{display:flex;align-items:center;gap:16px;padding:0 16px;margin-top:32px;margin-bottom:16px;width:100%}.user-info.desktop{margin-top:0;margin-bottom:32px}.user-info .details-container{display:flex;justify-content:space-between;width:100%;gap:8px}.user-info .name-container{display:flex;flex-direction:column;width:224px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-info .name-container .user-name{font-weight:700;font-size:14px;line-height:22px;font-family:ModernGothic,sans-serif;white-space:wrap}.user-info .name-container .user-email{width:100%;font-size:14px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: AccordionComponentModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AvatarComponentModule }, { kind: "component", type: AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "ngmodule", type: ButtonComponentModule }, { 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"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }] }); }
|
|
5703
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: MobileNavbarSideSheetComponent, isStandalone: true, selector: "ui-mobile-navbar-side-sheet", inputs: { routes: "routes", activedRoute: "activedRoute", email: "email", userName: "userName", menuItems: "menuItems", language: "language", contentTemplateRef: "contentTemplateRef", isDesktop: "isDesktop", applicationTheme: "applicationTheme" }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<div class=\"mobile-navbar-container\">\n <ng-container *ngIf=\"isDesktop\" [ngTemplateOutlet]=\"userInfo\"></ng-container>\n\n <div class=\"routes\">\n <div\n *ngFor=\"let route of routes\"\n [attr.data-testid]=\"route.id\"\n data-test-role=\"nav-route\"\n (click)=\"navigate(route.id)\"\n class=\"route\"\n [ngClass]=\"{ active: activedRoute === route.id }\"\n >\n <span>{{ route.title }}</span>\n </div>\n </div>\n\n <div class=\"settings\">\n <ng-container *ngFor=\"let e of menuItems\">\n <div *ngIf=\"e\" class=\"menu-item\">\n <ui-button\n [attr.data-testid]=\"e.id\"\n data-test-role=\"menu-item\"\n [applicationTheme]=\"applicationTheme\"\n [fullWidth]=\"true\"\n [disabledScaleOnClick]=\"true\"\n [variant]=\"'menuCell'\"\n iconPosition=\"left\"\n [iconName]=\"e.icon\"\n [label]=\"e.text\"\n (buttonClickEvent)=\"clickMenuItem(e.id)\"\n (keydown.Tab)=\"$event.stopPropagation()\"\n (keydown.shift.tab)=\"$event.stopPropagation()\"\n [ariaLabel]=\"e.text + '--' + e.text\"\n ></ui-button>\n </div>\n </ng-container>\n </div>\n</div>\n\n<div class=\"bottom-content\" [ngClass]=\"{ desktop: isDesktop }\">\n <ng-container *ngIf=\"!isDesktop\" [ngTemplateOutlet]=\"contentTemplateRef\"></ng-container>\n <ng-container *ngIf=\"isDesktop; else tablet\">\n <div class=\"menu-item\">\n <ui-button\n data-testid=\"logout-button\"\n [applicationTheme]=\"applicationTheme\"\n [fullWidth]=\"true\"\n [disabledScaleOnClick]=\"true\"\n [variant]=\"'menuCell'\"\n iconPosition=\"left\"\n [iconName]=\"'Logout-in-line'\"\n [label]=\"translationContext + 'LOG_OUT' | uiTranslate: language\"\n (buttonClickEvent)=\"logout()\"\n (keydown.Tab)=\"$event.stopPropagation()\"\n (keydown.shift.tab)=\"$event.stopPropagation()\"\n ></ui-button>\n </div>\n </ng-container>\n\n <ng-template #tablet>\n <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n </ng-template>\n</div>\n\n<ng-template #userInfo>\n <div class=\"user-info\" [ngClass]=\"{ desktop: isDesktop }\">\n <ui-avatar [size]=\"avatarSize.MEDIUM\" [name]=\"userName\"></ui-avatar>\n <div class=\"details-container\">\n <div class=\"name-container\">\n <span class=\"user-name\">{{ userName }}</span>\n <span class=\"user-email\">{{ email }}</span>\n </div>\n <ui-button\n *ngIf=\"!isDesktop\"\n data-testid=\"logout-button\"\n [tooltip]=\"translationContext + 'LOG_OUT' | uiTranslate: language\"\n [iconName]=\"'Logout-in-line'\"\n [applicationTheme]=\"'light'\"\n [variant]=\"'icon-button'\"\n (click)=\"logout()\"\n ></ui-button>\n </div>\n </div>\n</ng-template>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;flex-direction:column;height:100%}.mobile-navbar-container{min-width:340px;padding-top:16px;height:100%}.mobile-navbar-container .routes{display:none}.mobile-navbar-container .routes .route{padding:0 16px;width:100%;height:48px;display:flex;justify-content:flex-start;align-items:center;font-size:14px;cursor:pointer}.mobile-navbar-container .routes .route.active{background-color:#f4f4f4;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .routes .route:hover{background-color:#fff2fc;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .routes .route:active{background-color:#ffe6fa}@media (max-width: 600px){.mobile-navbar-container .routes{display:block}}.menu-item{width:100%;height:48px;display:flex;font-size:14px;font-weight:700;font-family:ModernGothic,sans-serif;flex-direction:row;align-items:center;cursor:pointer}.menu-item ::ng-deep ui-button{width:100%}.menu-item ::ng-deep ui-button button{padding-left:16px!important}.menu-item ::ng-deep ui-button button span.icon{margin-right:16px!important}.menu-item ::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}.menu-item ::ng-deep ui-button button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}.bottom-content{width:100%;display:flex;align-items:center;flex-direction:column;position:sticky;bottom:0;background:#fff;z-index:1}.bottom-content.desktop{position:relative;border-top:1px #D3D3D3 solid;margin-top:16px;padding:16px 0 8px}.user-info{display:flex;align-items:center;gap:16px;padding:0 16px;margin-top:32px;margin-bottom:16px;width:100%}.user-info.desktop{margin-top:0;margin-bottom:32px}.user-info .details-container{display:flex;justify-content:space-between;width:100%;gap:8px}.user-info .name-container{display:flex;flex-direction:column;width:224px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-info .name-container .user-name{font-weight:700;font-size:14px;line-height:22px;font-family:ModernGothic,sans-serif;white-space:wrap}.user-info .name-container .user-email{width:100%;font-size:14px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: AccordionComponentModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AvatarComponentModule }, { kind: "component", type: AvatarComponent, selector: "ui-avatar", inputs: ["size", "imageUrl", "name", "tooltipText", "allowEdit", "applicationTheme", "backgroundColor"], outputs: ["editClick"] }, { kind: "ngmodule", type: ButtonComponentModule }, { 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"] }] }); }
|
|
5639
5704
|
}
|
|
5640
5705
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: MobileNavbarSideSheetComponent, decorators: [{
|
|
5641
5706
|
type: Component,
|
|
@@ -5785,7 +5850,7 @@ class SideSheetComponent {
|
|
|
5785
5850
|
this.openChange.emit(isOpened);
|
|
5786
5851
|
}
|
|
5787
5852
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SideSheetComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: SideSheetService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5788
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: SideSheetComponent, selector: "ui-side-sheet", inputs: { position: "position", language: "language", applicationTheme: "applicationTheme" }, outputs: { openChange: "openChange" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container>\n <mat-drawer-container class=\"side-sheet-container\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n <mat-drawer (closedStart)=\"onOpenChange(false)\" (openedStart)=\"onOpenChange(true)\" #drawer [mode]=\"'over'\" [autoFocus]=\"false\" class=\"side-sheet-content\" [position]=\"position\">\n <div class=\"header\">\n <div class=\"title\">\n <ui-button\n *ngIf=\"showBackButton\"\n [variant]=\"'icon-button'\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"('COMMON.BACK') | uiTranslate : language\"\n (click)=\"onClose()\"\n ></ui-button>\n <span\n *ngIf=\"title\"\n [matTooltip]=\"showTitleTooltip ? title : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >{{ title }}</span>\n <ui-logo *ngIf=\"showLogo\"></ui-logo>\n </div>\n <ui-button\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()\"\n ></ui-button>\n </div>\n <ng-container #container></ng-container>\n </mat-drawer>\n <mat-drawer-content>\n <ng-content></ng-content>\n </mat-drawer-content>\n </mat-drawer-container>\n</ng-container>\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}.side-sheet-container{position:absolute;inset:0;background:transparent}.side-sheet-container ::ng-deep .mat-drawer-backdrop{background-color:#000;opacity:25%}.side-sheet-container .side-sheet-content{width:600px;box-shadow:2px 24px 48px 8px #00000014;padding:0 32px 32px;align-items:flex-start;flex-direction:column;z-index:3;background:#f6f6f6}.side-sheet-container .side-sheet-content .header{background:#f6f6f6;padding:32px 0;width:100%;display:flex;top:0;position:sticky;justify-content:center}.side-sheet-container .side-sheet-content .header ui-button{margin-top:-5px}.side-sheet-container .side-sheet-content .header .title{display:flex;justify-content:left;margin-right:8px;width:100%;gap:8px}.side-sheet-container .side-sheet-content .header .title span{line-height:28px;font-size:20px;font-weight:700;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (max-width: 600px){.side-sheet-container .side-sheet-content{padding:0 16px 16px;width:100%}.side-sheet-container .side-sheet-content .header{padding:32px 16px}}.side-sheet-container[theme=dark] .side-sheet-content,.side-sheet-container[theme=light] .side-sheet-content{box-shadow:0 4px 100px #24242414}.side-sheet-container[theme=dark] .side-sheet-content .header .title span,.side-sheet-container[theme=light] .side-sheet-content .header .title span{color:#242424}::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.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"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5
|
|
5853
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: SideSheetComponent, selector: "ui-side-sheet", inputs: { position: "position", language: "language", applicationTheme: "applicationTheme" }, outputs: { openChange: "openChange" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container>\n <mat-drawer-container class=\"side-sheet-container\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n <mat-drawer (closedStart)=\"onOpenChange(false)\" (openedStart)=\"onOpenChange(true)\" #drawer [mode]=\"'over'\" [autoFocus]=\"false\" class=\"side-sheet-content\" [position]=\"position\">\n <div class=\"header\">\n <div class=\"title\">\n <ui-button\n *ngIf=\"showBackButton\"\n [variant]=\"'icon-button'\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"('COMMON.BACK') | uiTranslate : language\"\n (click)=\"onClose()\"\n ></ui-button>\n <span\n *ngIf=\"title\"\n [matTooltip]=\"showTitleTooltip ? title : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >{{ title }}</span>\n <ui-logo *ngIf=\"showLogo\"></ui-logo>\n </div>\n <ui-button\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()\"\n ></ui-button>\n </div>\n <ng-container #container></ng-container>\n </mat-drawer>\n <mat-drawer-content>\n <ng-content></ng-content>\n </mat-drawer-content>\n </mat-drawer-container>\n</ng-container>\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}.side-sheet-container{position:absolute;inset:0;background:transparent}.side-sheet-container ::ng-deep .mat-drawer-backdrop{background-color:#000;opacity:25%}.side-sheet-container .side-sheet-content{width:600px;box-shadow:2px 24px 48px 8px #00000014;padding:0 32px 32px;align-items:flex-start;flex-direction:column;z-index:3;background:#f6f6f6}.side-sheet-container .side-sheet-content .header{background:#f6f6f6;padding:32px 0;width:100%;display:flex;top:0;position:sticky;justify-content:center}.side-sheet-container .side-sheet-content .header ui-button{margin-top:-5px}.side-sheet-container .side-sheet-content .header .title{display:flex;justify-content:left;margin-right:8px;width:100%;gap:8px}.side-sheet-container .side-sheet-content .header .title span{line-height:28px;font-size:20px;font-weight:700;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media (max-width: 600px){.side-sheet-container .side-sheet-content{padding:0 16px 16px;width:100%}.side-sheet-container .side-sheet-content .header{padding:32px 16px}}.side-sheet-container[theme=dark] .side-sheet-content,.side-sheet-container[theme=light] .side-sheet-content{box-shadow:0 4px 100px #24242414}.side-sheet-container[theme=dark] .side-sheet-content .header .title span,.side-sheet-container[theme=light] .side-sheet-content .header .title span{color:#242424}::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.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: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i5.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i5.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type", "applicationTheme", "label", "width", "allowResizing"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
5789
5854
|
}
|
|
5790
5855
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SideSheetComponent, decorators: [{
|
|
5791
5856
|
type: Component,
|
|
@@ -5965,7 +6030,7 @@ class NavbarComponent {
|
|
|
5965
6030
|
this.menuState.emit({ isOpened, screenSize });
|
|
5966
6031
|
}
|
|
5967
6032
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: NavbarComponent, deps: [{ token: i1$5.BreakpointObserver }, { token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: SideSheetService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5968
|
-
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"], 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"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6033
|
+
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"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5969
6034
|
}
|
|
5970
6035
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
5971
6036
|
type: Component,
|
|
@@ -6391,7 +6456,7 @@ class RadioButtonComponent {
|
|
|
6391
6456
|
}, 0);
|
|
6392
6457
|
}
|
|
6393
6458
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: RadioButtonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1$2.NgControl, optional: true, self: true }, { token: i1$2.NgControl, host: true, optional: true }, { token: i0.DestroyRef }, { token: i2$2.FocusMonitor }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6394
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: RadioButtonComponent, selector: "ui-radio-button", inputs: { disabled: "disabled", selected: "selected", allowUnselect: "allowUnselect", companyColor: "companyColor", name: "name", label: "label", multiple: "multiple", value: "value", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", hasError: "hasError", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", truncateText: "truncateText", alignment: "alignment" }, outputs: { changeRadio: "changeRadio" }, host: { listeners: { "focus": "radioElement.focus()", "click": "onHostClick($event)" }, properties: { "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "style.--color": "this.companyColor" } }, viewQueries: [{ propertyName: "radioElement", first: true, predicate: ["radio"], descendants: true }, { propertyName: "tooltipElement", first: true, predicate: ["tooltip"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #radioContainer\n [class]=\"multiple ? 'radio-container' : 'radio'\"\n [class.multiple-disabled]=\"disabled && multiple\"\n [ngClass]=\"classMultiple\"\n [attr.alignment]=\"alignment\"\n [attr.truncate-text]=\"truncateText\"\n [attr.theme]=\"applicationTheme\"\n [attr.hasError]=\"hasError\"\n (keydown.enter)=\"clickRadio(); radioContainer.focus()\"\n (keydown.space)=\"clickRadio(); radioContainer.focus()\"\n>\n <mat-radio-button\n #radio\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n class=\"radio-button\"\n [required]=\"ariaRequired\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n [aria-describedby]=\"ariaDescribedby\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown.space)=\"$event.preventDefault()\"\n >\n <span\n #tooltip=\"matTooltip\"\n class=\"label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n [matTooltip]=\"showTooltip ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >{{ label }}</span>\n <ng-content select=\"[radio-label]\"></ng-content>\n </mat-radio-button>\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-radio-button.mat-accent{--mat-radio-checked-ripple-color: var(--color)!important;--mdc-radio-selected-focus-icon-color: var(--color)!important;--mdc-radio-selected-pressed-icon-color: var(--color)!important}::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:var(--color)!important}::ng-deep .mat-mdc-radio-checked .mdc-radio__inner-circle{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-radio-button .mat-ripple-element{background-color:var(--color)!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled.mat-radio-checked .mdc-radio__outer-circle,.mat-radio-button.mat-radio-disabled .mdc-radio__outer-circle{border-color:#888!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled .mdc-radio__inner-circle{background-color:#888!important}[theme=dark] .mat-mdc-radio-button,[theme=light] .mat-mdc-radio-button{width:100%!important}[theme=dark] ::ng-deep .mdc-form-field,[theme=light] ::ng-deep .mdc-form-field{width:100%}[theme=dark] .mat-mdc-radio-button.mat-accent,[theme=light] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #242424 !important}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled{--mdc-radio-disabled-unselected-icon-color: #919191;--mdc-radio-disabled-selected-icon-opacity: 1;--mdc-radio-disabled-unselected-icon-opacity: 1;--color: #919191}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background{background:#e9e9e9;border-radius:100%}[theme=dark] ::ng-deep .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio__background{background:#fff!important;border-radius:100%;scale:.8}[theme=dark] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle,[theme=light] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:1px}[theme=dark] ::ng-deep .mat-ripple,[theme=light] ::ng-deep .mat-ripple{display:none}[haserror=true] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:2px}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-checked ::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border:1px solid #ffffff;border-radius:64px;background:#fff}.multiple-checked ::ng-deep label{color:#fff;height:100%;width:100%}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#fff;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-checked[theme=classic][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800}.multiple-unchecked{border:1px solid #E0E0E0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #E0E0E0}.multiple-unchecked ::ng-deep label{height:100%;width:100%}.multiple-unchecked ::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff}.multiple-unchecked[theme=dark][hasError=false]:not(.multiple-disabled):hover,.multiple-unchecked[theme=light][hasError=false]:not(.multiple-disabled):hover{outline:1px solid #242424;background:#fff;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}.radio-container{cursor:pointer}.radio-container .label,.radio-button .label{cursor:pointer;-webkit-user-select:none;user-select:none}:host *[hasError=true] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #E02800 !important;--mdc-radio-unselected-hover-icon-color: #E02800 !important;--mdc-radio-unselected-focus-icon-color: #E02800 !important}:host ::ng-deep .mat-mdc-radio-touch-target{height:40px;width:40px}.radio,.radio-container{--border-width-default-state: 4px;--border-width-animation-state: 6px;width:100%}.radio[alignment=top] ::ng-deep .mdc-form-field,.radio-container[alignment=top] ::ng-deep .mdc-form-field{align-items:start}.radio[alignment=top] .label,.radio-container[alignment=top] .label{margin-top:10px}.radio[truncate-text=true] .label,.radio[truncate-text=true] ::ng-deep label,.radio-container[truncate-text=true] .label,.radio-container[truncate-text=true] ::ng-deep label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes focus-ring-animation{0%{outline-width:var(--border-width-animation-state)}to{outline-width:var(--border-width-default-state)}}.radio-container[hasError=true]{outline:1px solid #E02800}.radio .label{display:block;width:100%;cursor:pointer}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused{outline:none;--mat-radio-checked-ripple-color: transparent!important;--mat-radio-ripple-color: transparent!important}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused ::ng-deep .mdc-radio__background{outline:3px solid #242424;animation:focus-ring-animation .4s forwards}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused ::ng-deep .mdc-radio__background:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;outline:2px solid #ffffff;border-radius:100px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4$4.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline"], outputs: ["onChangeTextState"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6459
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: RadioButtonComponent, selector: "ui-radio-button", inputs: { disabled: "disabled", selected: "selected", allowUnselect: "allowUnselect", companyColor: "companyColor", name: "name", label: "label", multiple: "multiple", value: "value", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", hasError: "hasError", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", truncateText: "truncateText", alignment: "alignment" }, outputs: { changeRadio: "changeRadio" }, host: { listeners: { "focus": "radioElement.focus()", "click": "onHostClick($event)" }, properties: { "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "style.--color": "this.companyColor" } }, viewQueries: [{ propertyName: "radioElement", first: true, predicate: ["radio"], descendants: true }, { propertyName: "tooltipElement", first: true, predicate: ["tooltip"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #radioContainer\n [class]=\"multiple ? 'radio-container' : 'radio'\"\n [class.multiple-disabled]=\"disabled && multiple\"\n [ngClass]=\"classMultiple\"\n [attr.alignment]=\"alignment\"\n [attr.truncate-text]=\"truncateText\"\n [attr.theme]=\"applicationTheme\"\n [attr.hasError]=\"hasError\"\n (keydown.enter)=\"clickRadio(); radioContainer.focus()\"\n (keydown.space)=\"clickRadio(); radioContainer.focus()\"\n>\n <mat-radio-button\n #radio\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n class=\"radio-button\"\n [required]=\"ariaRequired\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n [aria-describedby]=\"ariaDescribedby\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown.space)=\"$event.preventDefault()\"\n >\n <span\n #tooltip=\"matTooltip\"\n class=\"label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n [matTooltip]=\"showTooltip ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >{{ label }}</span>\n <ng-content select=\"[radio-label]\"></ng-content>\n </mat-radio-button>\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-radio-button.mat-accent{--mat-radio-checked-ripple-color: var(--color)!important;--mdc-radio-selected-focus-icon-color: var(--color)!important;--mdc-radio-selected-pressed-icon-color: var(--color)!important}::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:var(--color)!important}::ng-deep .mat-mdc-radio-checked .mdc-radio__inner-circle{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-radio-button .mat-ripple-element{background-color:var(--color)!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled.mat-radio-checked .mdc-radio__outer-circle,.mat-radio-button.mat-radio-disabled .mdc-radio__outer-circle{border-color:#888!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled .mdc-radio__inner-circle{background-color:#888!important}[theme=dark] .mat-mdc-radio-button,[theme=light] .mat-mdc-radio-button{width:100%!important}[theme=dark] ::ng-deep .mdc-form-field,[theme=light] ::ng-deep .mdc-form-field{width:100%}[theme=dark] .mat-mdc-radio-button.mat-accent,[theme=light] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #242424 !important}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled{--mdc-radio-disabled-unselected-icon-color: #919191;--mdc-radio-disabled-selected-icon-opacity: 1;--mdc-radio-disabled-unselected-icon-opacity: 1;--color: #919191}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background{background:#e9e9e9;border-radius:100%}[theme=dark] ::ng-deep .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio__background{background:#fff!important;border-radius:100%;scale:.8}[theme=dark] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle,[theme=light] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:1px}[theme=dark] ::ng-deep .mat-ripple,[theme=light] ::ng-deep .mat-ripple{display:none}[haserror=true] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:2px}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-checked ::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border:1px solid #ffffff;border-radius:64px;background:#fff}.multiple-checked ::ng-deep label{color:#fff;height:100%;width:100%}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#fff;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-checked[theme=classic][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800}.multiple-unchecked{border:1px solid #E0E0E0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #E0E0E0}.multiple-unchecked ::ng-deep label{height:100%;width:100%}.multiple-unchecked ::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff}.multiple-unchecked[theme=dark][hasError=false]:not(.multiple-disabled):hover,.multiple-unchecked[theme=light][hasError=false]:not(.multiple-disabled):hover{outline:1px solid #242424;background:#fff;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}.radio-container{cursor:pointer}.radio-container .label,.radio-button .label{cursor:pointer;-webkit-user-select:none;user-select:none}:host *[hasError=true] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #E02800 !important;--mdc-radio-unselected-hover-icon-color: #E02800 !important;--mdc-radio-unselected-focus-icon-color: #E02800 !important}:host ::ng-deep .mat-mdc-radio-touch-target{height:40px;width:40px}.radio,.radio-container{--border-width-default-state: 4px;--border-width-animation-state: 6px;width:100%}.radio[alignment=top] ::ng-deep .mdc-form-field,.radio-container[alignment=top] ::ng-deep .mdc-form-field{align-items:start}.radio[alignment=top] .label,.radio-container[alignment=top] .label{margin-top:10px}.radio[truncate-text=true] .label,.radio[truncate-text=true] ::ng-deep label,.radio-container[truncate-text=true] .label,.radio-container[truncate-text=true] ::ng-deep label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes focus-ring-animation{0%{outline-width:var(--border-width-animation-state)}to{outline-width:var(--border-width-default-state)}}.radio-container[hasError=true]{outline:1px solid #E02800}.radio .label{display:block;width:100%;cursor:pointer}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused{outline:none;--mat-radio-checked-ripple-color: transparent!important;--mat-radio-ripple-color: transparent!important}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused ::ng-deep .mdc-radio__background{outline:3px solid #242424;animation:focus-ring-animation .4s forwards}::ng-deep .mat-mdc-radio-button.mat-accent.cdk-keyboard-focused ::ng-deep .mdc-radio__background:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;outline:2px solid #ffffff;border-radius:100px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4$4.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6395
6460
|
}
|
|
6396
6461
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
6397
6462
|
type: Component,
|
|
@@ -6624,7 +6689,7 @@ class SnackbarComponent {
|
|
|
6624
6689
|
this.snackbarRef.dismiss();
|
|
6625
6690
|
}
|
|
6626
6691
|
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$7.MatSnackBarRef }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6627
|
-
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" }, 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 >\n <div\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"], 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.SlicePipe, name: "slice" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
|
|
6692
|
+
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" }, 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 >\n <div\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.SlicePipe, name: "slice" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
|
|
6628
6693
|
trigger('openClose', [
|
|
6629
6694
|
transition(':enter', [
|
|
6630
6695
|
style({ bottom: '-55px', opacity: 0 }),
|
|
@@ -7489,7 +7554,7 @@ class DropdownComponent {
|
|
|
7489
7554
|
this.opened.emit();
|
|
7490
7555
|
}
|
|
7491
7556
|
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 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7492
|
-
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" }, outputs: { closed: "closed", opened: "opened" }, host: { properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, 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-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: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "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"], 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 }); }
|
|
7557
|
+
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" }, outputs: { closed: "closed", opened: "opened" }, host: { properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, 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-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 }); }
|
|
7493
7558
|
}
|
|
7494
7559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
7495
7560
|
type: Component,
|
|
@@ -8012,7 +8077,7 @@ class DatepickerComponent {
|
|
|
8012
8077
|
this.onValueChange(fullDate);
|
|
8013
8078
|
}
|
|
8014
8079
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DatepickerComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i2.DomSanitizer }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8015
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: DatepickerComponent, selector: "ui-datepicker", inputs: { label: "label", fieldName: "fieldName", placeholder: "placeholder", id: "id", value: "value", errors: "errors", isRange: "isRange", disabled: "disabled", required: "required", hintMessage: "hintMessage", updateOnBlur: "updateOnBlur", language: "language", showBottomContent: "showBottomContent", fullWidth: "fullWidth", minDate: "minDate", maxDate: "maxDate", monthPicker: "monthPicker", applicationTheme: "applicationTheme", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", preventUserInput: "preventUserInput" }, outputs: { changed: "changed" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <mat-form-field\n *ngIf=\"!monthPicker; else dateYearPicker\"\n #uiDatepicker\n appearance=\"outline\"\n [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n >\n <mat-label *ngIf=\"label\">{{ label }}<span *ngIf=\"required\"> *</span></mat-label>\n <ng-container *ngIf=\"!isRange\">\n <input *ngIf=\"!isRange\" matInput\n [matDatepicker]=\"picker\"\n (blur)=\"onTouch()\"\n (dateChange)=\"onValueChange($event.value)\"\n [id]=\"id!\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [name]=\"fieldName!\"\n [readonly]=\"preventUserInput\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n <ui-icon matDatepickerToggleIcon [applicationTheme]=\"applicationTheme\" name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n </mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </ng-container>\n\n <ng-container *ngIf=\"isRange\">\n <mat-date-range-input *ngIf=\"isRange\" [formGroup]=\"range\" [rangePicker]=\"rangePicker\" [min]=\"minDate\" [max]=\"maxDate\" >\n <input matStartDate #dateRangeStart formControlName=\"start\" [placeholder]=\"(translationContext + 'START_DATE') | uiTranslate : language\" (dateChange)=\"dateRangeChange(dateRangeStart.value, dateRangeEnd.value)\">\n <input matEndDate #dateRangeEnd formControlName=\"end\" [placeholder]=\"(translationContext + 'END_DATE') | uiTranslate : language\" (dateChange)=\"dateRangeChange(dateRangeStart.value, dateRangeEnd.value)\">\n </mat-date-range-input>\n <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n <ui-icon matDatepickerToggleIcon [applicationTheme]=\"applicationTheme\" name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n </mat-datepicker-toggle>\n <mat-date-range-picker #rangePicker></mat-date-range-picker>\n </ng-container>\n\n <mat-hint class=\"info\" *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\">{{ hint }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n <ng-container *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of _errors\">\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\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n </mat-hint>\n </mat-form-field>\n\n <ng-template #dateYearPicker>\n <mat-form-field\n appNoDateFormat\n #uiDatepicker\n appearance=\"outline\"\n [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n >\n <mat-label *ngIf=\"label\">{{ label }}<span *ngIf=\"required\"> *</span></mat-label>\n\n <ng-container >\n <input matInput\n [id]=\"id!\"\n (blur)=\"onTouch()\"\n [placeholder]=\"placeholder!\"\n [matDatepicker]=\"dp\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [name]=\"fieldName!\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n [readonly]=\"preventUserInput\"\n (change)=\"onInput($event)\"\n (dateChange)=\"onValueChange($event.value)\"\n >\n <mat-datepicker-toggle matIconSuffix [for]=\"dp\">\n <ui-icon *ngIf=\"applicationTheme !== 'classic'\" matDatepickerToggleIcon [applicationTheme]=\"applicationTheme\" name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n </mat-datepicker-toggle>\n <mat-datepicker panelClass=\"month-picker\" #dp startView=\"multi-year\" (monthSelected)=\"setMonthAndYear($event, dp)\"></mat-datepicker>\n </ng-container>\n\n <mat-hint class=\"info\" *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\">{{ hint }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n <ng-container *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of _errors\">\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\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n </mat-hint>\n\n </mat-form-field>\n </ng-template>\n\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}.month-picker .mat-calendar-period-button{pointer-events:none}.month-picker .mat-calendar-arrow{display:none}.ui-datepicker{width:100%}.ui-datepicker .mat-mdc-form-field{margin-top:0;min-width:296px}.ui-datepicker .mat-mdc-form-field.full-width{width:100%}.ui-datepicker .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-datepicker .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-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;max-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:0;font-size:12px;line-height:16px;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:4px}.ui-datepicker .mat-mdc-form-field.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-datepicker .mat-mdc-form-field.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-datepicker .mat-mdc-form-field.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-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex;padding-bottom:10px}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint .hint-message{color:#888!important;margin-top:4px}.mat-datepicker-content .mat-mdc-button.mat-unthemed .mdc-button__label>span{font-weight:600}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#e9f0f1}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#e9f0f1}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff2fc}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before,[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#fff2fc}[theme=dark] .mat-datepicker-content .mat-calendar-body-selected,[theme=light] .mat-datepicker-content .mat-calendar-body-selected{background-color:#d410aa}[theme=dark] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected),[theme=light] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected){background:transparent;--mat-datepicker-calendar-date-focus-state-background-color: $tgo-white }[theme=dark] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){--mat-datepicker-calendar-date-focus-state-background-color: $brand-10}.info{margin-top:4px!important;padding-bottom:10px}\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: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.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: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { 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.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: i7$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i7$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i7$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i7$3.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i7$3.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i7$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: NoDateFormatDirective, selector: "[appNoDateFormat]" }, { 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 }); }
|
|
8080
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: DatepickerComponent, selector: "ui-datepicker", inputs: { label: "label", fieldName: "fieldName", placeholder: "placeholder", id: "id", value: "value", errors: "errors", isRange: "isRange", disabled: "disabled", required: "required", hintMessage: "hintMessage", updateOnBlur: "updateOnBlur", language: "language", showBottomContent: "showBottomContent", fullWidth: "fullWidth", minDate: "minDate", maxDate: "maxDate", monthPicker: "monthPicker", applicationTheme: "applicationTheme", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", preventUserInput: "preventUserInput" }, outputs: { changed: "changed" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <mat-form-field\n *ngIf=\"!monthPicker; else dateYearPicker\"\n #uiDatepicker\n appearance=\"outline\"\n [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n >\n <mat-label *ngIf=\"label\">{{ label }}<span *ngIf=\"required\"> *</span></mat-label>\n <ng-container *ngIf=\"!isRange\">\n <input *ngIf=\"!isRange\" matInput\n [matDatepicker]=\"picker\"\n (blur)=\"onTouch()\"\n (dateChange)=\"onValueChange($event.value)\"\n [id]=\"id!\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [name]=\"fieldName!\"\n [readonly]=\"preventUserInput\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n <ui-icon matDatepickerToggleIcon [applicationTheme]=\"applicationTheme\" name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n </mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </ng-container>\n\n <ng-container *ngIf=\"isRange\">\n <mat-date-range-input *ngIf=\"isRange\" [formGroup]=\"range\" [rangePicker]=\"rangePicker\" [min]=\"minDate\" [max]=\"maxDate\" >\n <input matStartDate #dateRangeStart formControlName=\"start\" [placeholder]=\"(translationContext + 'START_DATE') | uiTranslate : language\" (dateChange)=\"dateRangeChange(dateRangeStart.value, dateRangeEnd.value)\">\n <input matEndDate #dateRangeEnd formControlName=\"end\" [placeholder]=\"(translationContext + 'END_DATE') | uiTranslate : language\" (dateChange)=\"dateRangeChange(dateRangeStart.value, dateRangeEnd.value)\">\n </mat-date-range-input>\n <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n <ui-icon matDatepickerToggleIcon [applicationTheme]=\"applicationTheme\" name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n </mat-datepicker-toggle>\n <mat-date-range-picker #rangePicker></mat-date-range-picker>\n </ng-container>\n\n <mat-hint class=\"info\" *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\">{{ hint }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n <ng-container *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of _errors\">\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\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n </mat-hint>\n </mat-form-field>\n\n <ng-template #dateYearPicker>\n <mat-form-field\n appNoDateFormat\n #uiDatepicker\n appearance=\"outline\"\n [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n >\n <mat-label *ngIf=\"label\">{{ label }}<span *ngIf=\"required\"> *</span></mat-label>\n\n <ng-container >\n <input matInput\n [id]=\"id!\"\n (blur)=\"onTouch()\"\n [placeholder]=\"placeholder!\"\n [matDatepicker]=\"dp\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [name]=\"fieldName!\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n [readonly]=\"preventUserInput\"\n (change)=\"onInput($event)\"\n (dateChange)=\"onValueChange($event.value)\"\n >\n <mat-datepicker-toggle matIconSuffix [for]=\"dp\">\n <ui-icon *ngIf=\"applicationTheme !== 'classic'\" matDatepickerToggleIcon [applicationTheme]=\"applicationTheme\" name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n </mat-datepicker-toggle>\n <mat-datepicker panelClass=\"month-picker\" #dp startView=\"multi-year\" (monthSelected)=\"setMonthAndYear($event, dp)\"></mat-datepicker>\n </ng-container>\n\n <mat-hint class=\"info\" *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\">{{ hint }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n <ng-container *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of _errors\">\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\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n </mat-hint>\n\n </mat-form-field>\n </ng-template>\n\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}.month-picker .mat-calendar-period-button{pointer-events:none}.month-picker .mat-calendar-arrow{display:none}.ui-datepicker{width:100%}.ui-datepicker .mat-mdc-form-field{margin-top:0;min-width:296px}.ui-datepicker .mat-mdc-form-field.full-width{width:100%}.ui-datepicker .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-datepicker .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-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;max-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:0;font-size:12px;line-height:16px;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:4px}.ui-datepicker .mat-mdc-form-field.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-datepicker .mat-mdc-form-field.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-datepicker .mat-mdc-form-field.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-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex;padding-bottom:10px}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint .hint-message{color:#888!important;margin-top:4px}.mat-datepicker-content .mat-mdc-button.mat-unthemed .mdc-button__label>span{font-weight:600}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#e9f0f1}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#e9f0f1}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#fff2fc}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before,[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#fff2fc}[theme=dark] .mat-datepicker-content .mat-calendar-body-selected,[theme=light] .mat-datepicker-content .mat-calendar-body-selected{background-color:#d410aa}[theme=dark] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected),[theme=light] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected){background:transparent;--mat-datepicker-calendar-date-focus-state-background-color: $tgo-white }[theme=dark] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){--mat-datepicker-calendar-date-focus-state-background-color: $brand-10}.info{margin-top:4px!important;padding-bottom:10px}\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: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { 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.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: i7$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i7$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i7$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i7$3.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i7$3.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i7$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: NoDateFormatDirective, selector: "[appNoDateFormat]" }, { 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 }); }
|
|
8016
8081
|
}
|
|
8017
8082
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
8018
8083
|
type: Component,
|
|
@@ -8441,7 +8506,7 @@ class ToggleComponent {
|
|
|
8441
8506
|
useExisting: forwardRef(() => ToggleComponent),
|
|
8442
8507
|
multi: true,
|
|
8443
8508
|
},
|
|
8444
|
-
], 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 >\n <div\n class=\"label\"\n uiEllipseText\n [matTooltipShowDelay]=\"800\"\n [matTooltip]=\"showLabelTooltip ? label : ''\"\n (onChangeTextState)=\"changeTextState($event)\"\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}:host .toggle .toggle-container:focus{outline:1px dashed #888888;outline-offset:4px}: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"], 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"] }] }); }
|
|
8509
|
+
], 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 >\n <div\n class=\"label\"\n uiEllipseText\n [matTooltipShowDelay]=\"800\"\n [matTooltip]=\"showLabelTooltip ? label : ''\"\n (onChangeTextState)=\"changeTextState($event)\"\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}:host .toggle .toggle-container:focus{outline:1px dashed #888888;outline-offset:4px}: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"] }] }); }
|
|
8445
8510
|
}
|
|
8446
8511
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
8447
8512
|
type: Component,
|
|
@@ -8729,7 +8794,7 @@ class RadialProgressComponent {
|
|
|
8729
8794
|
this.buttonClicked.emit(ev);
|
|
8730
8795
|
}
|
|
8731
8796
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: RadialProgressComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8732
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: RadialProgressComponent, selector: "ui-radial-progress", inputs: { size: "size", value: "value", total: "total", variant: "variant", icon: "icon", buttonTooltip: "buttonTooltip", companyColor: "companyColor", applicationTheme: "applicationTheme" }, outputs: { buttonClicked: "buttonClicked" }, host: { properties: { "style.--color": "this.companyColor" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"radial-progress-container\"\n [attr.theme]=\"applicationTheme\"\n [style.width]=\"progressSize + 'px'\"\n [style.height]=\"progressSize + 'px'\"\n>\n <div class=\"background\"></div>\n\n <mat-progress-spinner [strokeWidth]=\"8\" [diameter]=\"progressSize\" [value]=\"percentage\"></mat-progress-spinner>\n\n <div class=\"inner-container\">\n <ng-container *ngIf=\"variant === 'icon-button' && size !== 'small'; else number\">\n <ui-button\n [tooltip]=\"buttonTooltip\"\n [iconName]=\"icon\"\n [variant]=\"'icon-button'\"\n (click)=\"onButtonClick($event)\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-button>\n </ng-container>\n\n <ng-template #number>\n <div *ngIf=\"size === radialProgressSize.LARGE\">{{ percentage }}%</div>\n </ng-template>\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}:host .radial-progress-container{position:relative}:host .radial-progress-container .inner-container,:host .radial-progress-container .background{position:absolute;top:0;left:0;width:100%;height:100%}:host .radial-progress-container .background{border:8px solid #E0E0E0;border-radius:50%}:host .radial-progress-container .inner-container{display:flex;align-items:center;justify-content:center;color:#276678;font-size:14px;font-weight:700}:host .radial-progress-container ::ng-deep .mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle,:host .radial-progress-container .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic{stroke:var(--color);stroke-linecap:round}:host .radial-progress-container[theme=dark] .inner-container,:host .radial-progress-container[theme=light] .inner-container{color:#242424}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8797
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: RadialProgressComponent, selector: "ui-radial-progress", inputs: { size: "size", value: "value", total: "total", variant: "variant", icon: "icon", buttonTooltip: "buttonTooltip", companyColor: "companyColor", applicationTheme: "applicationTheme" }, outputs: { buttonClicked: "buttonClicked" }, host: { properties: { "style.--color": "this.companyColor" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"radial-progress-container\"\n [attr.theme]=\"applicationTheme\"\n [style.width]=\"progressSize + 'px'\"\n [style.height]=\"progressSize + 'px'\"\n>\n <div class=\"background\"></div>\n\n <mat-progress-spinner [strokeWidth]=\"8\" [diameter]=\"progressSize\" [value]=\"percentage\"></mat-progress-spinner>\n\n <div class=\"inner-container\">\n <ng-container *ngIf=\"variant === 'icon-button' && size !== 'small'; else number\">\n <ui-button\n [tooltip]=\"buttonTooltip\"\n [iconName]=\"icon\"\n [variant]=\"'icon-button'\"\n (click)=\"onButtonClick($event)\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-button>\n </ng-container>\n\n <ng-template #number>\n <div *ngIf=\"size === radialProgressSize.LARGE\">{{ percentage }}%</div>\n </ng-template>\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}:host .radial-progress-container{position:relative}:host .radial-progress-container .inner-container,:host .radial-progress-container .background{position:absolute;top:0;left:0;width:100%;height:100%}:host .radial-progress-container .background{border:8px solid #E0E0E0;border-radius:50%}:host .radial-progress-container .inner-container{display:flex;align-items:center;justify-content:center;color:#276678;font-size:14px;font-weight:700}:host .radial-progress-container ::ng-deep .mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle,:host .radial-progress-container .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic{stroke:var(--color);stroke-linecap:round}:host .radial-progress-container[theme=dark] .inner-container,:host .radial-progress-container[theme=light] .inner-container{color:#242424}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8733
8798
|
}
|
|
8734
8799
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: RadialProgressComponent, decorators: [{
|
|
8735
8800
|
type: Component,
|
|
@@ -9765,7 +9830,7 @@ class AutocompleteComponent {
|
|
|
9765
9830
|
return this.value ? !!Object.keys(this.value).length : false;
|
|
9766
9831
|
}
|
|
9767
9832
|
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 }); }
|
|
9768
|
-
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", 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" }, 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 )) ? '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 || (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 | slice: (!overlapIndex && isOverLapping ? 1 : overlapIndex ) ).length\"></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 [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 <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 </mat-autocomplete>\n <mat-hint class=\"error\" *ngIf=\"safeErrors.length || (ngControl?.errors | hasValidationError)\">\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}.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: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5$2.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$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i6.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 }); }
|
|
9833
|
+
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", 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" }, 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 )) ? '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 || (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 | slice: (!overlapIndex && isOverLapping ? 1 : overlapIndex ) ).length\"></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 [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 <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 </mat-autocomplete>\n <mat-hint class=\"error\" *ngIf=\"safeErrors.length || (ngControl?.errors | hasValidationError)\">\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}.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 }); }
|
|
9769
9834
|
}
|
|
9770
9835
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
9771
9836
|
type: Component,
|
|
@@ -10069,7 +10134,7 @@ class EmptyStateComponent {
|
|
|
10069
10134
|
}
|
|
10070
10135
|
}
|
|
10071
10136
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: EmptyStateComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10072
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: EmptyStateComponent, selector: "ui-empty-state", inputs: { showIllustration: "showIllustration", illustrationVariant: "illustrationVariant", icon: "icon", emptyStateVariant: "emptyStateVariant", title: "title", bodyText: "bodyText", primaryButtonText: "primaryButtonText", primaryButtonVariant: "primaryButtonVariant", secondaryButtonText: "secondaryButtonText", secondaryButtonVariant: "secondaryButtonVariant", tertiaryButtonText: "tertiaryButtonText", tertiaryButtonVariant: "tertiaryButtonVariant", language: "language", applicationTheme: "applicationTheme" }, outputs: { primaryButtonClick: "primaryButtonClick", secondaryButtonClick: "secondaryButtonClick", tertiaryButtonClick: "tertiaryButtonClick" }, ngImport: i0, template: "<ng-container>\n <div class=\"empty-state-container\" [attr.theme]=\"applicationTheme\" [class.mobile]=\"emptyStateVariant === 'mobile'\">\n\n <div class=\"illustration\" *ngIf=\"showIllustration\">\n <img *ngIf=\"applicationTheme === 'classic'\" [attr.src]=\"'/images/empty-state-default.svg'\" [width]=\"160\" [height]=\"160\" alt=\"illustration\">\n <img *ngIf=\"applicationTheme !== 'classic'\" [attr.src]=\"'/icons/rebrand/'+illustrationVariant+'-in-line.svg'\" [width]=\"160\" [height]=\"160\" alt=\"illustration\">\n </div>\n\n <div class=\"icon\" *ngIf=\"icon\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"icon\" size=\"40\"></ui-icon>\n </div>\n\n <div class=\"text-content\">\n <div class=\"title\">{{ title ? title : ('COMMON.NO_RESULTS') | uiTranslate : language }}</div>\n <div class=\"body-text\" *ngIf=\"bodyText\">{{ bodyText }}</div>\n </div>\n\n <div class=\"actions\">\n <ui-button [fullWidth]=\"emptyStateVariant === 'mobile'\" [applicationTheme]=\"buttonApplicationTheme\" class=\"action-button\" *ngIf=\"primaryButtonText\" [variant]=\"applicationTheme !== 'classic' ? getVariant(primaryButtonVariant) : 'primary'\" [label]=\"primaryButtonText\" (buttonClickEvent)=\"onPrimaryButtonClick($event)\"></ui-button>\n <ui-button [fullWidth]=\"emptyStateVariant === 'mobile'\" [applicationTheme]=\"buttonApplicationTheme\" class=\"action-button\" *ngIf=\"secondaryButtonText\" [variant]=\"applicationTheme !== 'classic' ? getVariant(secondaryButtonVariant) : 'secondary'\" [label]=\"secondaryButtonText\" (buttonClickEvent)=\"onSecondaryButtonClick($event)\"></ui-button>\n <ui-button [fullWidth]=\"emptyStateVariant === 'mobile'\" [applicationTheme]=\"buttonApplicationTheme\" class=\"action-button\" *ngIf=\"tertiaryButtonText\" [variant]=\"applicationTheme !== 'classic' ? getVariant(tertiaryButtonVariant) : 'tertiary'\" [label]=\"tertiaryButtonText\" (buttonClickEvent)=\"onTertiaryButtonClick($event)\"></ui-button>\n </div>\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}.empty-state-container{max-width:480px;margin:0 auto;flex-direction:column;padding:32px}.empty-state-container.mobile{max-width:none;padding:16px}.empty-state-container.mobile .actions{flex-direction:column;width:100%}@media (max-width: 600px){.empty-state-container{margin:0;padding:16px}.empty-state-container .actions{flex-direction:column;width:100%}.empty-state-container .actions ui-button{width:100%}.empty-state-container .actions ui-button ::ng-deep .button-wrapper,.empty-state-container .actions ui-button ::ng-deep button{width:100%}}.empty-state-container .text-content{margin:24px 0;flex-direction:column}.empty-state-container .text-content .title{font-weight:700;font-size:16px;line-height:24px;margin-bottom:8px;text-align:center}.empty-state-container .text-content .body-text{font-size:14px;line-height:20px;text-align:center}.empty-state-container .actions{display:flex;flex-wrap:wrap;justify-content:center}.empty-state-container .actions .action-button{margin:8px}.flex-center,.empty-state-container,.empty-state-container .text-content{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ 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: "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"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
10137
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: EmptyStateComponent, selector: "ui-empty-state", inputs: { showIllustration: "showIllustration", illustrationVariant: "illustrationVariant", icon: "icon", emptyStateVariant: "emptyStateVariant", title: "title", bodyText: "bodyText", primaryButtonText: "primaryButtonText", primaryButtonVariant: "primaryButtonVariant", secondaryButtonText: "secondaryButtonText", secondaryButtonVariant: "secondaryButtonVariant", tertiaryButtonText: "tertiaryButtonText", tertiaryButtonVariant: "tertiaryButtonVariant", language: "language", applicationTheme: "applicationTheme" }, outputs: { primaryButtonClick: "primaryButtonClick", secondaryButtonClick: "secondaryButtonClick", tertiaryButtonClick: "tertiaryButtonClick" }, ngImport: i0, template: "<ng-container>\n <div class=\"empty-state-container\" [attr.theme]=\"applicationTheme\" [class.mobile]=\"emptyStateVariant === 'mobile'\">\n\n <div class=\"illustration\" *ngIf=\"showIllustration\">\n <img *ngIf=\"applicationTheme === 'classic'\" [attr.src]=\"'/images/empty-state-default.svg'\" [width]=\"160\" [height]=\"160\" alt=\"illustration\">\n <img *ngIf=\"applicationTheme !== 'classic'\" [attr.src]=\"'/icons/rebrand/'+illustrationVariant+'-in-line.svg'\" [width]=\"160\" [height]=\"160\" alt=\"illustration\">\n </div>\n\n <div class=\"icon\" *ngIf=\"icon\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"icon\" size=\"40\"></ui-icon>\n </div>\n\n <div class=\"text-content\">\n <div class=\"title\">{{ title ? title : ('COMMON.NO_RESULTS') | uiTranslate : language }}</div>\n <div class=\"body-text\" *ngIf=\"bodyText\">{{ bodyText }}</div>\n </div>\n\n <div class=\"actions\">\n <ui-button [fullWidth]=\"emptyStateVariant === 'mobile'\" [applicationTheme]=\"buttonApplicationTheme\" class=\"action-button\" *ngIf=\"primaryButtonText\" [variant]=\"applicationTheme !== 'classic' ? getVariant(primaryButtonVariant) : 'primary'\" [label]=\"primaryButtonText\" (buttonClickEvent)=\"onPrimaryButtonClick($event)\"></ui-button>\n <ui-button [fullWidth]=\"emptyStateVariant === 'mobile'\" [applicationTheme]=\"buttonApplicationTheme\" class=\"action-button\" *ngIf=\"secondaryButtonText\" [variant]=\"applicationTheme !== 'classic' ? getVariant(secondaryButtonVariant) : 'secondary'\" [label]=\"secondaryButtonText\" (buttonClickEvent)=\"onSecondaryButtonClick($event)\"></ui-button>\n <ui-button [fullWidth]=\"emptyStateVariant === 'mobile'\" [applicationTheme]=\"buttonApplicationTheme\" class=\"action-button\" *ngIf=\"tertiaryButtonText\" [variant]=\"applicationTheme !== 'classic' ? getVariant(tertiaryButtonVariant) : 'tertiary'\" [label]=\"tertiaryButtonText\" (buttonClickEvent)=\"onTertiaryButtonClick($event)\"></ui-button>\n </div>\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}.empty-state-container{max-width:480px;margin:0 auto;flex-direction:column;padding:32px}.empty-state-container.mobile{max-width:none;padding:16px}.empty-state-container.mobile .actions{flex-direction:column;width:100%}@media (max-width: 600px){.empty-state-container{margin:0;padding:16px}.empty-state-container .actions{flex-direction:column;width:100%}.empty-state-container .actions ui-button{width:100%}.empty-state-container .actions ui-button ::ng-deep .button-wrapper,.empty-state-container .actions ui-button ::ng-deep button{width:100%}}.empty-state-container .text-content{margin:24px 0;flex-direction:column}.empty-state-container .text-content .title{font-weight:700;font-size:16px;line-height:24px;margin-bottom:8px;text-align:center}.empty-state-container .text-content .body-text{font-size:14px;line-height:20px;text-align:center}.empty-state-container .actions{display:flex;flex-wrap:wrap;justify-content:center}.empty-state-container .actions .action-button{margin:8px}.flex-center,.empty-state-container,.empty-state-container .text-content{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ 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: "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" }] }); }
|
|
10073
10138
|
}
|
|
10074
10139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: EmptyStateComponent, decorators: [{
|
|
10075
10140
|
type: Component,
|
|
@@ -10512,7 +10577,7 @@ class TableComponent {
|
|
|
10512
10577
|
this.dataSourceDetail = new MatTableDataSource(rowData);
|
|
10513
10578
|
}
|
|
10514
10579
|
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 }); }
|
|
10515
|
-
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"], 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: [
|
|
10580
|
+
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: [
|
|
10516
10581
|
trigger('expandDetail', [
|
|
10517
10582
|
state('collapsed, void', style({ height: '0px' })),
|
|
10518
10583
|
state('expanded', style({ height: '*' })),
|
|
@@ -10779,7 +10844,7 @@ class SliderComponent {
|
|
|
10779
10844
|
useExisting: forwardRef(() => SliderComponent),
|
|
10780
10845
|
multi: true,
|
|
10781
10846
|
},
|
|
10782
|
-
], 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: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10847
|
+
], 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 }); }
|
|
10783
10848
|
}
|
|
10784
10849
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: SliderComponent, decorators: [{
|
|
10785
10850
|
type: Component,
|
|
@@ -11123,7 +11188,7 @@ class PageHeaderComponent {
|
|
|
11123
11188
|
this.back.emit();
|
|
11124
11189
|
}
|
|
11125
11190
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PageHeaderComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: IS_MOBILE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11126
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: PageHeaderComponent, selector: "ui-page-header", inputs: { showBackButton: ["showBackButton", "showBackButton", booleanAttribute], language: "language", tooltip: "tooltip", applicationTheme: "applicationTheme" }, outputs: { back: "back" }, host: { properties: { "attr.theme": "this.applicationTheme" } }, ngImport: i0, template: "<ng-container>\n <div class=\"page-header-container\">\n <div class=\"page-header-content\">\n <ng-container *ngIf=\"!(isMobile$ | async) else mobile\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"showBackButton\"\n (click)=\"onBack()\"\n [variant]=\"'ghost'\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-container>\n\n <ng-template #mobile>\n <ui-button\n [applicationTheme]=\"applicationTheme\" class=\"mobile-back-btn\" [tooltip]=\"('COMMON.BACK') | uiTranslate : language\"\n [variant]=\"'icon-button'\"\n (click)=\"onBack()\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-template>\n\n <div class=\"main-content\" [ngClass]=\"{ 'remove-margin': !showBackButton }\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n </div>\n </div>\n </div>\n\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}.page-header-container{border-bottom:1px solid #E0E0E0}.page-header-container .page-header-content{display:flex;flex-direction:row;padding:16px 64px;max-width:1312px;min-height:48px}.page-header-container .page-header-content .main-content{margin:0 16px 0 24px}.page-header-container .page-header-content .main-content.remove-margin{margin-left:0}.page-header-container .page-header-content .desktop-back-btn{margin-right:24px}@media (max-width: 600px){.page-header-container .page-header-content{padding:8px 16px;max-width:unset}.page-header-container .page-header-content .main-content{width:100%;margin:0 0 0 16px}.page-header-container .page-header-content .main-content .content{width:100%}.page-header-container .page-header-content .right-side{display:none}}.page-header-container .page-header-content .mobile-back-btn{top:-10px;position:relative}.page-header-container .page-header-content .right-side{margin-left:auto}:host[theme=dark] .page-header-container,:host[theme=light] .page-header-container{border-color:#d3d3d3}\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"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
11191
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: PageHeaderComponent, selector: "ui-page-header", inputs: { showBackButton: ["showBackButton", "showBackButton", booleanAttribute], language: "language", tooltip: "tooltip", applicationTheme: "applicationTheme" }, outputs: { back: "back" }, host: { properties: { "attr.theme": "this.applicationTheme" } }, ngImport: i0, template: "<ng-container>\n <div class=\"page-header-container\">\n <div class=\"page-header-content\">\n <ng-container *ngIf=\"!(isMobile$ | async) else mobile\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n *ngIf=\"showBackButton\"\n (click)=\"onBack()\"\n [variant]=\"'ghost'\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-container>\n\n <ng-template #mobile>\n <ui-button\n [applicationTheme]=\"applicationTheme\" class=\"mobile-back-btn\" [tooltip]=\"('COMMON.BACK') | uiTranslate : language\"\n [variant]=\"'icon-button'\"\n (click)=\"onBack()\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n </ng-template>\n\n <div class=\"main-content\" [ngClass]=\"{ 'remove-margin': !showBackButton }\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n </div>\n </div>\n </div>\n\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}.page-header-container{border-bottom:1px solid #E0E0E0}.page-header-container .page-header-content{display:flex;flex-direction:row;padding:16px 64px;max-width:1312px;min-height:48px}.page-header-container .page-header-content .main-content{margin:0 16px 0 24px}.page-header-container .page-header-content .main-content.remove-margin{margin-left:0}.page-header-container .page-header-content .desktop-back-btn{margin-right:24px}@media (max-width: 600px){.page-header-container .page-header-content{padding:8px 16px;max-width:unset}.page-header-container .page-header-content .main-content{width:100%;margin:0 0 0 16px}.page-header-container .page-header-content .main-content .content{width:100%}.page-header-container .page-header-content .right-side{display:none}}.page-header-container .page-header-content .mobile-back-btn{top:-10px;position:relative}.page-header-container .page-header-content .right-side{margin-left:auto}:host[theme=dark] .page-header-container,:host[theme=light] .page-header-container{border-color:#d3d3d3}\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: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
11127
11192
|
}
|
|
11128
11193
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
11129
11194
|
type: Component,
|
|
@@ -11487,8 +11552,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
11487
11552
|
}] });
|
|
11488
11553
|
|
|
11489
11554
|
class OverflowMenuComponent {
|
|
11490
|
-
constructor(defaultAppTheme) {
|
|
11555
|
+
constructor(defaultAppTheme, focusMonitor, ngZone) {
|
|
11491
11556
|
this.defaultAppTheme = defaultAppTheme;
|
|
11557
|
+
this.focusMonitor = focusMonitor;
|
|
11558
|
+
this.ngZone = ngZone;
|
|
11492
11559
|
/**
|
|
11493
11560
|
* Menu icon trigger
|
|
11494
11561
|
*
|
|
@@ -11516,14 +11583,53 @@ class OverflowMenuComponent {
|
|
|
11516
11583
|
* @memberof OverflowMenuComponent
|
|
11517
11584
|
*/
|
|
11518
11585
|
this.ariaRequired = false;
|
|
11586
|
+
/**
|
|
11587
|
+
* A string representing the ARIA requirement for accessibility.
|
|
11588
|
+
* This attribute is used to indicate whether an input for description.
|
|
11589
|
+
* @type {text}
|
|
11590
|
+
* @memberof OverflowMenuComponent
|
|
11591
|
+
*/
|
|
11592
|
+
this.describedby = '';
|
|
11593
|
+
/**
|
|
11594
|
+
* The language to be used
|
|
11595
|
+
*
|
|
11596
|
+
* @type {Language}
|
|
11597
|
+
* @memberof OverflowMenuComponent
|
|
11598
|
+
*/
|
|
11599
|
+
this.language = LanguageService.defaultLanguage;
|
|
11519
11600
|
this.selectItem = new EventEmitter();
|
|
11520
11601
|
this.menuOpened = new EventEmitter();
|
|
11521
11602
|
this.menuClosed = new EventEmitter();
|
|
11603
|
+
this.menuItems = [];
|
|
11604
|
+
this.submenus = [];
|
|
11605
|
+
this.isMenuRendered = signal(false);
|
|
11606
|
+
this.isMenuOpened = signal(false);
|
|
11607
|
+
this.isFocused = signal(false);
|
|
11522
11608
|
if (defaultAppTheme) {
|
|
11523
11609
|
this.applicationTheme = defaultAppTheme;
|
|
11524
11610
|
}
|
|
11525
11611
|
}
|
|
11526
|
-
ngOnInit() {
|
|
11612
|
+
ngOnInit() {
|
|
11613
|
+
this.createSubmenus(this.buttons, "s0", 1);
|
|
11614
|
+
this.reindex();
|
|
11615
|
+
}
|
|
11616
|
+
ngAfterViewInit() {
|
|
11617
|
+
queueMicrotask(() => {
|
|
11618
|
+
this.isMenuRendered.set(true);
|
|
11619
|
+
});
|
|
11620
|
+
setTimeout(() => {
|
|
11621
|
+
this.focusMonitor.monitor(this.buttonElement).subscribe(origin => this.ngZone.run(() => {
|
|
11622
|
+
if (origin === 'keyboard') {
|
|
11623
|
+
this.isFocused.set(true);
|
|
11624
|
+
}
|
|
11625
|
+
else {
|
|
11626
|
+
if (!this.isMenuOpened()) {
|
|
11627
|
+
this.isFocused.set(false);
|
|
11628
|
+
}
|
|
11629
|
+
}
|
|
11630
|
+
}));
|
|
11631
|
+
}, 0);
|
|
11632
|
+
}
|
|
11527
11633
|
onSelectItem(event, value) {
|
|
11528
11634
|
if (!!value) {
|
|
11529
11635
|
this.selectItem.emit(value);
|
|
@@ -11531,22 +11637,78 @@ class OverflowMenuComponent {
|
|
|
11531
11637
|
}
|
|
11532
11638
|
onMenuOpened() {
|
|
11533
11639
|
this.menuOpened.emit();
|
|
11640
|
+
this.isMenuOpened.set(true);
|
|
11641
|
+
if (this.isFocused()) {
|
|
11642
|
+
setTimeout(() => {
|
|
11643
|
+
this.matmenus.first._allItems.first.focus('keyboard');
|
|
11644
|
+
}, 300);
|
|
11645
|
+
}
|
|
11534
11646
|
}
|
|
11535
11647
|
onMenuClosed() {
|
|
11648
|
+
this.isMenuOpened.set(false);
|
|
11536
11649
|
this.menuClosed.emit();
|
|
11537
11650
|
}
|
|
11538
|
-
|
|
11539
|
-
|
|
11651
|
+
onButtonFocus(button) {
|
|
11652
|
+
button.isFocused = true;
|
|
11653
|
+
}
|
|
11654
|
+
onButtonBlur(button) {
|
|
11655
|
+
button.isFocused = false;
|
|
11656
|
+
}
|
|
11657
|
+
onButtonClick(button, $event) {
|
|
11658
|
+
if (button.disabled) {
|
|
11659
|
+
$event.preventDefault();
|
|
11660
|
+
$event.stopPropagation();
|
|
11661
|
+
}
|
|
11662
|
+
}
|
|
11663
|
+
getMenu(index) {
|
|
11664
|
+
return index >= 0 && this.matmenus ? this.matmenus.find((x, i) => i == index) : null;
|
|
11665
|
+
}
|
|
11666
|
+
reindex() {
|
|
11667
|
+
this.submenus.forEach((menu) => {
|
|
11668
|
+
menu.forEach((item, index) => {
|
|
11669
|
+
if (item.subMenu !== -1)
|
|
11670
|
+
item.subMenu = this.menuItems.indexOf(item.action + '');
|
|
11671
|
+
});
|
|
11672
|
+
});
|
|
11673
|
+
}
|
|
11674
|
+
createSubmenus(menu, prefix, count) {
|
|
11675
|
+
this.menuItems.push(prefix);
|
|
11676
|
+
this.submenus.push(menu.map((item, index) => {
|
|
11677
|
+
return ({
|
|
11678
|
+
label: item.label,
|
|
11679
|
+
icon: item.icon,
|
|
11680
|
+
isDestructive: item.isDestructive,
|
|
11681
|
+
value: item.value,
|
|
11682
|
+
disabled: item.disabled,
|
|
11683
|
+
btnTemplate: item.btnTemplate,
|
|
11684
|
+
subMenu: item.subMenu ? 0 : -1,
|
|
11685
|
+
action: item.action ? item.action : prefix + index
|
|
11686
|
+
});
|
|
11687
|
+
}));
|
|
11688
|
+
menu.forEach((item, index) => {
|
|
11689
|
+
if (item.subMenu) {
|
|
11690
|
+
this.createSubmenus(item.subMenu, prefix + index, count + 1);
|
|
11691
|
+
}
|
|
11692
|
+
});
|
|
11693
|
+
}
|
|
11694
|
+
onSubmenuOpened() {
|
|
11695
|
+
this.isMenuOpened.set(!this.isMenuOpened);
|
|
11696
|
+
setTimeout(() => {
|
|
11697
|
+
this.matmenus.last._allItems.first.focus('keyboard');
|
|
11698
|
+
}, 300);
|
|
11699
|
+
}
|
|
11700
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: OverflowMenuComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i2$2.FocusMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11701
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: OverflowMenuComponent, selector: "ui-overflow-menu", inputs: { buttons: "buttons", iconTrigger: "iconTrigger", menuLabel: "menuLabel", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", describedby: "describedby", language: "language" }, outputs: { selectItem: "selectItem", menuOpened: "menuOpened", menuClosed: "menuClosed" }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true }, { propertyName: "matmenus", predicate: MatMenu, descendants: true }, { propertyName: "matTrigger", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"overflow-menu-container\" [attr.theme]=\"applicationTheme\">\n\n <button\n #buttonElement\n mat-icon-button\n *ngIf=\"isMenuRendered()\"\n [matMenuTriggerFor]=\"matmenus.first\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"isMenuOpened()\"\n (menuOpened)=\"onMenuOpened()\"\n (menuClosed)=\"onMenuClosed()\"\n class=\"overflow-menu-opener\"\n [matTooltip]=\"menuLabel\"\n >\n <span [id]=\"'describedby'\" [style.display]=\"'none'\">{{ describedby }}</span>\n <ui-icon\n [name]=\"iconTrigger\"\n [applicationTheme]=\"applicationTheme\"\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n ></ui-icon>\n </button>\n\n @for (menu of submenus; track menu) {\n <mat-menu #matMenu class=\"overflow-menu\" [overlapTrigger]=\"false\" backdropClass=\"overflow-menu-backdrop\">\n <ng-container *ngFor=\"let button of menu; index as id\">\n <ng-container\n *ngIf=\"button.btnTemplate; else uiButton\"\n [ngTemplateOutlet]=\"button.btnTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: button }\"\n ></ng-container>\n\n <ng-template #uiButton>\n <button\n mat-menu-item\n [matMenuTriggerFor]=\"getMenu(button.subMenu)\"\n (menuOpened)=\"onSubmenuOpened()\"\n (focus)=\"onButtonFocus(button);\"\n (blur)=\"onButtonBlur(button)\"\n [ngClass]=\"{ 'is-destructive': button.isDestructive, disabled: button.disabled }\"\n [disableRipple]=\"true\"\n (click)=\"onButtonClick(button, $event)\"\n [matTooltip]=\"button.isTextEllipsed ? button.label : ''\"\n [attr.aria-labelledby]=\"'labelledby-' + button.label + id\"\n [attr.aria-describedby]=\"'describedby-' + button.label + id\"\n [attr.aria-label]=\"button.ariaLabel || null\"\n role=\"menuitem\"\n matTooltipPosition=\"right\"\n >\n <span\n [id]=\"'describedby-' + button.label + id\"\n [style.display]=\"'none'\"\n >\n {{ button.disabled ? ('MENU.MENUITEM_DISABLED' | uiTranslate : language) + ' ' + (button.describedby || '') : button.describedby }}\n </span>\n <ui-icon\n [name]=\"button.icon\"\n [filled]=\"button.disabled ? false : !!button.isFocused\"\n [applicationTheme]=\"applicationTheme\"\n [size]=\"'24'\"\n [color]=\"button.isDestructive ? 'red' : button.disabled ? 'dark' : 'rebrand-black'\"\n ></ui-icon>\n <span\n [id]=\"'labelledby-' + button.label + id\"\n class=\"label\"\n uiEllipseText\n [refresh]=\"isMenuOpened()\"\n [maxDiffPixels]=\"1\"\n [isMultiline]=\"true\"\n (onChangeTextState)=\"button.isTextEllipsed = $event\"\n >{{ button.label }}</span>\n </button>\n </ng-template>\n </ng-container>\n\n <ng-content select=\"[menu-content]\"></ng-content>\n\n </mat-menu>\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}:host ::ng-deep .overflow-menu .mat-mdc-menu-content:not(:empty){padding:0}:host ::ng-deep .overflow-menu button{padding:0!important;width:fit-content!important}.overflow-menu-opener{background:transparent;height:40px;width:40px;border-radius:50px;border:unset;display:flex;align-items:center;justify-content:center;cursor:pointer}.overflow-menu-opener:focus-visible{outline-color:#242424;outline-style:solid;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}@keyframes focus-ring-animation{0%{outline-width:4px!important}to{outline-width:2px!important}}.overflow-menu-opener:hover{background:#e9e9e9}.overflow-menu-backdrop+* .mat-mdc-menu-panel{min-height:0;border-radius:8px;box-shadow:2px 24px 48px 8px #00000014}.overflow-menu-backdrop+* .mat-mdc-menu-content:not(:empty){padding:0}.overflow-menu-backdrop+* ui-button:first-child button.mat-mdc-unelevated-button.menuCell{border-radius:8px 8px 0 0}.overflow-menu-backdrop+* ui-button:last-child button.mat-mdc-unelevated-button.menuCell{border-radius:0 0 8px 8px}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell{color:#cb7b7a}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg{color:#cb7b7a}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover{background-color:#f0dad9}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-color:#f0dad9}[theme=dark] .overflow-menu-backdrop+* .mat-mdc-menu-panel,[theme=light] .overflow-menu-backdrop+* .mat-mdc-menu-panel{min-height:0;border-radius:10px;box-shadow:0 4px 16px #24242414}[theme=dark] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:hover,[theme=light] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}[theme=dark] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:active,[theme=light] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell{color:#e02800!important}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg{color:#e02800!important}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:active,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-color:#ffe6fa}button.is-destructive{background-color:#fff;color:#e02800}button.is-destructive:hover{background-color:#e02800}button.is-destructive:hover ::ng-deep mat-icon.black svg{color:#fff}button.is-destructive:disabled,button.is-destructive:disabled:hover{color:#919191;background:transparent}button.is-destructive ::ng-deep mat-icon.black svg{color:#e02800}button.is-destructive .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.is-destructive.classic-theme{border:unset;border-radius:4px;background-color:#cb7b7a;color:#fff}button.is-destructive.classic-theme:hover{background-color:#8e5655}button.is-destructive.classic-theme:disabled,button.is-destructive.classic-theme:disabled:hover{background-color:#e3c3c6}button.is-destructive.classic-theme ::ng-deep mat-icon.black svg{color:#fff}button.is-destructive.classic-theme .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button .label{text-align:left;overflow:hidden;-webkit-line-clamp:2;display:-webkit-box!important;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal}button.disabled{background:transparent;color:#888;cursor:not-allowed}button.disabled:hover{background:transparent!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: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { 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: i2$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
11540
11702
|
}
|
|
11541
11703
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: OverflowMenuComponent, decorators: [{
|
|
11542
11704
|
type: Component,
|
|
11543
|
-
args: [{ selector: 'ui-overflow-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"overflow-menu-container\" [attr.theme]=\"applicationTheme\">\n <ui-button\n [matMenuTriggerFor]=\"menu\"\n [label]=\"menuLabel\"\n [variant]=\"'menuTrigger'\"\n [size]=\"applicationTheme === 'classic' ? 'small' : 'big'\"\n [justIcon]=\"true\"\n [iconName]=\"iconTrigger\"\n (keydown.tab)=\"$event.stopPropagation()\"\n (keydown.shift.tab)=\"$event.stopPropagation()\"\n [applicationTheme]=\"applicationTheme\"\n [ariaLabel]=\"ariaLabel\"\n [ariaRequired]=\"ariaRequired\"\n (menuOpened)=\"onMenuOpened()\"\n (menuClosed)=\"onMenuClosed()\"\n class=\"overflow-menu-opener\"\n ></ui-button>\n <mat-menu #menu=\"matMenu\" class=\"overflow-menu\" [overlapTrigger]=\"false\" backdropClass=\"overflow-menu-backdrop\">\n <ng-container *ngFor=\"let button of buttons\">\n <ng-container\n *ngIf=\"button.btnTemplate; else uiButton\"\n [ngTemplateOutlet]=\"button.btnTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: button }\"\n ></ng-container>\n\n <ng-template #uiButton>\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n [fullWidth]=\"true\"\n [disabledScaleOnClick]=\"true\"\n [variant]=\"'menuCell'\"\n iconPosition=\"left\"\n [iconName]=\"button.icon\"\n [label]=\"button.label\"\n [value]=\"button.value\"\n (buttonClickEvent)=\"onSelectItem($event, button.value)\"\n (keydown.Tab)=\"$event.stopPropagation()\"\n (keydown.shift.tab)=\"$event.stopPropagation()\"\n [ariaLabel]=\"ariaLabel + '--' + button.label\"\n [ngClass]=\"{'destructive': !!button.isDestructive} \"\n [disabled]=\"button.disabled ?? false\"\n ></ui-button>\n </ng-template>\n </ng-container>\n\n\n <ng-content select=\"[menu-content]\"></ng-content>\n </mat-menu>\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 ::ng-deep .overflow-menu .mat-mdc-menu-content:not(:empty){padding:0}.overflow-menu-backdrop+* .mat-mdc-menu-panel{min-height:0;border-radius:8px;box-shadow:2px 24px 48px 8px #00000014}.overflow-menu-backdrop+* .mat-mdc-menu-content:not(:empty){padding:0}.overflow-menu-backdrop+* ui-button:first-child button.mat-mdc-unelevated-button.menuCell{border-radius:8px 8px 0 0}.overflow-menu-backdrop+* ui-button:last-child button.mat-mdc-unelevated-button.menuCell{border-radius:0 0 8px 8px}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell{color:#cb7b7a}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg{color:#cb7b7a}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover{background-color:#f0dad9}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-color:#f0dad9}[theme=dark] .overflow-menu-backdrop+* .mat-mdc-menu-panel,[theme=light] .overflow-menu-backdrop+* .mat-mdc-menu-panel{min-height:0;border-radius:10px;box-shadow:0 4px 16px #24242414}[theme=dark] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:hover,[theme=light] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}[theme=dark] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:active,[theme=light] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell{color:#e02800!important}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg{color:#e02800!important}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:active,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-color:#ffe6fa}\n"] }]
|
|
11705
|
+
args: [{ selector: 'ui-overflow-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"overflow-menu-container\" [attr.theme]=\"applicationTheme\">\n\n <button\n #buttonElement\n mat-icon-button\n *ngIf=\"isMenuRendered()\"\n [matMenuTriggerFor]=\"matmenus.first\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"isMenuOpened()\"\n (menuOpened)=\"onMenuOpened()\"\n (menuClosed)=\"onMenuClosed()\"\n class=\"overflow-menu-opener\"\n [matTooltip]=\"menuLabel\"\n >\n <span [id]=\"'describedby'\" [style.display]=\"'none'\">{{ describedby }}</span>\n <ui-icon\n [name]=\"iconTrigger\"\n [applicationTheme]=\"applicationTheme\"\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n ></ui-icon>\n </button>\n\n @for (menu of submenus; track menu) {\n <mat-menu #matMenu class=\"overflow-menu\" [overlapTrigger]=\"false\" backdropClass=\"overflow-menu-backdrop\">\n <ng-container *ngFor=\"let button of menu; index as id\">\n <ng-container\n *ngIf=\"button.btnTemplate; else uiButton\"\n [ngTemplateOutlet]=\"button.btnTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: button }\"\n ></ng-container>\n\n <ng-template #uiButton>\n <button\n mat-menu-item\n [matMenuTriggerFor]=\"getMenu(button.subMenu)\"\n (menuOpened)=\"onSubmenuOpened()\"\n (focus)=\"onButtonFocus(button);\"\n (blur)=\"onButtonBlur(button)\"\n [ngClass]=\"{ 'is-destructive': button.isDestructive, disabled: button.disabled }\"\n [disableRipple]=\"true\"\n (click)=\"onButtonClick(button, $event)\"\n [matTooltip]=\"button.isTextEllipsed ? button.label : ''\"\n [attr.aria-labelledby]=\"'labelledby-' + button.label + id\"\n [attr.aria-describedby]=\"'describedby-' + button.label + id\"\n [attr.aria-label]=\"button.ariaLabel || null\"\n role=\"menuitem\"\n matTooltipPosition=\"right\"\n >\n <span\n [id]=\"'describedby-' + button.label + id\"\n [style.display]=\"'none'\"\n >\n {{ button.disabled ? ('MENU.MENUITEM_DISABLED' | uiTranslate : language) + ' ' + (button.describedby || '') : button.describedby }}\n </span>\n <ui-icon\n [name]=\"button.icon\"\n [filled]=\"button.disabled ? false : !!button.isFocused\"\n [applicationTheme]=\"applicationTheme\"\n [size]=\"'24'\"\n [color]=\"button.isDestructive ? 'red' : button.disabled ? 'dark' : 'rebrand-black'\"\n ></ui-icon>\n <span\n [id]=\"'labelledby-' + button.label + id\"\n class=\"label\"\n uiEllipseText\n [refresh]=\"isMenuOpened()\"\n [maxDiffPixels]=\"1\"\n [isMultiline]=\"true\"\n (onChangeTextState)=\"button.isTextEllipsed = $event\"\n >{{ button.label }}</span>\n </button>\n </ng-template>\n </ng-container>\n\n <ng-content select=\"[menu-content]\"></ng-content>\n\n </mat-menu>\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}:host ::ng-deep .overflow-menu .mat-mdc-menu-content:not(:empty){padding:0}:host ::ng-deep .overflow-menu button{padding:0!important;width:fit-content!important}.overflow-menu-opener{background:transparent;height:40px;width:40px;border-radius:50px;border:unset;display:flex;align-items:center;justify-content:center;cursor:pointer}.overflow-menu-opener:focus-visible{outline-color:#242424;outline-style:solid;outline-offset:2px!important;animation:focus-ring-animation .4s forwards}@keyframes focus-ring-animation{0%{outline-width:4px!important}to{outline-width:2px!important}}.overflow-menu-opener:hover{background:#e9e9e9}.overflow-menu-backdrop+* .mat-mdc-menu-panel{min-height:0;border-radius:8px;box-shadow:2px 24px 48px 8px #00000014}.overflow-menu-backdrop+* .mat-mdc-menu-content:not(:empty){padding:0}.overflow-menu-backdrop+* ui-button:first-child button.mat-mdc-unelevated-button.menuCell{border-radius:8px 8px 0 0}.overflow-menu-backdrop+* ui-button:last-child button.mat-mdc-unelevated-button.menuCell{border-radius:0 0 8px 8px}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell{color:#cb7b7a}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg{color:#cb7b7a}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover{background-color:#f0dad9}.overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-color:#f0dad9}[theme=dark] .overflow-menu-backdrop+* .mat-mdc-menu-panel,[theme=light] .overflow-menu-backdrop+* .mat-mdc-menu-panel{min-height:0;border-radius:10px;box-shadow:0 4px 16px #24242414}[theme=dark] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:hover,[theme=light] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}[theme=dark] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:active,[theme=light] .overflow-menu-backdrop+* ui-button button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell{color:#e02800!important}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell mat-icon.black svg{color:#e02800!important}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:hover{background-color:#fff2fc}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:active,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:active{background-color:#ffe6fa}[theme=dark] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused,[theme=light] .overflow-menu-backdrop+* ui-button.destructive button.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-color:#ffe6fa}button.is-destructive{background-color:#fff;color:#e02800}button.is-destructive:hover{background-color:#e02800}button.is-destructive:hover ::ng-deep mat-icon.black svg{color:#fff}button.is-destructive:disabled,button.is-destructive:disabled:hover{color:#919191;background:transparent}button.is-destructive ::ng-deep mat-icon.black svg{color:#e02800}button.is-destructive .mat-mdc-progress-spinner ::ng-deep circle{stroke:#242424}button.is-destructive.classic-theme{border:unset;border-radius:4px;background-color:#cb7b7a;color:#fff}button.is-destructive.classic-theme:hover{background-color:#8e5655}button.is-destructive.classic-theme:disabled,button.is-destructive.classic-theme:disabled:hover{background-color:#e3c3c6}button.is-destructive.classic-theme ::ng-deep mat-icon.black svg{color:#fff}button.is-destructive.classic-theme .mat-mdc-progress-spinner ::ng-deep circle{stroke:#000}button .label{text-align:left;overflow:hidden;-webkit-line-clamp:2;display:-webkit-box!important;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal}button.disabled{background:transparent;color:#888;cursor:not-allowed}button.disabled:hover{background:transparent!important}\n"] }]
|
|
11544
11706
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
11545
11707
|
type: Optional
|
|
11546
11708
|
}, {
|
|
11547
11709
|
type: Inject,
|
|
11548
11710
|
args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
|
|
11549
|
-
}] }], propDecorators: { buttons: [{
|
|
11711
|
+
}] }, { type: i2$2.FocusMonitor }, { type: i0.NgZone }], propDecorators: { buttons: [{
|
|
11550
11712
|
type: Input
|
|
11551
11713
|
}], iconTrigger: [{
|
|
11552
11714
|
type: Input
|
|
@@ -11558,24 +11720,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImpor
|
|
|
11558
11720
|
type: Input
|
|
11559
11721
|
}], ariaRequired: [{
|
|
11560
11722
|
type: Input
|
|
11723
|
+
}], describedby: [{
|
|
11724
|
+
type: Input
|
|
11725
|
+
}], language: [{
|
|
11726
|
+
type: Input
|
|
11561
11727
|
}], selectItem: [{
|
|
11562
11728
|
type: Output
|
|
11563
11729
|
}], menuOpened: [{
|
|
11564
11730
|
type: Output
|
|
11565
11731
|
}], menuClosed: [{
|
|
11566
11732
|
type: Output
|
|
11733
|
+
}], matmenus: [{
|
|
11734
|
+
type: ViewChildren,
|
|
11735
|
+
args: [MatMenu]
|
|
11736
|
+
}], matTrigger: [{
|
|
11737
|
+
type: ViewChildren,
|
|
11738
|
+
args: [MatMenuTrigger]
|
|
11739
|
+
}], buttonElement: [{
|
|
11740
|
+
type: ViewChild,
|
|
11741
|
+
args: ['buttonElement']
|
|
11567
11742
|
}] } });
|
|
11568
11743
|
|
|
11569
11744
|
class OverflowMenuComponentModule {
|
|
11570
11745
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: OverflowMenuComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
11571
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: OverflowMenuComponentModule, declarations: [OverflowMenuComponent], imports: [CommonModule, ButtonComponentModule, IconComponentModule, MatMenuModule], exports: [OverflowMenuComponent] }); }
|
|
11572
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: OverflowMenuComponentModule, imports: [CommonModule, ButtonComponentModule, IconComponentModule, MatMenuModule] }); }
|
|
11746
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: OverflowMenuComponentModule, declarations: [OverflowMenuComponent], imports: [CommonModule, ButtonComponentModule, IconComponentModule, MatMenuModule, MatButtonModule, MatTooltipModule, EllipseTextDirective, UiTranslatePipe], exports: [OverflowMenuComponent] }); }
|
|
11747
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: OverflowMenuComponentModule, imports: [CommonModule, ButtonComponentModule, IconComponentModule, MatMenuModule, MatButtonModule, MatTooltipModule] }); }
|
|
11573
11748
|
}
|
|
11574
11749
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: OverflowMenuComponentModule, decorators: [{
|
|
11575
11750
|
type: NgModule,
|
|
11576
11751
|
args: [{
|
|
11577
11752
|
declarations: [OverflowMenuComponent],
|
|
11578
|
-
imports: [CommonModule, ButtonComponentModule, IconComponentModule, MatMenuModule],
|
|
11753
|
+
imports: [CommonModule, ButtonComponentModule, IconComponentModule, MatMenuModule, MatButtonModule, MatTooltipModule, EllipseTextDirective, UiTranslatePipe],
|
|
11579
11754
|
exports: [OverflowMenuComponent],
|
|
11580
11755
|
}]
|
|
11581
11756
|
}] });
|
|
@@ -11773,7 +11948,7 @@ class PasswordComponent {
|
|
|
11773
11948
|
useExisting: forwardRef(() => PasswordComponent),
|
|
11774
11949
|
multi: true,
|
|
11775
11950
|
},
|
|
11776
|
-
], 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", "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 }); }
|
|
11951
|
+
], 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 }); }
|
|
11777
11952
|
}
|
|
11778
11953
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PasswordComponent, decorators: [{
|
|
11779
11954
|
type: Component,
|
|
@@ -12114,7 +12289,7 @@ class PhoneInputComponent {
|
|
|
12114
12289
|
provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
|
|
12115
12290
|
useValue: { overlayPanelClass: 'phone-number-autocomplete' },
|
|
12116
12291
|
},
|
|
12117
|
-
], 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: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i7$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: i6.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 }); }
|
|
12292
|
+
], 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 }); }
|
|
12118
12293
|
}
|
|
12119
12294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: PhoneInputComponent, decorators: [{
|
|
12120
12295
|
type: Component,
|
|
@@ -12651,7 +12826,7 @@ class MultiInputComponent {
|
|
|
12651
12826
|
}
|
|
12652
12827
|
}
|
|
12653
12828
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: MultiInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12654
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: MultiInputComponent, selector: "ui-multi-input", inputs: { itemsList: "itemsList", itemTextField: "itemTextField", itemValueField: "itemValueField", value: "value", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], label: "label", allowDecimal: ["allowDecimal", "allowDecimal", booleanAttribute], allowNegative: ["allowNegative", "allowNegative", booleanAttribute], applicationTheme: "applicationTheme", errors: "errors", hideBuiltInErrors: ["hideBuiltInErrors", "hideBuiltInErrors", booleanAttribute], hideLabelInErrors: ["hideLabelInErrors", "hideLabelInErrors", booleanAttribute], language: "language", maxCharacters: "maxCharacters", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.theme": "this.applicationTheme", "class.full-width": "this.fullWidth", "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"multiInputForm\">\n <div class=\"controls-wrapper\">\n <ui-dropdown\n [hasError]=\"controlHasError\"\n [formControlName]=\"itemValueField\"\n [valueList]=\"itemsList\"\n [textField]=\"itemTextField\"\n [valueField]=\"itemValueField\"\n [showBottomContent]=\"false\"\n [allowClear]=\"false\"\n (closed)=\"markAsTouched(); checkFormErrors()\"\n ></ui-dropdown>\n\n <ui-field\n [hasError]=\"controlHasError\"\n [formControlName]=\"'value'\"\n [label]=\"label\"\n [required]=\"required\"\n [hideBuiltInErrors]=\"true\"\n [showBottomContent]=\"false\"\n [allowOnlyDigits]=\"true\"\n [fullWidth]=\"fullWidth\"\n (focusout)=\"markAsTouched(); checkFormErrors()\"\n ></ui-field>\n </div>\n\n <mat-hint class=\"info\" *ngIf=\"!controlHasError && maxCharacters && !errors?.length\">{{ getValueLength() }} / {{ maxCharacters }}</mat-hint>\n\n @if (errors?.length || (ngControl?.errors | hasValidationError)) {\n <mat-hint class=\"error\">\n @for (error of errors; track error) {\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n ></ui-icon>{{ error }}\n }\n @if ((ngControl?.errors | hasValidationError) && !hideBuiltInErrors) {\n <ui-validation-error\n [touchedOn]=\"!controlHasError\"\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : label\"\n [language]=\"language\"\n ></ui-validation-error>\n }\n </mat-hint>\n }\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}:host.ui-multi-input{position:relative!important}:host.ui-multi-input .ng-untouched,:host.ui-multi-input .ng-touched{width:fit-content}:host.ui-multi-input.full-width .ng-untouched{width:100%}:host.ui-multi-input .controls-wrapper{display:flex}:host.ui-multi-input ::ng-deep ui-validation-error .errors{display:flex}:host.ui-multi-input ::ng-deep .ui-dropdown{max-width:120px}:host.ui-multi-input ::ng-deep .ui-dropdown .mdc-notched-outline__trailing{border-right-color:transparent!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}:host.ui-multi-input ::ng-deep .ui-dropdown:hover .mdc-notched-outline__trailing,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-form-field-focused .mdc-notched-outline__trailing{border-right-color:#242424}:host.ui-multi-input ::ng-deep .ui-field .mdc-notched-outline__leading{border-top-left-radius:0!important;border-bottom-left-radius:0!important}:host.ui-multi-input ::ng-deep .ui-field .mat-mdc-form-field-subscript-wrapper{position:absolute!important;left:0!important;top:48px!important}:host.ui-multi-input ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;min-height:48px!important;align-items:center!important;display:flex!important}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.info{display:block;color:#888;width:100%;text-align:right}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error{display:flex;gap:4px;color:#e02800;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error svg{color:#e02800}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint:before{display:none}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error{color:#e02800;font-size:12px;line-height:16px;letter-spacing:.4px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error .errors{display:flex;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error svg{margin-right:4px;color:#e02800;row-gap:0}:host.ui-multi-input .separator-line{border-left:1px solid var(--mdc-outlined-text-field-outline-color);height:40px;margin:0 12px -7px 8px}:host.ui-multi-input ::ng-deep .mat-mdc-select .mat-mdc-select-arrow-wrapper{display:none}:host.ui-multi-input ::ng-deep .mdc-text-field--outlined{padding-left:12px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type:
|
|
12829
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: MultiInputComponent, selector: "ui-multi-input", inputs: { itemsList: "itemsList", itemTextField: "itemTextField", itemValueField: "itemValueField", value: "value", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], label: "label", allowDecimal: ["allowDecimal", "allowDecimal", booleanAttribute], allowNegative: ["allowNegative", "allowNegative", booleanAttribute], applicationTheme: "applicationTheme", errors: "errors", hideBuiltInErrors: ["hideBuiltInErrors", "hideBuiltInErrors", booleanAttribute], hideLabelInErrors: ["hideLabelInErrors", "hideLabelInErrors", booleanAttribute], language: "language", maxCharacters: "maxCharacters", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.theme": "this.applicationTheme", "class.full-width": "this.fullWidth", "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"multiInputForm\">\n <div class=\"controls-wrapper\">\n <ui-dropdown\n [hasError]=\"controlHasError\"\n [formControlName]=\"itemValueField\"\n [valueList]=\"itemsList\"\n [textField]=\"itemTextField\"\n [valueField]=\"itemValueField\"\n [showBottomContent]=\"false\"\n [allowClear]=\"false\"\n (closed)=\"markAsTouched(); checkFormErrors()\"\n ></ui-dropdown>\n\n <ui-field\n [hasError]=\"controlHasError\"\n [formControlName]=\"'value'\"\n [label]=\"label\"\n [required]=\"required\"\n [hideBuiltInErrors]=\"true\"\n [showBottomContent]=\"false\"\n [allowOnlyDigits]=\"true\"\n [fullWidth]=\"fullWidth\"\n (focusout)=\"markAsTouched(); checkFormErrors()\"\n ></ui-field>\n </div>\n\n <mat-hint class=\"info\" *ngIf=\"!controlHasError && maxCharacters && !errors?.length\">{{ getValueLength() }} / {{ maxCharacters }}</mat-hint>\n\n @if (errors?.length || (ngControl?.errors | hasValidationError)) {\n <mat-hint class=\"error\">\n @for (error of errors; track error) {\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n ></ui-icon>{{ error }}\n }\n @if ((ngControl?.errors | hasValidationError) && !hideBuiltInErrors) {\n <ui-validation-error\n [touchedOn]=\"!controlHasError\"\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : label\"\n [language]=\"language\"\n ></ui-validation-error>\n }\n </mat-hint>\n }\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}:host.ui-multi-input{position:relative!important}:host.ui-multi-input .ng-untouched,:host.ui-multi-input .ng-touched{width:fit-content}:host.ui-multi-input.full-width .ng-untouched{width:100%}:host.ui-multi-input .controls-wrapper{display:flex}:host.ui-multi-input ::ng-deep ui-validation-error .errors{display:flex}:host.ui-multi-input ::ng-deep .ui-dropdown{max-width:120px}:host.ui-multi-input ::ng-deep .ui-dropdown .mdc-notched-outline__trailing{border-right-color:transparent!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}:host.ui-multi-input ::ng-deep .ui-dropdown:hover .mdc-notched-outline__trailing,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-form-field-focused .mdc-notched-outline__trailing{border-right-color:#242424}:host.ui-multi-input ::ng-deep .ui-field .mdc-notched-outline__leading{border-top-left-radius:0!important;border-bottom-left-radius:0!important}:host.ui-multi-input ::ng-deep .ui-field .mat-mdc-form-field-subscript-wrapper{position:absolute!important;left:0!important;top:48px!important}:host.ui-multi-input ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;min-height:48px!important;align-items:center!important;display:flex!important}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.info{display:block;color:#888;width:100%;text-align:right}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error{display:flex;gap:4px;color:#e02800;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error svg{color:#e02800}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint:before{display:none}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error{color:#e02800;font-size:12px;line-height:16px;letter-spacing:.4px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error .errors{display:flex;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error svg{margin-right:4px;color:#e02800;row-gap:0}:host.ui-multi-input .separator-line{border-left:1px solid var(--mdc-outlined-text-field-outline-color);height:40px;margin:0 12px -7px 8px}:host.ui-multi-input ::ng-deep .mat-mdc-select .mat-mdc-select-arrow-wrapper{display:none}:host.ui-multi-input ::ng-deep .mdc-text-field--outlined{padding-left:12px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: DropdownComponent, selector: "ui-dropdown", inputs: ["label", "name", "placeholder", "id", "value", "errors", "disabled", "valueList", "allowClear", "allowMultipleSelection", "required", "language", "showBottomContent", "applicationTheme", "hideBuiltInErrors", "hideLabelInErrors", "textField", "valueField", "hasError"], outputs: ["closed", "opened"] }, { 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.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: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "language"] }, { 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: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }] }); }
|
|
12655
12830
|
}
|
|
12656
12831
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: MultiInputComponent, decorators: [{
|
|
12657
12832
|
type: Component,
|