@testgorilla/tgo-ui 2.10.999 → 2.11.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 +13 -1
- package/components/checkbox/checkbox.component.d.ts +4 -3
- package/components/dropdown/dropdown.component.d.ts +13 -1
- package/components/dropdown/dropdown.model.d.ts +1 -1
- package/components/segmented-button/segmented-button.component.d.ts +10 -1
- package/components/segmented-button/segmented-button.model.d.ts +2 -1
- package/esm2022/components/autocomplete/autocomplete.component.mjs +50 -19
- package/esm2022/components/checkbox/checkbox.component.mjs +13 -14
- package/esm2022/components/dropdown/dropdown.component.mjs +19 -3
- package/esm2022/components/dropdown/dropdown.model.mjs +1 -1
- package/esm2022/components/radio-button/radio-button.component.mjs +3 -3
- package/esm2022/components/segmented-button/segmented-button.component.mjs +17 -4
- package/esm2022/components/segmented-button/segmented-button.model.mjs +1 -1
- package/esm2022/utils/autocomplete-utils.mjs +3 -3
- package/fesm2022/testgorilla-tgo-ui.mjs +93 -34
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/projects/tgo-canopy-ui/theme/_input.scss +12 -0
|
@@ -55,6 +55,7 @@ import * as i7$2 from '@angular/material/select';
|
|
|
55
55
|
import { MatSelectModule, MatSelect } from '@angular/material/select';
|
|
56
56
|
import * as i7$3 from '@angular/material/datepicker';
|
|
57
57
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
58
|
+
import * as i11 from '@angular/cdk/scrolling';
|
|
58
59
|
import { CdkVirtualScrollViewport, CdkVirtualForOf, CdkFixedSizeVirtualScroll } from '@angular/cdk/scrolling';
|
|
59
60
|
import * as i5$1 from '@angular/material/autocomplete';
|
|
60
61
|
import { MatAutocompleteModule, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from '@angular/material/autocomplete';
|
|
@@ -3136,6 +3137,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
3136
3137
|
}]
|
|
3137
3138
|
}] });
|
|
3138
3139
|
|
|
3140
|
+
// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
|
|
3139
3141
|
class CheckboxComponent {
|
|
3140
3142
|
constructor(defaultAppTheme, cdr, ngControl) {
|
|
3141
3143
|
this.defaultAppTheme = defaultAppTheme;
|
|
@@ -3166,14 +3168,6 @@ class CheckboxComponent {
|
|
|
3166
3168
|
* @memberof CheckboxComponent
|
|
3167
3169
|
*/
|
|
3168
3170
|
this.indeterminate = false;
|
|
3169
|
-
/**
|
|
3170
|
-
* Determines whether the checkbox color.
|
|
3171
|
-
* Default: Test Gorilla primary color.
|
|
3172
|
-
*
|
|
3173
|
-
* @type {string}
|
|
3174
|
-
* @memberof CheckboxComponent
|
|
3175
|
-
*/
|
|
3176
|
-
this.companyColor = '#46A997';
|
|
3177
3171
|
/**
|
|
3178
3172
|
* Name value will be applied to the input element if present.
|
|
3179
3173
|
*
|
|
@@ -3261,10 +3255,15 @@ class CheckboxComponent {
|
|
|
3261
3255
|
this.ngControl.valueAccessor = this;
|
|
3262
3256
|
}
|
|
3263
3257
|
}
|
|
3258
|
+
// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
|
|
3259
|
+
ngOnChanges() {
|
|
3260
|
+
this.companyColor = this.companyColor ? this.companyColor : this.applicationTheme === 'classic' ? '#46A997' : '#D410AA';
|
|
3261
|
+
}
|
|
3264
3262
|
/**
|
|
3265
3263
|
* Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors
|
|
3266
3264
|
* to display validation errors that might happen (e.g. required)
|
|
3267
3265
|
*/
|
|
3266
|
+
// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
|
|
3268
3267
|
ngDoCheck() {
|
|
3269
3268
|
if (this.ngControl?.touched || this.ngControl?.errors) {
|
|
3270
3269
|
this.cdr.markForCheck();
|
|
@@ -3273,12 +3272,13 @@ class CheckboxComponent {
|
|
|
3273
3272
|
emitChange(event) {
|
|
3274
3273
|
this.changed.emit(event.checked);
|
|
3275
3274
|
}
|
|
3275
|
+
// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
|
|
3276
3276
|
ngOnInit() {
|
|
3277
3277
|
this.classMultiple = this.setClass();
|
|
3278
3278
|
}
|
|
3279
|
-
toggleChecked(
|
|
3280
|
-
this.
|
|
3281
|
-
this.
|
|
3279
|
+
toggleChecked() {
|
|
3280
|
+
this.checked = !this.checked;
|
|
3281
|
+
this.changed.emit(this.checked);
|
|
3282
3282
|
this.onTouch();
|
|
3283
3283
|
this.onChange(this.checked);
|
|
3284
3284
|
if (!this.disabled) {
|
|
@@ -3306,11 +3306,11 @@ class CheckboxComponent {
|
|
|
3306
3306
|
this.cdr.markForCheck();
|
|
3307
3307
|
}
|
|
3308
3308
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i1$3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3309
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxComponent, selector: "ui-checkbox", inputs: { disabled: "disabled", checked: "checked", indeterminate: "indeterminate", companyColor: "companyColor", name: "name", label: "label", multiple: "multiple", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", hasError: "hasError", language: "language", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors" }, outputs: { changed: "changed" }, host: { properties: { "style.--color": "this.companyColor" } }, ngImport: i0, template: "<div [ngClass]=\"classMultiple\" [attr.theme]=\"applicationTheme\" [attr.hasError]=\"hasError\">\n <mat-checkbox\n #checkbox\n (mouseleave)=\"checkbox.disableRipple = true\"\n (mouseenter)=\"checkbox.disableRipple = false\"\n [indeterminate]=\"indeterminate\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [ngClass]=\"{ 'disable-ripple': checkbox.disableRipple }\"\n (change)=\"toggleChecked($event)\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n class=\"checkbox\"\n >\n {{ label }}\n <ng-content select=\"[checkbox-label]\"></ng-content>\n </mat-checkbox>\n\n <mat-hint class=\"error\" *ngIf=\"ngControl?.errors | hasValidationError\">\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n </mat-hint>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff!important}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__ripple{background-color:var(--color)}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mdc-checkbox__native-control:indeterminate~.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888;--color: $tgo-dark!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox{opacity:.5}[theme=dark],[theme=light],.dark,.light{--color: #D410AA!important;--mdc-checkbox-unselected-icon-color: #242424 !important}[theme=dark] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,[theme=light] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.dark .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.light .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple{display:none}[theme=dark] ::ng-deep .mdc-checkbox__background,[theme=light] ::ng-deep .mdc-checkbox__background,.dark ::ng-deep .mdc-checkbox__background,.light ::ng-deep .mdc-checkbox__background{border-radius:4px;transform:scale(.9);background:#fff!important;border-width:1px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox{opacity:1!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#e9e9e9!important;border-color:#919191!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#919191;width:8px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg{color:#919191!important}[theme=dark] ::ng-deep .mdc-checkbox__checkmark,[theme=light] ::ng-deep .mdc-checkbox__checkmark,.dark ::ng-deep .mdc-checkbox__checkmark,.light ::ng-deep .mdc-checkbox__checkmark{width:12px;height:12px;left:calc(50% - 6px);top:calc(50% - 6px)}[theme=dark] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark{width:12px}::ng-deep .mdc-checkbox__ripple{background:var(--color)!important}::ng-deep .mat-mdc-checkbox .mdc-form-field .mdc-label{padding-left:0}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-checked ::ng-deep .mdc-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-checked .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background{border:1px solid #ffffff!important;border-color:#fff!important}.multiple-checked ::ng-deep label{color:#fff}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#fff;border-radius:10px;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background,.multiple-checked[theme=light][hasError=false] .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background{border:unset!important}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-checked[theme=classic][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800}.multiple-unchecked{border:1px solid #E0E0E0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-unchecked ::ng-deep .mdc-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #E0E0E0}.multiple-unchecked ::ng-deep .mdc-checkbox__background{border:1px solid #000000}.multiple-unchecked ::ng-deep .mdc-checkbox__native-control:not([disabled]):focus~.mdc-checkbox__ripple{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff;border-radius:10px}.multiple-unchecked[theme=dark][hasError=false] ::ng-deep .mdc-checkbox__background,.multiple-unchecked[theme=light][hasError=false] ::ng-deep .mdc-checkbox__background{border:1px solid #242424!important}.multiple-unchecked[theme=dark][hasError=false]:hover,.multiple-unchecked[theme=light][hasError=false]:hover{outline:1px solid #242424;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}*[hasError=true]{--mdc-checkbox-unselected-icon-color: #E02800 !important;--mdc-checkbox-unselected-hover-icon-color: #E02800 !important;--mdc-checkbox-unselected-focus-icon-color: #E02800 !important}*[hasError=true] ::ng-deep .mdc-checkbox__background{border-width:2px!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "label", "applicationTheme", "language"] }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3309
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckboxComponent, selector: "ui-checkbox", inputs: { disabled: "disabled", checked: "checked", indeterminate: "indeterminate", companyColor: "companyColor", name: "name", label: "label", multiple: "multiple", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", hasError: "hasError", language: "language", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors" }, outputs: { changed: "changed" }, host: { properties: { "style.--color": "this.companyColor" } }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"multiple ? 'checkbox-container' : ''\" [ngClass]=\"classMultiple\" [attr.theme]=\"applicationTheme\" [attr.hasError]=\"hasError\">\n <mat-checkbox\n #checkbox\n (mouseleave)=\"checkbox.disableRipple = true\"\n (mouseenter)=\"checkbox.disableRipple = false\"\n [indeterminate]=\"indeterminate\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [ngClass]=\"{ 'disable-ripple': checkbox.disableRipple }\"\n (click)=\"toggleChecked()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n class=\"checkbox\"\n >\n <span class=\"label\">{{ label }}</span>\n <ng-content select=\"[checkbox-label]\"></ng-content>\n </mat-checkbox>\n\n <mat-hint class=\"error\" *ngIf=\"ngControl?.errors | hasValidationError\">\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n </mat-hint>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff!important}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__ripple{background-color:var(--color)}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mdc-checkbox__native-control:indeterminate~.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888;--color: $tgo-dark!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox{opacity:.5}[theme=dark],[theme=light],.dark,.light{--mdc-checkbox-unselected-icon-color: #242424 !important}[theme=dark] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,[theme=light] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.dark .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.light .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple{display:none}[theme=dark] ::ng-deep .mdc-checkbox__background,[theme=light] ::ng-deep .mdc-checkbox__background,.dark ::ng-deep .mdc-checkbox__background,.light ::ng-deep .mdc-checkbox__background{border-radius:4px;transform:scale(.9);background:#fff!important;border-width:1px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox{opacity:1!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#e9e9e9!important;border-color:#919191!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#919191;width:8px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg{color:#919191!important}[theme=dark] ::ng-deep .mdc-checkbox__checkmark,[theme=light] ::ng-deep .mdc-checkbox__checkmark,.dark ::ng-deep .mdc-checkbox__checkmark,.light ::ng-deep .mdc-checkbox__checkmark{width:12px;height:12px;left:calc(50% - 6px);top:calc(50% - 6px)}[theme=dark] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark{width:12px}::ng-deep .mdc-checkbox__ripple{background:var(--color)!important}::ng-deep .mat-mdc-checkbox .mdc-form-field .mdc-label{padding-left:0}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-checked ::ng-deep .mdc-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-checked .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background{border:1px solid #ffffff!important;border-color:#fff!important}.multiple-checked ::ng-deep label{color:#fff}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#fff;border-radius:10px;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background,.multiple-checked[theme=light][hasError=false] .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background{border:unset!important}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-checked[theme=classic][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800}.multiple-unchecked{border:1px solid #E0E0E0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-unchecked ::ng-deep .mdc-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #E0E0E0}.multiple-unchecked ::ng-deep .mdc-checkbox__background{border:1px solid #000000}.multiple-unchecked ::ng-deep .mdc-checkbox__native-control:not([disabled]):focus~.mdc-checkbox__ripple{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff;border-radius:10px}.multiple-unchecked[theme=dark][hasError=false] ::ng-deep .mdc-checkbox__background,.multiple-unchecked[theme=light][hasError=false] ::ng-deep .mdc-checkbox__background{border:1px solid #242424!important}.multiple-unchecked[theme=dark][hasError=false]:hover,.multiple-unchecked[theme=light][hasError=false]:hover{outline:1px solid #242424;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}*[hasError=true]{--mdc-checkbox-unselected-icon-color: #E02800 !important;--mdc-checkbox-unselected-hover-icon-color: #E02800 !important;--mdc-checkbox-unselected-focus-icon-color: #E02800 !important}*[hasError=true] ::ng-deep .mdc-checkbox__background{border-width:2px!important}.checkbox-container{cursor:pointer}.checkbox-container .label{-webkit-user-select:none;user-select:none}.checkbox .label{cursor:pointer;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "label", "applicationTheme", "language"] }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3310
3310
|
}
|
|
3311
3311
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
3312
3312
|
type: Component,
|
|
3313
|
-
args: [{ selector: 'ui-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"classMultiple\" [attr.theme]=\"applicationTheme\" [attr.hasError]=\"hasError\">\n <mat-checkbox\n #checkbox\n (mouseleave)=\"checkbox.disableRipple = true\"\n (mouseenter)=\"checkbox.disableRipple = false\"\n [indeterminate]=\"indeterminate\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [ngClass]=\"{ 'disable-ripple': checkbox.disableRipple }\"\n (change)=\"toggleChecked($event)\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n class=\"checkbox\"\n >\n {{ label }}\n <ng-content select=\"[checkbox-label]\"></ng-content>\n </mat-checkbox>\n\n <mat-hint class=\"error\" *ngIf=\"ngControl?.errors | hasValidationError\">\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n </mat-hint>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff!important}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__ripple{background-color:var(--color)}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mdc-checkbox__native-control:indeterminate~.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888;--color: $tgo-dark!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox{opacity:.5}[theme=dark],[theme=light],.dark,.light{--color: #D410AA!important;--mdc-checkbox-unselected-icon-color: #242424 !important}[theme=dark] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,[theme=light] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.dark .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.light .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple{display:none}[theme=dark] ::ng-deep .mdc-checkbox__background,[theme=light] ::ng-deep .mdc-checkbox__background,.dark ::ng-deep .mdc-checkbox__background,.light ::ng-deep .mdc-checkbox__background{border-radius:4px;transform:scale(.9);background:#fff!important;border-width:1px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox{opacity:1!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#e9e9e9!important;border-color:#919191!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#919191;width:8px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg{color:#919191!important}[theme=dark] ::ng-deep .mdc-checkbox__checkmark,[theme=light] ::ng-deep .mdc-checkbox__checkmark,.dark ::ng-deep .mdc-checkbox__checkmark,.light ::ng-deep .mdc-checkbox__checkmark{width:12px;height:12px;left:calc(50% - 6px);top:calc(50% - 6px)}[theme=dark] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark{width:12px}::ng-deep .mdc-checkbox__ripple{background:var(--color)!important}::ng-deep .mat-mdc-checkbox .mdc-form-field .mdc-label{padding-left:0}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-checked ::ng-deep .mdc-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-checked .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background{border:1px solid #ffffff!important;border-color:#fff!important}.multiple-checked ::ng-deep label{color:#fff}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#fff;border-radius:10px;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background,.multiple-checked[theme=light][hasError=false] .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background{border:unset!important}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-checked[theme=classic][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800}.multiple-unchecked{border:1px solid #E0E0E0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-unchecked ::ng-deep .mdc-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #E0E0E0}.multiple-unchecked ::ng-deep .mdc-checkbox__background{border:1px solid #000000}.multiple-unchecked ::ng-deep .mdc-checkbox__native-control:not([disabled]):focus~.mdc-checkbox__ripple{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff;border-radius:10px}.multiple-unchecked[theme=dark][hasError=false] ::ng-deep .mdc-checkbox__background,.multiple-unchecked[theme=light][hasError=false] ::ng-deep .mdc-checkbox__background{border:1px solid #242424!important}.multiple-unchecked[theme=dark][hasError=false]:hover,.multiple-unchecked[theme=light][hasError=false]:hover{outline:1px solid #242424;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}*[hasError=true]{--mdc-checkbox-unselected-icon-color: #E02800 !important;--mdc-checkbox-unselected-hover-icon-color: #E02800 !important;--mdc-checkbox-unselected-focus-icon-color: #E02800 !important}*[hasError=true] ::ng-deep .mdc-checkbox__background{border-width:2px!important}\n"] }]
|
|
3313
|
+
args: [{ selector: 'ui-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"multiple ? 'checkbox-container' : ''\" [ngClass]=\"classMultiple\" [attr.theme]=\"applicationTheme\" [attr.hasError]=\"hasError\">\n <mat-checkbox\n #checkbox\n (mouseleave)=\"checkbox.disableRipple = true\"\n (mouseenter)=\"checkbox.disableRipple = false\"\n [indeterminate]=\"indeterminate\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [ngClass]=\"{ 'disable-ripple': checkbox.disableRipple }\"\n (click)=\"toggleChecked()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n class=\"checkbox\"\n >\n <span class=\"label\">{{ label }}</span>\n <ng-content select=\"[checkbox-label]\"></ng-content>\n </mat-checkbox>\n\n <mat-hint class=\"error\" *ngIf=\"ngControl?.errors | hasValidationError\">\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n </mat-hint>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked .mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff!important}.mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__ripple{background-color:var(--color)}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mdc-checkbox__native-control:indeterminate~.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-checked.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#888;--color: $tgo-dark!important}::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox{opacity:.5}[theme=dark],[theme=light],.dark,.light{--mdc-checkbox-unselected-icon-color: #242424 !important}[theme=dark] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,[theme=light] .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.dark .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple,.light .mat-mdc-checkbox.disable-ripple ::ng-deep .mdc-checkbox__ripple{display:none}[theme=dark] ::ng-deep .mdc-checkbox__background,[theme=light] ::ng-deep .mdc-checkbox__background,.dark ::ng-deep .mdc-checkbox__background,.light ::ng-deep .mdc-checkbox__background{border-radius:4px;transform:scale(.9);background:#fff!important;border-width:1px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox{opacity:1!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background{background-color:#e9e9e9!important;border-color:#919191!important}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#919191;width:8px}[theme=dark] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,[theme=light] ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.dark ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg,.light ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background svg{color:#919191!important}[theme=dark] ::ng-deep .mdc-checkbox__checkmark,[theme=light] ::ng-deep .mdc-checkbox__checkmark,.dark ::ng-deep .mdc-checkbox__checkmark,.light ::ng-deep .mdc-checkbox__checkmark{width:12px;height:12px;left:calc(50% - 6px);top:calc(50% - 6px)}[theme=dark] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,[theme=light] ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.dark ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark,.light ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark{width:12px}::ng-deep .mdc-checkbox__ripple{background:var(--color)!important}::ng-deep .mat-mdc-checkbox .mdc-form-field .mdc-label{padding-left:0}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-checked ::ng-deep .mdc-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-checked .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background{border:1px solid #ffffff!important;border-color:#fff!important}.multiple-checked ::ng-deep label{color:#fff}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#fff;border-radius:10px;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background,.multiple-checked[theme=light][hasError=false] .mat-mdc-checkbox.checkbox.mat-accent ::ng-deep .mdc-checkbox__background{border:unset!important}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-checked[theme=classic][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800}.multiple-unchecked{border:1px solid #E0E0E0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-checkbox{width:100%;height:100%}.multiple-unchecked ::ng-deep .mdc-form-field{padding:8px;width:100%;height:100%;align-items:center}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #E0E0E0}.multiple-unchecked ::ng-deep .mdc-checkbox__background{border:1px solid #000000}.multiple-unchecked ::ng-deep .mdc-checkbox__native-control:not([disabled]):focus~.mdc-checkbox__ripple{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff;border-radius:10px}.multiple-unchecked[theme=dark][hasError=false] ::ng-deep .mdc-checkbox__background,.multiple-unchecked[theme=light][hasError=false] ::ng-deep .mdc-checkbox__background{border:1px solid #242424!important}.multiple-unchecked[theme=dark][hasError=false]:hover,.multiple-unchecked[theme=light][hasError=false]:hover{outline:1px solid #242424;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}*[hasError=true]{--mdc-checkbox-unselected-icon-color: #E02800 !important;--mdc-checkbox-unselected-hover-icon-color: #E02800 !important;--mdc-checkbox-unselected-focus-icon-color: #E02800 !important}*[hasError=true] ::ng-deep .mdc-checkbox__background{border-width:2px!important}.checkbox-container{cursor:pointer}.checkbox-container .label{-webkit-user-select:none;user-select:none}.checkbox .label{cursor:pointer;-webkit-user-select:none;user-select:none}\n"] }]
|
|
3314
3314
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
3315
3315
|
type: Optional
|
|
3316
3316
|
}, {
|
|
@@ -5769,11 +5769,11 @@ class RadioButtonComponent {
|
|
|
5769
5769
|
return '';
|
|
5770
5770
|
}
|
|
5771
5771
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5772
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadioButtonComponent, selector: "ui-radio-button", inputs: { disabled: "disabled", selected: "selected", allowUnselect: "allowUnselect", companyColor: "companyColor", name: "name", label: "label", multiple: "multiple", value: "value", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", hasError: "hasError" }, outputs: { changeRadio: "changeRadio" }, host: { properties: { "style.--color": "this.companyColor" } }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"classMultiple\" [attr.theme]=\"applicationTheme\" [attr.hasError]=\"hasError\">\n <mat-radio-button\n #radio\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n class=\"radio-button\"\n (click)=\"clickRadio(radio, $event)\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n >\n {{ label }}
|
|
5772
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RadioButtonComponent, selector: "ui-radio-button", inputs: { disabled: "disabled", selected: "selected", allowUnselect: "allowUnselect", companyColor: "companyColor", name: "name", label: "label", multiple: "multiple", value: "value", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", hasError: "hasError" }, outputs: { changeRadio: "changeRadio" }, host: { properties: { "style.--color": "this.companyColor" } }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"multiple ? 'radio-container' : ''\" [ngClass]=\"classMultiple\" [attr.theme]=\"applicationTheme\" [attr.hasError]=\"hasError\">\n <mat-radio-button\n #radio\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n class=\"radio-button\"\n (click)=\"clickRadio(radio, $event)\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n >\n <span class=\"label\"\n (click)=\"clickRadio(radio, $event)\"\n >{{ label }}</span>\n <ng-content select=\"[radio-label]\"></ng-content>\n </mat-radio-button>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-radio-button.mat-accent{--mat-radio-checked-ripple-color: var(--color)!important;--mdc-radio-selected-focus-icon-color: var(--color)!important;--mdc-radio-selected-pressed-icon-color: var(--color)!important}::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:var(--color)!important}::ng-deep .mat-mdc-radio-checked .mdc-radio__inner-circle{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-radio-button .mat-ripple-element{background-color:var(--color)!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled.mat-radio-checked .mdc-radio__outer-circle,.mat-radio-button.mat-radio-disabled .mdc-radio__outer-circle{border-color:#888!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled .mdc-radio__inner-circle{background-color:#888!important}[theme=dark],[theme=light]{--color: #D410AA!important}[theme=dark] .mat-mdc-radio-button.mat-accent,[theme=light] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #242424 !important}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled{--mdc-radio-disabled-unselected-icon-color: #919191;--mdc-radio-disabled-selected-icon-opacity: 1;--mdc-radio-disabled-unselected-icon-opacity: 1;--color: #919191}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background{background:#e9e9e9;border-radius:100%}[theme=dark] ::ng-deep .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio__background{background:#fff!important;border-radius:100%;scale:.8}[theme=dark] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle,[theme=light] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:1px}[theme=dark] ::ng-deep .mat-ripple,[theme=light] ::ng-deep .mat-ripple{display:none}[haserror=true] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:2px}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-checked ::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border:1px solid #ffffff;border-radius:64px;background:#fff}.multiple-checked ::ng-deep label{color:#fff;height:100%;width:100%}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#fff;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-checked[theme=classic][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800}.multiple-unchecked{border:1px solid #E0E0E0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #E0E0E0}.multiple-unchecked ::ng-deep label{height:100%;width:100%}.multiple-unchecked ::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff}.multiple-unchecked[theme=dark][hasError=false]:hover,.multiple-unchecked[theme=light][hasError=false]:hover{outline:1px solid #242424;background:#fff;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}.radio-container{cursor:pointer}.radio-container .label,.radio-button .label{cursor:pointer;-webkit-user-select:none;user-select:none}:host *[hasError=true] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #E02800 !important;--mdc-radio-unselected-hover-icon-color: #E02800 !important;--mdc-radio-unselected-focus-icon-color: #E02800 !important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5773
5773
|
}
|
|
5774
5774
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
5775
5775
|
type: Component,
|
|
5776
|
-
args: [{ selector: 'ui-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"classMultiple\" [attr.theme]=\"applicationTheme\" [attr.hasError]=\"hasError\">\n <mat-radio-button\n #radio\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n class=\"radio-button\"\n (click)=\"clickRadio(radio, $event)\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n >\n {{ label }}
|
|
5776
|
+
args: [{ selector: 'ui-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"multiple ? 'radio-container' : ''\" [ngClass]=\"classMultiple\" [attr.theme]=\"applicationTheme\" [attr.hasError]=\"hasError\">\n <mat-radio-button\n #radio\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n class=\"radio-button\"\n (click)=\"clickRadio(radio, $event)\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n >\n <span class=\"label\"\n (click)=\"clickRadio(radio, $event)\"\n >{{ label }}</span>\n <ng-content select=\"[radio-label]\"></ng-content>\n </mat-radio-button>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-radio-button.mat-accent{--mat-radio-checked-ripple-color: var(--color)!important;--mdc-radio-selected-focus-icon-color: var(--color)!important;--mdc-radio-selected-pressed-icon-color: var(--color)!important}::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:var(--color)!important}::ng-deep .mat-mdc-radio-checked .mdc-radio__inner-circle{background-color:var(--color)!important;border-color:var(--color)!important}::ng-deep .mat-mdc-radio-button .mat-ripple-element{background-color:var(--color)!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled.mat-radio-checked .mdc-radio__outer-circle,.mat-radio-button.mat-radio-disabled .mdc-radio__outer-circle{border-color:#888!important}::ng-deep .mat-mdc-radio-button.mat-radio-disabled .mdc-radio__inner-circle{background-color:#888!important}[theme=dark],[theme=light]{--color: #D410AA!important}[theme=dark] .mat-mdc-radio-button.mat-accent,[theme=light] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #242424 !important}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled{--mdc-radio-disabled-unselected-icon-color: #919191;--mdc-radio-disabled-selected-icon-opacity: 1;--mdc-radio-disabled-unselected-icon-opacity: 1;--color: #919191}[theme=dark] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio.mdc-radio--disabled .mdc-radio__background{background:#e9e9e9;border-radius:100%}[theme=dark] ::ng-deep .mdc-radio__background,[theme=light] ::ng-deep .mdc-radio__background{background:#fff!important;border-radius:100%;scale:.8}[theme=dark] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle,[theme=light] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:1px}[theme=dark] ::ng-deep .mat-ripple,[theme=light] ::ng-deep .mat-ripple{display:none}[haserror=true] ::ng-deep .mdc-radio__background .mdc-radio__outer-circle{border-width:2px}.multiple-checked{border:1px solid var(--color);display:flex;flex-direction:row;align-items:center;gap:16px;background:var(--color);border-radius:8px}.multiple-checked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-checked ::ng-deep .mat-mdc-radio-checked .mdc-radio__outer-circle{border:1px solid #ffffff;border-radius:64px;background:#fff}.multiple-checked ::ng-deep label{color:#fff;height:100%;width:100%}.multiple-checked[theme=dark][hasError=false],.multiple-checked[theme=light][hasError=false]{background:#fff;border-color:#242424;outline:1px solid #242424}.multiple-checked[theme=dark][hasError=false] ::ng-deep label,.multiple-checked[theme=light][hasError=false] ::ng-deep label{color:#242424}.multiple-checked[theme=dark][hasError=true],.multiple-checked[theme=light][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff;border-radius:10px}.multiple-checked[theme=dark][hasError=true] ::ng-deep label,.multiple-checked[theme=light][hasError=true] ::ng-deep label{color:#242424}.multiple-checked[theme=classic][hasError=true]{border:1px solid #E02800;outline:1px solid #E02800}.multiple-unchecked{border:1px solid #E0E0E0;display:flex;flex-direction:row;align-items:center;gap:16px;background:#fff;border-radius:8px}.multiple-unchecked ::ng-deep .mat-mdc-radio-button{width:100%;height:100%;padding:8px}.multiple-unchecked:hover{background:#f6f6f6;border:1px solid #E0E0E0}.multiple-unchecked ::ng-deep label{height:100%;width:100%}.multiple-unchecked ::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{opacity:0!important}.multiple-unchecked[theme=dark][hasError=false],.multiple-unchecked[theme=light][hasError=false]{border:1px solid #919191;background:#fff}.multiple-unchecked[theme=dark][hasError=false]:hover,.multiple-unchecked[theme=light][hasError=false]:hover{outline:1px solid #242424;background:#fff;border-color:#242424!important}.multiple-unchecked[hasError=true]{border:1px solid #E02800;outline:1px solid #E02800;background:#fff}.multiple-unchecked[hasError=true]:not([theme=classic]){border-radius:10px}.radio-container{cursor:pointer}.radio-container .label,.radio-button .label{cursor:pointer;-webkit-user-select:none;user-select:none}:host *[hasError=true] .mat-mdc-radio-button.mat-accent{--mdc-radio-unselected-icon-color: #E02800 !important;--mdc-radio-unselected-hover-icon-color: #E02800 !important;--mdc-radio-unselected-focus-icon-color: #E02800 !important}\n"] }]
|
|
5777
5777
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
5778
5778
|
type: Optional
|
|
5779
5779
|
}, {
|
|
@@ -6733,6 +6733,18 @@ class DropdownComponent {
|
|
|
6733
6733
|
* @memberof DropdownComponent
|
|
6734
6734
|
*/
|
|
6735
6735
|
this.hideLabelInErrors = false;
|
|
6736
|
+
/**
|
|
6737
|
+
* @property textField
|
|
6738
|
+
* @description The field to be used as the display text in the dropdown.
|
|
6739
|
+
* @memberof DropdownComponent
|
|
6740
|
+
*/
|
|
6741
|
+
this.textField = '';
|
|
6742
|
+
/**
|
|
6743
|
+
* @property valueField
|
|
6744
|
+
* @description The field to be used as the value in the dropdown.
|
|
6745
|
+
* @memberof DropdownComponent
|
|
6746
|
+
*/
|
|
6747
|
+
this.valueField = '';
|
|
6736
6748
|
/**
|
|
6737
6749
|
* @ignore
|
|
6738
6750
|
*/
|
|
@@ -6800,11 +6812,11 @@ class DropdownComponent {
|
|
|
6800
6812
|
this.cdr.markForCheck();
|
|
6801
6813
|
}
|
|
6802
6814
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i1$3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6803
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownComponent, selector: "ui-dropdown", inputs: { label: "label", name: "name", placeholder: "placeholder", id: "id", value: "value", errors: "errors", disabled: "disabled", valueList: "valueList", allowClear: "allowClear", allowMultipleSelection: "allowMultipleSelection", required: "required", language: "language", showBottomContent: "showBottomContent", applicationTheme: "applicationTheme", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors" }, host: { properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, ngImport: i0, template: "<ng-container>\n <mat-form-field\n appearance=\"outline\"\n [attr.theme]=\"applicationTheme\"\n [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'without-label': !label }\"\n >\n <mat-label>{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <mat-select\n #matSelect\n [id]=\"id!\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [panelClass]=\"'ui-dropdown-list' + ' ' + applicationTheme\"\n [disabled]=\"disabled\"\n [multiple]=\"!!allowMultipleSelection\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n (selectionChange)=\"onChangeOption($event)\"\n [attr.name]=\"name\">\n <div class=\"mat-option-section\" *ngFor=\"let section of valueList\">\n <span *ngIf=\"section.sectionTitle\" class=\"section-title\">{{ section.sectionTitle }}</span>\n <mat-option *ngIf=\"section.value\" #matOption [value]=\"section.value\">\n {{ section.displayValue ?? section.value }}\n </mat-option>\n </div>\n </mat-select>\n <ng-container matSuffix>\n <ui-button *ngIf=\"allowClear && !matSelect.empty\" variant=\"secondary\" [justIcon]=\"true\" class=\"clear\" [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\" [label]=\"('COMMON.CLEAR') | uiTranslate : language\" (click)=\"clearValue($event)\"></ui-button>\n <ui-icon *ngIf=\"!matSelect.panelOpen\" size=\"24\" [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"></ui-icon>\n <ui-icon *ngIf=\"matSelect.panelOpen\" size=\"24\" [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"></ui-icon>\n </ng-container>\n <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n <ng-container *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"></ui-icon>{{ error }}\n </div>\n </ng-container>\n\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n </mat-hint>\n </mat-form-field>\n</ng-container>\n\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}ui-dropdown{display:flex}ui-dropdown .mat-mdc-form-field{margin-top:0;width:100%}ui-dropdown .mat-mdc-form-field.without-label .mdc-notched-outline__notch{padding:0}ui-dropdown .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px;flex:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix{margin-right:16px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-floating-label{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused ui-icon:not(.clear) svg{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon{padding:0;height:auto;background:transparent}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:hover,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon.focus.cdk-focused.cdk-mouse-focused{background-color:transparent!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear{position:absolute;right:24px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear mat-icon.black svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused ui-icon svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0;margin-top:9px;font-size:12px;line-height:16px;position:relative}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-spacer{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error .errors{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-value{line-height:18px;width:90%!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-button svg,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}ui-dropdown[theme=light] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper,ui-dropdown[theme=dark] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{margin-top:4px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list{margin-top:4px;box-shadow:0 8px 24px 4px #00000014}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option{display:flex;height:48px;color:#000}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center;justify-content:space-between}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-option-section .section-title{font-size:12px;text-transform:uppercase;display:flex;height:48px;align-items:center;font-weight:700;padding:0 16px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error .errors{display:flex}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i7$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "label", "applicationTheme", "language"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6815
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownComponent, selector: "ui-dropdown", inputs: { label: "label", name: "name", placeholder: "placeholder", id: "id", value: "value", errors: "errors", disabled: "disabled", valueList: "valueList", allowClear: "allowClear", allowMultipleSelection: "allowMultipleSelection", required: "required", language: "language", showBottomContent: "showBottomContent", applicationTheme: "applicationTheme", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", textField: "textField", valueField: "valueField" }, host: { properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, ngImport: i0, template: "<ng-container>\n <mat-form-field\n appearance=\"outline\"\n [attr.theme]=\"applicationTheme\"\n [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'without-label': !label }\"\n >\n <mat-label>{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <mat-select\n #matSelect\n [id]=\"id!\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [panelClass]=\"'ui-dropdown-list' + ' ' + applicationTheme\"\n [disabled]=\"disabled\"\n [multiple]=\"!!allowMultipleSelection\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n (selectionChange)=\"onChangeOption($event)\"\n [attr.name]=\"name\">\n <div class=\"mat-option-section\" *ngFor=\"let section of valueList\">\n <span *ngIf=\"section.sectionTitle\" class=\"section-title\">{{ section.sectionTitle }}</span>\n <mat-option *ngIf=\"section\" #matOption [value]=\"valueField ? section[valueField] : section.value\">\n {{ textField ? section[textField] : section.displayValue ?? section.value }}\n </mat-option>\n </div>\n </mat-select>\n <ng-container matSuffix>\n <ui-button *ngIf=\"allowClear && !matSelect.empty\" variant=\"secondary\" [justIcon]=\"true\" class=\"clear\" [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\" [label]=\"('COMMON.CLEAR') | uiTranslate : language\" (click)=\"clearValue($event)\"></ui-button>\n <ui-icon *ngIf=\"!matSelect.panelOpen\" size=\"24\" [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"></ui-icon>\n <ui-icon *ngIf=\"matSelect.panelOpen\" size=\"24\" [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"></ui-icon>\n </ng-container>\n <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n <ng-container *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"></ui-icon>{{ error }}\n </div>\n </ng-container>\n\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n </mat-hint>\n </mat-form-field>\n</ng-container>\n\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}ui-dropdown{display:flex}ui-dropdown .mat-mdc-form-field{margin-top:0;width:100%}ui-dropdown .mat-mdc-form-field.without-label .mdc-notched-outline__notch{padding:0}ui-dropdown .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px;flex:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix{margin-right:16px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-floating-label{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused ui-icon:not(.clear) svg{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon{padding:0;height:auto;background:transparent}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:hover,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon.focus.cdk-focused.cdk-mouse-focused{background-color:transparent!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear{position:absolute;right:24px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear mat-icon.black svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused ui-icon svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0;margin-top:9px;font-size:12px;line-height:16px;position:relative}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-spacer{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error .errors{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-value{line-height:18px;width:90%!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-button svg,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}ui-dropdown[theme=light] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper,ui-dropdown[theme=dark] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{margin-top:4px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list{margin-top:4px;box-shadow:0 8px 24px 4px #00000014}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option{display:flex;height:48px;color:#000}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center;justify-content:space-between}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-option-section .section-title{font-size:12px;text-transform:uppercase;display:flex;height:48px;align-items:center;font-weight:700;padding:0 16px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error .errors{display:flex}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i7$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "label", "applicationTheme", "language"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6804
6816
|
}
|
|
6805
6817
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
6806
6818
|
type: Component,
|
|
6807
|
-
args: [{ selector: 'ui-dropdown', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <mat-form-field\n appearance=\"outline\"\n [attr.theme]=\"applicationTheme\"\n [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'without-label': !label }\"\n >\n <mat-label>{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <mat-select\n #matSelect\n [id]=\"id!\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [panelClass]=\"'ui-dropdown-list' + ' ' + applicationTheme\"\n [disabled]=\"disabled\"\n [multiple]=\"!!allowMultipleSelection\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n (selectionChange)=\"onChangeOption($event)\"\n [attr.name]=\"name\">\n <div class=\"mat-option-section\" *ngFor=\"let section of valueList\">\n <span *ngIf=\"section.sectionTitle\" class=\"section-title\">{{ section.sectionTitle }}</span>\n <mat-option *ngIf=\"section.value\" #matOption [value]=\"section.value\">\n {{ section.displayValue ?? section.value }}\n </mat-option>\n </div>\n </mat-select>\n <ng-container matSuffix>\n <ui-button *ngIf=\"allowClear && !matSelect.empty\" variant=\"secondary\" [justIcon]=\"true\" class=\"clear\" [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\" [label]=\"('COMMON.CLEAR') | uiTranslate : language\" (click)=\"clearValue($event)\"></ui-button>\n <ui-icon *ngIf=\"!matSelect.panelOpen\" size=\"24\" [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"></ui-icon>\n <ui-icon *ngIf=\"matSelect.panelOpen\" size=\"24\" [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"></ui-icon>\n </ng-container>\n <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n <ng-container *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"></ui-icon>{{ error }}\n </div>\n </ng-container>\n\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n </mat-hint>\n </mat-form-field>\n</ng-container>\n\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}ui-dropdown{display:flex}ui-dropdown .mat-mdc-form-field{margin-top:0;width:100%}ui-dropdown .mat-mdc-form-field.without-label .mdc-notched-outline__notch{padding:0}ui-dropdown .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px;flex:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix{margin-right:16px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-floating-label{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused ui-icon:not(.clear) svg{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon{padding:0;height:auto;background:transparent}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:hover,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon.focus.cdk-focused.cdk-mouse-focused{background-color:transparent!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear{position:absolute;right:24px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear mat-icon.black svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused ui-icon svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0;margin-top:9px;font-size:12px;line-height:16px;position:relative}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-spacer{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error .errors{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-value{line-height:18px;width:90%!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-button svg,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}ui-dropdown[theme=light] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper,ui-dropdown[theme=dark] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{margin-top:4px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list{margin-top:4px;box-shadow:0 8px 24px 4px #00000014}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option{display:flex;height:48px;color:#000}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center;justify-content:space-between}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-option-section .section-title{font-size:12px;text-transform:uppercase;display:flex;height:48px;align-items:center;font-weight:700;padding:0 16px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error .errors{display:flex}\n"] }]
|
|
6819
|
+
args: [{ selector: 'ui-dropdown', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <mat-form-field\n appearance=\"outline\"\n [attr.theme]=\"applicationTheme\"\n [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'without-label': !label }\"\n >\n <mat-label>{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <mat-select\n #matSelect\n [id]=\"id!\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [panelClass]=\"'ui-dropdown-list' + ' ' + applicationTheme\"\n [disabled]=\"disabled\"\n [multiple]=\"!!allowMultipleSelection\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n (selectionChange)=\"onChangeOption($event)\"\n [attr.name]=\"name\">\n <div class=\"mat-option-section\" *ngFor=\"let section of valueList\">\n <span *ngIf=\"section.sectionTitle\" class=\"section-title\">{{ section.sectionTitle }}</span>\n <mat-option *ngIf=\"section\" #matOption [value]=\"valueField ? section[valueField] : section.value\">\n {{ textField ? section[textField] : section.displayValue ?? section.value }}\n </mat-option>\n </div>\n </mat-select>\n <ng-container matSuffix>\n <ui-button *ngIf=\"allowClear && !matSelect.empty\" variant=\"secondary\" [justIcon]=\"true\" class=\"clear\" [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\" [label]=\"('COMMON.CLEAR') | uiTranslate : language\" (click)=\"clearValue($event)\"></ui-button>\n <ui-icon *ngIf=\"!matSelect.panelOpen\" size=\"24\" [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"></ui-icon>\n <ui-icon *ngIf=\"matSelect.panelOpen\" size=\"24\" [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"></ui-icon>\n </ng-container>\n <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n <ng-container *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"></ui-icon>{{ error }}\n </div>\n </ng-container>\n\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n </mat-hint>\n </mat-form-field>\n</ng-container>\n\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}ui-dropdown{display:flex}ui-dropdown .mat-mdc-form-field{margin-top:0;width:100%}ui-dropdown .mat-mdc-form-field.without-label .mdc-notched-outline__notch{padding:0}ui-dropdown .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px;flex:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix{margin-right:16px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-floating-label{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused ui-icon:not(.clear) svg{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon{padding:0;height:auto;background:transparent}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:hover,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon.focus.cdk-focused.cdk-mouse-focused{background-color:transparent!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear{position:absolute;right:24px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear mat-icon.black svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused ui-icon svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0;margin-top:9px;font-size:12px;line-height:16px;position:relative}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-spacer{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error .errors{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-value{line-height:18px;width:90%!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-button svg,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}ui-dropdown[theme=light] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper,ui-dropdown[theme=dark] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{margin-top:4px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list{margin-top:4px;box-shadow:0 8px 24px 4px #00000014}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option{display:flex;height:48px;color:#000}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center;justify-content:space-between}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-option-section .section-title{font-size:12px;text-transform:uppercase;display:flex;height:48px;align-items:center;font-weight:700;padding:0 16px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error .errors{display:flex}\n"] }]
|
|
6808
6820
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
6809
6821
|
type: Optional
|
|
6810
6822
|
}, {
|
|
@@ -6851,6 +6863,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
6851
6863
|
type: Input
|
|
6852
6864
|
}], hideLabelInErrors: [{
|
|
6853
6865
|
type: Input
|
|
6866
|
+
}], textField: [{
|
|
6867
|
+
type: Input
|
|
6868
|
+
}], valueField: [{
|
|
6869
|
+
type: Input
|
|
6854
6870
|
}] } });
|
|
6855
6871
|
|
|
6856
6872
|
class DropdownComponentModule {
|
|
@@ -8282,11 +8298,11 @@ class AutocompleteUtils {
|
|
|
8282
8298
|
}
|
|
8283
8299
|
static excludeSuggestions(items, excludeItems, valueField) {
|
|
8284
8300
|
if (AutocompleteUtils.isPrimitive(items)) {
|
|
8285
|
-
return items
|
|
8301
|
+
return items?.filter(item => !excludeItems.find(excludeItem => excludeItem === item));
|
|
8286
8302
|
}
|
|
8287
8303
|
else {
|
|
8288
8304
|
return valueField
|
|
8289
|
-
? items
|
|
8305
|
+
? items?.filter(item => !excludeItems.find(excludeItem => excludeItem[valueField] === item[valueField]))
|
|
8290
8306
|
: [];
|
|
8291
8307
|
}
|
|
8292
8308
|
}
|
|
@@ -8563,6 +8579,13 @@ class AutocompleteComponent {
|
|
|
8563
8579
|
* @memberof AutocompleteComponent
|
|
8564
8580
|
*/
|
|
8565
8581
|
this.hideLabelInErrors = false;
|
|
8582
|
+
/**
|
|
8583
|
+
* Sets dropdown list to virtual scroll mode
|
|
8584
|
+
*
|
|
8585
|
+
* @type {boolean}
|
|
8586
|
+
* @memberof AutocompleteComponent
|
|
8587
|
+
*/
|
|
8588
|
+
this.virtualScroll = false;
|
|
8566
8589
|
this.selectionChange = new EventEmitter();
|
|
8567
8590
|
this.searchTextChange = new EventEmitter();
|
|
8568
8591
|
this.safeErrors = [];
|
|
@@ -8572,15 +8595,19 @@ class AutocompleteComponent {
|
|
|
8572
8595
|
this.isOverLapping = false;
|
|
8573
8596
|
this.isOverlapChecking = true;
|
|
8574
8597
|
this.overlapIndex = 0;
|
|
8598
|
+
this.inputOpacity = 1;
|
|
8575
8599
|
this.inputValueSearch$ = new ReplaySubject(1);
|
|
8576
8600
|
this.userInput$ = new ReplaySubject(1);
|
|
8577
8601
|
this.filteredItemsList$ = this.inputValueSearch$.pipe(startWith(''), map(inputValue => inputValue.length ? AutocompleteUtils.filterItems(this.itemsList, inputValue, this.textField) : null));
|
|
8578
8602
|
this.filteredSuggestionList$ = this.inputValueSearch$.pipe(map(inputValue => inputValue.length ? AutocompleteUtils.filterItems(this.suggestionsList, inputValue, this.textField) : null));
|
|
8579
8603
|
this.searchResult$ = this.inputValueSearch$.pipe(map(inputValue => !!inputValue.trim()));
|
|
8580
8604
|
this.translationContext = 'AUTOCOMPLETE.';
|
|
8605
|
+
this.AutocompleteUtils = AutocompleteUtils;
|
|
8581
8606
|
this.isPlatform = isPlatformBrowser(this.platformId);
|
|
8582
|
-
this.onChange = (_) => {
|
|
8583
|
-
|
|
8607
|
+
this.onChange = (_) => {
|
|
8608
|
+
};
|
|
8609
|
+
this.onTouch = () => {
|
|
8610
|
+
};
|
|
8584
8611
|
this.trackByFn = (index, value) => value.changingThisBreaksApplicationSecurity;
|
|
8585
8612
|
if (this.ngControl != null) {
|
|
8586
8613
|
this.ngControl.valueAccessor = this;
|
|
@@ -8679,6 +8706,7 @@ class AutocompleteComponent {
|
|
|
8679
8706
|
}
|
|
8680
8707
|
else {
|
|
8681
8708
|
this.inputValueSearch$.next('');
|
|
8709
|
+
this.userInput$.next('');
|
|
8682
8710
|
}
|
|
8683
8711
|
}
|
|
8684
8712
|
onClear() {
|
|
@@ -8687,16 +8715,26 @@ class AutocompleteComponent {
|
|
|
8687
8715
|
this.isOverLapping = false;
|
|
8688
8716
|
this.overlapIndex = 0;
|
|
8689
8717
|
this.onUpdate();
|
|
8718
|
+
this.matAutocomplete?.options.forEach(option => option.deselect());
|
|
8690
8719
|
}
|
|
8691
8720
|
refillInput() {
|
|
8692
|
-
|
|
8693
|
-
this.
|
|
8721
|
+
setTimeout(() => {
|
|
8722
|
+
if (this.value && this.type === this.autocompleteType.SINGLE && !this.inputValue) {
|
|
8723
|
+
this.inputValue = AutocompleteUtils.transformDisplayValue(this.value, this.textField);
|
|
8724
|
+
}
|
|
8725
|
+
else if (!this.inputValue && this.value?.length) {
|
|
8726
|
+
this.inputValue = ' ';
|
|
8727
|
+
}
|
|
8728
|
+
else if (this.inputValue && this.type === Autocomplete.SINGLE && this.value && Object.keys(this.value).length) {
|
|
8729
|
+
this.inputValue = AutocompleteUtils.transformDisplayValue(this.value, this.textField);
|
|
8730
|
+
}
|
|
8731
|
+
else if (this.inputValue) {
|
|
8732
|
+
this.inputValue = ' ';
|
|
8733
|
+
}
|
|
8694
8734
|
this.inputValueSearch$.next('');
|
|
8695
|
-
|
|
8696
|
-
|
|
8697
|
-
|
|
8698
|
-
}
|
|
8699
|
-
this.isInputFocus = false;
|
|
8735
|
+
this.userInput$.next('');
|
|
8736
|
+
this.isInputFocus = false;
|
|
8737
|
+
}, 0);
|
|
8700
8738
|
}
|
|
8701
8739
|
gotoUp() {
|
|
8702
8740
|
if (this.cdkVirtualScrollViewPort) {
|
|
@@ -8708,7 +8746,7 @@ class AutocompleteComponent {
|
|
|
8708
8746
|
this.isInputFocus = true;
|
|
8709
8747
|
const inputValue = AutocompleteUtils.isArray(this.inputValue) ? this.inputValue[0] : this.inputValue;
|
|
8710
8748
|
if (AutocompleteUtils.isPrimitive(inputValue)) {
|
|
8711
|
-
if (inputValue?.match(/^\s+/gm)) {
|
|
8749
|
+
if (typeof inputValue !== 'number' && inputValue?.match(/^\s+/gm)) {
|
|
8712
8750
|
this.inputValue = inputValue.trimStart();
|
|
8713
8751
|
}
|
|
8714
8752
|
}
|
|
@@ -8721,6 +8759,7 @@ class AutocompleteComponent {
|
|
|
8721
8759
|
checkOverlap(delay = Timeout.VIEW_INITIALIZED_AFTER_ACTION, init = false) {
|
|
8722
8760
|
this.isOverLapping = false;
|
|
8723
8761
|
this.isOverlapChecking = true;
|
|
8762
|
+
this.inputOpacity = 0;
|
|
8724
8763
|
setTimeout(() => {
|
|
8725
8764
|
const inputWidth = this.inputWidth;
|
|
8726
8765
|
const tags = this.tagContainer?.nativeElement.querySelectorAll('.value-tag');
|
|
@@ -8751,6 +8790,7 @@ class AutocompleteComponent {
|
|
|
8751
8790
|
}
|
|
8752
8791
|
this.cdr.markForCheck();
|
|
8753
8792
|
}
|
|
8793
|
+
this.inputOpacity = 1;
|
|
8754
8794
|
}, delay);
|
|
8755
8795
|
}
|
|
8756
8796
|
onUpdate() {
|
|
@@ -8821,11 +8861,11 @@ class AutocompleteComponent {
|
|
|
8821
8861
|
this.renderer2.setProperty(document.body, 'style', `--ui-autocomplete-option-color: ${this.companyColor};`);
|
|
8822
8862
|
}
|
|
8823
8863
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutocompleteComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i1$1.DomSanitizer }, { token: i1$3.NgControl, optional: true, self: true }, { token: i0.Renderer2 }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8824
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AutocompleteComponent, selector: "ui-autocomplete", inputs: { itemsList: "itemsList", suggestionsList: "suggestionsList", disabled: "disabled", allowAdd: "allowAdd", textField: "textField", valueField: "valueField", label: "label", itemValue: "itemValue", type: "type", minCharactersSearch: "minCharactersSearch", variant: "variant", language: "language", showBottomContent: "showBottomContent", valuePrimitive: "valuePrimitive", fullWidth: "fullWidth", applicationTheme: "applicationTheme", required: "required", errors: "errors", companyColor: "companyColor", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors" }, outputs: { selectionChange: "selectionChange", searchTextChange: "searchTextChange" }, host: { properties: { "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "formFieldElement", first: true, predicate: ["formField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "cdkVirtualScrollViewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n <mat-form-field\n [color]=\"(safeErrors.length || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [appearance]=\"'outline'\"\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent }\"\n >\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <div #formField class=\"input-container\">\n <div\n class=\"selected-items\"\n #tagContainer\n *ngIf=\"\n (type === autocompleteType.LARGE && this.value) ||\n (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n \"\n >\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n *ngFor=\"let valueItem of value; let i = index\"\n [label]=\"valueItem | transformItem: textField\"\n [allowClose]=\"true\"\n [applicationTheme]=\"applicationTheme\"\n [style.display]=\"isOverLapping && i >= overlapIndex ? 'none' : 'block'\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n <ng-container *ngIf=\"isOverLapping\">\n <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n {{ (translationContext + 'SELECTED_AMOUNT') | uiTranslate : language : { numberSelected: (value | slice: overlapIndex).length } }}\n </div>\n <ng-template #overlapTag>\n <ui-tag [applicationTheme]=\"applicationTheme\" [readOnly]=\"true\" [label]=\"'+' + (value | slice: overlapIndex).length\"></ui-tag>\n </ng-template>\n </ng-container>\n </div>\n <input\n #trigger=\"matAutocompleteTrigger\"\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 *ngIf=\"value && value.length\"\n class=\"remove-selected lalalal\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n *ngIf=\"isDropdown\"\n [size]=\"'24'\"\n [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n (opened)=\"gotoUp()\"\n >\n <ng-container *ngIf=\"!(searchResult$ | async)\">\n <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\" *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 [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\" *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 [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\" *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 [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-template #dropdownList>\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n\n </ng-template>\n\n </ng-container>\n\n <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\" *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 [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container *ngIf=\"!filteredSuggestionList.length; else showItemListWithGroup\">\n <mat-option\n [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 [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </ng-container>\n\n <ng-template #showItemListWithGroup>\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS') | uiTranslate : language | uppercase\" *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 [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-template>\n\n <ng-container *ngIf=\"!filteredItemsList.length && !filteredSuggestionList.length && inputValue\">\n <ng-container *ngIf=\"allowAdd && !isDropdown; else notFound\">\n <mat-option [value]=\"inputValue\">\n <span>{{ ('COMMON.ADD') | uiTranslate : language }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n </ng-container>\n\n <ng-template #notFound>\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate : language }}</span>\n </mat-option>\n </ng-template>\n </ng-container>\n </ng-container>\n </ng-container>\n </mat-autocomplete>\n <mat-hint class=\"error\" *ngIf=\"safeErrors.length || (ngControl?.errors | hasValidationError)\">\n <ng-container *ngIf=\"safeErrors.length\">\n <div class=\"errors\" *ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n\n </mat-hint>\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:block}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled{opacity:.5}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .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}.arrow-state{margin-left:8px;height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{max-width:330px;min-width:330px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .autocomplete-wrapper.full-width .mat-mdc-form-field{width:100%;max-width:100%}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i2$2.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$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", "applicationTheme", "ariaLabel", "ariaRequired"], outputs: ["close", "press"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "label", "applicationTheme", "language"] }, { kind: "directive", type: SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }, { kind: "pipe", type: TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8864
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: AutocompleteComponent, selector: "ui-autocomplete", inputs: { itemsList: "itemsList", suggestionsList: "suggestionsList", disabled: "disabled", allowAdd: "allowAdd", textField: "textField", valueField: "valueField", label: "label", itemValue: "itemValue", type: "type", minCharactersSearch: "minCharactersSearch", variant: "variant", language: "language", showBottomContent: "showBottomContent", valuePrimitive: "valuePrimitive", fullWidth: "fullWidth", applicationTheme: "applicationTheme", required: "required", errors: "errors", companyColor: "companyColor", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute] }, outputs: { selectionChange: "selectionChange", searchTextChange: "searchTextChange" }, host: { properties: { "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "formFieldElement", first: true, predicate: ["formField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "cdkVirtualScrollViewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["autocomplete"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n <mat-form-field\n [color]=\"(safeErrors.length || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [appearance]=\"'outline'\"\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent }\"\n >\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <div #formField class=\"input-container\">\n <div\n class=\"selected-items\"\n #tagContainer\n *ngIf=\"\n (type === autocompleteType.LARGE && this.value) ||\n (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n \"\n >\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n *ngFor=\"let valueItem of value; let i = index\"\n [label]=\"valueItem | transformItem: textField\"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n [allowClose]=\"true\"\n [applicationTheme]=\"applicationTheme\"\n [style.display]=\"isOverLapping && i >= overlapIndex ? 'none' : 'block'\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n <ng-container *ngIf=\"isOverLapping\">\n <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n {{ (translationContext + 'SELECTED_AMOUNT') | uiTranslate : language : { numberSelected: (value | slice: overlapIndex).length } }}\n </div>\n <ng-template #overlapTag>\n <ui-tag [applicationTheme]=\"applicationTheme\" [readOnly]=\"true\" [label]=\"'+' + (value | slice: overlapIndex).length\"></ui-tag>\n </ng-template>\n </ng-container>\n </div>\n <input\n #trigger=\"matAutocompleteTrigger\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n matInput\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n />\n </div>\n\n <ui-icon\n *ngIf=\"value && ((AutocompleteUtils.isPrimitive(value) && value.length) || (!AutocompleteUtils.isPrimitive(value) && (AutocompleteUtils.isArray(value) && value.length || !AutocompleteUtils.isArray(value) && !value.length)))\"\n class=\"remove-selected\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n *ngIf=\"isDropdown\"\n [size]=\"'24'\"\n [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n (opened)=\"gotoUp()\"\n >\n <ng-container *ngIf=\"!(searchResult$ | async)\">\n <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\" *ngIf=\"suggestionsList.length\">\n <mat-option\n (mousedown)=$event.preventDefault()\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 [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\" *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n <mat-option\n (mousedown)=$event.preventDefault()\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 [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\" *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [class]=\"'selected-option'\"\n [value]=\"value\"\n >\n <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-template #dropdownList>\n <cdk-virtual-scroll-viewport *ngIf=\"virtualScroll; else defaultViewPort\" [itemSize]=\"48\" [style.height]=\"'200px'\" class=\"virtual-scroll\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *cdkVirtualFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </cdk-virtual-scroll-viewport>\n\n <ng-template #defaultViewPort>\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </ng-template>\n\n </ng-template>\n\n </ng-container>\n\n <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\" *ngIf=\"filteredSuggestionList.length\">\n <mat-option\n (mousedown)=$event.preventDefault()\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 [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container *ngIf=\"!filteredSuggestionList.length; else showItemListWithGroup\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </ng-container>\n\n <ng-template #showItemListWithGroup>\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS') | uiTranslate : language | uppercase\" *ngIf=\"filteredItemsList.length\">\n <mat-option\n (mousedown)=$event.preventDefault()\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 [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-template>\n\n <ng-container *ngIf=\"!filteredItemsList.length && !filteredSuggestionList.length && inputValue\">\n <ng-container *ngIf=\"allowAdd && !isDropdown; else notFound\">\n <mat-option (mousedown)=$event.preventDefault() [value]=\"inputValue\">\n <span>{{ ('COMMON.ADD') | uiTranslate : language }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n </ng-container>\n\n <ng-template #notFound>\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate : language }}</span>\n </mat-option>\n </ng-template>\n </ng-container>\n </ng-container>\n </ng-container>\n </mat-autocomplete>\n <mat-hint class=\"error\" *ngIf=\"safeErrors.length || (ngControl?.errors | hasValidationError)\">\n <ng-container *ngIf=\"safeErrors.length\">\n <div class=\"errors\" *ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n\n </mat-hint>\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:block}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled{opacity:.5}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .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}.arrow-state{margin-left:8px;height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{max-width:330px;min-width:330px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .autocomplete-wrapper.full-width .mat-mdc-form-field{width:100%;max-width:100%}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i2$2.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$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", "applicationTheme", "ariaLabel", "ariaRequired"], outputs: ["close", "press"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "label", "applicationTheme", "language"] }, { kind: "directive", type: i11.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i11.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i11.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }, { kind: "pipe", type: TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8825
8865
|
}
|
|
8826
8866
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
8827
8867
|
type: Component,
|
|
8828
|
-
args: [{ selector: 'ui-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n <mat-form-field\n [color]=\"(safeErrors.length || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [appearance]=\"'outline'\"\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent }\"\n >\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <div #formField class=\"input-container\">\n <div\n class=\"selected-items\"\n #tagContainer\n *ngIf=\"\n (type === autocompleteType.LARGE && this.value) ||\n (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n \"\n >\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n *ngFor=\"let valueItem of value; let i = index\"\n [label]=\"valueItem | transformItem: textField\"\n [allowClose]=\"true\"\n [applicationTheme]=\"applicationTheme\"\n [style.display]=\"isOverLapping && i >= overlapIndex ? 'none' : 'block'\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n <ng-container *ngIf=\"isOverLapping\">\n <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n {{ (translationContext + 'SELECTED_AMOUNT') | uiTranslate : language : { numberSelected: (value | slice: overlapIndex).length } }}\n </div>\n <ng-template #overlapTag>\n <ui-tag [applicationTheme]=\"applicationTheme\" [readOnly]=\"true\" [label]=\"'+' + (value | slice: overlapIndex).length\"></ui-tag>\n </ng-template>\n </ng-container>\n </div>\n <input\n #trigger=\"matAutocompleteTrigger\"\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 *ngIf=\"value && value.length\"\n class=\"remove-selected lalalal\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n *ngIf=\"isDropdown\"\n [size]=\"'24'\"\n [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n (opened)=\"gotoUp()\"\n >\n <ng-container *ngIf=\"!(searchResult$ | async)\">\n <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\" *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 [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\" *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 [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\" *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 [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-template #dropdownList>\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n\n </ng-template>\n\n </ng-container>\n\n <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\" *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 [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container *ngIf=\"!filteredSuggestionList.length; else showItemListWithGroup\">\n <mat-option\n [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 [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </ng-container>\n\n <ng-template #showItemListWithGroup>\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS') | uiTranslate : language | uppercase\" *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 [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-template>\n\n <ng-container *ngIf=\"!filteredItemsList.length && !filteredSuggestionList.length && inputValue\">\n <ng-container *ngIf=\"allowAdd && !isDropdown; else notFound\">\n <mat-option [value]=\"inputValue\">\n <span>{{ ('COMMON.ADD') | uiTranslate : language }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n </ng-container>\n\n <ng-template #notFound>\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate : language }}</span>\n </mat-option>\n </ng-template>\n </ng-container>\n </ng-container>\n </ng-container>\n </mat-autocomplete>\n <mat-hint class=\"error\" *ngIf=\"safeErrors.length || (ngControl?.errors | hasValidationError)\">\n <ng-container *ngIf=\"safeErrors.length\">\n <div class=\"errors\" *ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n\n </mat-hint>\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:block}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled{opacity:.5}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .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}.arrow-state{margin-left:8px;height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{max-width:330px;min-width:330px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .autocomplete-wrapper.full-width .mat-mdc-form-field{width:100%;max-width:100%}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}\n"] }]
|
|
8868
|
+
args: [{ selector: 'ui-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n <mat-form-field\n [color]=\"(safeErrors.length || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [appearance]=\"'outline'\"\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent }\"\n >\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <div #formField class=\"input-container\">\n <div\n class=\"selected-items\"\n #tagContainer\n *ngIf=\"\n (type === autocompleteType.LARGE && this.value) ||\n (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n \"\n >\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n *ngFor=\"let valueItem of value; let i = index\"\n [label]=\"valueItem | transformItem: textField\"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n [allowClose]=\"true\"\n [applicationTheme]=\"applicationTheme\"\n [style.display]=\"isOverLapping && i >= overlapIndex ? 'none' : 'block'\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n <ng-container *ngIf=\"isOverLapping\">\n <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n {{ (translationContext + 'SELECTED_AMOUNT') | uiTranslate : language : { numberSelected: (value | slice: overlapIndex).length } }}\n </div>\n <ng-template #overlapTag>\n <ui-tag [applicationTheme]=\"applicationTheme\" [readOnly]=\"true\" [label]=\"'+' + (value | slice: overlapIndex).length\"></ui-tag>\n </ng-template>\n </ng-container>\n </div>\n <input\n #trigger=\"matAutocompleteTrigger\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n matInput\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n />\n </div>\n\n <ui-icon\n *ngIf=\"value && ((AutocompleteUtils.isPrimitive(value) && value.length) || (!AutocompleteUtils.isPrimitive(value) && (AutocompleteUtils.isArray(value) && value.length || !AutocompleteUtils.isArray(value) && !value.length)))\"\n class=\"remove-selected\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n *ngIf=\"isDropdown\"\n [size]=\"'24'\"\n [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n (opened)=\"gotoUp()\"\n >\n <ng-container *ngIf=\"!(searchResult$ | async)\">\n <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\" *ngIf=\"suggestionsList.length\">\n <mat-option\n (mousedown)=$event.preventDefault()\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 [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\" *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n <mat-option\n (mousedown)=$event.preventDefault()\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 [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\" *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [class]=\"'selected-option'\"\n [value]=\"value\"\n >\n <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-template #dropdownList>\n <cdk-virtual-scroll-viewport *ngIf=\"virtualScroll; else defaultViewPort\" [itemSize]=\"48\" [style.height]=\"'200px'\" class=\"virtual-scroll\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *cdkVirtualFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </cdk-virtual-scroll-viewport>\n\n <ng-template #defaultViewPort>\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </ng-template>\n\n </ng-template>\n\n </ng-container>\n\n <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\" *ngIf=\"filteredSuggestionList.length\">\n <mat-option\n (mousedown)=$event.preventDefault()\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 [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container *ngIf=\"!filteredSuggestionList.length; else showItemListWithGroup\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </ng-container>\n\n <ng-template #showItemListWithGroup>\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS') | uiTranslate : language | uppercase\" *ngIf=\"filteredItemsList.length\">\n <mat-option\n (mousedown)=$event.preventDefault()\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 [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-template>\n\n <ng-container *ngIf=\"!filteredItemsList.length && !filteredSuggestionList.length && inputValue\">\n <ng-container *ngIf=\"allowAdd && !isDropdown; else notFound\">\n <mat-option (mousedown)=$event.preventDefault() [value]=\"inputValue\">\n <span>{{ ('COMMON.ADD') | uiTranslate : language }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n </ng-container>\n\n <ng-template #notFound>\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate : language }}</span>\n </mat-option>\n </ng-template>\n </ng-container>\n </ng-container>\n </ng-container>\n </mat-autocomplete>\n <mat-hint class=\"error\" *ngIf=\"safeErrors.length || (ngControl?.errors | hasValidationError)\">\n <ng-container *ngIf=\"safeErrors.length\">\n <div class=\"errors\" *ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\" [language]=\"language\"></ui-validation-error>\n\n </mat-hint>\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:block}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled{opacity:.5}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .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}.arrow-state{margin-left:8px;height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{max-width:330px;min-width:330px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .autocomplete-wrapper.full-width .mat-mdc-form-field{width:100%;max-width:100%}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}\n"] }]
|
|
8829
8869
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
8830
8870
|
type: Optional
|
|
8831
8871
|
}, {
|
|
@@ -8884,6 +8924,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
8884
8924
|
type: Input
|
|
8885
8925
|
}], hideLabelInErrors: [{
|
|
8886
8926
|
type: Input
|
|
8927
|
+
}], virtualScroll: [{
|
|
8928
|
+
type: Input,
|
|
8929
|
+
args: [{ transform: booleanAttribute }]
|
|
8887
8930
|
}], selectionChange: [{
|
|
8888
8931
|
type: Output
|
|
8889
8932
|
}], searchTextChange: [{
|
|
@@ -8900,6 +8943,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
8900
8943
|
}], cdkVirtualScrollViewPort: [{
|
|
8901
8944
|
type: ViewChild,
|
|
8902
8945
|
args: [CdkVirtualScrollViewport, { static: false }]
|
|
8946
|
+
}], matAutocomplete: [{
|
|
8947
|
+
type: ViewChild,
|
|
8948
|
+
args: ['autocomplete']
|
|
8903
8949
|
}] } });
|
|
8904
8950
|
|
|
8905
8951
|
class AutocompleteComponentModule {
|
|
@@ -10299,6 +10345,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
10299
10345
|
|
|
10300
10346
|
class SegmentedButtonComponent {
|
|
10301
10347
|
constructor() {
|
|
10348
|
+
/**
|
|
10349
|
+
* Whether the component is disabled.
|
|
10350
|
+
* Default: false.
|
|
10351
|
+
*
|
|
10352
|
+
* @type {boolean}
|
|
10353
|
+
* @memberof SegmentedButtonComponent
|
|
10354
|
+
*/
|
|
10355
|
+
this.disabled = false;
|
|
10302
10356
|
this.buttonSelected = new EventEmitter();
|
|
10303
10357
|
this.onChange = (v) => { };
|
|
10304
10358
|
this.onTouch = () => { };
|
|
@@ -10314,6 +10368,9 @@ class SegmentedButtonComponent {
|
|
|
10314
10368
|
writeValue(obj) {
|
|
10315
10369
|
this.value = obj;
|
|
10316
10370
|
}
|
|
10371
|
+
setDisabledState(isDisabled) {
|
|
10372
|
+
this.disabled = isDisabled;
|
|
10373
|
+
}
|
|
10317
10374
|
registerOnChange(fn) {
|
|
10318
10375
|
this.onChange = fn;
|
|
10319
10376
|
}
|
|
@@ -10321,13 +10378,13 @@ class SegmentedButtonComponent {
|
|
|
10321
10378
|
this.onTouch = fn;
|
|
10322
10379
|
}
|
|
10323
10380
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SegmentedButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10324
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SegmentedButtonComponent, selector: "ui-segmented-button", inputs: { buttonConfig: "buttonConfig" }, outputs: { buttonSelected: "buttonSelected" }, providers: [
|
|
10381
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SegmentedButtonComponent, selector: "ui-segmented-button", inputs: { buttonConfig: "buttonConfig", disabled: "disabled" }, outputs: { buttonSelected: "buttonSelected" }, providers: [
|
|
10325
10382
|
{
|
|
10326
10383
|
provide: NG_VALUE_ACCESSOR,
|
|
10327
10384
|
useExisting: forwardRef(() => SegmentedButtonComponent),
|
|
10328
10385
|
multi: true,
|
|
10329
10386
|
},
|
|
10330
|
-
], ngImport: i0, template: "<mat-button-toggle-group class=\"segmented-button-container\" [(value)]=\"value\">\n <mat-button-toggle\n
|
|
10387
|
+
], ngImport: i0, template: "<mat-button-toggle-group class=\"segmented-button-container\" [ngClass]=\"{ disabled }\" [(value)]=\"value\">\n <mat-button-toggle\n [disableRipple]=\"true\"\n *ngFor=\"let button of buttonConfig\"\n [value]=\"button.value\"\n [ngClass]=\"{ disabled: button.disabled }\"\n >\n <ng-container *ngIf=\"button.template; else label\" [ngTemplateOutlet]=\"button.template\"></ng-container>\n <ng-template #label>{{ button.label }}</ng-template>\n </mat-button-toggle>\n</mat-button-toggle-group>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}h1,h2,h3,.h1,.h2,.h3{font-weight:400;margin:0}h4,h5,h6,.h4,.h5,.h6{font-weight:700;margin:0}h1,.h1{font-size:40px;line-height:60px;font-weight:700}h2,.h2{font-size:24px;line-height:36px}h2.bold,.h2.bold{font-weight:700}h3,.h3{font-size:20px;line-height:28px}h3.bold,.h3.bold{font-weight:700}h4,.h4{font-size:16px;line-height:24px}h5,.h5{font-size:14px;line-height:20px}h6,.h6{font-size:12px;line-height:16px;text-transform:uppercase}body{font-size:14px;line-height:20px}strong,b{font-weight:700}.featured{font-size:16px;line-height:24px}p .semibold,.featured .semibold,.caption .semibold{font-weight:600;color:#46a997}small{font-size:8px;line-height:12px}caption,.caption{font-size:12px;line-height:16px;display:inline-block}*[theme=dark] h1,*[theme=dark] .h1,*[theme=light] h1,*[theme=light] .h1{color:#242424;font-size:32px;line-height:48px;font-weight:400}*[theme=dark] h1.black,*[theme=dark] .h1.black,*[theme=light] h1.black,*[theme=light] .h1.black{font-family:ModernGothic,sans-serif!important;font-weight:900}*[theme=dark] h2,*[theme=dark] .h2,*[theme=light] h2,*[theme=light] .h2{color:#242424;font-size:24px;line-height:30px;font-weight:900;font-family:ModernGothic,sans-serif!important}*[theme=dark] h3,*[theme=dark] .h3,*[theme=light] h3,*[theme=light] .h3{font-size:20px;line-height:26px;font-weight:400;color:#242424}*[theme=dark] h3.bold,*[theme=dark] .h3.bold,*[theme=light] h3.bold,*[theme=light] .h3.bold{font-family:ModernGothic,sans-serif!important;font-weight:700}*[theme=dark] h4,*[theme=dark] .h4,*[theme=light] h4,*[theme=light] .h4{font-size:16px;line-height:20px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] h5,*[theme=dark] .h5,*[theme=light] h5,*[theme=light] .h5{font-size:14px;line-height:18px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] .body-large,*[theme=light] .body-large{font-weight:700;font-size:14px;line-height:22px}*[theme=dark] .body-large-bold,*[theme=light] .body-large-bold{font-weight:700;font-size:16px;line-height:24px}*[theme=dark] .body-large-regular,*[theme=light] .body-large-regular{font-weight:400;font-size:16px;line-height:24px}*[theme=dark] .body-small-bold,*[theme=light] .body-small-bold{font-weight:700;font-size:12px;line-height:16px}*[theme=dark] .hyperlink-large,*[theme=light] .hyperlink-large{font-weight:500;font-size:16px;line-height:24px}*[theme=dark] .hyperlink,*[theme=light] .hyperlink{font-weight:500;font-size:14px;line-height:22px}*[theme=dark] .hyperlink-small,*[theme=light] .hyperlink-small{font-weight:500;font-size:12px;line-height:16px}*[theme=dark] .button-label,*[theme=light] .button-label{font-weight:500;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .label,*[theme=light] .label{font-weight:400;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .large-hover-state,*[theme=light] .large-hover-state{font-weight:700;text-decoration:underline;font-size:16px;line-height:24px}*[theme=dark] .hover-state,*[theme=light] .hover-state{font-weight:700;text-decoration:underline;font-size:14px;line-height:22px}*[theme=dark] h1,*[theme=dark] .h1,*[theme=dark] h2,*[theme=dark] .h2,*[theme=dark] h3,*[theme=dark] .h3,*[theme=dark] h4,*[theme=dark] .h4,*[theme=dark] h5,*[theme=dark] .h5{color:#fff}.segmented-button-container{border-color:#919191}.segmented-button-container:first-child{border-bottom-left-radius:10px;border-top-left-radius:10px}.segmented-button-container:last-child{border-bottom-right-radius:10px;border-top-right-radius:10px}.segmented-button-container .mat-button-toggle{min-width:80px;min-height:48px;border-color:#919191}.segmented-button-container .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#242424;font-weight:400;font-size:14px;font-feature-settings:\"capb\"}.segmented-button-container .mat-button-toggle:hover{background:#fff2fc}.segmented-button-container .mat-button-toggle.mat-button-toggle-checked{background:#ffe6fa}.segmented-button-container .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content{font-weight:700}.segmented-button-container .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay{display:none}.segmented-button-container .mat-button-toggle.disabled{pointer-events:none;background:#fff}.segmented-button-container .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}.segmented-button-container.disabled{pointer-events:none}.segmented-button-container.disabled .mat-button-toggle{background:#fff}.segmented-button-container.disabled .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$7.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$7.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10331
10388
|
}
|
|
10332
10389
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SegmentedButtonComponent, decorators: [{
|
|
10333
10390
|
type: Component,
|
|
@@ -10337,10 +10394,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
10337
10394
|
useExisting: forwardRef(() => SegmentedButtonComponent),
|
|
10338
10395
|
multi: true,
|
|
10339
10396
|
},
|
|
10340
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-button-toggle-group class=\"segmented-button-container\" [(value)]=\"value\">\n <mat-button-toggle\n
|
|
10397
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-button-toggle-group class=\"segmented-button-container\" [ngClass]=\"{ disabled }\" [(value)]=\"value\">\n <mat-button-toggle\n [disableRipple]=\"true\"\n *ngFor=\"let button of buttonConfig\"\n [value]=\"button.value\"\n [ngClass]=\"{ disabled: button.disabled }\"\n >\n <ng-container *ngIf=\"button.template; else label\" [ngTemplateOutlet]=\"button.template\"></ng-container>\n <ng-template #label>{{ button.label }}</ng-template>\n </mat-button-toggle>\n</mat-button-toggle-group>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}h1,h2,h3,.h1,.h2,.h3{font-weight:400;margin:0}h4,h5,h6,.h4,.h5,.h6{font-weight:700;margin:0}h1,.h1{font-size:40px;line-height:60px;font-weight:700}h2,.h2{font-size:24px;line-height:36px}h2.bold,.h2.bold{font-weight:700}h3,.h3{font-size:20px;line-height:28px}h3.bold,.h3.bold{font-weight:700}h4,.h4{font-size:16px;line-height:24px}h5,.h5{font-size:14px;line-height:20px}h6,.h6{font-size:12px;line-height:16px;text-transform:uppercase}body{font-size:14px;line-height:20px}strong,b{font-weight:700}.featured{font-size:16px;line-height:24px}p .semibold,.featured .semibold,.caption .semibold{font-weight:600;color:#46a997}small{font-size:8px;line-height:12px}caption,.caption{font-size:12px;line-height:16px;display:inline-block}*[theme=dark] h1,*[theme=dark] .h1,*[theme=light] h1,*[theme=light] .h1{color:#242424;font-size:32px;line-height:48px;font-weight:400}*[theme=dark] h1.black,*[theme=dark] .h1.black,*[theme=light] h1.black,*[theme=light] .h1.black{font-family:ModernGothic,sans-serif!important;font-weight:900}*[theme=dark] h2,*[theme=dark] .h2,*[theme=light] h2,*[theme=light] .h2{color:#242424;font-size:24px;line-height:30px;font-weight:900;font-family:ModernGothic,sans-serif!important}*[theme=dark] h3,*[theme=dark] .h3,*[theme=light] h3,*[theme=light] .h3{font-size:20px;line-height:26px;font-weight:400;color:#242424}*[theme=dark] h3.bold,*[theme=dark] .h3.bold,*[theme=light] h3.bold,*[theme=light] .h3.bold{font-family:ModernGothic,sans-serif!important;font-weight:700}*[theme=dark] h4,*[theme=dark] .h4,*[theme=light] h4,*[theme=light] .h4{font-size:16px;line-height:20px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] h5,*[theme=dark] .h5,*[theme=light] h5,*[theme=light] .h5{font-size:14px;line-height:18px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] .body-large,*[theme=light] .body-large{font-weight:700;font-size:14px;line-height:22px}*[theme=dark] .body-large-bold,*[theme=light] .body-large-bold{font-weight:700;font-size:16px;line-height:24px}*[theme=dark] .body-large-regular,*[theme=light] .body-large-regular{font-weight:400;font-size:16px;line-height:24px}*[theme=dark] .body-small-bold,*[theme=light] .body-small-bold{font-weight:700;font-size:12px;line-height:16px}*[theme=dark] .hyperlink-large,*[theme=light] .hyperlink-large{font-weight:500;font-size:16px;line-height:24px}*[theme=dark] .hyperlink,*[theme=light] .hyperlink{font-weight:500;font-size:14px;line-height:22px}*[theme=dark] .hyperlink-small,*[theme=light] .hyperlink-small{font-weight:500;font-size:12px;line-height:16px}*[theme=dark] .button-label,*[theme=light] .button-label{font-weight:500;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .label,*[theme=light] .label{font-weight:400;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .large-hover-state,*[theme=light] .large-hover-state{font-weight:700;text-decoration:underline;font-size:16px;line-height:24px}*[theme=dark] .hover-state,*[theme=light] .hover-state{font-weight:700;text-decoration:underline;font-size:14px;line-height:22px}*[theme=dark] h1,*[theme=dark] .h1,*[theme=dark] h2,*[theme=dark] .h2,*[theme=dark] h3,*[theme=dark] .h3,*[theme=dark] h4,*[theme=dark] .h4,*[theme=dark] h5,*[theme=dark] .h5{color:#fff}.segmented-button-container{border-color:#919191}.segmented-button-container:first-child{border-bottom-left-radius:10px;border-top-left-radius:10px}.segmented-button-container:last-child{border-bottom-right-radius:10px;border-top-right-radius:10px}.segmented-button-container .mat-button-toggle{min-width:80px;min-height:48px;border-color:#919191}.segmented-button-container .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#242424;font-weight:400;font-size:14px;font-feature-settings:\"capb\"}.segmented-button-container .mat-button-toggle:hover{background:#fff2fc}.segmented-button-container .mat-button-toggle.mat-button-toggle-checked{background:#ffe6fa}.segmented-button-container .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content{font-weight:700}.segmented-button-container .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay{display:none}.segmented-button-container .mat-button-toggle.disabled{pointer-events:none;background:#fff}.segmented-button-container .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}.segmented-button-container.disabled{pointer-events:none}.segmented-button-container.disabled .mat-button-toggle{background:#fff}.segmented-button-container.disabled .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}\n"] }]
|
|
10341
10398
|
}], propDecorators: { buttonConfig: [{
|
|
10342
10399
|
type: Input,
|
|
10343
10400
|
args: [{ required: true }]
|
|
10401
|
+
}], disabled: [{
|
|
10402
|
+
type: Input
|
|
10344
10403
|
}], buttonSelected: [{
|
|
10345
10404
|
type: Output
|
|
10346
10405
|
}] } });
|