@testgorilla/tgo-ui 1.2.2 → 1.3.0
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/autocomplete/autocomplete.component.d.ts +1 -0
- package/components/autocomplete/autocomplete.model.d.ts +1 -1
- package/components/badge/badge.component.d.ts +40 -0
- package/components/badge/badge.component.module.d.ts +9 -0
- package/components/badge/badge.model.d.ts +18 -0
- package/components/button/button.component.d.ts +11 -3
- package/components/button/button.component.module.d.ts +2 -1
- package/components/button/button.model.d.ts +1 -1
- package/components/step/step.component.d.ts +93 -0
- package/components/step/step.component.module.d.ts +9 -0
- package/components/stepper/providers/is-mobile.d.ts +2 -0
- package/components/stepper/stepper.component.d.ts +47 -0
- package/components/stepper/stepper.component.module.d.ts +13 -0
- package/components/stepper/stepper.model.d.ts +12 -0
- package/directives/select-text.directive.d.ts +1 -1
- package/directives/step-line-width.directive.d.ts +15 -0
- package/esm2022/components/alert-banner/alert-banner.component.mjs +2 -2
- package/esm2022/components/autocomplete/autocomplete.component.mjs +19 -5
- package/esm2022/components/autocomplete/autocomplete.model.mjs +2 -2
- package/esm2022/components/autocomplete/transform-Item.pipe.mjs +3 -3
- package/esm2022/components/badge/badge.component.mjs +66 -0
- package/esm2022/components/badge/badge.component.module.mjs +19 -0
- package/esm2022/components/badge/badge.model.mjs +19 -0
- package/esm2022/components/banner-action/banner-action.component.mjs +1 -1
- package/esm2022/components/button/button.component.mjs +19 -4
- package/esm2022/components/button/button.component.module.mjs +5 -4
- package/esm2022/components/button/button.model.mjs +1 -1
- package/esm2022/components/create-account/create-account.component.mjs +1 -1
- package/esm2022/components/create-password/create-password.component.mjs +1 -1
- package/esm2022/components/dialog/dialog.component.mjs +1 -1
- package/esm2022/components/dropdown/dropdown.component.mjs +1 -1
- package/esm2022/components/field/field.component.mjs +1 -1
- package/esm2022/components/forgot-password/forgot-password.component.mjs +1 -1
- package/esm2022/components/login/login.component.mjs +1 -1
- package/esm2022/components/snackbar/snackbar.component.mjs +2 -2
- package/esm2022/components/step/step.component.mjs +91 -0
- package/esm2022/components/step/step.component.module.mjs +19 -0
- package/esm2022/components/stepper/providers/is-mobile.mjs +11 -0
- package/esm2022/components/stepper/stepper.component.mjs +91 -0
- package/esm2022/components/stepper/stepper.component.module.mjs +43 -0
- package/esm2022/components/stepper/stepper.model.mjs +5 -0
- package/esm2022/directives/select-text.directive.mjs +7 -3
- package/esm2022/directives/step-line-width.directive.mjs +38 -0
- package/esm2022/public-api.mjs +8 -1
- package/fesm2022/testgorilla-tgo-ui.mjs +432 -41
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +4 -1
- package/public-api.d.ts +5 -0
- package/src/assets/i18n/en.json +3 -0
- package/src/assets/images/step-finish.svg +6 -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 { Component, ViewEncapsulation, Input, EventEmitter, Output, ChangeDetectionStrategy, NgModule, forwardRef, HostBinding, Directive, HostListener, Injectable, Inject, APP_INITIALIZER, Pipe, ViewChild, inject, ChangeDetectorRef } from '@angular/core';
|
|
3
|
+
import { Component, ViewEncapsulation, Input, EventEmitter, Output, ChangeDetectionStrategy, NgModule, forwardRef, HostBinding, Directive, HostListener, Injectable, Inject, APP_INITIALIZER, Pipe, ViewChild, InjectionToken, inject, ChangeDetectorRef } from '@angular/core';
|
|
4
4
|
import * as i1$1 from '@angular/common';
|
|
5
5
|
import { CommonModule } from '@angular/common';
|
|
6
6
|
import * as i2$1 from '@angular/material/button';
|
|
@@ -10,6 +10,8 @@ import { MatIconModule } from '@angular/material/icon';
|
|
|
10
10
|
import * as i2 from '@angular/platform-browser';
|
|
11
11
|
import * as i4 from '@angular/material/progress-spinner';
|
|
12
12
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
13
|
+
import * as i5 from '@angular/material/tooltip';
|
|
14
|
+
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
13
15
|
import { HttpClientModule } from '@angular/common/http';
|
|
14
16
|
import * as i1$2 from '@angular/material/card';
|
|
15
17
|
import { MatCardModule } from '@angular/material/card';
|
|
@@ -21,7 +23,7 @@ import * as i2$3 from '@angular/material/form-field';
|
|
|
21
23
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
22
24
|
import * as i3 from '@angular/material/input';
|
|
23
25
|
import { MatInputModule } from '@angular/material/input';
|
|
24
|
-
import * as i5 from '@angular-material-extensions/password-strength';
|
|
26
|
+
import * as i5$1 from '@angular-material-extensions/password-strength';
|
|
25
27
|
import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';
|
|
26
28
|
import * as i1$4 from '@angular/material/dialog';
|
|
27
29
|
import { MatDialogModule, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
|
@@ -29,7 +31,7 @@ import * as i1$5 from '@angular/material/progress-bar';
|
|
|
29
31
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
30
32
|
import * as i2$4 from '@angular/material/toolbar';
|
|
31
33
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
32
|
-
import * as i5$
|
|
34
|
+
import * as i5$2 from '@angular/material/menu';
|
|
33
35
|
import { MatMenuModule } from '@angular/material/menu';
|
|
34
36
|
import * as i4$2 from '@angular/material/core';
|
|
35
37
|
import { MatRippleModule, MatNativeDateModule } from '@angular/material/core';
|
|
@@ -43,17 +45,17 @@ import { __decorate } from 'tslib';
|
|
|
43
45
|
import { UntilDestroy } from '@ngneat/until-destroy';
|
|
44
46
|
import * as i1$7 from '@ngneat/transloco';
|
|
45
47
|
import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
|
|
48
|
+
import * as i7 from 'rxjs';
|
|
46
49
|
import { lastValueFrom, Subscription, ReplaySubject, debounceTime, map, startWith } from 'rxjs';
|
|
47
50
|
import * as i4$1 from '@angular/material/sort';
|
|
48
51
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
49
52
|
import * as i3$1 from '@angular/material/table';
|
|
50
53
|
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
|
|
51
|
-
import * as
|
|
52
|
-
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
53
|
-
import * as i5$2 from '@angular/material/select';
|
|
54
|
+
import * as i5$3 from '@angular/material/select';
|
|
54
55
|
import { MatSelectModule } from '@angular/material/select';
|
|
55
|
-
import * as i6
|
|
56
|
+
import * as i6 from '@angular/material/datepicker';
|
|
56
57
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
58
|
+
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
57
59
|
import * as i3$2 from '@angular/material/autocomplete';
|
|
58
60
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
59
61
|
import { MatChipsModule } from '@angular/material/chips';
|
|
@@ -362,6 +364,13 @@ class ButtonComponent {
|
|
|
362
364
|
* @memberof ButtonComponent
|
|
363
365
|
*/
|
|
364
366
|
this.fullWidth = false;
|
|
367
|
+
/**
|
|
368
|
+
* @property tooltip
|
|
369
|
+
* @description The tooltip that is displayed on hover. Required for icon-button type
|
|
370
|
+
* @type {string}
|
|
371
|
+
* @memberof ButtonComponent
|
|
372
|
+
*/
|
|
373
|
+
this.tooltip = '';
|
|
365
374
|
this.buttonClickEvent = new EventEmitter();
|
|
366
375
|
this.buttonHoverEvent = new EventEmitter();
|
|
367
376
|
}
|
|
@@ -385,6 +394,11 @@ class ButtonComponent {
|
|
|
385
394
|
this.classCss = this.setCssClass();
|
|
386
395
|
}
|
|
387
396
|
}
|
|
397
|
+
ngAfterViewInit() {
|
|
398
|
+
if (this.type === 'icon-button' && !this.tooltip) {
|
|
399
|
+
throw new Error('ui-button ButtonComponent\n [tooltip] is required for [type] icon-button!');
|
|
400
|
+
}
|
|
401
|
+
}
|
|
388
402
|
buttonClick(event) {
|
|
389
403
|
this.buttonClickEvent.emit(event);
|
|
390
404
|
}
|
|
@@ -399,7 +413,7 @@ class ButtonComponent {
|
|
|
399
413
|
setCssClass() {
|
|
400
414
|
const width = this.fullWidth ? 'full-width' : '';
|
|
401
415
|
const hasIcon = this.iconName === null ? '' : 'icon';
|
|
402
|
-
const justIcon = this.justIcon ? 'only-icon' : '';
|
|
416
|
+
const justIcon = this.justIcon || this.type === 'icon-button' ? 'only-icon' : '';
|
|
403
417
|
const iconPosition = this.iconPosition === undefined ? '' : this.iconPosition;
|
|
404
418
|
return `${this.size} ${iconPosition} ${this.type} ${width} ${hasIcon} ${justIcon}`;
|
|
405
419
|
}
|
|
@@ -415,11 +429,11 @@ class ButtonComponent {
|
|
|
415
429
|
return this.type !== 'link';
|
|
416
430
|
}
|
|
417
431
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
418
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, selector: "ui-button", inputs: { size: "size", type: "type", label: "label", iconPosition: "iconPosition", justIcon: "justIcon", iconName: "iconName", disabled: "disabled", loading: "loading", fullWidth: "fullWidth", url: "url", urlTarget: "urlTarget", value: "value" }, outputs: { buttonClickEvent: "buttonClickEvent", buttonHoverEvent: "buttonHoverEvent" }, usesOnChanges: true, ngImport: i0, template: "<button\n [ngClass]=\"classCss\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick($event)\"\n (mouseenter)=\"buttonHover($event)\"\n [disableRipple]=\"true\"\n *ngIf=\"isButtonLink\"\n mat-flat-button>\n <span class=\"icon-only-wrapper\" *ngIf=\"justIcon === true && !!iconName\">\n <span class=\"icon only\" role=\"label\" [attr.aria-label]=\"label\"><ui-icon [name]=\"iconName\" size=\"24\"></ui-icon></span>\n </span>\n <span class=\"icon-label-wrapper\" [ngClass]=\"{'center-text': iconName === ''}\" *ngIf=\"justIcon === false\">\n <span class=\"icon\" *ngIf=\"iconPosition === 'left' && !!iconName\" aria-hidden=\"true\"><ui-icon [name]=\"iconName\" size=\"24\"></ui-icon></span>\n <span *ngIf=\"isLabel\" class=\"label\">{{ label }}</span>\n <span class=\"icon\" *ngIf=\"iconPosition === 'right' && !!iconName\" aria-hidden=\"true\"><ui-icon [name]=\"iconName\" size=\"24\"></ui-icon></span>\n <span class=\"spinner-wrapper\" *ngIf=\"showSpinner()\">\n <mat-spinner class=\"position-spinner\" aria-label=\"loading\" mode=\"indeterminate\" diameter=\"24\"></mat-spinner>\n </span>\n </span>\n</button>\n<a\n [ngClass]=\"classCss\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick($event)\"\n (mouseenter)=\"buttonHover($event)\"\n [disableRipple]=\"true\"\n *ngIf=\"!isButtonLink\" \n [href]=\"url\" \n [target]=\"urlTarget\"\n mat-flat-button>\n <span class=\"icon-label-wrapper\">\n {{ label }}\n </span>\n</a>\n", styles: [":host{display:flex}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 16px}button.mat-mdc-unelevated-button.small,a.mat-mdc-unelevated-button.small{height:38px;padding:7px 11px}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.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.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.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.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.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.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.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.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:focus,button.mat-mdc-unelevated-button.secondary:focus,button.mat-mdc-unelevated-button.outlined:focus,button.mat-mdc-unelevated-button.destructive:focus,button.mat-mdc-unelevated-button.tertiary:focus,button.mat-mdc-unelevated-button.link:focus,button.mat-mdc-unelevated-button.tab:focus,button.mat-mdc-unelevated-button.squareicon:focus,button.mat-mdc-unelevated-button.menuTrigger:focus,a.mat-mdc-unelevated-button.primary:focus,a.mat-mdc-unelevated-button.secondary:focus,a.mat-mdc-unelevated-button.outlined:focus,a.mat-mdc-unelevated-button.destructive:focus,a.mat-mdc-unelevated-button.tertiary:focus,a.mat-mdc-unelevated-button.link:focus,a.mat-mdc-unelevated-button.tab:focus,a.mat-mdc-unelevated-button.squareicon:focus,a.mat-mdc-unelevated-button.menuTrigger:focus{outline:1px dashed #888888;outline-offset:4px}button.mat-mdc-unelevated-button.menuCell:focus,a.mat-mdc-unelevated-button.menuCell:focus{outline:1px dashed #888888;outline-offset:-1px}button.mat-mdc-unelevated-button.primary,a.mat-mdc-unelevated-button.primary{background-color:#46a997;color:#fff}button.mat-mdc-unelevated-button.primary:hover,a.mat-mdc-unelevated-button.primary:hover{background-color:#31766a}button.mat-mdc-unelevated-button.primary:disabled,button.mat-mdc-unelevated-button.primary:disabled:hover,a.mat-mdc-unelevated-button.primary:disabled,a.mat-mdc-unelevated-button.primary:disabled:hover{background-color:#b5ddd5}button.mat-mdc-unelevated-button.primary:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.primary:focus.cdk-focused.cdk-mouse-focused{background-color:#1c443c}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{background-color:#ededed;color:#000}button.mat-mdc-unelevated-button.secondary:hover,a.mat-mdc-unelevated-button.secondary:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.secondary:disabled,button.mat-mdc-unelevated-button.secondary:disabled:hover,a.mat-mdc-unelevated-button.secondary:disabled,a.mat-mdc-unelevated-button.secondary:disabled:hover{background-color:#ededed;color:#888}button.mat-mdc-unelevated-button.secondary:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.secondary:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.secondary:focus.cdk-focused.cdk-mouse-focused{background-color:#888}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:#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.cdk-mouse-focused,a.mat-mdc-unelevated-button.outlined:focus.cdk-focused.cdk-mouse-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.destructive,a.mat-mdc-unelevated-button.destructive{background-color:#cb7b7a;color:#fff}button.mat-mdc-unelevated-button.destructive:hover,a.mat-mdc-unelevated-button.destructive:hover{background-color:#8e5655}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{background-color:#e3c3c6}button.mat-mdc-unelevated-button.destructive:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.destructive:focus.cdk-focused.cdk-mouse-focused{background-color:#513131}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:#fff}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:#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{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:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.tertiary:focus.cdk-focused.cdk-mouse-focused{background-color:#e0e0e0;color:#1c443c}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:#46a997}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:#46a997;border-radius:0}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:#31766a}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:#b5ddd5}button.mat-mdc-unelevated-button.link:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.link:focus.cdk-focused.cdk-mouse-focused{color:#1c443c}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:#46a997}button.mat-mdc-unelevated-button.text,a.mat-mdc-unelevated-button.text{background-color:transparent;color:#000;border-radius:0;text-decoration:underline}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:hover,a.mat-mdc-unelevated-button.text:hover{color:#000}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:#888}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:#888}button.mat-mdc-unelevated-button.text:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.text:focus.cdk-focused.cdk-mouse-focused{color:#000}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:#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,a.mat-mdc-unelevated-button.menuTrigger{background:transparent;min-width:24px;height:24px;padding:0}button.mat-mdc-unelevated-button.menuTrigger:hover,a.mat-mdc-unelevated-button.menuTrigger:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.menuTrigger:disabled,button.mat-mdc-unelevated-button.menuTrigger:disabled:hover,a.mat-mdc-unelevated-button.menuTrigger:disabled,a.mat-mdc-unelevated-button.menuTrigger:disabled:hover{background-color:#fff;color:#888}button.mat-mdc-unelevated-button.menuTrigger:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.menuTrigger:focus.cdk-focused.cdk-mouse-focused{background-color:transparent}button.mat-mdc-unelevated-button.menuTrigger .icon-label-wrapper,a.mat-mdc-unelevated-button.menuTrigger .icon-label-wrapper{flex-flow:column}button.mat-mdc-unelevated-button.menuTrigger.left .icon,button.mat-mdc-unelevated-button.menuTrigger.right .icon,a.mat-mdc-unelevated-button.menuTrigger.left .icon,a.mat-mdc-unelevated-button.menuTrigger.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.big.left .icon,a.mat-mdc-unelevated-button.menuCell.big.left .icon{margin-right:16px}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:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-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}\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$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"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
432
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, selector: "ui-button", inputs: { size: "size", type: "type", label: "label", iconPosition: "iconPosition", justIcon: "justIcon", iconName: "iconName", disabled: "disabled", loading: "loading", fullWidth: "fullWidth", url: "url", urlTarget: "urlTarget", value: "value", tooltip: "tooltip" }, outputs: { buttonClickEvent: "buttonClickEvent", buttonHoverEvent: "buttonHoverEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"button-wrapper\" [attr.aria-disabled]=\"disabled\" [matTooltip]=\"tooltip\">\n <button\n [ngClass]=\"classCss\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick($event)\"\n (mouseenter)=\"buttonHover($event)\"\n [disableRipple]=\"true\"\n *ngIf=\"isButtonLink\"\n mat-flat-button>\n <span class=\"icon-only-wrapper\" *ngIf=\"justIcon === true && !!iconName\">\n <span class=\"icon only\" role=\"label\" [attr.aria-label]=\"label\"><ui-icon [name]=\"iconName\" size=\"24\"></ui-icon></span>\n </span>\n <span class=\"icon-label-wrapper\" [ngClass]=\"{'center-text': iconName === ''}\" *ngIf=\"justIcon === false\">\n <span class=\"icon\" *ngIf=\"iconPosition === 'left' && !!iconName\" aria-hidden=\"true\"><ui-icon [name]=\"iconName\" size=\"24\"></ui-icon></span>\n <span *ngIf=\"isLabel\" class=\"label\">{{ label }}</span>\n <span class=\"icon\" *ngIf=\"iconPosition === 'right' && !!iconName\" aria-hidden=\"true\"><ui-icon [name]=\"iconName\" size=\"24\"></ui-icon></span>\n <span class=\"spinner-wrapper\" *ngIf=\"showSpinner()\">\n <mat-spinner class=\"position-spinner\" aria-label=\"loading\" mode=\"indeterminate\" diameter=\"24\"></mat-spinner>\n </span>\n </span>\n </button>\n <a\n [ngClass]=\"classCss\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick($event)\"\n (mouseenter)=\"buttonHover($event)\"\n [disableRipple]=\"true\"\n *ngIf=\"!isButtonLink\"\n [href]=\"url\"\n [target]=\"urlTarget\"\n mat-flat-button>\n <span class=\"icon-label-wrapper\">\n {{ label }}\n </span>\n </a>\n</div>\n", styles: [":host{display:flex;width:-moz-fit-content;width:fit-content}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 16px}button.mat-mdc-unelevated-button.small,a.mat-mdc-unelevated-button.small{height:38px;padding:7px 11px}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.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.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.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.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.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.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.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.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:focus,button.mat-mdc-unelevated-button.secondary:focus,button.mat-mdc-unelevated-button.outlined:focus,button.mat-mdc-unelevated-button.destructive:focus,button.mat-mdc-unelevated-button.tertiary:focus,button.mat-mdc-unelevated-button.link:focus,button.mat-mdc-unelevated-button.tab:focus,button.mat-mdc-unelevated-button.squareicon:focus,button.mat-mdc-unelevated-button.menuTrigger:focus,a.mat-mdc-unelevated-button.primary:focus,a.mat-mdc-unelevated-button.secondary:focus,a.mat-mdc-unelevated-button.outlined:focus,a.mat-mdc-unelevated-button.destructive:focus,a.mat-mdc-unelevated-button.tertiary:focus,a.mat-mdc-unelevated-button.link:focus,a.mat-mdc-unelevated-button.tab:focus,a.mat-mdc-unelevated-button.squareicon:focus,a.mat-mdc-unelevated-button.menuTrigger:focus{outline:1px dashed #888888;outline-offset:4px}button.mat-mdc-unelevated-button.menuCell:focus,a.mat-mdc-unelevated-button.menuCell:focus{outline:1px dashed #888888;outline-offset:-1px}button.mat-mdc-unelevated-button.primary,a.mat-mdc-unelevated-button.primary{background-color:#46a997;color:#fff}button.mat-mdc-unelevated-button.primary:hover,a.mat-mdc-unelevated-button.primary:hover{background-color:#31766a}button.mat-mdc-unelevated-button.primary:disabled,button.mat-mdc-unelevated-button.primary:disabled:hover,a.mat-mdc-unelevated-button.primary:disabled,a.mat-mdc-unelevated-button.primary:disabled:hover{background-color:#b5ddd5}button.mat-mdc-unelevated-button.primary:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.primary:focus.cdk-focused.cdk-mouse-focused{background-color:#1c443c}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{background-color:#ededed;color:#000}button.mat-mdc-unelevated-button.secondary:hover,a.mat-mdc-unelevated-button.secondary:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.secondary:disabled,button.mat-mdc-unelevated-button.secondary:disabled:hover,a.mat-mdc-unelevated-button.secondary:disabled,a.mat-mdc-unelevated-button.secondary:disabled:hover{background-color:#ededed;color:#888}button.mat-mdc-unelevated-button.secondary:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.secondary:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.secondary:focus.cdk-focused.cdk-mouse-focused{background-color:#888}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:#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.cdk-mouse-focused,a.mat-mdc-unelevated-button.outlined:focus.cdk-focused.cdk-mouse-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.destructive,a.mat-mdc-unelevated-button.destructive{background-color:#cb7b7a;color:#fff}button.mat-mdc-unelevated-button.destructive:hover,a.mat-mdc-unelevated-button.destructive:hover{background-color:#8e5655}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{background-color:#e3c3c6}button.mat-mdc-unelevated-button.destructive:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.destructive:focus.cdk-focused.cdk-mouse-focused{background-color:#513131}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:#fff}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:#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{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:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.tertiary:focus.cdk-focused.cdk-mouse-focused{background-color:#e0e0e0;color:#1c443c}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:#46a997}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:#46a997;border-radius:0}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:#31766a}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:#b5ddd5}button.mat-mdc-unelevated-button.link:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.link:focus.cdk-focused.cdk-mouse-focused{color:#1c443c}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:#46a997}button.mat-mdc-unelevated-button.text,a.mat-mdc-unelevated-button.text{background-color:transparent;color:#000;border-radius:0;text-decoration:underline}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:hover,a.mat-mdc-unelevated-button.text:hover{color:#000}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:#888}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:#888}button.mat-mdc-unelevated-button.text:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.text:focus.cdk-focused.cdk-mouse-focused{color:#000}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:#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,a.mat-mdc-unelevated-button.menuTrigger{background:transparent;min-width:24px;height:24px;padding:0}button.mat-mdc-unelevated-button.menuTrigger:hover,a.mat-mdc-unelevated-button.menuTrigger:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.menuTrigger:disabled,button.mat-mdc-unelevated-button.menuTrigger:disabled:hover,a.mat-mdc-unelevated-button.menuTrigger:disabled,a.mat-mdc-unelevated-button.menuTrigger:disabled:hover{background-color:#fff;color:#888}button.mat-mdc-unelevated-button.menuTrigger:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.menuTrigger:focus.cdk-focused.cdk-mouse-focused{background-color:transparent}button.mat-mdc-unelevated-button.menuTrigger .icon-label-wrapper,a.mat-mdc-unelevated-button.menuTrigger .icon-label-wrapper{flex-flow:column}button.mat-mdc-unelevated-button.menuTrigger.left .icon,button.mat-mdc-unelevated-button.menuTrigger.right .icon,a.mat-mdc-unelevated-button.menuTrigger.left .icon,a.mat-mdc-unelevated-button.menuTrigger.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.big.left .icon,a.mat-mdc-unelevated-button.menuCell.big.left .icon{margin-right:16px}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:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-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[aria-disabled=true]{pointer-events:none}.button-wrapper .icon-button{border:none;border-radius:100%;width:40px!important;height:40px!important;cursor:pointer;background-color:unset}::ng-deep .button-wrapper .icon-button.mat-mdc-unelevated-button:not(:disabled){background-color:unset}::ng-deep .button-wrapper .icon-button.mdc-button{min-width:40px!important}.button-wrapper .icon-button ::ng-deep .mat-mdc-button-touch-target{height:40px!important}.button-wrapper .icon-button:disabled{pointer-events:none;background:unset}.button-wrapper .icon-button:disabled ::ng-deep mat-icon svg{color:#888}.button-wrapper .icon-button:hover{background-color:#f6f6f6}.button-wrapper .icon-button:active{background-color:#ededed}.button-wrapper .icon-button:focus{border:1px dashed #888888;outline: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: 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"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
|
|
419
433
|
}
|
|
420
434
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
421
435
|
type: Component,
|
|
422
|
-
args: [{ selector: 'ui-button', template: "<button\n [ngClass]=\"classCss\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick($event)\"\n (mouseenter)=\"buttonHover($event)\"\n [disableRipple]=\"true\"\n *ngIf=\"isButtonLink\"\n mat-flat-button>\n <span class=\"icon-only-wrapper\" *ngIf=\"justIcon === true && !!iconName\">\n <span class=\"icon only\" role=\"label\" [attr.aria-label]=\"label\"><ui-icon [name]=\"iconName\" size=\"24\"></ui-icon></span>\n </span>\n <span class=\"icon-label-wrapper\" [ngClass]=\"{'center-text': iconName === ''}\" *ngIf=\"justIcon === false\">\n <span class=\"icon\" *ngIf=\"iconPosition === 'left' && !!iconName\" aria-hidden=\"true\"><ui-icon [name]=\"iconName\" size=\"24\"></ui-icon></span>\n <span *ngIf=\"isLabel\" class=\"label\">{{ label }}</span>\n <span class=\"icon\" *ngIf=\"iconPosition === 'right' && !!iconName\" aria-hidden=\"true\"><ui-icon [name]=\"iconName\" size=\"24\"></ui-icon></span>\n <span class=\"spinner-wrapper\" *ngIf=\"showSpinner()\">\n <mat-spinner class=\"position-spinner\" aria-label=\"loading\" mode=\"indeterminate\" diameter=\"24\"></mat-spinner>\n </span>\n </span>\n</button>\n<a\n [ngClass]=\"classCss\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick($event)\"\n (mouseenter)=\"buttonHover($event)\"\n [disableRipple]=\"true\"\n *ngIf=\"!isButtonLink\" \n [href]=\"url\" \n [target]=\"urlTarget\"\n mat-flat-button>\n <span class=\"icon-label-wrapper\">\n {{ label }}\n </span>\n</a>\n", styles: [":host{display:flex}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 16px}button.mat-mdc-unelevated-button.small,a.mat-mdc-unelevated-button.small{height:38px;padding:7px 11px}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.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.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.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.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.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.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.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.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:focus,button.mat-mdc-unelevated-button.secondary:focus,button.mat-mdc-unelevated-button.outlined:focus,button.mat-mdc-unelevated-button.destructive:focus,button.mat-mdc-unelevated-button.tertiary:focus,button.mat-mdc-unelevated-button.link:focus,button.mat-mdc-unelevated-button.tab:focus,button.mat-mdc-unelevated-button.squareicon:focus,button.mat-mdc-unelevated-button.menuTrigger:focus,a.mat-mdc-unelevated-button.primary:focus,a.mat-mdc-unelevated-button.secondary:focus,a.mat-mdc-unelevated-button.outlined:focus,a.mat-mdc-unelevated-button.destructive:focus,a.mat-mdc-unelevated-button.tertiary:focus,a.mat-mdc-unelevated-button.link:focus,a.mat-mdc-unelevated-button.tab:focus,a.mat-mdc-unelevated-button.squareicon:focus,a.mat-mdc-unelevated-button.menuTrigger:focus{outline:1px dashed #888888;outline-offset:4px}button.mat-mdc-unelevated-button.menuCell:focus,a.mat-mdc-unelevated-button.menuCell:focus{outline:1px dashed #888888;outline-offset:-1px}button.mat-mdc-unelevated-button.primary,a.mat-mdc-unelevated-button.primary{background-color:#46a997;color:#fff}button.mat-mdc-unelevated-button.primary:hover,a.mat-mdc-unelevated-button.primary:hover{background-color:#31766a}button.mat-mdc-unelevated-button.primary:disabled,button.mat-mdc-unelevated-button.primary:disabled:hover,a.mat-mdc-unelevated-button.primary:disabled,a.mat-mdc-unelevated-button.primary:disabled:hover{background-color:#b5ddd5}button.mat-mdc-unelevated-button.primary:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.primary:focus.cdk-focused.cdk-mouse-focused{background-color:#1c443c}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{background-color:#ededed;color:#000}button.mat-mdc-unelevated-button.secondary:hover,a.mat-mdc-unelevated-button.secondary:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.secondary:disabled,button.mat-mdc-unelevated-button.secondary:disabled:hover,a.mat-mdc-unelevated-button.secondary:disabled,a.mat-mdc-unelevated-button.secondary:disabled:hover{background-color:#ededed;color:#888}button.mat-mdc-unelevated-button.secondary:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.secondary:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.secondary:focus.cdk-focused.cdk-mouse-focused{background-color:#888}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:#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.cdk-mouse-focused,a.mat-mdc-unelevated-button.outlined:focus.cdk-focused.cdk-mouse-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.destructive,a.mat-mdc-unelevated-button.destructive{background-color:#cb7b7a;color:#fff}button.mat-mdc-unelevated-button.destructive:hover,a.mat-mdc-unelevated-button.destructive:hover{background-color:#8e5655}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{background-color:#e3c3c6}button.mat-mdc-unelevated-button.destructive:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.destructive:focus.cdk-focused.cdk-mouse-focused{background-color:#513131}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:#fff}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:#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{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:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.tertiary:focus.cdk-focused.cdk-mouse-focused{background-color:#e0e0e0;color:#1c443c}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:#46a997}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:#46a997;border-radius:0}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:#31766a}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:#b5ddd5}button.mat-mdc-unelevated-button.link:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.link:focus.cdk-focused.cdk-mouse-focused{color:#1c443c}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:#46a997}button.mat-mdc-unelevated-button.text,a.mat-mdc-unelevated-button.text{background-color:transparent;color:#000;border-radius:0;text-decoration:underline}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:hover,a.mat-mdc-unelevated-button.text:hover{color:#000}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:#888}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:#888}button.mat-mdc-unelevated-button.text:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.text:focus.cdk-focused.cdk-mouse-focused{color:#000}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:#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,a.mat-mdc-unelevated-button.menuTrigger{background:transparent;min-width:24px;height:24px;padding:0}button.mat-mdc-unelevated-button.menuTrigger:hover,a.mat-mdc-unelevated-button.menuTrigger:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.menuTrigger:disabled,button.mat-mdc-unelevated-button.menuTrigger:disabled:hover,a.mat-mdc-unelevated-button.menuTrigger:disabled,a.mat-mdc-unelevated-button.menuTrigger:disabled:hover{background-color:#fff;color:#888}button.mat-mdc-unelevated-button.menuTrigger:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.menuTrigger:focus.cdk-focused.cdk-mouse-focused{background-color:transparent}button.mat-mdc-unelevated-button.menuTrigger .icon-label-wrapper,a.mat-mdc-unelevated-button.menuTrigger .icon-label-wrapper{flex-flow:column}button.mat-mdc-unelevated-button.menuTrigger.left .icon,button.mat-mdc-unelevated-button.menuTrigger.right .icon,a.mat-mdc-unelevated-button.menuTrigger.left .icon,a.mat-mdc-unelevated-button.menuTrigger.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.big.left .icon,a.mat-mdc-unelevated-button.menuCell.big.left .icon{margin-right:16px}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:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-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}\n"] }]
|
|
436
|
+
args: [{ selector: 'ui-button', template: "<div class=\"button-wrapper\" [attr.aria-disabled]=\"disabled\" [matTooltip]=\"tooltip\">\n <button\n [ngClass]=\"classCss\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick($event)\"\n (mouseenter)=\"buttonHover($event)\"\n [disableRipple]=\"true\"\n *ngIf=\"isButtonLink\"\n mat-flat-button>\n <span class=\"icon-only-wrapper\" *ngIf=\"justIcon === true && !!iconName\">\n <span class=\"icon only\" role=\"label\" [attr.aria-label]=\"label\"><ui-icon [name]=\"iconName\" size=\"24\"></ui-icon></span>\n </span>\n <span class=\"icon-label-wrapper\" [ngClass]=\"{'center-text': iconName === ''}\" *ngIf=\"justIcon === false\">\n <span class=\"icon\" *ngIf=\"iconPosition === 'left' && !!iconName\" aria-hidden=\"true\"><ui-icon [name]=\"iconName\" size=\"24\"></ui-icon></span>\n <span *ngIf=\"isLabel\" class=\"label\">{{ label }}</span>\n <span class=\"icon\" *ngIf=\"iconPosition === 'right' && !!iconName\" aria-hidden=\"true\"><ui-icon [name]=\"iconName\" size=\"24\"></ui-icon></span>\n <span class=\"spinner-wrapper\" *ngIf=\"showSpinner()\">\n <mat-spinner class=\"position-spinner\" aria-label=\"loading\" mode=\"indeterminate\" diameter=\"24\"></mat-spinner>\n </span>\n </span>\n </button>\n <a\n [ngClass]=\"classCss\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick($event)\"\n (mouseenter)=\"buttonHover($event)\"\n [disableRipple]=\"true\"\n *ngIf=\"!isButtonLink\"\n [href]=\"url\"\n [target]=\"urlTarget\"\n mat-flat-button>\n <span class=\"icon-label-wrapper\">\n {{ label }}\n </span>\n </a>\n</div>\n", styles: [":host{display:flex;width:-moz-fit-content;width:fit-content}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 16px}button.mat-mdc-unelevated-button.small,a.mat-mdc-unelevated-button.small{height:38px;padding:7px 11px}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.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.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.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.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.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.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.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.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:focus,button.mat-mdc-unelevated-button.secondary:focus,button.mat-mdc-unelevated-button.outlined:focus,button.mat-mdc-unelevated-button.destructive:focus,button.mat-mdc-unelevated-button.tertiary:focus,button.mat-mdc-unelevated-button.link:focus,button.mat-mdc-unelevated-button.tab:focus,button.mat-mdc-unelevated-button.squareicon:focus,button.mat-mdc-unelevated-button.menuTrigger:focus,a.mat-mdc-unelevated-button.primary:focus,a.mat-mdc-unelevated-button.secondary:focus,a.mat-mdc-unelevated-button.outlined:focus,a.mat-mdc-unelevated-button.destructive:focus,a.mat-mdc-unelevated-button.tertiary:focus,a.mat-mdc-unelevated-button.link:focus,a.mat-mdc-unelevated-button.tab:focus,a.mat-mdc-unelevated-button.squareicon:focus,a.mat-mdc-unelevated-button.menuTrigger:focus{outline:1px dashed #888888;outline-offset:4px}button.mat-mdc-unelevated-button.menuCell:focus,a.mat-mdc-unelevated-button.menuCell:focus{outline:1px dashed #888888;outline-offset:-1px}button.mat-mdc-unelevated-button.primary,a.mat-mdc-unelevated-button.primary{background-color:#46a997;color:#fff}button.mat-mdc-unelevated-button.primary:hover,a.mat-mdc-unelevated-button.primary:hover{background-color:#31766a}button.mat-mdc-unelevated-button.primary:disabled,button.mat-mdc-unelevated-button.primary:disabled:hover,a.mat-mdc-unelevated-button.primary:disabled,a.mat-mdc-unelevated-button.primary:disabled:hover{background-color:#b5ddd5}button.mat-mdc-unelevated-button.primary:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.primary:focus.cdk-focused.cdk-mouse-focused{background-color:#1c443c}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{background-color:#ededed;color:#000}button.mat-mdc-unelevated-button.secondary:hover,a.mat-mdc-unelevated-button.secondary:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.secondary:disabled,button.mat-mdc-unelevated-button.secondary:disabled:hover,a.mat-mdc-unelevated-button.secondary:disabled,a.mat-mdc-unelevated-button.secondary:disabled:hover{background-color:#ededed;color:#888}button.mat-mdc-unelevated-button.secondary:disabled ::ng-deep mat-icon.black svg,button.mat-mdc-unelevated-button.secondary:disabled:hover ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary:disabled ::ng-deep mat-icon.black svg,a.mat-mdc-unelevated-button.secondary:disabled:hover ::ng-deep mat-icon.black svg{color:#888}button.mat-mdc-unelevated-button.secondary:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.secondary:focus.cdk-focused.cdk-mouse-focused{background-color:#888}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:#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.cdk-mouse-focused,a.mat-mdc-unelevated-button.outlined:focus.cdk-focused.cdk-mouse-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.destructive,a.mat-mdc-unelevated-button.destructive{background-color:#cb7b7a;color:#fff}button.mat-mdc-unelevated-button.destructive:hover,a.mat-mdc-unelevated-button.destructive:hover{background-color:#8e5655}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{background-color:#e3c3c6}button.mat-mdc-unelevated-button.destructive:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.destructive:focus.cdk-focused.cdk-mouse-focused{background-color:#513131}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:#fff}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:#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{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:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.tertiary:focus.cdk-focused.cdk-mouse-focused{background-color:#e0e0e0;color:#1c443c}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:#46a997}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:#46a997;border-radius:0}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:#31766a}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:#b5ddd5}button.mat-mdc-unelevated-button.link:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.link:focus.cdk-focused.cdk-mouse-focused{color:#1c443c}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:#46a997}button.mat-mdc-unelevated-button.text,a.mat-mdc-unelevated-button.text{background-color:transparent;color:#000;border-radius:0;text-decoration:underline}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:hover,a.mat-mdc-unelevated-button.text:hover{color:#000}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:#888}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:#888}button.mat-mdc-unelevated-button.text:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.text:focus.cdk-focused.cdk-mouse-focused{color:#000}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:#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,a.mat-mdc-unelevated-button.menuTrigger{background:transparent;min-width:24px;height:24px;padding:0}button.mat-mdc-unelevated-button.menuTrigger:hover,a.mat-mdc-unelevated-button.menuTrigger:hover{background-color:#e0e0e0}button.mat-mdc-unelevated-button.menuTrigger:disabled,button.mat-mdc-unelevated-button.menuTrigger:disabled:hover,a.mat-mdc-unelevated-button.menuTrigger:disabled,a.mat-mdc-unelevated-button.menuTrigger:disabled:hover{background-color:#fff;color:#888}button.mat-mdc-unelevated-button.menuTrigger:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.menuTrigger:focus.cdk-focused.cdk-mouse-focused{background-color:transparent}button.mat-mdc-unelevated-button.menuTrigger .icon-label-wrapper,a.mat-mdc-unelevated-button.menuTrigger .icon-label-wrapper{flex-flow:column}button.mat-mdc-unelevated-button.menuTrigger.left .icon,button.mat-mdc-unelevated-button.menuTrigger.right .icon,a.mat-mdc-unelevated-button.menuTrigger.left .icon,a.mat-mdc-unelevated-button.menuTrigger.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.big.left .icon,a.mat-mdc-unelevated-button.menuCell.big.left .icon{margin-right:16px}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:focus.cdk-focused.cdk-mouse-focused,a.mat-mdc-unelevated-button.menuCell:focus.cdk-focused.cdk-mouse-focused{background-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[aria-disabled=true]{pointer-events:none}.button-wrapper .icon-button{border:none;border-radius:100%;width:40px!important;height:40px!important;cursor:pointer;background-color:unset}::ng-deep .button-wrapper .icon-button.mat-mdc-unelevated-button:not(:disabled){background-color:unset}::ng-deep .button-wrapper .icon-button.mdc-button{min-width:40px!important}.button-wrapper .icon-button ::ng-deep .mat-mdc-button-touch-target{height:40px!important}.button-wrapper .icon-button:disabled{pointer-events:none;background:unset}.button-wrapper .icon-button:disabled ::ng-deep mat-icon svg{color:#888}.button-wrapper .icon-button:hover{background-color:#f6f6f6}.button-wrapper .icon-button:active{background-color:#ededed}.button-wrapper .icon-button:focus{border:1px dashed #888888;outline:0}\n"] }]
|
|
423
437
|
}], ctorParameters: function () { return []; }, propDecorators: { size: [{
|
|
424
438
|
type: Input
|
|
425
439
|
}], type: [{
|
|
@@ -444,6 +458,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
444
458
|
type: Input
|
|
445
459
|
}], value: [{
|
|
446
460
|
type: Input
|
|
461
|
+
}], tooltip: [{
|
|
462
|
+
type: Input
|
|
447
463
|
}], buttonClickEvent: [{
|
|
448
464
|
type: Output
|
|
449
465
|
}], buttonHoverEvent: [{
|
|
@@ -508,7 +524,7 @@ class AlertBannerComponent {
|
|
|
508
524
|
this.visible = false;
|
|
509
525
|
}
|
|
510
526
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
511
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AlertBannerComponent, selector: "ui-alert-banner", inputs: { alertType: "alertType", message: "message", includeDismissButton: "includeDismissButton", fixed: "fixed", fullWidth: "fullWidth", linkText: "linkText", linkUrl: "linkUrl", linkTarget: "linkTarget" }, ngImport: i0, template: "<div [ngClass]=\"cssClass\" [@openClose] *ngIf=\"visible\" class=\"alert-container\">\n <div class=\"alert-text\">\n <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n {{ message }}\n <a *ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n </div>\n <ui-button\n *ngIf=\"includeDismissButton\"\n type=\"text\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n (buttonClickEvent)=\"dismissClick()\"\n ></ui-button>\n</div>\n", styles: [":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}@media (max-width: 600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}: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}\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", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }], animations: [
|
|
527
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AlertBannerComponent, selector: "ui-alert-banner", inputs: { alertType: "alertType", message: "message", includeDismissButton: "includeDismissButton", fixed: "fixed", fullWidth: "fullWidth", linkText: "linkText", linkUrl: "linkUrl", linkTarget: "linkTarget" }, ngImport: i0, template: "<div [ngClass]=\"cssClass\" [@openClose] *ngIf=\"visible\" class=\"alert-container\">\n <div class=\"alert-text\">\n <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n {{ message }}\n <a *ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n </div>\n <ui-button\n *ngIf=\"includeDismissButton\"\n type=\"text\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n (buttonClickEvent)=\"dismissClick()\"\n ></ui-button>\n</div>\n", styles: [":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}@media (max-width: 600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}: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}\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", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }], animations: [
|
|
512
528
|
trigger('openClose', [
|
|
513
529
|
transition(':enter', [animate('0.2s ease-out', style({ opacity: 1 }))]),
|
|
514
530
|
transition(':leave', [animate('0.2s ease-in', style({ opacity: 0 }))]),
|
|
@@ -558,14 +574,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
558
574
|
|
|
559
575
|
class ButtonComponentModule {
|
|
560
576
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
561
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponentModule, declarations: [ButtonComponent], imports: [CommonModule, MatButtonModule, IconComponentModule, MatProgressSpinnerModule], exports: [ButtonComponent] }); }
|
|
562
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponentModule, imports: [CommonModule, MatButtonModule, IconComponentModule, MatProgressSpinnerModule] }); }
|
|
577
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponentModule, declarations: [ButtonComponent], imports: [CommonModule, MatButtonModule, IconComponentModule, MatProgressSpinnerModule, MatTooltipModule], exports: [ButtonComponent] }); }
|
|
578
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponentModule, imports: [CommonModule, MatButtonModule, IconComponentModule, MatProgressSpinnerModule, MatTooltipModule] }); }
|
|
563
579
|
}
|
|
564
580
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponentModule, decorators: [{
|
|
565
581
|
type: NgModule,
|
|
566
582
|
args: [{
|
|
567
583
|
declarations: [ButtonComponent],
|
|
568
|
-
imports: [CommonModule, MatButtonModule, IconComponentModule, MatProgressSpinnerModule],
|
|
584
|
+
imports: [CommonModule, MatButtonModule, IconComponentModule, MatProgressSpinnerModule, MatTooltipModule],
|
|
569
585
|
exports: [ButtonComponent],
|
|
570
586
|
providers: [],
|
|
571
587
|
}]
|
|
@@ -623,7 +639,7 @@ class BannerActionComponent {
|
|
|
623
639
|
this.cssClass = alertBarsUtil.setCssClass(this.fullWidth, this.bannerActionType, this.position);
|
|
624
640
|
}
|
|
625
641
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BannerActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
626
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BannerActionComponent, selector: "ui-banner-action", inputs: { message: "message", bannerActionType: "bannerActionType", buttonText: "buttonText", fixed: "fixed", fullWidth: "fullWidth", buttonIcon: "buttonIcon" }, outputs: { buttonClickEvent: "buttonClickEvent" }, ngImport: i0, template: "<div id=\"banner-action\" class=\"banner-action-container\" [ngClass]=\"cssClass\">\n <div class=\"banner-action-text\">\n <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n {{ message }}\n </div>\n <ui-button [label]=\"buttonText\" (buttonClickEvent)=\"buttonClick($event)\" [iconName]=\"buttonIcon\"></ui-button>\n</div>\n", styles: [":host{display:flex;width:100%;justify-content:center}:host .banner-action-container{height:72px;padding:0 16px;color:#000;font-size:14px;display:flex;align-items:center;background:#ffffff;border-radius:8px;justify-content:space-between;border-width:2px;border-style:solid}:host .banner-action-container.fixed{position:fixed;z-index:98;top:0}:host .banner-action-container.static{position:relative}:host .banner-action-container.full-width{width:100%;min-width:100%}:host .banner-action-container .banner-action-text{display:flex;align-items:center}:host .banner-action-container ui-icon{margin-right:14px}:host .banner-action-container ui-button{margin-left:14px}:host .banner-action-container.success{border-color:#46a997}:host .banner-action-container.info{border-color:#276678}:host .banner-action-container.warning{border-color:#cca45f}:host .banner-action-container.error{border-color:#cb7b7a}@media (max-width: 600px){:host .banner-action-container{height:auto;padding:16px;display:flex;flex-flow:column}:host .banner-action-container .banner-action-text{margin-bottom:10px}:host .banner-action-container ui-button{margin:0;width:100%}:host .banner-action-container ui-button ::ng-deep button{min-width:100%}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
642
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BannerActionComponent, selector: "ui-banner-action", inputs: { message: "message", bannerActionType: "bannerActionType", buttonText: "buttonText", fixed: "fixed", fullWidth: "fullWidth", buttonIcon: "buttonIcon" }, outputs: { buttonClickEvent: "buttonClickEvent" }, ngImport: i0, template: "<div id=\"banner-action\" class=\"banner-action-container\" [ngClass]=\"cssClass\">\n <div class=\"banner-action-text\">\n <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n {{ message }}\n </div>\n <ui-button [label]=\"buttonText\" (buttonClickEvent)=\"buttonClick($event)\" [iconName]=\"buttonIcon\"></ui-button>\n</div>\n", styles: [":host{display:flex;width:100%;justify-content:center}:host .banner-action-container{height:72px;padding:0 16px;color:#000;font-size:14px;display:flex;align-items:center;background:#ffffff;border-radius:8px;justify-content:space-between;border-width:2px;border-style:solid}:host .banner-action-container.fixed{position:fixed;z-index:98;top:0}:host .banner-action-container.static{position:relative}:host .banner-action-container.full-width{width:100%;min-width:100%}:host .banner-action-container .banner-action-text{display:flex;align-items:center}:host .banner-action-container ui-icon{margin-right:14px}:host .banner-action-container ui-button{margin-left:14px}:host .banner-action-container.success{border-color:#46a997}:host .banner-action-container.info{border-color:#276678}:host .banner-action-container.warning{border-color:#cca45f}:host .banner-action-container.error{border-color:#cb7b7a}@media (max-width: 600px){:host .banner-action-container{height:auto;padding:16px;display:flex;flex-flow:column}:host .banner-action-container .banner-action-text{margin-bottom:10px}:host .banner-action-container ui-button{margin:0;width:100%}:host .banner-action-container ui-button ::ng-deep button{min-width:100%}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
627
643
|
}
|
|
628
644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BannerActionComponent, decorators: [{
|
|
629
645
|
type: Component,
|
|
@@ -1165,7 +1181,7 @@ class FieldComponent {
|
|
|
1165
1181
|
useExisting: forwardRef(() => FieldComponent),
|
|
1166
1182
|
multi: true,
|
|
1167
1183
|
},
|
|
1168
|
-
], ngImport: i0, template: "<mat-form-field #uiField appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <input\n matInput\n (blur)=\"onTouch()\"\n (input)=\"onInput($event)\"\n [id]=\"id!\"\n (keyup)=\"onChangeInputSearch()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [type]=\"currentType\"\n [name]=\"fieldName!\"\n digitsOnly\n [allowOnlyDigits]=\"allowOnlyDigits\"\n />\n <div class=\"options\" *ngIf=\"type === 'search' || type === 'password'\">\n <div class=\"options-container\">\n <ui-button\n *ngIf=\"showClose\"\n type=\"secondary\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n label=\"Clear\"\n (buttonClickEvent)=\"clearValue()\"\n ></ui-button>\n <ui-icon *ngIf=\"showSearch\" size=\"24\" class=\"search\" name=\"Search\"></ui-icon>\n <ui-button\n *ngIf=\"type === 'password'\"\n type=\"secondary\"\n [justIcon]=\"true\"\n class=\"password\"\n [iconName]=\"showPassword ? 'Eye-hide' : 'Eye-view'\"\n label=\"View password\"\n (buttonClickEvent)=\"showPasswordClick()\"\n ></ui-button>\n </div>\n </div>\n <mat-hint class=\"info\" *ngIf=\"hintMessage && !_errors\">{{ hintMessage }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of _errors\"><ui-icon name=\"Error\"></ui-icon>{{ error }}</div>\n </mat-hint>\n</mat-form-field>\n", styles: [".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.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{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-hint.error{display:flex}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}.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-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-field .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}.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{position:inline-flex}.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-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-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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.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"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[digitsOnly]", inputs: ["allowNegative", "allowDecimal", "allowOnlyDigits"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1184
|
+
], ngImport: i0, template: "<mat-form-field #uiField appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <input\n matInput\n (blur)=\"onTouch()\"\n (input)=\"onInput($event)\"\n [id]=\"id!\"\n (keyup)=\"onChangeInputSearch()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [type]=\"currentType\"\n [name]=\"fieldName!\"\n digitsOnly\n [allowOnlyDigits]=\"allowOnlyDigits\"\n />\n <div class=\"options\" *ngIf=\"type === 'search' || type === 'password'\">\n <div class=\"options-container\">\n <ui-button\n *ngIf=\"showClose\"\n type=\"secondary\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n label=\"Clear\"\n (buttonClickEvent)=\"clearValue()\"\n ></ui-button>\n <ui-icon *ngIf=\"showSearch\" size=\"24\" class=\"search\" name=\"Search\"></ui-icon>\n <ui-button\n *ngIf=\"type === 'password'\"\n type=\"secondary\"\n [justIcon]=\"true\"\n class=\"password\"\n [iconName]=\"showPassword ? 'Eye-hide' : 'Eye-view'\"\n label=\"View password\"\n (buttonClickEvent)=\"showPasswordClick()\"\n ></ui-button>\n </div>\n </div>\n <mat-hint class=\"info\" *ngIf=\"hintMessage && !_errors\">{{ hintMessage }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of _errors\"><ui-icon name=\"Error\"></ui-icon>{{ error }}</div>\n </mat-hint>\n</mat-form-field>\n", styles: [".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.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{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-hint.error{display:flex}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}.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-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-field .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}.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{position:inline-flex}.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-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-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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.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"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[digitsOnly]", inputs: ["allowNegative", "allowDecimal", "allowOnlyDigits"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1169
1185
|
}
|
|
1170
1186
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FieldComponent, decorators: [{
|
|
1171
1187
|
type: Component,
|
|
@@ -1316,7 +1332,7 @@ class CreateAccountComponent {
|
|
|
1316
1332
|
this.formErrors[field] = errors;
|
|
1317
1333
|
}
|
|
1318
1334
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateAccountComponent, deps: [{ token: i1$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1319
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateAccountComponent, selector: "ui-create-account", inputs: { email: "email", emailEditable: "emailEditable", termsOfusePath: "termsOfusePath", privacyPolicyPath: "privacyPolicyPath", formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", loginEvent: "loginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <div class=\"subtitle\">{{ i18n.subtitle }}</div>\n <form [formGroup]=\"registerForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"username\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [errors]=\"formErrors['username']\"\n (ngModelChange)=\"checkErrors('username')\"\n ></ui-field>\n </div>\n <div class=\"field\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [errors]=\"formErrors['password']\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n <div class=\"password-strength-container\">\n <mat-password-strength\n [min]=\"12\"\n #passwordComponentWithValidation\n [password]=\"registerForm.controls['password'].value\"\n aria-hidden=\"true\"\n >\n </mat-password-strength>\n </div>\n <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n </div>\n <div class=\"terms-conditions-container\">\n <ui-checkbox formControlName=\"agree_terms_and_conditions\" [label]=\"i18n.terms_conditions\"></ui-checkbox>\n <a class=\"link\" [href]=\"termsOfusePath\" target=\"_blank\">{{ i18n.terms_conditions_link_label }}</a>\n <span>{{i18n.terms_conditions_delimiter}}</span>\n <a class=\"link\" [href]=\"privacyPolicyPath\" target=\"_blank\">{{ i18n.privacy_policy_link_label }}</a>\n </div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"registerForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (buttonClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div>\n {{ i18n.have_career_passport }} <span class=\"link\" (click)=\"login()\">{{ i18n.login }}</span>\n </div>\n </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin-top:40px}.form-box .subtitle{font-weight:400;font-size:16px;line-height:21.6px;margin:24px 0}.form-box .field{width:100%}.form-box .password-strength-container{margin:2.7px 0 1px}.form-box .terms-conditions-container{display:flex;align-items:center;gap:4px;margin-left:-8px}.form-box .submit-button{margin:24px 0}.form-box .mat-mdc-checkbox{font-weight:400}.form-box .mat-mdc-checkbox ::ng-deep .mdc-checkbox{padding-left:4px}.form-box .mat-mdc-checkbox ::ng-deep .mdc-checkbox .mdc-checkbox__background{left:4px}.form-box .link{font-weight:600;cursor:pointer;color:#46a997;text-decoration:none}.form-box .link:hover{text-decoration:underline}.form-box ::ng-deep .mat-mdc-card-content{padding:0!important}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "color", "name", "label", "multiple"], outputs: ["changed"] }, { kind: "component", type: i5.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { kind: "component", type: i5.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1335
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateAccountComponent, selector: "ui-create-account", inputs: { email: "email", emailEditable: "emailEditable", termsOfusePath: "termsOfusePath", privacyPolicyPath: "privacyPolicyPath", formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", loginEvent: "loginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <div class=\"subtitle\">{{ i18n.subtitle }}</div>\n <form [formGroup]=\"registerForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"username\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [errors]=\"formErrors['username']\"\n (ngModelChange)=\"checkErrors('username')\"\n ></ui-field>\n </div>\n <div class=\"field\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [errors]=\"formErrors['password']\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n <div class=\"password-strength-container\">\n <mat-password-strength\n [min]=\"12\"\n #passwordComponentWithValidation\n [password]=\"registerForm.controls['password'].value\"\n aria-hidden=\"true\"\n >\n </mat-password-strength>\n </div>\n <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n </div>\n <div class=\"terms-conditions-container\">\n <ui-checkbox formControlName=\"agree_terms_and_conditions\" [label]=\"i18n.terms_conditions\"></ui-checkbox>\n <a class=\"link\" [href]=\"termsOfusePath\" target=\"_blank\">{{ i18n.terms_conditions_link_label }}</a>\n <span>{{i18n.terms_conditions_delimiter}}</span>\n <a class=\"link\" [href]=\"privacyPolicyPath\" target=\"_blank\">{{ i18n.privacy_policy_link_label }}</a>\n </div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"registerForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (buttonClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div>\n {{ i18n.have_career_passport }} <span class=\"link\" (click)=\"login()\">{{ i18n.login }}</span>\n </div>\n </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin-top:40px}.form-box .subtitle{font-weight:400;font-size:16px;line-height:21.6px;margin:24px 0}.form-box .field{width:100%}.form-box .password-strength-container{margin:2.7px 0 1px}.form-box .terms-conditions-container{display:flex;align-items:center;gap:4px;margin-left:-8px}.form-box .submit-button{margin:24px 0}.form-box .mat-mdc-checkbox{font-weight:400}.form-box .mat-mdc-checkbox ::ng-deep .mdc-checkbox{padding-left:4px}.form-box .mat-mdc-checkbox ::ng-deep .mdc-checkbox .mdc-checkbox__background{left:4px}.form-box .link{font-weight:600;cursor:pointer;color:#46a997;text-decoration:none}.form-box .link:hover{text-decoration:underline}.form-box ::ng-deep .mat-mdc-card-content{padding:0!important}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "color", "name", "label", "multiple"], outputs: ["changed"] }, { kind: "component", type: i5$1.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { kind: "component", type: i5$1.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1320
1336
|
}
|
|
1321
1337
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateAccountComponent, decorators: [{
|
|
1322
1338
|
type: Component,
|
|
@@ -1479,7 +1495,7 @@ class CreatePasswordComponent {
|
|
|
1479
1495
|
this.formErrors[field] = [''];
|
|
1480
1496
|
}
|
|
1481
1497
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreatePasswordComponent, deps: [{ token: i1$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1482
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreatePasswordComponent, selector: "ui-create-password", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"createPasswordForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [errors]=\"formErrors.password\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n <mat-password-strength\n [min]=\"12\"\n #passwordComponentWithValidation\n [password]=\"createPasswordForm.controls['password'].value\"\n aria-hidden=\"true\"\n >\n </mat-password-strength>\n <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n </div>\n <div></div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button\"\n [disabled]=\"createPasswordForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (buttonClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin-top:25px}.form-box ::ng-deep .mat-mdc-card-content{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i5.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { kind: "component", type: i5.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1498
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreatePasswordComponent, selector: "ui-create-password", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"createPasswordForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [errors]=\"formErrors.password\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n <mat-password-strength\n [min]=\"12\"\n #passwordComponentWithValidation\n [password]=\"createPasswordForm.controls['password'].value\"\n aria-hidden=\"true\"\n >\n </mat-password-strength>\n <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n </div>\n <div></div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button\"\n [disabled]=\"createPasswordForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (buttonClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin-top:25px}.form-box ::ng-deep .mat-mdc-card-content{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i5$1.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { kind: "component", type: i5$1.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1483
1499
|
}
|
|
1484
1500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreatePasswordComponent, decorators: [{
|
|
1485
1501
|
type: Component,
|
|
@@ -1614,7 +1630,7 @@ class DialogComponent {
|
|
|
1614
1630
|
this.primaryButtonClickEvent.emit(event);
|
|
1615
1631
|
}
|
|
1616
1632
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogComponent, deps: [{ token: i1$4.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1617
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogComponent, selector: "ui-dialog", inputs: { title: "title", showCloseButton: "showCloseButton", canCloseFn: "canCloseFn", secondaryButtonLabel: "secondaryButtonLabel", primaryButtonLabel: "primaryButtonLabel", secondaryButtonType: "secondaryButtonType", primaryButtonType: "primaryButtonType" }, outputs: { closeEvent: "closeEvent", secondaryButtonClickEvent: "secondaryButtonClickEvent", primaryButtonClickEvent: "primaryButtonClickEvent" }, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <div mat-dialog-title class=\"dialog-title\">\n {{ title }}\n <div *ngIf=\"showCloseButton\">\n <ui-button\n type=\"text\"\n [justIcon]=\"true\"\n [disabled]=\"disableButtons\"\n class=\"close\"\n iconName=\"Close\"\n label=\"Close dialog\"\n (click)=\"onClose($event)\"\n (buttonClickEvent)=\"dismiss()\"\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 [type]=\"secondaryButtonType\"\n *ngIf=\"!!secondaryButtonLabel\"\n [label]=\"secondaryButtonLabel\"\n (click)=\"onSecondaryButtonClick($event)\"\n ></ui-button>\n <ui-button\n [type]=\"primaryButtonType\"\n *ngIf=\"!!primaryButtonLabel\"\n [disabled]=\"disableButtons\"\n (click)=\"onPrimaryButtonClick($event)\"\n [label]=\"primaryButtonLabel\"\n (buttonClickEvent)=\"dismiss()\"\n ></ui-button>\n </div>\n</ng-container>\n", styles: [".ui-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:16px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000;line-height:20px}.dialog-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0;font-size:20px!important;font-weight:700!important}.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$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1633
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogComponent, selector: "ui-dialog", inputs: { title: "title", showCloseButton: "showCloseButton", canCloseFn: "canCloseFn", secondaryButtonLabel: "secondaryButtonLabel", primaryButtonLabel: "primaryButtonLabel", secondaryButtonType: "secondaryButtonType", primaryButtonType: "primaryButtonType" }, outputs: { closeEvent: "closeEvent", secondaryButtonClickEvent: "secondaryButtonClickEvent", primaryButtonClickEvent: "primaryButtonClickEvent" }, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <div mat-dialog-title class=\"dialog-title\">\n {{ title }}\n <div *ngIf=\"showCloseButton\">\n <ui-button\n type=\"text\"\n [justIcon]=\"true\"\n [disabled]=\"disableButtons\"\n class=\"close\"\n iconName=\"Close\"\n label=\"Close dialog\"\n (click)=\"onClose($event)\"\n (buttonClickEvent)=\"dismiss()\"\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 [type]=\"secondaryButtonType\"\n *ngIf=\"!!secondaryButtonLabel\"\n [label]=\"secondaryButtonLabel\"\n (click)=\"onSecondaryButtonClick($event)\"\n ></ui-button>\n <ui-button\n [type]=\"primaryButtonType\"\n *ngIf=\"!!primaryButtonLabel\"\n [disabled]=\"disableButtons\"\n (click)=\"onPrimaryButtonClick($event)\"\n [label]=\"primaryButtonLabel\"\n (buttonClickEvent)=\"dismiss()\"\n ></ui-button>\n </div>\n</ng-container>\n", styles: [".ui-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:16px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000;line-height:20px}.dialog-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0;font-size:20px!important;font-weight:700!important}.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$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1618
1634
|
}
|
|
1619
1635
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogComponent, decorators: [{
|
|
1620
1636
|
type: Component,
|
|
@@ -2102,7 +2118,7 @@ class ForgotPasswordComponent {
|
|
|
2102
2118
|
this.formErrors[field] = [''];
|
|
2103
2119
|
}
|
|
2104
2120
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ForgotPasswordComponent, deps: [{ token: i1$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2105
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ForgotPasswordComponent, selector: "ui-forgot-password", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", backToLoginEvent: "backToLoginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"forgotPasswordForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"email\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [errors]=\"formErrors.email\"\n (ngModelChange)=\"checkErrors('email')\"\n ></ui-field>\n </div>\n <div></div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"forgotPasswordForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (buttonClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div class=\"back-login\" (click)=\"backToLogin()\">\n <mat-icon>arrow_back</mat-icon>\n <span>{{ i18n.back_to_login }}</span>\n </div>\n </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 21px}.form-box .field{width:100%}.form-box .submit-button{margin:3px 0 24px}.form-box .back-login{display:flex;align-content:center;color:#46a997;cursor:pointer}.form-box .back-login mat-icon{margin-right:8px}.form-box .back-login span{padding-top:2px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2121
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ForgotPasswordComponent, selector: "ui-forgot-password", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", backToLoginEvent: "backToLoginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"forgotPasswordForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"email\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [errors]=\"formErrors.email\"\n (ngModelChange)=\"checkErrors('email')\"\n ></ui-field>\n </div>\n <div></div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"forgotPasswordForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (buttonClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div class=\"back-login\" (click)=\"backToLogin()\">\n <mat-icon>arrow_back</mat-icon>\n <span>{{ i18n.back_to_login }}</span>\n </div>\n </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box ui-logo{width:160px;display:inline-flex}.form-box .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 21px}.form-box .field{width:100%}.form-box .submit-button{margin:3px 0 24px}.form-box .back-login{display:flex;align-content:center;color:#46a997;cursor:pointer}.form-box .back-login mat-icon{margin-right:8px}.form-box .back-login span{padding-top:2px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2106
2122
|
}
|
|
2107
2123
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ForgotPasswordComponent, decorators: [{
|
|
2108
2124
|
type: Component,
|
|
@@ -2380,7 +2396,7 @@ class LoginComponent {
|
|
|
2380
2396
|
this.formErrors[field] = '';
|
|
2381
2397
|
}
|
|
2382
2398
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoginComponent, deps: [{ token: i1$3.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2383
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoginComponent, selector: "ui-login", inputs: { email: "email", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", forgotPasswordEvent: "forgotPasswordEvent", createAccountEvent: "createAccountEvent" }, ngImport: i0, template: "<div class=\"ui-login-container\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"loginForm\" class=\"form-wrapper\">\n <div class=\"field-email\">\n <ui-field\n formControlName=\"email\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [errors]=\"[formErrors.email]\"\n (ngModelChange)=\"checkErrors('email')\"\n ></ui-field>\n </div>\n <div class=\"field-password\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [errors]=\"[formErrors.password]\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n </div>\n <div class=\"actions\">\n <div class=\"remember-me\">\n <ui-checkbox formControlName=\"remember_me\" [label]=\"i18n.remember_me\"></ui-checkbox>\n </div>\n <div class=\"forgot-password\" (click)=\"forgotPassword()\">{{ i18n.forgot_password }}</div>\n </div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"loginForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (buttonClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div class=\"create-account-wrapper\">\n <p>\n {{ i18n.not_have_account }}\n <span class=\"create-account\" (click)=\"createAccount()\">{{ i18n.create_account }}</span>\n </p>\n </div>\n </form>\n</div>\n", styles: [".ui-login-container{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(7,auto);max-width:672px;max-height:594px;height:100%;width:100%;padding:60px;background:#ffffff}.ui-login-container ui-logo{grid-column:1/5;grid-row:1/2;width:160px}.ui-login-container .title{grid-column:1/5;grid-row:2/3;font-weight:700;font-size:22px;line-height:29.7px;margin:24px 0;letter-spacing:-.04em}.ui-login-container .form-wrapper{grid-column:1/5;grid-row:3/8;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,auto)}.ui-login-container .form-wrapper .field-email{grid-column:1/5;grid-row:1/2}.ui-login-container .form-wrapper .field-password{grid-column:1/5;grid-row:2/3}.ui-login-container .form-wrapper .actions{grid-column:1/5;grid-row:3/4;display:flex;height:-moz-fit-content;height:fit-content;max-height:20px;justify-content:space-between;margin-top:3px;align-items:center}.ui-login-container .form-wrapper .actions .forgot-password{cursor:pointer;font-weight:700;text-decoration:underline}.ui-login-container .form-wrapper .actions .remember-me{margin-left:-10px}.ui-login-container .form-wrapper .submit-button{margin-top:40px;grid-column:1/5;grid-row:4/5}.ui-login-container .form-wrapper .create-account-wrapper{margin-top:24px;grid-column:1/5;grid-row:5/6}.ui-login-container .form-wrapper .create-account-wrapper p{margin:0;line-height:19.07px}.ui-login-container .form-wrapper .create-account-wrapper .create-account{color:#46a997;cursor:pointer}.ui-login-container .form-wrapper .create-account-wrapper .create-account:hover{text-decoration:underline}@media (min-width: 1024px){.ui-login-container{box-shadow:0 8px 16px #0000001a;border-radius:8px;padding:80px}}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "color", "name", "label", "multiple"], outputs: ["changed"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2399
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoginComponent, selector: "ui-login", inputs: { email: "email", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", forgotPasswordEvent: "forgotPasswordEvent", createAccountEvent: "createAccountEvent" }, ngImport: i0, template: "<div class=\"ui-login-container\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"loginForm\" class=\"form-wrapper\">\n <div class=\"field-email\">\n <ui-field\n formControlName=\"email\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [errors]=\"[formErrors.email]\"\n (ngModelChange)=\"checkErrors('email')\"\n ></ui-field>\n </div>\n <div class=\"field-password\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [errors]=\"[formErrors.password]\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n </div>\n <div class=\"actions\">\n <div class=\"remember-me\">\n <ui-checkbox formControlName=\"remember_me\" [label]=\"i18n.remember_me\"></ui-checkbox>\n </div>\n <div class=\"forgot-password\" (click)=\"forgotPassword()\">{{ i18n.forgot_password }}</div>\n </div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"loginForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (buttonClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div class=\"create-account-wrapper\">\n <p>\n {{ i18n.not_have_account }}\n <span class=\"create-account\" (click)=\"createAccount()\">{{ i18n.create_account }}</span>\n </p>\n </div>\n </form>\n</div>\n", styles: [".ui-login-container{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(7,auto);max-width:672px;max-height:594px;height:100%;width:100%;padding:60px;background:#ffffff}.ui-login-container ui-logo{grid-column:1/5;grid-row:1/2;width:160px}.ui-login-container .title{grid-column:1/5;grid-row:2/3;font-weight:700;font-size:22px;line-height:29.7px;margin:24px 0;letter-spacing:-.04em}.ui-login-container .form-wrapper{grid-column:1/5;grid-row:3/8;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,auto)}.ui-login-container .form-wrapper .field-email{grid-column:1/5;grid-row:1/2}.ui-login-container .form-wrapper .field-password{grid-column:1/5;grid-row:2/3}.ui-login-container .form-wrapper .actions{grid-column:1/5;grid-row:3/4;display:flex;height:-moz-fit-content;height:fit-content;max-height:20px;justify-content:space-between;margin-top:3px;align-items:center}.ui-login-container .form-wrapper .actions .forgot-password{cursor:pointer;font-weight:700;text-decoration:underline}.ui-login-container .form-wrapper .actions .remember-me{margin-left:-10px}.ui-login-container .form-wrapper .submit-button{margin-top:40px;grid-column:1/5;grid-row:4/5}.ui-login-container .form-wrapper .create-account-wrapper{margin-top:24px;grid-column:1/5;grid-row:5/6}.ui-login-container .form-wrapper .create-account-wrapper p{margin:0;line-height:19.07px}.ui-login-container .form-wrapper .create-account-wrapper .create-account{color:#46a997;cursor:pointer}.ui-login-container .form-wrapper .create-account-wrapper .create-account:hover{text-decoration:underline}@media (min-width: 1024px){.ui-login-container{box-shadow:0 8px 16px #0000001a;border-radius:8px;padding:80px}}\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "color", "name", "label", "multiple"], outputs: ["changed"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2384
2400
|
}
|
|
2385
2401
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoginComponent, decorators: [{
|
|
2386
2402
|
type: Component,
|
|
@@ -2491,7 +2507,7 @@ class NavbarComponent {
|
|
|
2491
2507
|
this.menuItemClicked.emit(id);
|
|
2492
2508
|
}
|
|
2493
2509
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2494
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userName: "userName", menuItems: "menuItems" }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<mat-toolbar>\n <div class=\"custom-toolbar row\">\n <ui-logo class=\"logo\" (click)=\"navigate('')\"></ui-logo>\n <div class=\"navigation row\">\n <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n <span>{{ route.title }}</span>\n </a>\n </div>\n <div class=\"actions\">\n <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n {{ userName }}\n <mat-icon iconPositionEnd>expand_more</mat-icon>\n </button>\n </div>\n </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n <button *ngFor=\"let e of menuItems\" mat-menu-item (click)=\"clickMenuItem(e.id)\">\n <div class=\"menu-item\">\n <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n {{ e.text }}\n </div>\n </button>\n <button mat-menu-item (click)=\"logout()\">\n <mat-icon>power_settings_new</mat-icon>\n Log out\n </button>\n</mat-menu>\n", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:105px;height:32px;align-self:center;flex:1 0 216px;display:flex}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer}.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 .navigation a:not(:first-of-type){margin-left:32px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.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}.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: "component", type: i2$4.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: i5$
|
|
2510
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userName: "userName", menuItems: "menuItems" }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<mat-toolbar>\n <div class=\"custom-toolbar row\">\n <ui-logo class=\"logo\" (click)=\"navigate('')\"></ui-logo>\n <div class=\"navigation row\">\n <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n <span>{{ route.title }}</span>\n </a>\n </div>\n <div class=\"actions\">\n <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n {{ userName }}\n <mat-icon iconPositionEnd>expand_more</mat-icon>\n </button>\n </div>\n </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n <button *ngFor=\"let e of menuItems\" mat-menu-item (click)=\"clickMenuItem(e.id)\">\n <div class=\"menu-item\">\n <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n {{ e.text }}\n </div>\n </button>\n <button mat-menu-item (click)=\"logout()\">\n <mat-icon>power_settings_new</mat-icon>\n Log out\n </button>\n</mat-menu>\n", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:105px;height:32px;align-self:center;flex:1 0 216px;display:flex}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer}.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 .navigation a:not(:first-of-type){margin-left:32px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.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}.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: "component", type: i2$4.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: i5$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: LogoComponent, selector: "ui-logo", inputs: ["type"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2495
2511
|
}
|
|
2496
2512
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
2497
2513
|
type: Component,
|
|
@@ -2972,7 +2988,7 @@ class SnackbarComponent {
|
|
|
2972
2988
|
this.snackbarRef.dismiss();
|
|
2973
2989
|
}
|
|
2974
2990
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackbarComponent, deps: [{ token: MAT_SNACK_BAR_DATA }, { token: i1$8.MatSnackBarRef }, { token: LanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2975
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SnackbarComponent, selector: "ui-snackbar", inputs: { snackbarType: "snackbarType", message: "message", seconds: "seconds", includeDismissButton: "includeDismissButton", fixed: "fixed", language: "language" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <div\n [ngClass]=\"snackbarType + ' ' + position\"\n [@openClose]\n *ngIf=\"visible\"\n class=\"snackbar-container\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n >\n <div class=\"snackbar-text\">\n <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n {{ message }}\n </div>\n <ui-button\n *ngIf=\"includeDismissButton\"\n type=\"text\"\n [label]=\"t(translationContext + 'DISMISS')\"\n (buttonClickEvent)=\"dismissClick()\"\n ></ui-button>\n </div>\n</ng-container>\n", styles: [":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}@media (max-width: 600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .snackbar-container{bottom:0;z-index:98}:host .mat-mdc-snack-bar-container{margin:16px 8px}\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", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "directive", type: i1$7.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }], animations: [
|
|
2991
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SnackbarComponent, selector: "ui-snackbar", inputs: { snackbarType: "snackbarType", message: "message", seconds: "seconds", includeDismissButton: "includeDismissButton", fixed: "fixed", language: "language" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <div\n [ngClass]=\"snackbarType + ' ' + position\"\n [@openClose]\n *ngIf=\"visible\"\n class=\"snackbar-container\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n >\n <div class=\"snackbar-text\">\n <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n {{ message }}\n </div>\n <ui-button\n *ngIf=\"includeDismissButton\"\n type=\"text\"\n [label]=\"t(translationContext + 'DISMISS')\"\n (buttonClickEvent)=\"dismissClick()\"\n ></ui-button>\n </div>\n</ng-container>\n", styles: [":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}@media (max-width: 600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .snackbar-container{bottom:0;z-index:98}:host .mat-mdc-snack-bar-container{margin:16px 8px}\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", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "directive", type: i1$7.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }], animations: [
|
|
2976
2992
|
trigger('openClose', [
|
|
2977
2993
|
transition(':enter', [
|
|
2978
2994
|
style({ bottom: '-55px', opacity: 0 }),
|
|
@@ -3043,7 +3059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
3043
3059
|
type: Injectable
|
|
3044
3060
|
}], ctorParameters: function () { return [{ type: i1$8.MatSnackBar }]; } });
|
|
3045
3061
|
|
|
3046
|
-
const preloadLang$
|
|
3062
|
+
const preloadLang$2 = (transloco) => () => {
|
|
3047
3063
|
transloco.setActiveLang('en');
|
|
3048
3064
|
return lastValueFrom(transloco.load('en'));
|
|
3049
3065
|
};
|
|
@@ -3054,7 +3070,7 @@ class SnackbarComponentModule {
|
|
|
3054
3070
|
SnackbarService,
|
|
3055
3071
|
{
|
|
3056
3072
|
provide: APP_INITIALIZER,
|
|
3057
|
-
useFactory: preloadLang$
|
|
3073
|
+
useFactory: preloadLang$2,
|
|
3058
3074
|
deps: [TranslocoService],
|
|
3059
3075
|
multi: true,
|
|
3060
3076
|
},
|
|
@@ -3070,7 +3086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
3070
3086
|
SnackbarService,
|
|
3071
3087
|
{
|
|
3072
3088
|
provide: APP_INITIALIZER,
|
|
3073
|
-
useFactory: preloadLang$
|
|
3089
|
+
useFactory: preloadLang$2,
|
|
3074
3090
|
deps: [TranslocoService],
|
|
3075
3091
|
multi: true,
|
|
3076
3092
|
},
|
|
@@ -3264,7 +3280,7 @@ class TableComponent {
|
|
|
3264
3280
|
this.dataSourceDetail = new MatTableDataSource(rowData);
|
|
3265
3281
|
}
|
|
3266
3282
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, deps: [{ token: DataPropertyGetterPipe }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3267
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableComponent, selector: "ui-table", inputs: { tableDetails: "tableDetails", tableData: "tableData", tableColumns: "tableColumns", tableDetailColumns: "tableDetailColumns" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent", onDetailRowClickEvent: "onDetailRowClickEvent" }, viewQueries: [{ propertyName: "matSort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table *ngIf=\"!tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n <ng-container *ngFor=\"let tableColumn of tableColumns; let i = index\" [matColumnDef]=\"tableColumn.headerName\">\n <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', onRowClickEvent.observed && i === tableColumns.length - 1 ? 'row-detail': '']\">\n <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n <mat-icon *ngIf=\"onRowClickEvent.observed && i === tableColumns.length - 1\" class=\"row-detail-icon\">navigate_next</mat-icon>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\" [ngClass]=\"{'row-clickable': onRowClickEvent.observed}\"></tr>\n</table>\n\n<table *ngIf=\"tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\"\n multiTemplateDataRows>\n <ng-container *ngFor=\"let tableColumn of tableColumns; let i = index\" [matColumnDef]=\"tableColumn.headerName\">\n <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', i === 0 ? 'row-expand' : '']\">\n <mat-icon *ngIf=\"i === 0\" class=\"row-expand-icon\">{{ element === elementDetail ? 'expand_less' : 'expand_more' }}</mat-icon>\n <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n </td>\n </ng-container>\n\n <!-- Expanded Content Column -->\n <ng-container matColumnDef=\"expandedDetail\">\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsToDisplay.length\">\n <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\n [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n <table mat-table [dataSource]=\"dataSourceDetail\">\n <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n [matColumnDef]=\"tableColumn.headerName\">\n <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\n [ngStyle]=\"{width: tableColumn.styles?.width}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n {{tableColumn.headerName | uppercase}}\n </th>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\n [ngStyle]=\"{padding: tableColumn.styles?.padding}\">\n <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\n </table>\n </div>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n <tr mat-row *matRowDef=\"let element; columns: columnsToDisplay;\" class=\"element-row\"\n [ngClass]=\"{'expanded-row': elementDetail === element, 'row-clickable': tableDetails}\"\n (click)=\"toggleRow(element)\">\n </tr>\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n</table>\n\n<ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n <div class=\"align-wrapper\">\n <ng-container [ngSwitch]=\"tableColumn.type\">\n <ng-container *ngSwitchCase=\"DataType.FIELD\">\n {{element | dataPropertyGetter: tableColumn.field}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n {{tableColumn.function?.(element)}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n <ng-template\n [dynamicComponent]=\"tableColumn.renderer?.(element)\">\n </ng-template>\n </ng-container>\n <ng-container *ngSwitchDefault>\n {{element | dataPropertyGetter: tableColumn.field}}\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #tableHeader let-tableColumn=\"tableColumn\">\n <div class=\"tooltip\" [ngStyle]=\"{'justify-content': tableColumn.styles?.alignment}\" [ngClass]=\"tableColumn.styles?.alignment\">\n <span>{{tableColumn.headerName | uppercase}}</span>\n <mat-icon *ngIf=\"tableColumn.headerTooltip\" [matTooltip]=\"tableColumn.headerTooltip\" class=\"tooltip-icon\" (click)=\"$event.stopPropagation()\">help</mat-icon>\n </div>\n</ng-template>\n", styles: ["table{cursor:initial;width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-mdc-header-cell{font-weight:700;color:#000;padding:16px}table .mat-mdc-header-cell .tooltip{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}table .mat-mdc-header-cell .tooltip mat-icon{color:#1f5260;font-size:18px;position:relative;top:3px;left:4px;cursor:pointer}table .mat-mdc-cell{padding:16px;text-align:justify}table td,table th,table .mat-mdc-row{border-width:.5px}table .mat-mdc-row:hover:not(.element-detail .mat-row).row-clickable{background-color:#ecf6f5;cursor:pointer}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}table th.th-right{text-align:right}table th.th-right ::ng-deep .mat-sort-header-container{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .mat-sort-header-container{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .mat-sort-header-container{justify-content:center}table .row-detail{display:flex;justify-content:space-between}table .row-detail-icon{align-self:center;font-size:16px;height:16px;width:16px}table .row-expand{display:flex}table .row-expand-icon{align-self:center;font-size:14px;height:14px;width:14px;margin-right:8px}table .align-wrapper{display:flex}table td.td-right{text-align:right}table td.td-right .align-wrapper{justify-content:end}table td.td-left{text-align:left}table td.td-left .align-wrapper{justify-content:start}table td.td-center{text-align:center}table td.td-center .align-wrapper{justify-content:center}table tr.detail-row{height:0}table tr.element-row:not(.expanded-row):hover{background:whitesmoke}table tr.element-row:not(.expanded-row):active{background:#efefef}table .element-row td{border-bottom-width:0}table .mat-column-expandedDetail{padding:0}table .element-detail{overflow:hidden;display:flex}table .element-detail table{background-color:#f6f6f6}table .element-detail table .mat-mdc-header-row{visibility:collapse}table .element-detail table .mat-mdc-cell{border-width:0px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i4$1.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: ["dynamicComponent"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: DataPropertyGetterPipe, name: "dataPropertyGetter" }], animations: [
|
|
3283
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableComponent, selector: "ui-table", inputs: { tableDetails: "tableDetails", tableData: "tableData", tableColumns: "tableColumns", tableDetailColumns: "tableDetailColumns" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent", onDetailRowClickEvent: "onDetailRowClickEvent" }, viewQueries: [{ propertyName: "matSort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table *ngIf=\"!tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n <ng-container *ngFor=\"let tableColumn of tableColumns; let i = index\" [matColumnDef]=\"tableColumn.headerName\">\n <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', onRowClickEvent.observed && i === tableColumns.length - 1 ? 'row-detail': '']\">\n <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n <mat-icon *ngIf=\"onRowClickEvent.observed && i === tableColumns.length - 1\" class=\"row-detail-icon\">navigate_next</mat-icon>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\" [ngClass]=\"{'row-clickable': onRowClickEvent.observed}\"></tr>\n</table>\n\n<table *ngIf=\"tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\"\n multiTemplateDataRows>\n <ng-container *ngFor=\"let tableColumn of tableColumns; let i = index\" [matColumnDef]=\"tableColumn.headerName\">\n <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', i === 0 ? 'row-expand' : '']\">\n <mat-icon *ngIf=\"i === 0\" class=\"row-expand-icon\">{{ element === elementDetail ? 'expand_less' : 'expand_more' }}</mat-icon>\n <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n </td>\n </ng-container>\n\n <!-- Expanded Content Column -->\n <ng-container matColumnDef=\"expandedDetail\">\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsToDisplay.length\">\n <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\n [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n <table mat-table [dataSource]=\"dataSourceDetail\">\n <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n [matColumnDef]=\"tableColumn.headerName\">\n <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\n [ngStyle]=\"{width: tableColumn.styles?.width}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n {{tableColumn.headerName | uppercase}}\n </th>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\n [ngStyle]=\"{padding: tableColumn.styles?.padding}\">\n <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\n </table>\n </div>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n <tr mat-row *matRowDef=\"let element; columns: columnsToDisplay;\" class=\"element-row\"\n [ngClass]=\"{'expanded-row': elementDetail === element, 'row-clickable': tableDetails}\"\n (click)=\"toggleRow(element)\">\n </tr>\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n</table>\n\n<ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n <div class=\"align-wrapper\">\n <ng-container [ngSwitch]=\"tableColumn.type\">\n <ng-container *ngSwitchCase=\"DataType.FIELD\">\n {{element | dataPropertyGetter: tableColumn.field}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n {{tableColumn.function?.(element)}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n <ng-template\n [dynamicComponent]=\"tableColumn.renderer?.(element)\">\n </ng-template>\n </ng-container>\n <ng-container *ngSwitchDefault>\n {{element | dataPropertyGetter: tableColumn.field}}\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #tableHeader let-tableColumn=\"tableColumn\">\n <div class=\"tooltip\" [ngStyle]=\"{'justify-content': tableColumn.styles?.alignment}\" [ngClass]=\"tableColumn.styles?.alignment\">\n <span>{{tableColumn.headerName | uppercase}}</span>\n <mat-icon *ngIf=\"tableColumn.headerTooltip\" [matTooltip]=\"tableColumn.headerTooltip\" class=\"tooltip-icon\" (click)=\"$event.stopPropagation()\">help</mat-icon>\n </div>\n</ng-template>\n", styles: ["table{cursor:initial;width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-mdc-header-cell{font-weight:700;color:#000;padding:16px}table .mat-mdc-header-cell .tooltip{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}table .mat-mdc-header-cell .tooltip mat-icon{color:#1f5260;font-size:18px;position:relative;top:3px;left:4px;cursor:pointer}table .mat-mdc-cell{padding:16px;text-align:justify}table td,table th,table .mat-mdc-row{border-width:.5px}table .mat-mdc-row:hover:not(.element-detail .mat-row).row-clickable{background-color:#ecf6f5;cursor:pointer}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}table th.th-right{text-align:right}table th.th-right ::ng-deep .mat-sort-header-container{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .mat-sort-header-container{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .mat-sort-header-container{justify-content:center}table .row-detail{display:flex;justify-content:space-between}table .row-detail-icon{align-self:center;font-size:16px;height:16px;width:16px}table .row-expand{display:flex}table .row-expand-icon{align-self:center;font-size:14px;height:14px;width:14px;margin-right:8px}table .align-wrapper{display:flex}table td.td-right{text-align:right}table td.td-right .align-wrapper{justify-content:end}table td.td-left{text-align:left}table td.td-left .align-wrapper{justify-content:start}table td.td-center{text-align:center}table td.td-center .align-wrapper{justify-content:center}table tr.detail-row{height:0}table tr.element-row:not(.expanded-row):hover{background:whitesmoke}table tr.element-row:not(.expanded-row):active{background:#efefef}table .element-row td{border-bottom-width:0}table .mat-column-expandedDetail{padding:0}table .element-detail{overflow:hidden;display:flex}table .element-detail table{background-color:#f6f6f6}table .element-detail table .mat-mdc-header-row{visibility:collapse}table .element-detail table .mat-mdc-cell{border-width:0px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i4$1.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: ["dynamicComponent"] }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: DataPropertyGetterPipe, name: "dataPropertyGetter" }], animations: [
|
|
3268
3284
|
trigger('expandDetail', [
|
|
3269
3285
|
state('collapsed, void', style({ height: '0px' })),
|
|
3270
3286
|
state('expanded', style({ height: '*' })),
|
|
@@ -3433,7 +3449,7 @@ class TagComponent {
|
|
|
3433
3449
|
return this.readOnly || this.allowClose || this.isSelected;
|
|
3434
3450
|
}
|
|
3435
3451
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3436
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TagComponent, selector: "ui-tag", inputs: { label: "label", icon: "icon", allowClose: "allowClose", readOnly: "readOnly", isSelected: "isSelected", showIconWhenSelected: "showIconWhenSelected", isDisabled: "isDisabled" }, outputs: { close: "close", press: "press" }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["labelElement"], descendants: true }], ngImport: i0, template: "<div class=\"tag-wrapper\" [matTooltip]=\"(isEllipseActiveObs$ | async) ? labelText : ''\">\n <div\n [tabindex]=\"tabIndex\"\n class=\"tag-container\"\n [attr.data-testid]=\"'tag--container'\"\n [ngClass]=\"{\n filled: filled,\n readonly: readOnly,\n disabled: isDisabled,\n outlined: !isSelected,\n }\"\n (click)=\"onPress()\"\n >\n <ui-icon *ngIf=\"icon\" class=\"icon\" [name]=\"icon\"></ui-icon>\n <ui-icon *ngIf=\"isSelected && showIconWhenSelected\" class=\"icon\" [name]=\"'Check'\"></ui-icon>\n <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n <ui-icon [tabindex]=\"tabIndex\" *ngIf=\"allowClose\" class=\"delete-icon\" (click)=\"onClose()\" [name]=\"'Close'\"></ui-icon>\n </div>\n</div>\n", styles: [":host .tag-wrapper{max-width:264px}:host .tag-container{height:32px;max-width:264px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:-moz-fit-content;width:fit-content;cursor:pointer;margin:4px}:host .tag-container.outlined{border:1px solid #6894A0}:host .tag-container:focus{outline:1px dashed #888888;outline-offset:4px;background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:focus.filled{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled{background:#E9F0F1;border:1px solid #E9F0F1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#A9C2C9;border:1px solid #1B4754}:host .tag-container:hover{background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:active{background:#E9F0F1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#E9F0F1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border:1px solid transparent}:host .tag-container .delete-icon:focus{border:1px dashed #1B4754;border-radius:4px}:host .tag-container .delete-icon:focus-visible{outline:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "directive", type:
|
|
3452
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TagComponent, selector: "ui-tag", inputs: { label: "label", icon: "icon", allowClose: "allowClose", readOnly: "readOnly", isSelected: "isSelected", showIconWhenSelected: "showIconWhenSelected", isDisabled: "isDisabled" }, outputs: { close: "close", press: "press" }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["labelElement"], descendants: true }], ngImport: i0, template: "<div class=\"tag-wrapper\" [matTooltip]=\"(isEllipseActiveObs$ | async) ? labelText : ''\">\n <div\n [tabindex]=\"tabIndex\"\n class=\"tag-container\"\n [attr.data-testid]=\"'tag--container'\"\n [ngClass]=\"{\n filled: filled,\n readonly: readOnly,\n disabled: isDisabled,\n outlined: !isSelected,\n }\"\n (click)=\"onPress()\"\n >\n <ui-icon *ngIf=\"icon\" class=\"icon\" [name]=\"icon\"></ui-icon>\n <ui-icon *ngIf=\"isSelected && showIconWhenSelected\" class=\"icon\" [name]=\"'Check'\"></ui-icon>\n <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n <ui-icon [tabindex]=\"tabIndex\" *ngIf=\"allowClose\" class=\"delete-icon\" (click)=\"onClose()\" [name]=\"'Close'\"></ui-icon>\n </div>\n</div>\n", styles: [":host .tag-wrapper{max-width:264px}:host .tag-container{height:32px;max-width:264px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:-moz-fit-content;width:fit-content;cursor:pointer;margin:4px}:host .tag-container.outlined{border:1px solid #6894A0}:host .tag-container:focus{outline:1px dashed #888888;outline-offset:4px;background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:focus.filled{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled{background:#E9F0F1;border:1px solid #E9F0F1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#A9C2C9;border:1px solid #1B4754}:host .tag-container:hover{background:#F6F6F6;border:1px solid #6894A0}:host .tag-container:active{background:#E9F0F1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#E9F0F1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border:1px solid transparent}:host .tag-container .delete-icon:focus{border:1px dashed #1B4754;border-radius:4px}:host .tag-container .delete-icon:focus-visible{outline:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
|
|
3437
3453
|
}
|
|
3438
3454
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagComponent, decorators: [{
|
|
3439
3455
|
type: Component,
|
|
@@ -3504,7 +3520,7 @@ class TooltipComponent {
|
|
|
3504
3520
|
}
|
|
3505
3521
|
}
|
|
3506
3522
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3507
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TooltipComponent, selector: "ui-tooltip", inputs: { position: "position", message: "message" }, ngImport: i0, template: "<div [matTooltip]=\"message\" [matTooltipPosition]=\"matPosition\" matTooltipClass=\"tooltip\" aria-label=\"tooltip\">\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type:
|
|
3523
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TooltipComponent, selector: "ui-tooltip", inputs: { position: "position", message: "message" }, ngImport: i0, template: "<div [matTooltip]=\"message\" [matTooltipPosition]=\"matPosition\" matTooltipClass=\"tooltip\" aria-label=\"tooltip\">\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3508
3524
|
}
|
|
3509
3525
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
3510
3526
|
type: Component,
|
|
@@ -3656,7 +3672,7 @@ class DropdownComponent {
|
|
|
3656
3672
|
useExisting: forwardRef(() => DropdownComponent),
|
|
3657
3673
|
multi: true,
|
|
3658
3674
|
},
|
|
3659
|
-
], ngImport: i0, template: "<mat-form-field appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\n <mat-label>{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <mat-select\n #matSelect\n [id]=\"id!\"\n panelClass=\"ui-dropdown-list\"\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.value\" #matOption [value]=\"section.value\">\n {{ section.value }}\n </mat-option>\n </div>\n </mat-select>\n <ui-button *ngIf=\"allowClear && !matSelect.empty\" type=\"secondary\" [justIcon]=\"true\" class=\"clear\" iconName=\"Close\" label=\"Clear\" (click)=\"clearValue($event)\"></ui-button>\n <ui-icon color=\"dark\" *ngIf=\"!matSelect.panelOpen\" size=\"24\" name=\"Arrow_down\"></ui-icon>\n <ui-icon color=\"petrol\" *ngIf=\"matSelect.panelOpen\" size=\"24\" name=\"Arrow_up\"></ui-icon>\n <mat-hint class=\"error\" *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of errors\">\n <ui-icon name=\"Error\"></ui-icon>{{ error }}\n </div>\n </mat-hint>\n</mat-form-field>\n", styles: ["ui-dropdown{display:flex}ui-dropdown .mat-mdc-form-field{margin-top:0;width:100%}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-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-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}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list{margin-top:4px;border-radius:8px!important;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-accent mat-option:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:focus:not(.mdc-list-item--disabled){background-color:#e0e0e0}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mat-mdc-option-active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mdc-list-item--selected,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mat-mdc-option-active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mdc-list-item--selected{background-color:#e9f0f1;color:#000}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mat-mdc-option-active:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mat-mdc-option-active:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mdc-list-item--selected:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mdc-list-item--selected:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mat-mdc-option-active:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mat-mdc-option-active:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mdc-list-item--selected:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mdc-list-item--selected:focus:not(.mdc-list-item--disabled){background-color:#c8d7de}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple:focus:not(.mdc-list-item--disabled){background-color:#e0e0e0}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mat-mdc-option-active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mdc-list-item--selected,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mat-mdc-option-active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mdc-list-item--selected{background-color:#f0dad9;color:#000}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mat-mdc-option-active:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mat-mdc-option-active:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mdc-list-item--selected:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mdc-list-item--selected:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mat-mdc-option-active:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mat-mdc-option-active:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mdc-list-item--selected:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mdc-list-item--selected:focus:not(.mdc-list-item--disabled){background-color:#e3c3c6}.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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3675
|
+
], ngImport: i0, template: "<mat-form-field appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\n <mat-label>{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <mat-select\n #matSelect\n [id]=\"id!\"\n panelClass=\"ui-dropdown-list\"\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.value\" #matOption [value]=\"section.value\">\n {{ section.value }}\n </mat-option>\n </div>\n </mat-select>\n <ui-button *ngIf=\"allowClear && !matSelect.empty\" type=\"secondary\" [justIcon]=\"true\" class=\"clear\" iconName=\"Close\" label=\"Clear\" (click)=\"clearValue($event)\"></ui-button>\n <ui-icon color=\"dark\" *ngIf=\"!matSelect.panelOpen\" size=\"24\" name=\"Arrow_down\"></ui-icon>\n <ui-icon color=\"petrol\" *ngIf=\"matSelect.panelOpen\" size=\"24\" name=\"Arrow_up\"></ui-icon>\n <mat-hint class=\"error\" *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of errors\">\n <ui-icon name=\"Error\"></ui-icon>{{ error }}\n </div>\n </mat-hint>\n</mat-form-field>\n", styles: ["ui-dropdown{display:flex}ui-dropdown .mat-mdc-form-field{margin-top:0;width:100%}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-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-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}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list{margin-top:4px;border-radius:8px!important;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-accent mat-option:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:focus:not(.mdc-list-item--disabled){background-color:#e0e0e0}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mat-mdc-option-active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mdc-list-item--selected,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mat-mdc-option-active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mdc-list-item--selected{background-color:#e9f0f1;color:#000}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mat-mdc-option-active:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mat-mdc-option-active:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mdc-list-item--selected:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option.mdc-list-item--selected:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mat-mdc-option-active:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mat-mdc-option-active:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mdc-list-item--selected:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple.mdc-list-item--selected:focus:not(.mdc-list-item--disabled){background-color:#c8d7de}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple:focus:not(.mdc-list-item--disabled){background-color:#e0e0e0}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mat-mdc-option-active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mdc-list-item--selected,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mat-mdc-option-active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mdc-list-item--selected{background-color:#f0dad9;color:#000}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mat-mdc-option-active:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mat-mdc-option-active:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mdc-list-item--selected:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option.mdc-list-item--selected:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mat-mdc-option-active:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mat-mdc-option-active:focus:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mdc-list-item--selected:hover:not(.mdc-list-item--disabled),.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn .mat-mdc-option-multiple.mdc-list-item--selected:focus:not(.mdc-list-item--disabled){background-color:#e3c3c6}.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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "type", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3660
3676
|
}
|
|
3661
3677
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
3662
3678
|
type: Component,
|
|
@@ -3931,7 +3947,7 @@ class DatepickerComponent {
|
|
|
3931
3947
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
3932
3948
|
multi: true,
|
|
3933
3949
|
},
|
|
3934
|
-
], usesOnChanges: true, ngImport: i0, template: "<mat-form-field #uiDatepicker appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\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 matInput\n (blur)=\"onTouch()\"\n (dateChange)=\"onValueChange($event.value)\"\n [id]=\"id!\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [name]=\"fieldName!\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n <ui-icon matDatepickerToggleIcon name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n </mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </ng-container>\n <ng-container *ngIf=\"isRange\">\n <mat-date-range-input *ngIf=\"isRange\" [formGroup]=\"range\" [rangePicker]=\"rangePicker\" >\n <input matStartDate #dateRangeStart formControlName=\"start\" placeholder=\"Start date\" >\n <input matEndDate #dateRangeEnd formControlName=\"end\" placeholder=\"End date\" (dateChange)=\"dateRangeChange(dateRangeStart.value, dateRangeEnd.value)\">\n </mat-date-range-input>\n <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n <ui-icon matDatepickerToggleIcon 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 <mat-hint class=\"info\" *ngIf=\"hint && !_errors\">{{ hint }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of _errors\"><ui-icon name=\"Error\"></ui-icon>{{ error }}</div>\n </mat-hint>\n</mat-form-field>\n", styles: [".ui-datepicker .mat-mdc-form-field{margin-top:0;min-width:296px}.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:4px;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}.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:9px}.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}.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}.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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.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"] }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6
|
|
3950
|
+
], usesOnChanges: true, ngImport: i0, template: "<mat-form-field #uiDatepicker appearance=\"outline\" [color]=\"errorsLength ? 'warn' : 'accent'\">\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 matInput\n (blur)=\"onTouch()\"\n (dateChange)=\"onValueChange($event.value)\"\n [id]=\"id!\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [name]=\"fieldName!\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n <ui-icon matDatepickerToggleIcon name=\"Calendar\" size=\"24\" color=\"inherit\"></ui-icon>\n </mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </ng-container>\n <ng-container *ngIf=\"isRange\">\n <mat-date-range-input *ngIf=\"isRange\" [formGroup]=\"range\" [rangePicker]=\"rangePicker\" >\n <input matStartDate #dateRangeStart formControlName=\"start\" placeholder=\"Start date\" >\n <input matEndDate #dateRangeEnd formControlName=\"end\" placeholder=\"End date\" (dateChange)=\"dateRangeChange(dateRangeStart.value, dateRangeEnd.value)\">\n </mat-date-range-input>\n <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n <ui-icon matDatepickerToggleIcon 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 <mat-hint class=\"info\" *ngIf=\"hint && !_errors\">{{ hint }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of _errors\"><ui-icon name=\"Error\"></ui-icon>{{ error }}</div>\n </mat-hint>\n</mat-form-field>\n", styles: [".ui-datepicker .mat-mdc-form-field{margin-top:0;min-width:296px}.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:4px;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}.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:9px}.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}.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}.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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.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"] }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i6.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i6.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i6.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3935
3951
|
}
|
|
3936
3952
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
3937
3953
|
type: Component,
|
|
@@ -4265,6 +4281,269 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
4265
4281
|
}]
|
|
4266
4282
|
}] });
|
|
4267
4283
|
|
|
4284
|
+
var ScreenBreakpoints;
|
|
4285
|
+
(function (ScreenBreakpoints) {
|
|
4286
|
+
ScreenBreakpoints[ScreenBreakpoints["MOBILE"] = 600] = "MOBILE";
|
|
4287
|
+
})(ScreenBreakpoints || (ScreenBreakpoints = {}));
|
|
4288
|
+
|
|
4289
|
+
const IS_MOBILE_TOKEN = new InjectionToken('Is mobile', {
|
|
4290
|
+
factory: () => {
|
|
4291
|
+
const breakpointObserver = inject(BreakpointObserver);
|
|
4292
|
+
return breakpointObserver.observe(`(max-width: ${ScreenBreakpoints.MOBILE}px)`).pipe(map(v => v.matches));
|
|
4293
|
+
},
|
|
4294
|
+
});
|
|
4295
|
+
|
|
4296
|
+
class StepComponent {
|
|
4297
|
+
constructor() {
|
|
4298
|
+
/**
|
|
4299
|
+
* Input property for the icon associated with the step.
|
|
4300
|
+
*
|
|
4301
|
+
* @memberof StepComponent
|
|
4302
|
+
*/
|
|
4303
|
+
this.icon = '';
|
|
4304
|
+
/**
|
|
4305
|
+
* Input property indicating whether the step is disabled.
|
|
4306
|
+
*
|
|
4307
|
+
* @memberof StepComponent
|
|
4308
|
+
*/
|
|
4309
|
+
this.disabled = false;
|
|
4310
|
+
/**
|
|
4311
|
+
* Input property indicating whether the previous step has been visited.
|
|
4312
|
+
*
|
|
4313
|
+
* @memberof StepComponent
|
|
4314
|
+
*/
|
|
4315
|
+
this.prevStepIsVisited = false;
|
|
4316
|
+
/**
|
|
4317
|
+
* Input property indicating whether the component is in mobile mode.
|
|
4318
|
+
*
|
|
4319
|
+
* @memberof StepComponent
|
|
4320
|
+
*/
|
|
4321
|
+
this.mobileMode = false;
|
|
4322
|
+
/**
|
|
4323
|
+
* Input property indicating whether the final icon should be displayed.
|
|
4324
|
+
*
|
|
4325
|
+
* @memberof StepComponent
|
|
4326
|
+
*/
|
|
4327
|
+
this.finalIcon = false;
|
|
4328
|
+
/**
|
|
4329
|
+
* Input property indicating to display icon when step is selected.
|
|
4330
|
+
*
|
|
4331
|
+
* @memberof StepComponent
|
|
4332
|
+
*/
|
|
4333
|
+
this.showIconWhenSelected = false;
|
|
4334
|
+
/**
|
|
4335
|
+
* Event emitted when the step was clicked.
|
|
4336
|
+
* @type {number}
|
|
4337
|
+
* @memberof StepComponent
|
|
4338
|
+
*/
|
|
4339
|
+
this.stepSelected = new EventEmitter();
|
|
4340
|
+
}
|
|
4341
|
+
get hasLastStepDefaultIcon() {
|
|
4342
|
+
return !this.showIconWhenSelected || (this.showIconWhenSelected && !this.selected);
|
|
4343
|
+
}
|
|
4344
|
+
onStepSelected(index) {
|
|
4345
|
+
this.stepSelected.emit(index);
|
|
4346
|
+
}
|
|
4347
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4348
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StepComponent, selector: "ui-step", inputs: { label: "label", isVisited: "isVisited", submitted: "submitted", icon: "icon", index: "index", selected: "selected", isLast: "isLast", selectedIndex: "selectedIndex", disabled: "disabled", prevStepIsVisited: "prevStepIsVisited", mobileMode: "mobileMode", finalIcon: "finalIcon", showIconWhenSelected: "showIconWhenSelected" }, outputs: { stepSelected: "stepSelected" }, ngImport: i0, template: "<div\n *ngIf=\"!mobileMode; else mobile\"\n class=\"step-container\"\n [tabIndex]=\"0\"\n [ngClass]=\"{\n 'visited-next': isVisited && index > selectedIndex,\n 'visited-prev': isVisited && index < selectedIndex,\n 'active': selected,\n 'last-step': finalIcon && hasLastStepDefaultIcon,\n 'disabled': disabled,\n }\"\n (click)=\"onStepSelected(index)\"\n>\n <div class=\"step-icon\">\n <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n [color]=\"isVisited && index < selectedIndex ? 'white' : 'petrol'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </ng-container>\n </div>\n\n <ng-template #lastStep>\n <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [attr.src]=\"'../../assets/images/step-finish.svg'\">\n\n <ng-template #stepIcon>\n <div class=\"icon-wrapper\">\n <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n <ng-template #stepIndex>\n {{ index + 1 }}\n </ng-template>\n </div>\n </ng-template>\n </ng-template>\n </div>\n\n <div class=\"step-label\" *ngIf=\"label\">\n {{ label }}\n </div>\n</div>\n\n<ng-template #mobile>\n <div class=\"mobile-step-container\" [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited }\">\n <div class=\"step\">\n <ng-container *ngIf=\"!finalIcon; else lastStep\">\n <div [ngSwitch]=\"true\" class=\"icon\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </div>\n </ng-container>\n\n <ng-template #lastStep>\n <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [width]=\"24\" [height]=\"24\" [attr.src]=\"'../../assets/images/step-finish.svg'\">\n\n <ng-template #stepIcon>\n <div class=\"icon\">\n <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n <ng-template #stepIndex>\n {{ index + 1 }}\n </ng-template>\n </div>\n </ng-template>\n </ng-template>\n <span class=\"label\">{{ label }}</span>\n </div>\n </div>\n</ng-template>\n", styles: [".flex-center,.mobile-step-container .step .icon,.step-container .icon-wrapper,.step-container .step-icon,.step-container{display:flex;align-items:center;justify-content:center}.step-container{flex-direction:column;cursor:pointer;border-radius:8px;padding:24px;gap:16px;max-width:200px;width:100%;position:relative}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#EDEDED}.step-container:focus{outline:1px dashed #888888}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;font-weight:700}.step-container.visited-prev:hover .step-icon,.step-container.visited-prev:focus .step-icon,.step-container.visited-prev:active .step-icon{background:#276678}.step-container.last-step .step-icon{border:unset;background:transparent}.step-container.last-step .step-label{font-weight:400}.step-container .step-label{color:#276678;line-height:24px;font-size:16px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;text-align:center}.step-container .step-icon{width:44px;height:44px;border:3px solid #C8D7DE;border-radius:100%;color:#276678;font-size:14px;font-weight:700;line-height:17px;background:transparent;margin:0 24px}.step-container .step-icon .line{position:absolute;top:45px;left:-8px;border-top:2px solid #C8D7DE;width:44px;right:56px}.step-container .step-icon .line.visited{border-color:#276678!important}.step-container .icon-wrapper{width:28px;height:28px;border-radius:100%;background:#C8D7DE}.mobile-step-container .step{cursor:pointer;padding:16px;display:flex;flex-direction:row}.mobile-step-container .step img{margin-right:16px}.mobile-step-container .step .icon{margin-right:16px;min-width:24px;height:24px;background:#C8D7DE;border-radius:50%;color:#276678;font-weight:700}.mobile-step-container .step .label{font-size:14px;line-height:20px}.mobile-step-container.active .step .label{line-height:24px;font-weight:700}.mobile-step-container.active .step .icon,.mobile-step-container.visited .step .icon{background:#276678;color:#fff}.mobile-step-container.disabled{pointer-events:none}.mobile-step-container.disabled .step .label{opacity:.5}\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.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: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4349
|
+
}
|
|
4350
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepComponent, decorators: [{
|
|
4351
|
+
type: Component,
|
|
4352
|
+
args: [{ selector: 'ui-step', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"!mobileMode; else mobile\"\n class=\"step-container\"\n [tabIndex]=\"0\"\n [ngClass]=\"{\n 'visited-next': isVisited && index > selectedIndex,\n 'visited-prev': isVisited && index < selectedIndex,\n 'active': selected,\n 'last-step': finalIcon && hasLastStepDefaultIcon,\n 'disabled': disabled,\n }\"\n (click)=\"onStepSelected(index)\"\n>\n <div class=\"step-icon\">\n <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n [color]=\"isVisited && index < selectedIndex ? 'white' : 'petrol'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </ng-container>\n </div>\n\n <ng-template #lastStep>\n <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [attr.src]=\"'../../assets/images/step-finish.svg'\">\n\n <ng-template #stepIcon>\n <div class=\"icon-wrapper\">\n <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n <ng-template #stepIndex>\n {{ index + 1 }}\n </ng-template>\n </div>\n </ng-template>\n </ng-template>\n </div>\n\n <div class=\"step-label\" *ngIf=\"label\">\n {{ label }}\n </div>\n</div>\n\n<ng-template #mobile>\n <div class=\"mobile-step-container\" [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited }\">\n <div class=\"step\">\n <ng-container *ngIf=\"!finalIcon; else lastStep\">\n <div [ngSwitch]=\"true\" class=\"icon\">\n <ng-container *ngSwitchCase=\"isVisited && !selected\">\n <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"selected && !!icon\">\n <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n {{ index + 1 }}\n </ng-container>\n </div>\n </ng-container>\n\n <ng-template #lastStep>\n <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\" [alt]=\"'step-finish-image'\" [width]=\"24\" [height]=\"24\" [attr.src]=\"'../../assets/images/step-finish.svg'\">\n\n <ng-template #stepIcon>\n <div class=\"icon\">\n <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n <ng-template #stepIndex>\n {{ index + 1 }}\n </ng-template>\n </div>\n </ng-template>\n </ng-template>\n <span class=\"label\">{{ label }}</span>\n </div>\n </div>\n</ng-template>\n", styles: [".flex-center,.mobile-step-container .step .icon,.step-container .icon-wrapper,.step-container .step-icon,.step-container{display:flex;align-items:center;justify-content:center}.step-container{flex-direction:column;cursor:pointer;border-radius:8px;padding:24px;gap:16px;max-width:200px;width:100%;position:relative}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#EDEDED}.step-container:focus{outline:1px dashed #888888}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;font-weight:700}.step-container.visited-prev:hover .step-icon,.step-container.visited-prev:focus .step-icon,.step-container.visited-prev:active .step-icon{background:#276678}.step-container.last-step .step-icon{border:unset;background:transparent}.step-container.last-step .step-label{font-weight:400}.step-container .step-label{color:#276678;line-height:24px;font-size:16px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;text-align:center}.step-container .step-icon{width:44px;height:44px;border:3px solid #C8D7DE;border-radius:100%;color:#276678;font-size:14px;font-weight:700;line-height:17px;background:transparent;margin:0 24px}.step-container .step-icon .line{position:absolute;top:45px;left:-8px;border-top:2px solid #C8D7DE;width:44px;right:56px}.step-container .step-icon .line.visited{border-color:#276678!important}.step-container .icon-wrapper{width:28px;height:28px;border-radius:100%;background:#C8D7DE}.mobile-step-container .step{cursor:pointer;padding:16px;display:flex;flex-direction:row}.mobile-step-container .step img{margin-right:16px}.mobile-step-container .step .icon{margin-right:16px;min-width:24px;height:24px;background:#C8D7DE;border-radius:50%;color:#276678;font-weight:700}.mobile-step-container .step .label{font-size:14px;line-height:20px}.mobile-step-container.active .step .label{line-height:24px;font-weight:700}.mobile-step-container.active .step .icon,.mobile-step-container.visited .step .icon{background:#276678;color:#fff}.mobile-step-container.disabled{pointer-events:none}.mobile-step-container.disabled .step .label{opacity:.5}\n"] }]
|
|
4353
|
+
}], propDecorators: { label: [{
|
|
4354
|
+
type: Input
|
|
4355
|
+
}], isVisited: [{
|
|
4356
|
+
type: Input
|
|
4357
|
+
}], submitted: [{
|
|
4358
|
+
type: Input
|
|
4359
|
+
}], icon: [{
|
|
4360
|
+
type: Input
|
|
4361
|
+
}], index: [{
|
|
4362
|
+
type: Input
|
|
4363
|
+
}], selected: [{
|
|
4364
|
+
type: Input
|
|
4365
|
+
}], isLast: [{
|
|
4366
|
+
type: Input
|
|
4367
|
+
}], selectedIndex: [{
|
|
4368
|
+
type: Input
|
|
4369
|
+
}], disabled: [{
|
|
4370
|
+
type: Input
|
|
4371
|
+
}], prevStepIsVisited: [{
|
|
4372
|
+
type: Input
|
|
4373
|
+
}], mobileMode: [{
|
|
4374
|
+
type: Input
|
|
4375
|
+
}], finalIcon: [{
|
|
4376
|
+
type: Input
|
|
4377
|
+
}], showIconWhenSelected: [{
|
|
4378
|
+
type: Input
|
|
4379
|
+
}], stepSelected: [{
|
|
4380
|
+
type: Output
|
|
4381
|
+
}] } });
|
|
4382
|
+
|
|
4383
|
+
const MARGINS = 36;
|
|
4384
|
+
const PADDING = 16;
|
|
4385
|
+
/**
|
|
4386
|
+
* Directive is used to draw lines between steps
|
|
4387
|
+
*/
|
|
4388
|
+
class StepLineWidthDirective {
|
|
4389
|
+
resize() {
|
|
4390
|
+
this.setSize();
|
|
4391
|
+
}
|
|
4392
|
+
constructor(el) {
|
|
4393
|
+
this.el = el;
|
|
4394
|
+
}
|
|
4395
|
+
setSize() {
|
|
4396
|
+
this.el.nativeElement.style.width = `calc(100% + ${this.stepLineWidth.getBoundingClientRect().width / 2 - PADDING}px)`;
|
|
4397
|
+
this.el.nativeElement.style.left = `-${this.stepLineWidth.getBoundingClientRect().width / 2 - MARGINS}px`;
|
|
4398
|
+
}
|
|
4399
|
+
ngOnChanges() {
|
|
4400
|
+
queueMicrotask(() => {
|
|
4401
|
+
this.setSize();
|
|
4402
|
+
});
|
|
4403
|
+
}
|
|
4404
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepLineWidthDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4405
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: StepLineWidthDirective, selector: "[stepLineWidth]", inputs: { stepLineWidth: "stepLineWidth" }, host: { listeners: { "window:resize.out-zone": "resize($event)" } }, usesOnChanges: true, ngImport: i0 }); }
|
|
4406
|
+
}
|
|
4407
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepLineWidthDirective, decorators: [{
|
|
4408
|
+
type: Directive,
|
|
4409
|
+
args: [{
|
|
4410
|
+
selector: '[stepLineWidth]',
|
|
4411
|
+
}]
|
|
4412
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { stepLineWidth: [{
|
|
4413
|
+
type: Input
|
|
4414
|
+
}], resize: [{
|
|
4415
|
+
type: HostListener,
|
|
4416
|
+
args: ['window:resize.out-zone', ['$event']]
|
|
4417
|
+
}] } });
|
|
4418
|
+
|
|
4419
|
+
class StepperComponent {
|
|
4420
|
+
/**
|
|
4421
|
+
* Input property to set the steps for the stepper.
|
|
4422
|
+
* The first step will be marked as visited automatically.
|
|
4423
|
+
*
|
|
4424
|
+
* @memberof StepperComponent
|
|
4425
|
+
*/
|
|
4426
|
+
set steps(itemSteps) {
|
|
4427
|
+
this.itemSteps = itemSteps;
|
|
4428
|
+
const [first, ...other] = itemSteps;
|
|
4429
|
+
first.isVisited = true;
|
|
4430
|
+
this.itemSteps = [first, ...other];
|
|
4431
|
+
}
|
|
4432
|
+
get isOpen() {
|
|
4433
|
+
return this.isOpened;
|
|
4434
|
+
}
|
|
4435
|
+
set isOpen(value) {
|
|
4436
|
+
this.isOpened = value;
|
|
4437
|
+
}
|
|
4438
|
+
constructor(isMobile$) {
|
|
4439
|
+
this.isMobile$ = isMobile$;
|
|
4440
|
+
/**
|
|
4441
|
+
* Input property to set the selected index of the stepper.
|
|
4442
|
+
* Default value is 0.
|
|
4443
|
+
*
|
|
4444
|
+
* @memberof StepperComponent
|
|
4445
|
+
*/
|
|
4446
|
+
this.selectedIndex = 0;
|
|
4447
|
+
/**
|
|
4448
|
+
* Input property indicating whether the final icon should be displayed.
|
|
4449
|
+
* Default value is false.
|
|
4450
|
+
*
|
|
4451
|
+
* @memberof StepperComponent
|
|
4452
|
+
*/
|
|
4453
|
+
this.lastStepFinalIcon = false;
|
|
4454
|
+
this.selectionChange = new EventEmitter();
|
|
4455
|
+
this.isOpened = false;
|
|
4456
|
+
this.itemSteps = [];
|
|
4457
|
+
this.progressValue = 0;
|
|
4458
|
+
this.translationContext = 'STEPPER.';
|
|
4459
|
+
}
|
|
4460
|
+
ngOnChanges() {
|
|
4461
|
+
this.setProgressBar(this.selectedIndex);
|
|
4462
|
+
}
|
|
4463
|
+
onSelect(changedIndex, step) {
|
|
4464
|
+
if (!step.isVisited && this.selectedIndex !== changedIndex) {
|
|
4465
|
+
step.isVisited = true;
|
|
4466
|
+
}
|
|
4467
|
+
this.selectionChange.emit({ selectedIndex: changedIndex, previousIndex: this.selectedIndex, step });
|
|
4468
|
+
this.selectedIndex = changedIndex;
|
|
4469
|
+
this.setProgressBar(changedIndex);
|
|
4470
|
+
this.onCloseStepList();
|
|
4471
|
+
}
|
|
4472
|
+
showStepsToggle() {
|
|
4473
|
+
this.isOpen = !this.isOpen;
|
|
4474
|
+
}
|
|
4475
|
+
onCloseStepList() {
|
|
4476
|
+
this.isOpen = false;
|
|
4477
|
+
}
|
|
4478
|
+
setProgressBar(selectedIndex) {
|
|
4479
|
+
this.progressValue = ((selectedIndex + 1) * 100) / this.itemSteps.length;
|
|
4480
|
+
}
|
|
4481
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepperComponent, deps: [{ token: IS_MOBILE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4482
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StepperComponent, selector: "ui-stepper", inputs: { steps: "steps", selectedIndex: "selectedIndex", lastStepFinalIcon: "lastStepFinalIcon" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <div class=\"stepper-wrapper\" *ngIf=\"!(isMobile$ | async); else mobile\">\n <ng-container *ngFor=\"let step of itemSteps; index as i, last as isLast\">\n <div class=\"step\" #stepElement>\n <ui-step\n [label]=\"step.label\"\n [isVisited]=\"step.isVisited!\"\n [icon]=\"step.iconName\"\n [index]=\"i\"\n [selected]=\"i === selectedIndex\"\n [selectedIndex]=\"selectedIndex\"\n [isLast]=\"isLast\"\n [disabled]=\"step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)\"\n [prevStepIsVisited]=\"itemSteps[i - 1]?.isVisited && step.isVisited\"\n [finalIcon]=\"isLast ? lastStepFinalIcon : false\"\n [showIconWhenSelected]=\"!!step.showIconWhenSelected\"\n (stepSelected)=\"onSelect($event, step)\"\n ></ui-step>\n </div>\n <div *ngIf=\"!isLast\" class=\"separator-line\" [ngClass]=\"{ visited: step.isVisited && !!this.itemSteps[i + 1]?.isVisited }\">\n <div [stepLineWidth]=\"stepElement\" class=\"line\"></div>\n </div>\n </ng-container>\n </div>\n\n <ng-template #mobile>\n <div class=\"mobile-stepper-wrapper\">\n <div class=\"stepper\">\n <div class=\"progress-step\">\n <div class=\"background\"></div>\n <mat-progress-spinner [strokeWidth]=\"8\" [diameter]=\"40\" [value]=\"progressValue\"></mat-progress-spinner>\n </div>\n\n <div class=\"step-info\">\n <div class=\"current-step\">\n <span>{{ selectedIndex + 1 }}/{{ itemSteps.length }} </span>\n <span>{{ itemSteps[selectedIndex].label }}</span>\n </div>\n <div class=\"next-step\">\n <span *ngIf=\"itemSteps.length !== selectedIndex + 1 else finalStep\">{{ t('COMMON.NEXT') + ':'}} {{ itemSteps[selectedIndex + 1].label }}</span>\n <ng-template #finalStep>\n <span>{{ t(translationContext + 'FINAL_STEP') }}</span>\n </ng-template>\n </div>\n </div>\n\n <div class=\"open-steps\" (click)=\"showStepsToggle()\" [ngClass]=\"{ opened: isOpen }\">\n <ui-icon [size]=\"'24'\" [name]=\"'Arrow_down'\"></ui-icon>\n </div>\n </div>\n\n <div *ngIf=\"isOpen\">\n <div class=\"step-list\">\n <div class=\"step\" *ngFor=\"let step of itemSteps; index as i, last as isLast\">\n <ui-step\n [label]=\"step.label\"\n [isVisited]=\"step.isVisited!\"\n [icon]=\"step.iconName\"\n [index]=\"i\"\n [selected]=\"i === selectedIndex\"\n [selectedIndex]=\"selectedIndex\"\n [isLast]=\"isLast\"\n [disabled]=\"step.disabled ?? ( i > selectedIndex + 1 && !step.isVisited)\"\n [mobileMode]=\"true\"\n [finalIcon]=\"isLast ? lastStepFinalIcon : false\"\n [showIconWhenSelected]=\"!!step.showIconWhenSelected\"\n (stepSelected)=\"onSelect($event, step)\"\n ></ui-step>\n </div>\n </div>\n <div class=\"overlay\" (click)=\"onCloseStepList()\"></div>\n </div>\n </div>\n </ng-template>\n\n</ng-container>\n", styles: [".row,.mobile-stepper-wrapper .stepper,.stepper-wrapper .step,.stepper-wrapper{display:flex;flex-direction:row}.column,.mobile-stepper-wrapper .step-list,.mobile-stepper-wrapper .stepper .step-info{display:flex;flex-direction:column}.stepper-wrapper{width:100%}.stepper-wrapper .step{max-width:200px}.stepper-wrapper .separator-line{display:flex;flex:1 1 auto;position:relative}.stepper-wrapper .separator-line.visited .line{border-top:2px solid #276678}.stepper-wrapper .separator-line .line{position:absolute;top:45px;border-top:2px solid #C8D7DE;width:100%;left:0}.mobile-stepper-wrapper{width:100%}.mobile-stepper-wrapper .stepper{padding:12px 16px;height:72px;border:1px solid #888888;background:#ffffff;border-radius:8px}.mobile-stepper-wrapper .stepper .step-info{width:100%}.mobile-stepper-wrapper .stepper .step-info .current-step{font-weight:700;font-size:16px;line-height:24px}.mobile-stepper-wrapper .stepper .step-info .next-step{margin-top:4px;font-size:14px;line-height:20px}.mobile-stepper-wrapper .stepper .step-info .current-step,.mobile-stepper-wrapper .stepper .step-info .next-step{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.mobile-stepper-wrapper .stepper .open-steps{cursor:pointer;display:flex;justify-content:center;align-items:center}.mobile-stepper-wrapper .stepper .open-steps.opened ::ng-deep ui-icon{transform:rotateX(-180deg)}.mobile-stepper-wrapper .stepper .progress-step{position:relative;width:40px;height:40px;margin-right:16px}.mobile-stepper-wrapper .stepper .progress-step ::ng-deep .mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle,.mobile-stepper-wrapper .stepper .progress-step .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic{stroke:#276678;stroke-linecap:round}.mobile-stepper-wrapper .stepper .progress-step .background{position:absolute;top:0;left:0;width:100%;height:100%;border:8px solid #E0E0E0;border-radius:50%}.mobile-stepper-wrapper .step-list{margin-top:4px;z-index:1;background:#ffffff;box-shadow:0 8px 24px 4px #00000014;border-bottom-right-radius:8px;border-bottom-left-radius:8px}.mobile-stepper-wrapper .overlay{position:fixed;width:100%;height:100%;left:0;top:0;z-index:-1;background:transparent}\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: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "component", type: StepComponent, selector: "ui-step", inputs: ["label", "isVisited", "submitted", "icon", "index", "selected", "isLast", "selectedIndex", "disabled", "prevStepIsVisited", "mobileMode", "finalIcon", "showIconWhenSelected"], outputs: ["stepSelected"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i1$7.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: StepLineWidthDirective, selector: "[stepLineWidth]", inputs: ["stepLineWidth"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4483
|
+
}
|
|
4484
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepperComponent, decorators: [{
|
|
4485
|
+
type: Component,
|
|
4486
|
+
args: [{ selector: 'ui-stepper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n <div class=\"stepper-wrapper\" *ngIf=\"!(isMobile$ | async); else mobile\">\n <ng-container *ngFor=\"let step of itemSteps; index as i, last as isLast\">\n <div class=\"step\" #stepElement>\n <ui-step\n [label]=\"step.label\"\n [isVisited]=\"step.isVisited!\"\n [icon]=\"step.iconName\"\n [index]=\"i\"\n [selected]=\"i === selectedIndex\"\n [selectedIndex]=\"selectedIndex\"\n [isLast]=\"isLast\"\n [disabled]=\"step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)\"\n [prevStepIsVisited]=\"itemSteps[i - 1]?.isVisited && step.isVisited\"\n [finalIcon]=\"isLast ? lastStepFinalIcon : false\"\n [showIconWhenSelected]=\"!!step.showIconWhenSelected\"\n (stepSelected)=\"onSelect($event, step)\"\n ></ui-step>\n </div>\n <div *ngIf=\"!isLast\" class=\"separator-line\" [ngClass]=\"{ visited: step.isVisited && !!this.itemSteps[i + 1]?.isVisited }\">\n <div [stepLineWidth]=\"stepElement\" class=\"line\"></div>\n </div>\n </ng-container>\n </div>\n\n <ng-template #mobile>\n <div class=\"mobile-stepper-wrapper\">\n <div class=\"stepper\">\n <div class=\"progress-step\">\n <div class=\"background\"></div>\n <mat-progress-spinner [strokeWidth]=\"8\" [diameter]=\"40\" [value]=\"progressValue\"></mat-progress-spinner>\n </div>\n\n <div class=\"step-info\">\n <div class=\"current-step\">\n <span>{{ selectedIndex + 1 }}/{{ itemSteps.length }} </span>\n <span>{{ itemSteps[selectedIndex].label }}</span>\n </div>\n <div class=\"next-step\">\n <span *ngIf=\"itemSteps.length !== selectedIndex + 1 else finalStep\">{{ t('COMMON.NEXT') + ':'}} {{ itemSteps[selectedIndex + 1].label }}</span>\n <ng-template #finalStep>\n <span>{{ t(translationContext + 'FINAL_STEP') }}</span>\n </ng-template>\n </div>\n </div>\n\n <div class=\"open-steps\" (click)=\"showStepsToggle()\" [ngClass]=\"{ opened: isOpen }\">\n <ui-icon [size]=\"'24'\" [name]=\"'Arrow_down'\"></ui-icon>\n </div>\n </div>\n\n <div *ngIf=\"isOpen\">\n <div class=\"step-list\">\n <div class=\"step\" *ngFor=\"let step of itemSteps; index as i, last as isLast\">\n <ui-step\n [label]=\"step.label\"\n [isVisited]=\"step.isVisited!\"\n [icon]=\"step.iconName\"\n [index]=\"i\"\n [selected]=\"i === selectedIndex\"\n [selectedIndex]=\"selectedIndex\"\n [isLast]=\"isLast\"\n [disabled]=\"step.disabled ?? ( i > selectedIndex + 1 && !step.isVisited)\"\n [mobileMode]=\"true\"\n [finalIcon]=\"isLast ? lastStepFinalIcon : false\"\n [showIconWhenSelected]=\"!!step.showIconWhenSelected\"\n (stepSelected)=\"onSelect($event, step)\"\n ></ui-step>\n </div>\n </div>\n <div class=\"overlay\" (click)=\"onCloseStepList()\"></div>\n </div>\n </div>\n </ng-template>\n\n</ng-container>\n", styles: [".row,.mobile-stepper-wrapper .stepper,.stepper-wrapper .step,.stepper-wrapper{display:flex;flex-direction:row}.column,.mobile-stepper-wrapper .step-list,.mobile-stepper-wrapper .stepper .step-info{display:flex;flex-direction:column}.stepper-wrapper{width:100%}.stepper-wrapper .step{max-width:200px}.stepper-wrapper .separator-line{display:flex;flex:1 1 auto;position:relative}.stepper-wrapper .separator-line.visited .line{border-top:2px solid #276678}.stepper-wrapper .separator-line .line{position:absolute;top:45px;border-top:2px solid #C8D7DE;width:100%;left:0}.mobile-stepper-wrapper{width:100%}.mobile-stepper-wrapper .stepper{padding:12px 16px;height:72px;border:1px solid #888888;background:#ffffff;border-radius:8px}.mobile-stepper-wrapper .stepper .step-info{width:100%}.mobile-stepper-wrapper .stepper .step-info .current-step{font-weight:700;font-size:16px;line-height:24px}.mobile-stepper-wrapper .stepper .step-info .next-step{margin-top:4px;font-size:14px;line-height:20px}.mobile-stepper-wrapper .stepper .step-info .current-step,.mobile-stepper-wrapper .stepper .step-info .next-step{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.mobile-stepper-wrapper .stepper .open-steps{cursor:pointer;display:flex;justify-content:center;align-items:center}.mobile-stepper-wrapper .stepper .open-steps.opened ::ng-deep ui-icon{transform:rotateX(-180deg)}.mobile-stepper-wrapper .stepper .progress-step{position:relative;width:40px;height:40px;margin-right:16px}.mobile-stepper-wrapper .stepper .progress-step ::ng-deep .mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle,.mobile-stepper-wrapper .stepper .progress-step .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic{stroke:#276678;stroke-linecap:round}.mobile-stepper-wrapper .stepper .progress-step .background{position:absolute;top:0;left:0;width:100%;height:100%;border:8px solid #E0E0E0;border-radius:50%}.mobile-stepper-wrapper .step-list{margin-top:4px;z-index:1;background:#ffffff;box-shadow:0 8px 24px 4px #00000014;border-bottom-right-radius:8px;border-bottom-left-radius:8px}.mobile-stepper-wrapper .overlay{position:fixed;width:100%;height:100%;left:0;top:0;z-index:-1;background:transparent}\n"] }]
|
|
4487
|
+
}], ctorParameters: function () { return [{ type: i7.Observable, decorators: [{
|
|
4488
|
+
type: Inject,
|
|
4489
|
+
args: [IS_MOBILE_TOKEN]
|
|
4490
|
+
}] }]; }, propDecorators: { steps: [{
|
|
4491
|
+
type: Input
|
|
4492
|
+
}], selectedIndex: [{
|
|
4493
|
+
type: Input
|
|
4494
|
+
}], lastStepFinalIcon: [{
|
|
4495
|
+
type: Input
|
|
4496
|
+
}], selectionChange: [{
|
|
4497
|
+
type: Output
|
|
4498
|
+
}] } });
|
|
4499
|
+
|
|
4500
|
+
class StepComponentModule {
|
|
4501
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4502
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: StepComponentModule, declarations: [StepComponent], imports: [CommonModule, IconComponentModule], exports: [StepComponent] }); }
|
|
4503
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepComponentModule, imports: [CommonModule, IconComponentModule] }); }
|
|
4504
|
+
}
|
|
4505
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepComponentModule, decorators: [{
|
|
4506
|
+
type: NgModule,
|
|
4507
|
+
args: [{
|
|
4508
|
+
declarations: [StepComponent],
|
|
4509
|
+
imports: [CommonModule, IconComponentModule],
|
|
4510
|
+
exports: [StepComponent],
|
|
4511
|
+
}]
|
|
4512
|
+
}] });
|
|
4513
|
+
|
|
4514
|
+
const preloadLang$1 = (transloco) => () => {
|
|
4515
|
+
transloco.setActiveLang('en');
|
|
4516
|
+
return lastValueFrom(transloco.load('en'));
|
|
4517
|
+
};
|
|
4518
|
+
class StepperComponentModule {
|
|
4519
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepperComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4520
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: StepperComponentModule, declarations: [StepperComponent, StepLineWidthDirective], imports: [CommonModule, IconComponentModule, StepComponentModule, MatProgressSpinnerModule, TranslocoModule], exports: [StepperComponent] }); }
|
|
4521
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepperComponentModule, providers: [
|
|
4522
|
+
{
|
|
4523
|
+
provide: APP_INITIALIZER,
|
|
4524
|
+
useFactory: preloadLang$1,
|
|
4525
|
+
deps: [TranslocoService],
|
|
4526
|
+
multi: true,
|
|
4527
|
+
},
|
|
4528
|
+
], imports: [CommonModule, IconComponentModule, StepComponentModule, MatProgressSpinnerModule, TranslocoModule] }); }
|
|
4529
|
+
}
|
|
4530
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepperComponentModule, decorators: [{
|
|
4531
|
+
type: NgModule,
|
|
4532
|
+
args: [{
|
|
4533
|
+
declarations: [StepperComponent, StepLineWidthDirective],
|
|
4534
|
+
imports: [CommonModule, IconComponentModule, StepComponentModule, MatProgressSpinnerModule, TranslocoModule],
|
|
4535
|
+
exports: [StepperComponent],
|
|
4536
|
+
providers: [
|
|
4537
|
+
{
|
|
4538
|
+
provide: APP_INITIALIZER,
|
|
4539
|
+
useFactory: preloadLang$1,
|
|
4540
|
+
deps: [TranslocoService],
|
|
4541
|
+
multi: true,
|
|
4542
|
+
},
|
|
4543
|
+
],
|
|
4544
|
+
}]
|
|
4545
|
+
}] });
|
|
4546
|
+
|
|
4268
4547
|
class AutocompleteUtils {
|
|
4269
4548
|
static transformDisplayValue(value, textField) {
|
|
4270
4549
|
return AutocompleteUtils.isPrimitive(value) ? value : value[textField];
|
|
@@ -4339,7 +4618,7 @@ var Padding;
|
|
|
4339
4618
|
var Timeout;
|
|
4340
4619
|
(function (Timeout) {
|
|
4341
4620
|
Timeout[Timeout["VIEW_INITIALIZED_AFTER_ACTION"] = 20] = "VIEW_INITIALIZED_AFTER_ACTION";
|
|
4342
|
-
Timeout[Timeout["VIEW_INITIALIZED_COMPONENT_LOAD"] =
|
|
4621
|
+
Timeout[Timeout["VIEW_INITIALIZED_COMPONENT_LOAD"] = 600] = "VIEW_INITIALIZED_COMPONENT_LOAD";
|
|
4343
4622
|
})(Timeout || (Timeout = {}));
|
|
4344
4623
|
|
|
4345
4624
|
/**
|
|
@@ -4357,8 +4636,12 @@ class SelectTextDirective {
|
|
|
4357
4636
|
setTextColor() {
|
|
4358
4637
|
const textElement = this.el.nativeElement;
|
|
4359
4638
|
setTimeout(() => {
|
|
4360
|
-
|
|
4361
|
-
|
|
4639
|
+
const { textContent } = textElement;
|
|
4640
|
+
if (this.selectText && textContent) {
|
|
4641
|
+
textElement.innerHTML = textContent.replace(new RegExp(this.selectText, 'gmi'), match => `<span style="font-weight: bold" >${match}</span>`);
|
|
4642
|
+
}
|
|
4643
|
+
else if (textElement.textContent) {
|
|
4644
|
+
textElement.textContent = textContent;
|
|
4362
4645
|
}
|
|
4363
4646
|
}, 0);
|
|
4364
4647
|
}
|
|
@@ -4386,8 +4669,8 @@ class TransformItemPipe {
|
|
|
4386
4669
|
if (AutocompleteUtils.isPrimitive(value)) {
|
|
4387
4670
|
return value;
|
|
4388
4671
|
}
|
|
4389
|
-
else if (!AutocompleteUtils.isPrimitive(value) && field && value[field]) {
|
|
4390
|
-
return value[field];
|
|
4672
|
+
else if (!AutocompleteUtils.isPrimitive(value) && field && (value[field] || value[0][field])) {
|
|
4673
|
+
return value[field] || value[0][field];
|
|
4391
4674
|
}
|
|
4392
4675
|
else {
|
|
4393
4676
|
AutocompleteUtils.throwInvalidSetupError();
|
|
@@ -4488,6 +4771,7 @@ class AutocompleteComponent {
|
|
|
4488
4771
|
this.isOverlapChecking = true;
|
|
4489
4772
|
this.overlapIndex = 0;
|
|
4490
4773
|
this.inputValueSearch$ = new ReplaySubject(1);
|
|
4774
|
+
this.userInput$ = new ReplaySubject(1);
|
|
4491
4775
|
this.filteredItemsList$ = this.inputValueSearch$.pipe(startWith(''), map(inputValue => inputValue.length ? AutocompleteUtils.filterItems(this.itemsList, inputValue, this.textField) : null));
|
|
4492
4776
|
this.filteredSuggestionList$ = this.inputValueSearch$.pipe(map(inputValue => inputValue.length ? AutocompleteUtils.filterItems(this.suggestionsList, inputValue, this.textField) : null));
|
|
4493
4777
|
this.searchResult$ = this.inputValueSearch$.pipe(map(inputValue => !!inputValue.trim()));
|
|
@@ -4509,7 +4793,7 @@ class AutocompleteComponent {
|
|
|
4509
4793
|
}
|
|
4510
4794
|
ngAfterViewInit() {
|
|
4511
4795
|
if (this.type !== Autocomplete.LARGE) {
|
|
4512
|
-
this.checkOverlap(Timeout.VIEW_INITIALIZED_COMPONENT_LOAD);
|
|
4796
|
+
this.checkOverlap(Timeout.VIEW_INITIALIZED_COMPONENT_LOAD, true);
|
|
4513
4797
|
}
|
|
4514
4798
|
}
|
|
4515
4799
|
registerOnChange(fn) {
|
|
@@ -4558,6 +4842,7 @@ class AutocompleteComponent {
|
|
|
4558
4842
|
}
|
|
4559
4843
|
onInputChange(event) {
|
|
4560
4844
|
const inputValue = event.target.value;
|
|
4845
|
+
this.userInput$.next(inputValue);
|
|
4561
4846
|
if (inputValue.length >= this.minCharactersSearch) {
|
|
4562
4847
|
this.inputValueSearch$.next(inputValue);
|
|
4563
4848
|
this.searchTextChange.emit(inputValue);
|
|
@@ -4597,7 +4882,7 @@ class AutocompleteComponent {
|
|
|
4597
4882
|
}
|
|
4598
4883
|
}
|
|
4599
4884
|
}
|
|
4600
|
-
checkOverlap(delay = Timeout.VIEW_INITIALIZED_AFTER_ACTION) {
|
|
4885
|
+
checkOverlap(delay = Timeout.VIEW_INITIALIZED_AFTER_ACTION, init = false) {
|
|
4601
4886
|
this.isOverLapping = false;
|
|
4602
4887
|
this.isOverlapChecking = true;
|
|
4603
4888
|
setTimeout(() => {
|
|
@@ -4613,12 +4898,21 @@ class AutocompleteComponent {
|
|
|
4613
4898
|
}
|
|
4614
4899
|
});
|
|
4615
4900
|
this.isOverlapChecking = false;
|
|
4901
|
+
if (init) {
|
|
4902
|
+
if (this.type === this.autocompleteType.SINGLE) {
|
|
4903
|
+
this.inputValue = AutocompleteUtils.transformDisplayValue(this.value[0], this.textField);
|
|
4904
|
+
}
|
|
4905
|
+
else {
|
|
4906
|
+
this.inputValue = ' ';
|
|
4907
|
+
}
|
|
4908
|
+
}
|
|
4616
4909
|
this.cdr.markForCheck();
|
|
4617
4910
|
}
|
|
4618
4911
|
}, delay);
|
|
4619
4912
|
}
|
|
4620
4913
|
onUpdate() {
|
|
4621
4914
|
this.inputValueSearch$.next('');
|
|
4915
|
+
this.userInput$.next('');
|
|
4622
4916
|
this.selectionChange.emit(this.value);
|
|
4623
4917
|
this.onChange(this.value);
|
|
4624
4918
|
}
|
|
@@ -4626,6 +4920,9 @@ class AutocompleteComponent {
|
|
|
4626
4920
|
if (this.type === this.autocompleteType.SINGLE) {
|
|
4627
4921
|
this.inputValue = AutocompleteUtils.transformDisplayValue(this.value[0], this.textField);
|
|
4628
4922
|
}
|
|
4923
|
+
else {
|
|
4924
|
+
this.inputValue = ' ';
|
|
4925
|
+
}
|
|
4629
4926
|
if (this.type === this.autocompleteType.MULTI) {
|
|
4630
4927
|
this.checkOverlap();
|
|
4631
4928
|
}
|
|
@@ -4649,7 +4946,7 @@ class AutocompleteComponent {
|
|
|
4649
4946
|
useExisting: forwardRef(() => AutocompleteComponent),
|
|
4650
4947
|
multi: true,
|
|
4651
4948
|
},
|
|
4652
|
-
], viewQueries: [{ propertyName: "matFormFieldElement", first: true, predicate: ["matFormField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <div class=\"autocomplete-wrapper\">\n <mat-form-field\n [appearance]=\"'outline'\"\n #matFormField\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, disabled: disabled }\"\n >\n <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n <div 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 [style.display]=\"isOverLapping && i >= overlapIndex ? 'none' : 'block'\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n }\"\n (close)=\"onOptionRemoved(autocomplete, valueItem)\"\n ></ui-tag>\n <ng-container *ngIf=\"isOverLapping\">\n <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n {{ t(translationContext + 'SELECTED_AMOUNT', { numberSelected: (value | slice: overlapIndex).length }) }}\n </div>\n <ng-template #overlapTag>\n <ui-tag [readOnly]=\"true\" [label]=\"'+' + (value | slice: overlapIndex).length\"></ui-tag>\n </ng-template>\n </ng-container>\n </div>\n <input\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n matInput\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n />\n </div>\n\n <ui-icon\n class=\"remove-selected\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear()\"\n *ngIf=\"inputValue || value?.length\"\n [size]=\"'24'\"\n [name]=\"'Close'\"\n ></ui-icon>\n\n <mat-autocomplete\n #autocomplete\n (optionSelected)=\"onOptionSelected($event)\"\n [hideSingleSelectionIndicator]=\"false\"\n >\n <ng-container *ngIf=\"!(searchResult$ | async)\">\n <mat-optgroup [label]=\"t(translationContext + 'SUGGESTED')\" *ngIf=\"suggestionsList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': suggested | includes: value }\"\n *ngFor=\"let suggested of suggestionsList\"\n [value]=\"suggested\"\n >\n <span [selectText]=\"inputValue\">{{ suggested | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"t(translationContext + 'SELECTED') | uppercase\" *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of value\"\n [value]=\"item\"\n >\n <span>{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n <mat-optgroup [label]=\"t(translationContext + 'SUGGESTED') | uppercase\" *ngIf=\"filteredSuggestionList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"inputValue\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container *ngIf=\"!filteredSuggestionList.length; else showItemListWithGroup\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"inputValue\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </ng-container>\n\n <ng-template #showItemListWithGroup>\n <mat-optgroup [label]=\"t(translationContext + 'ALL_ITEMS') | uppercase\" *ngIf=\"filteredItemsList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"inputValue\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></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 [value]=\"inputValue\">\n <span>{{ t('COMMON.ADD') }}</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>{{ t(translationContext + 'NO_RESULTS_FOUND') }}</span>\n </mat-option>\n </ng-template>\n </ng-container>\n </ng-container>\n </ng-container>\n </mat-autocomplete>\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".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 ui-icon{opacity:.5}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px;width:80px}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:4px}.input-container input.unset-margin{margin-top:unset}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer}.remove-selected.large-input-icon{margin-top:10px}::ng-deep .mdc-menu-surface.mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-form-field{min-width:330px!important}::ng-deep .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#E9F0F1!important}::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:50%!important}::ng-deep .mat-mdc-text-field-wrapper{padding-left:12px!important}::ng-deep .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .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 .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 .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 .mat-mdc-form-field-infix,::ng-deep .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 .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-option.selected-option{background:#E9F0F1}::ng-deep .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}\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: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4$2.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i3$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i3.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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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"], outputs: ["close", "press"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "directive", type: i1$7.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { 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: TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4949
|
+
], viewQueries: [{ propertyName: "matFormFieldElement", first: true, predicate: ["matFormField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <div class=\"autocomplete-wrapper\">\n <mat-form-field\n [appearance]=\"'outline'\"\n #matFormField\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, disabled: disabled }\"\n >\n <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n <div 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 [style.display]=\"isOverLapping && i >= overlapIndex ? 'none' : 'block'\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n }\"\n (close)=\"onOptionRemoved(autocomplete, valueItem)\"\n ></ui-tag>\n <ng-container *ngIf=\"isOverLapping\">\n <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n {{ t(translationContext + 'SELECTED_AMOUNT', { numberSelected: (value | slice: overlapIndex).length }) }}\n </div>\n <ng-template #overlapTag>\n <ui-tag [readOnly]=\"true\" [label]=\"'+' + (value | slice: overlapIndex).length\"></ui-tag>\n </ng-template>\n </ng-container>\n </div>\n <input\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n matInput\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n />\n </div>\n\n <ui-icon\n class=\"remove-selected\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear()\"\n *ngIf=\"inputValue || value?.length\"\n [size]=\"'24'\"\n [name]=\"'Close'\"\n ></ui-icon>\n\n <mat-autocomplete\n #autocomplete\n (optionSelected)=\"onOptionSelected($event)\"\n [hideSingleSelectionIndicator]=\"false\"\n >\n <ng-container *ngIf=\"!(searchResult$ | async)\">\n <mat-optgroup [label]=\"t(translationContext + 'SUGGESTED') | uppercase\" *ngIf=\"suggestionsList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': suggested | includes: value }\"\n *ngFor=\"let suggested of suggestionsList\"\n [value]=\"suggested\"\n >\n <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"t(translationContext + 'SELECTED') | uppercase\" *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of value\"\n [value]=\"item\"\n >\n <span>{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"t(translationContext + 'SELECTED') | uppercase\" *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n <mat-option\n [class]=\"'selected-option'\"\n [value]=\"value\"\n >\n <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n <mat-optgroup [label]=\"t(translationContext + 'SUGGESTED') | uppercase\" *ngIf=\"filteredSuggestionList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container *ngIf=\"!filteredSuggestionList.length; else showItemListWithGroup\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </ng-container>\n\n <ng-template #showItemListWithGroup>\n <mat-optgroup [label]=\"t(translationContext + 'ALL_ITEMS') | uppercase\" *ngIf=\"filteredItemsList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></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 [value]=\"inputValue\">\n <span>{{ t('COMMON.ADD') }}</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>{{ t(translationContext + 'NO_RESULTS_FOUND') }}</span>\n </mat-option>\n </ng-template>\n </ng-container>\n </ng-container>\n </ng-container>\n </mat-autocomplete>\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".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 ui-icon{opacity:.5}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px;width:80px}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:4px}.input-container input.unset-margin{margin-top:unset}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer}.remove-selected.large-input-icon{margin-top:10px}::ng-deep .mdc-menu-surface.mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-form-field{min-width:330px!important}::ng-deep .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#E9F0F1!important}::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:50%!important}::ng-deep .mat-mdc-text-field-wrapper{padding-left:12px!important}::ng-deep .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .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 .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 .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 .mat-mdc-form-field-infix,::ng-deep .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 .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-option.selected-option{background:#E9F0F1}::ng-deep .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}\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: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4$2.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i3$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i3.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$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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"], outputs: ["close", "press"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }, { kind: "directive", type: i1$7.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { 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: TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4653
4950
|
}
|
|
4654
4951
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
4655
4952
|
type: Component,
|
|
@@ -4659,7 +4956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
4659
4956
|
useExisting: forwardRef(() => AutocompleteComponent),
|
|
4660
4957
|
multi: true,
|
|
4661
4958
|
},
|
|
4662
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n <div class=\"autocomplete-wrapper\">\n <mat-form-field\n [appearance]=\"'outline'\"\n #matFormField\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, disabled: disabled }\"\n >\n <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n <div 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 [style.display]=\"isOverLapping && i >= overlapIndex ? 'none' : 'block'\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n }\"\n (close)=\"onOptionRemoved(autocomplete, valueItem)\"\n ></ui-tag>\n <ng-container *ngIf=\"isOverLapping\">\n <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n {{ t(translationContext + 'SELECTED_AMOUNT', { numberSelected: (value | slice: overlapIndex).length }) }}\n </div>\n <ng-template #overlapTag>\n <ui-tag [readOnly]=\"true\" [label]=\"'+' + (value | slice: overlapIndex).length\"></ui-tag>\n </ng-template>\n </ng-container>\n </div>\n <input\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n matInput\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n />\n </div>\n\n <ui-icon\n class=\"remove-selected\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear()\"\n *ngIf=\"inputValue || value?.length\"\n [size]=\"'24'\"\n [name]=\"'Close'\"\n ></ui-icon>\n\n <mat-autocomplete\n #autocomplete\n (optionSelected)=\"onOptionSelected($event)\"\n [hideSingleSelectionIndicator]=\"false\"\n >\n <ng-container *ngIf=\"!(searchResult$ | async)\">\n <mat-optgroup [label]=\"t(translationContext + 'SUGGESTED')\" *ngIf=\"suggestionsList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': suggested | includes: value }\"\n *ngFor=\"let suggested of suggestionsList\"\n [value]=\"suggested\"\n >\n <span [selectText]=\"inputValue\">{{ suggested | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"t(translationContext + 'SELECTED') | uppercase\" *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of value\"\n [value]=\"item\"\n >\n <span>{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n <mat-optgroup [label]=\"t(translationContext + 'SUGGESTED') | uppercase\" *ngIf=\"filteredSuggestionList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"inputValue\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container *ngIf=\"!filteredSuggestionList.length; else showItemListWithGroup\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"inputValue\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </ng-container>\n\n <ng-template #showItemListWithGroup>\n <mat-optgroup [label]=\"t(translationContext + 'ALL_ITEMS') | uppercase\" *ngIf=\"filteredItemsList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"inputValue\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></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 [value]=\"inputValue\">\n <span>{{ t('COMMON.ADD') }}</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>{{ t(translationContext + 'NO_RESULTS_FOUND') }}</span>\n </mat-option>\n </ng-template>\n </ng-container>\n </ng-container>\n </ng-container>\n </mat-autocomplete>\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".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 ui-icon{opacity:.5}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px;width:80px}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:4px}.input-container input.unset-margin{margin-top:unset}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer}.remove-selected.large-input-icon{margin-top:10px}::ng-deep .mdc-menu-surface.mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-form-field{min-width:330px!important}::ng-deep .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#E9F0F1!important}::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:50%!important}::ng-deep .mat-mdc-text-field-wrapper{padding-left:12px!important}::ng-deep .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .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 .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 .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 .mat-mdc-form-field-infix,::ng-deep .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 .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-option.selected-option{background:#E9F0F1}::ng-deep .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}\n"] }]
|
|
4959
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n <div class=\"autocomplete-wrapper\">\n <mat-form-field\n [appearance]=\"'outline'\"\n #matFormField\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, disabled: disabled }\"\n >\n <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n <div 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 [style.display]=\"isOverLapping && i >= overlapIndex ? 'none' : 'block'\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n }\"\n (close)=\"onOptionRemoved(autocomplete, valueItem)\"\n ></ui-tag>\n <ng-container *ngIf=\"isOverLapping\">\n <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n {{ t(translationContext + 'SELECTED_AMOUNT', { numberSelected: (value | slice: overlapIndex).length }) }}\n </div>\n <ng-template #overlapTag>\n <ui-tag [readOnly]=\"true\" [label]=\"'+' + (value | slice: overlapIndex).length\"></ui-tag>\n </ng-template>\n </ng-container>\n </div>\n <input\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n matInput\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n />\n </div>\n\n <ui-icon\n class=\"remove-selected\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear()\"\n *ngIf=\"inputValue || value?.length\"\n [size]=\"'24'\"\n [name]=\"'Close'\"\n ></ui-icon>\n\n <mat-autocomplete\n #autocomplete\n (optionSelected)=\"onOptionSelected($event)\"\n [hideSingleSelectionIndicator]=\"false\"\n >\n <ng-container *ngIf=\"!(searchResult$ | async)\">\n <mat-optgroup [label]=\"t(translationContext + 'SUGGESTED') | uppercase\" *ngIf=\"suggestionsList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': suggested | includes: value }\"\n *ngFor=\"let suggested of suggestionsList\"\n [value]=\"suggested\"\n >\n <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"t(translationContext + 'SELECTED') | uppercase\" *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of value\"\n [value]=\"item\"\n >\n <span>{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"t(translationContext + 'SELECTED') | uppercase\" *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n <mat-option\n [class]=\"'selected-option'\"\n [value]=\"value\"\n >\n <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n <mat-optgroup [label]=\"t(translationContext + 'SUGGESTED') | uppercase\" *ngIf=\"filteredSuggestionList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container *ngIf=\"!filteredSuggestionList.length; else showItemListWithGroup\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </ng-container>\n\n <ng-template #showItemListWithGroup>\n <mat-optgroup [label]=\"t(translationContext + 'ALL_ITEMS') | uppercase\" *ngIf=\"filteredItemsList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></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 [value]=\"inputValue\">\n <span>{{ t('COMMON.ADD') }}</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>{{ t(translationContext + 'NO_RESULTS_FOUND') }}</span>\n </mat-option>\n </ng-template>\n </ng-container>\n </ng-container>\n </ng-container>\n </mat-autocomplete>\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".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 ui-icon{opacity:.5}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px;width:80px}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:4px}.input-container input.unset-margin{margin-top:unset}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer}.remove-selected.large-input-icon{margin-top:10px}::ng-deep .mdc-menu-surface.mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-form-field{min-width:330px!important}::ng-deep .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#E9F0F1!important}::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:50%!important}::ng-deep .mat-mdc-text-field-wrapper{padding-left:12px!important}::ng-deep .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .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 .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 .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 .mat-mdc-form-field-infix,::ng-deep .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 .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-option.selected-option{background:#E9F0F1}::ng-deep .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}\n"] }]
|
|
4663
4960
|
}], propDecorators: { itemsList: [{
|
|
4664
4961
|
type: Input
|
|
4665
4962
|
}], suggestionsList: [{
|
|
@@ -4757,6 +5054,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
4757
5054
|
}]
|
|
4758
5055
|
}] });
|
|
4759
5056
|
|
|
5057
|
+
var BadgeColorEnum;
|
|
5058
|
+
(function (BadgeColorEnum) {
|
|
5059
|
+
BadgeColorEnum["RED"] = "red";
|
|
5060
|
+
BadgeColorEnum["GREY_MEDIUM"] = "grey-medium";
|
|
5061
|
+
BadgeColorEnum["TEAL"] = "teal";
|
|
5062
|
+
BadgeColorEnum["YELLOW"] = "yellow";
|
|
5063
|
+
BadgeColorEnum["PETROL"] = "petrol";
|
|
5064
|
+
BadgeColorEnum["TEAL_60W"] = "teal-60w";
|
|
5065
|
+
BadgeColorEnum["PETROL_90W"] = "petrol-90w";
|
|
5066
|
+
BadgeColorEnum["PETROL_60W"] = "petrol-60w";
|
|
5067
|
+
BadgeColorEnum["GREY_DARK"] = "grey-dark";
|
|
5068
|
+
})(BadgeColorEnum || (BadgeColorEnum = {}));
|
|
5069
|
+
var BadgeVariantEnum;
|
|
5070
|
+
(function (BadgeVariantEnum) {
|
|
5071
|
+
BadgeVariantEnum["PRIMARY"] = "primary";
|
|
5072
|
+
BadgeVariantEnum["SECONDARY"] = "secondary";
|
|
5073
|
+
BadgeVariantEnum["NOTIFICATION"] = "notification";
|
|
5074
|
+
})(BadgeVariantEnum || (BadgeVariantEnum = {}));
|
|
5075
|
+
|
|
5076
|
+
class BadgeComponent {
|
|
5077
|
+
constructor() {
|
|
5078
|
+
/**
|
|
5079
|
+
* The label to be displayed on the badge.
|
|
5080
|
+
* @type {string}
|
|
5081
|
+
* @memberof BadgeComponent
|
|
5082
|
+
*/
|
|
5083
|
+
this.label = '';
|
|
5084
|
+
/**
|
|
5085
|
+
* The icon name to be displayed on the badge.
|
|
5086
|
+
* @type {IconName}
|
|
5087
|
+
* @memberof BadgeComponent
|
|
5088
|
+
*/
|
|
5089
|
+
this.icon = '';
|
|
5090
|
+
/**
|
|
5091
|
+
* The color of the badge. Defaults to 'petrol'.
|
|
5092
|
+
* @type {BadgeColor}
|
|
5093
|
+
* @memberof BadgeComponent
|
|
5094
|
+
*/
|
|
5095
|
+
this.color = 'petrol';
|
|
5096
|
+
/**
|
|
5097
|
+
* The variant of the badge. Defaults to 'notification'.
|
|
5098
|
+
* @type {BadgeVariant}
|
|
5099
|
+
* @memberof BadgeComponent
|
|
5100
|
+
*/
|
|
5101
|
+
this.variant = 'notification';
|
|
5102
|
+
/**
|
|
5103
|
+
* The amount of notifications to be displayed on the badge.
|
|
5104
|
+
* @type {number}
|
|
5105
|
+
* @memberof BadgeComponent
|
|
5106
|
+
*/
|
|
5107
|
+
this.notificationsAmount = 0;
|
|
5108
|
+
this.badgeVariant = BadgeVariantEnum;
|
|
5109
|
+
this.darkColors = [
|
|
5110
|
+
BadgeColorEnum.GREY_MEDIUM,
|
|
5111
|
+
BadgeColorEnum.PETROL_90W,
|
|
5112
|
+
BadgeColorEnum.TEAL_60W,
|
|
5113
|
+
BadgeColorEnum.GREY_MEDIUM,
|
|
5114
|
+
];
|
|
5115
|
+
}
|
|
5116
|
+
get iconColor() {
|
|
5117
|
+
return this.darkColors.includes(this.color) ? 'black' : 'white';
|
|
5118
|
+
}
|
|
5119
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5120
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BadgeComponent, selector: "ui-badge", inputs: { label: "label", icon: "icon", color: "color", variant: "variant", notificationsAmount: "notificationsAmount" }, ngImport: i0, template: "<div [class]=\"'badge-container-' + variant\" [attr.color]=\"color\">\n <ng-container [ngSwitch]=\"variant\">\n <ui-icon *ngSwitchCase=\"badgeVariant.PRIMARY\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"color\"></div>\n <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n </ng-container>\n <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label }}</div>\n</div>\n", styles: [":host{display:block;width:-moz-fit-content;width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;font-size:12px;line-height:10px}:host .badge-container-primary .badge-icon,:host .badge-container-secondary .badge-icon{margin-right:8px}:host .badge-container-secondary .point{border-radius:50%;width:8px;height:8px;margin-right:8px}:host .badge-container-secondary .label{color:#000!important}:host .badge-container-notification{width:20px;height:20px;border-radius:50%;font-size:12px;line-height:10px}:host .badge-container-notification .number-notification{color:#fff}.flex-center,:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host .badge-container-secondary [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host .badge-container-secondary [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#E0E0E0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host .badge-container-secondary [color=teal].point,:host [color=teal].badge-container-notification{background:#46A997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host .badge-container-secondary [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host .badge-container-secondary [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host .badge-container-secondary [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#B5DDD5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host .badge-container-secondary [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#E9F0F1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host .badge-container-secondary [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#A9C2C9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host .badge-container-secondary [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888888}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color"] }] }); }
|
|
5121
|
+
}
|
|
5122
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
5123
|
+
type: Component,
|
|
5124
|
+
args: [{ selector: 'ui-badge', template: "<div [class]=\"'badge-container-' + variant\" [attr.color]=\"color\">\n <ng-container [ngSwitch]=\"variant\">\n <ui-icon *ngSwitchCase=\"badgeVariant.PRIMARY\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"color\"></div>\n <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n </ng-container>\n <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label }}</div>\n</div>\n", styles: [":host{display:block;width:-moz-fit-content;width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;font-size:12px;line-height:10px}:host .badge-container-primary .badge-icon,:host .badge-container-secondary .badge-icon{margin-right:8px}:host .badge-container-secondary .point{border-radius:50%;width:8px;height:8px;margin-right:8px}:host .badge-container-secondary .label{color:#000!important}:host .badge-container-notification{width:20px;height:20px;border-radius:50%;font-size:12px;line-height:10px}:host .badge-container-notification .number-notification{color:#fff}.flex-center,:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host .badge-container-secondary [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host .badge-container-secondary [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#E0E0E0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host .badge-container-secondary [color=teal].point,:host [color=teal].badge-container-notification{background:#46A997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host .badge-container-secondary [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host .badge-container-secondary [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host .badge-container-secondary [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#B5DDD5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host .badge-container-secondary [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#E9F0F1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host .badge-container-secondary [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#A9C2C9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host .badge-container-secondary [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888888}\n"] }]
|
|
5125
|
+
}], propDecorators: { label: [{
|
|
5126
|
+
type: Input
|
|
5127
|
+
}], icon: [{
|
|
5128
|
+
type: Input
|
|
5129
|
+
}], color: [{
|
|
5130
|
+
type: Input
|
|
5131
|
+
}], variant: [{
|
|
5132
|
+
type: Input
|
|
5133
|
+
}], notificationsAmount: [{
|
|
5134
|
+
type: Input
|
|
5135
|
+
}] } });
|
|
5136
|
+
|
|
5137
|
+
class BadgeComponentModule {
|
|
5138
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5139
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponentModule, declarations: [BadgeComponent], imports: [CommonModule, IconComponentModule], exports: [BadgeComponent] }); }
|
|
5140
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponentModule, imports: [CommonModule, IconComponentModule] }); }
|
|
5141
|
+
}
|
|
5142
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponentModule, decorators: [{
|
|
5143
|
+
type: NgModule,
|
|
5144
|
+
args: [{
|
|
5145
|
+
declarations: [BadgeComponent],
|
|
5146
|
+
imports: [CommonModule, IconComponentModule],
|
|
5147
|
+
exports: [BadgeComponent],
|
|
5148
|
+
}]
|
|
5149
|
+
}] });
|
|
5150
|
+
|
|
4760
5151
|
/* eslint-disable */
|
|
4761
5152
|
/* Components */
|
|
4762
5153
|
// Alert Banner
|
|
@@ -4765,5 +5156,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
4765
5156
|
* Generated bundle index. Do not edit.
|
|
4766
5157
|
*/
|
|
4767
5158
|
|
|
4768
|
-
export { AlertBannerComponent, AlertBannerComponentModule, Autocomplete, AutocompleteComponent, AutocompleteComponentModule, AvatarComponent, AvatarComponentModule, BannerActionComponent, BannerActionComponentModule, ButtonComponent, ButtonComponentModule, CardComponent, CardComponentModule, CheckboxComponent, CheckboxComponentModule, ColumnAlignmentEnum, ColumnTypeEnum, ConfirmDialogComponent, ConfirmDialogComponentModule, CreateAccountComponent, CreateAccountComponentModule, CreatePasswordComponent, CreatePasswordComponentModule, DataPropertyGetterPipe, DatepickerComponent, DatepickerComponentModule, DialogComponent, DialogComponentModule, DialogService, DropdownComponent, DropdownComponentModule, ElevationShadowComponent, ElevationShadowComponentModule, ElevationType, FieldComponent, FieldComponentModule, FileUploadComponent, FileUploadComponentModule, ForgotPasswordComponent, ForgotPasswordComponentModule, IconComponent, IconComponentModule, IconLabelComponent, IconLabelComponentModule, LabelComponent, LabelComponentModule, LabelSizeEnum, LoginComponent, LoginComponentModule, LogoComponent, LogoComponentModule, LogoPathEnum, LogoTypeEnum, NavbarComponent, NavbarComponentModule, NavigationComponent, NavigationComponentModule, Padding, PaginatorComponent, PaginatorComponentModule, ProgressBarComponent, ProgressBarComponentModule, RadioButtonComponent, RadioButtonComponentModule, RatingComponent, RatingComponentModule, SnackbarComponent, SnackbarComponentModule, SnackbarService, SpinnerComponent, SpinnerComponentModule, TableComponent, TableComponentModule, TagComponent, TagComponentModule, Timeout, ToggleComponent, ToggleComponentModule, TooltipComponent, TooltipComponentModule, TooltipPositionType, preloadLang$
|
|
5159
|
+
export { AlertBannerComponent, AlertBannerComponentModule, Autocomplete, AutocompleteComponent, AutocompleteComponentModule, AvatarComponent, AvatarComponentModule, BadgeColorEnum, BadgeComponent, BadgeComponentModule, BadgeVariantEnum, BannerActionComponent, BannerActionComponentModule, ButtonComponent, ButtonComponentModule, CardComponent, CardComponentModule, CheckboxComponent, CheckboxComponentModule, ColumnAlignmentEnum, ColumnTypeEnum, ConfirmDialogComponent, ConfirmDialogComponentModule, CreateAccountComponent, CreateAccountComponentModule, CreatePasswordComponent, CreatePasswordComponentModule, DataPropertyGetterPipe, DatepickerComponent, DatepickerComponentModule, DialogComponent, DialogComponentModule, DialogService, DropdownComponent, DropdownComponentModule, ElevationShadowComponent, ElevationShadowComponentModule, ElevationType, FieldComponent, FieldComponentModule, FileUploadComponent, FileUploadComponentModule, ForgotPasswordComponent, ForgotPasswordComponentModule, IconComponent, IconComponentModule, IconLabelComponent, IconLabelComponentModule, LabelComponent, LabelComponentModule, LabelSizeEnum, LoginComponent, LoginComponentModule, LogoComponent, LogoComponentModule, LogoPathEnum, LogoTypeEnum, NavbarComponent, NavbarComponentModule, NavigationComponent, NavigationComponentModule, Padding, PaginatorComponent, PaginatorComponentModule, ProgressBarComponent, ProgressBarComponentModule, RadioButtonComponent, RadioButtonComponentModule, RatingComponent, RatingComponentModule, SnackbarComponent, SnackbarComponentModule, SnackbarService, SpinnerComponent, SpinnerComponentModule, StepperComponent, StepperComponentModule, TableComponent, TableComponentModule, TagComponent, TagComponentModule, Timeout, ToggleComponent, ToggleComponentModule, TooltipComponent, TooltipComponentModule, TooltipPositionType, preloadLang$2 as preloadLang };
|
|
4769
5160
|
//# sourceMappingURL=testgorilla-tgo-ui.mjs.map
|