@testgorilla/tgo-ui 3.2.3 → 3.2.4
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/empty-state/empty-state.component.d.ts +1 -1
- package/components/icon/icon.config.d.ts +1 -1
- package/components/spinner/spinner.component.d.ts +17 -2
- package/components/spinner/spinner.module.d.ts +2 -1
- package/esm2022/components/autocomplete/autocomplete.component.mjs +1 -1
- package/esm2022/components/icon/icon.config.mjs +4 -1
- package/esm2022/components/spider-chart/spider-chart.component.mjs +1 -1
- package/esm2022/components/spinner/spinner.component.mjs +16 -4
- package/esm2022/components/spinner/spinner.module.mjs +7 -6
- package/esm2022/components/toggle/toggle.component.mjs +1 -1
- package/fesm2022/testgorilla-tgo-ui.mjs +24 -10
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/projects/tgo-canopy-ui/assets/icons/rebrand/Pencil-to-gorilla-filled.svg +1 -0
- package/projects/tgo-canopy-ui/assets/icons/rebrand/Pencil-to-gorilla-in-line.svg +1 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable,
|
|
2
|
+
import { Injectable, Component, ViewEncapsulation, Optional, Inject, HostBinding, Input, EventEmitter, booleanAttribute, Output, Pipe, ChangeDetectionStrategy, NgModule, Directive, HostListener, ViewChild, Self, ContentChild, input, computed, signal, ElementRef, forwardRef, ViewContainerRef, Host, TemplateRef, inject, ViewChildren, InjectionToken, PLATFORM_ID, ChangeDetectorRef, effect, DestroyRef, EnvironmentInjector, ApplicationRef, Injector, createComponent, viewChild, model, output } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule, KeyValuePipe, NgIf, NgForOf, NgClass, NgTemplateOutlet, AsyncPipe, formatDate, isPlatformBrowser, NgOptimizedImage, DecimalPipe } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/material/icon';
|
|
@@ -69,7 +69,7 @@ import * as i7$2 from '@angular/material/sort';
|
|
|
69
69
|
import { MatSortModule } from '@angular/material/sort';
|
|
70
70
|
import * as i2$7 from '@angular/material/slider';
|
|
71
71
|
import { MatSliderModule } from '@angular/material/slider';
|
|
72
|
-
import {
|
|
72
|
+
import { provideNgxMask, NgxMaskDirective } from 'ngx-mask';
|
|
73
73
|
import * as i2$8 from '@angular/material/divider';
|
|
74
74
|
import { MatDividerModule } from '@angular/material/divider';
|
|
75
75
|
import { hasModifierKey, SPACE, ENTER } from '@angular/cdk/keycodes';
|
|
@@ -677,6 +677,8 @@ const tgoRebrandIcons = [
|
|
|
677
677
|
'TestGorilla-in-line',
|
|
678
678
|
'TestGorilla-Pink-filled',
|
|
679
679
|
'TestGorilla-Pink-in-line',
|
|
680
|
+
'Pencil-to-gorilla-in-line',
|
|
681
|
+
'Pencil-to-gorilla-filled',
|
|
680
682
|
];
|
|
681
683
|
const groupedIcons = {
|
|
682
684
|
directional: [
|
|
@@ -884,6 +886,7 @@ const groupedIcons = {
|
|
|
884
886
|
'Zoom-in-in-line',
|
|
885
887
|
'Zoom-out-filled',
|
|
886
888
|
'Zoom-out-in-line',
|
|
889
|
+
'Pencil-to-gorilla-in-line',
|
|
887
890
|
],
|
|
888
891
|
communication: [
|
|
889
892
|
'Book-filled',
|
|
@@ -10494,6 +10497,13 @@ class SpinnerComponent {
|
|
|
10494
10497
|
* @memberof SpinnerComponent
|
|
10495
10498
|
*/
|
|
10496
10499
|
this.applicationTheme = 'light';
|
|
10500
|
+
/**
|
|
10501
|
+
* Custom Icon size
|
|
10502
|
+
*
|
|
10503
|
+
* @type {IconSize}
|
|
10504
|
+
* @memberof SpinnerComponent
|
|
10505
|
+
*/
|
|
10506
|
+
this.iconSize = '24';
|
|
10497
10507
|
if (defaultAppTheme) {
|
|
10498
10508
|
this.applicationTheme = defaultAppTheme;
|
|
10499
10509
|
}
|
|
@@ -10509,11 +10519,11 @@ class SpinnerComponent {
|
|
|
10509
10519
|
this.classes = this.classes.replace(/\s+/g, ' ');
|
|
10510
10520
|
}
|
|
10511
10521
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpinnerComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10512
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpinnerComponent, selector: "ui-spinner", inputs: { size: "size", isLoader: "isLoader", text: "text", applicationTheme: "applicationTheme" }, usesOnChanges: true, ngImport: i0, template: "<div
|
|
10522
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpinnerComponent, selector: "ui-spinner", inputs: { size: "size", isLoader: "isLoader", text: "text", applicationTheme: "applicationTheme", iconName: "iconName", iconSize: "iconSize" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"spinner-container\"\n [ngClass]=\"classes\"\n [attr.theme]=\"applicationTheme\"\n [attr.aria-label]=\"'COMMON.LOADING' | uiTranslate | async\"\n role=\"alert\"\n>\n @if (!iconName) {\n <svg class=\"spinner\" viewBox=\"0 0 50 50\">\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\"></circle>\n </svg>\n } @else {\n <ui-icon [name]=\"iconName\" [size]=\"iconSize\"></ui-icon>\n }\n\n @if (text) {\n <h3 class=\"spinner-text\">{{ text }}</h3>\n }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.spinner-container.large{width:48px;height:48px;stroke-width:8px}.spinner-container.large .spinner{width:48px;height:48px}.spinner-container.small{stroke-width:4px;width:16px;height:16px}.spinner-container.small .spinner{width:16px;height:16px}.spinner-container.with-text{display:flex;flex-direction:column;align-items:center;justify-content:center;width:unset;height:unset}.spinner-container .spinner{animation:rotate 2s linear infinite;width:48px;height:48px}.spinner-container .spinner .path{stroke:#d410aa;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}.spinner-container .spinner-text{margin-top:24px;max-width:330px;overflow-wrap:normal;text-align:center;font-size:16px;line-height:24px;font-weight:400;color:#242424;overflow:hidden;max-height:72px}.spinner-container.classic .spinner .path{stroke:#276678}.spinner-container.loader{position:fixed;top:50%;left:50%;z-index:999;transform:translate(-50%,-50%)}.spinner-container[theme=dark] .path{stroke:#fff!important}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
|
|
10513
10523
|
}
|
|
10514
10524
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
10515
10525
|
type: Component,
|
|
10516
|
-
args: [{ selector: 'ui-spinner', template: "<div
|
|
10526
|
+
args: [{ selector: 'ui-spinner', template: "<div\n class=\"spinner-container\"\n [ngClass]=\"classes\"\n [attr.theme]=\"applicationTheme\"\n [attr.aria-label]=\"'COMMON.LOADING' | uiTranslate | async\"\n role=\"alert\"\n>\n @if (!iconName) {\n <svg class=\"spinner\" viewBox=\"0 0 50 50\">\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\"></circle>\n </svg>\n } @else {\n <ui-icon [name]=\"iconName\" [size]=\"iconSize\"></ui-icon>\n }\n\n @if (text) {\n <h3 class=\"spinner-text\">{{ text }}</h3>\n }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.spinner-container.large{width:48px;height:48px;stroke-width:8px}.spinner-container.large .spinner{width:48px;height:48px}.spinner-container.small{stroke-width:4px;width:16px;height:16px}.spinner-container.small .spinner{width:16px;height:16px}.spinner-container.with-text{display:flex;flex-direction:column;align-items:center;justify-content:center;width:unset;height:unset}.spinner-container .spinner{animation:rotate 2s linear infinite;width:48px;height:48px}.spinner-container .spinner .path{stroke:#d410aa;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}.spinner-container .spinner-text{margin-top:24px;max-width:330px;overflow-wrap:normal;text-align:center;font-size:16px;line-height:24px;font-weight:400;color:#242424;overflow:hidden;max-height:72px}.spinner-container.classic .spinner .path{stroke:#276678}.spinner-container.loader{position:fixed;top:50%;left:50%;z-index:999;transform:translate(-50%,-50%)}.spinner-container[theme=dark] .path{stroke:#fff!important}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}\n"] }]
|
|
10517
10527
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
10518
10528
|
type: Optional
|
|
10519
10529
|
}, {
|
|
@@ -10527,19 +10537,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
10527
10537
|
type: Input
|
|
10528
10538
|
}], applicationTheme: [{
|
|
10529
10539
|
type: Input
|
|
10540
|
+
}], iconName: [{
|
|
10541
|
+
type: Input
|
|
10542
|
+
}], iconSize: [{
|
|
10543
|
+
type: Input
|
|
10530
10544
|
}] } });
|
|
10531
10545
|
|
|
10532
10546
|
class SpinnerComponentModule {
|
|
10533
10547
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpinnerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
10534
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SpinnerComponentModule, declarations: [SpinnerComponent], imports: [NgClass, NgIf, UiTranslatePipe, AsyncPipe], exports: [SpinnerComponent] }); }
|
|
10535
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpinnerComponentModule }); }
|
|
10548
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SpinnerComponentModule, declarations: [SpinnerComponent], imports: [NgClass, NgIf, UiTranslatePipe, AsyncPipe, IconComponentModule], exports: [SpinnerComponent] }); }
|
|
10549
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpinnerComponentModule, imports: [IconComponentModule] }); }
|
|
10536
10550
|
}
|
|
10537
10551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpinnerComponentModule, decorators: [{
|
|
10538
10552
|
type: NgModule,
|
|
10539
10553
|
args: [{
|
|
10540
10554
|
declarations: [SpinnerComponent],
|
|
10541
10555
|
exports: [SpinnerComponent],
|
|
10542
|
-
imports: [NgClass, NgIf, UiTranslatePipe, AsyncPipe],
|
|
10556
|
+
imports: [NgClass, NgIf, UiTranslatePipe, AsyncPipe, IconComponentModule],
|
|
10543
10557
|
}]
|
|
10544
10558
|
}] });
|
|
10545
10559
|
|
|
@@ -11500,7 +11514,7 @@ class ToggleComponent {
|
|
|
11500
11514
|
useExisting: forwardRef(() => ToggleComponent),
|
|
11501
11515
|
multi: true,
|
|
11502
11516
|
},
|
|
11503
|
-
], usesOnChanges: true, ngImport: i0, template: "<div class=\"toggle\" [ngClass]=\"classes\">\n <div\n [style.--max-width]=\"maxWidth + 'px'\"\n [tabIndex]=\"0\"\n class=\"toggle-container\"\n [ngClass]=\"{ 'active': selected }\"\n (click)=\"onToggle()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n (keydown)=\"onKeydown($event)\"\n role=\"switch\"\n [attr.aria-labelledby]=\"'label'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n [attr.aria-checked]=\"selected\"\n >\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n <div\n class=\"label\"\n uiEllipseText\n [matTooltipShowDelay]=\"800\"\n [matTooltip]=\"showLabelTooltip ? label : ''\"\n (onChangeTextState)=\"changeTextState($event)\"\n id=\"label\"\n >\n {{ label }}\n </div>\n <div class=\"knob\" *ngIf=\"!loading; else loadingTemplate\" [ngClass]=\"{ selected }\">\n <ui-icon [color]=\"disabled ? 'grey' : 'white'\" *ngIf=\"selected && !label\" [size]=\"'16'\" [name]=\"'Check-round-filled'\"></ui-icon>\n </div>\n\n <ng-template #loadingTemplate>\n <ui-spinner [isLoader]=\"false\" [size]=\"'small'\" [applicationTheme]=\"'dark'\"></ui-spinner>\n </ng-template>\n </div>\n <div *ngIf=\"message && selected\" class=\"message\">{{ message }}</div>\n</div>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:fit-content;display:block}:host .toggle{height:auto;width:fit-content;display:flex;flex-direction:column;align-items:center}:host .toggle .toggle-container{border:1px solid transparent}:host .toggle.disabled{opacity:.5}:host .toggle.disabled .label{color:#242424!important}:host .toggle.disabled .toggle-container{background:#e0e0e0;pointer-events:none}:host .toggle.disabled .toggle-container:focus{outline:none}:host .toggle.dark.disabled .toggle-container.active,:host .toggle.light.disabled .toggle-container.active{background:#e9e9e9;border:1px solid #242424}:host .toggle.dark.disabled .toggle-container.active .knob:after,:host .toggle.light.disabled .toggle-container.active .knob:after{background:#242424}:host .toggle.dark .toggle-container,:host .toggle.light .toggle-container{background:transparent;border:1px solid #242424}:host .toggle.dark .toggle-container .label,:host .toggle.light .toggle-container .label{color:#242424}:host .toggle.dark .toggle-container .knob:after,:host .toggle.light .toggle-container .knob:after{background:#242424}:host .toggle.dark .toggle-container.active,:host .toggle.light .toggle-container.active{background:#d410aa;border:1px solid #D410AA}:host .toggle.dark .toggle-container.active .label,:host .toggle.light .toggle-container.active .label{color:#fff}:host .toggle.dark .toggle-container.active .knob:after,:host .toggle.light .toggle-container.active .knob:after{background:#fff}:host .toggle.dark .message,:host .toggle.light .message{color:#242424}:host .toggle.dark.disabled .toggle-container.active{border-color:#fff}:host .toggle.dark.disabled .toggle-container.active .knob:after{background:#fff}:host .toggle.dark .toggle-container{border-color:#fff}:host .toggle.dark .toggle-container .label{color:#fff}:host .toggle.dark .toggle-container .knob:after{background:#fff}:host .toggle.dark .message{color:#fff}:host .toggle .toggle-container{min-height:20px;max-height:24px;max-width:var(--max-width);padding:0 3px 0 20px;width:fit-content;min-width:36px;border-radius:16px;background:#888;display:flex;align-items:center;cursor:pointer;position:relative;transition:transform .3s,padding .3s,background .3s}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .toggle .toggle-container:focus-visible{position:relative;outline:2px solid #242424;outline-offset:2px;animation:focus-ring-animation .4s forwards}:host .toggle .toggle-container:focus-visible:after{content:\"\";position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);top:-1px;left:-1px;outline:2px solid #ffffff;border-radius:16px}:host .toggle .toggle-container .knob{height:100%;width:100%;position:absolute;left:-1px;top:0;display:flex;align-items:center;padding:3px;max-height:20px;transition:transform .3s}:host .toggle .toggle-container .knob:after{content:\"\";display:block;border-radius:16px;width:12px;height:12px;background:#fff;transition:background .3s}:host .toggle .toggle-container .label{z-index:1;font-size:8px;font-weight:700;color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;pointer-events:visible;line-height:16px}:host .toggle .toggle-container.active{background:#276678;padding:0 20px 0 3px}:host .toggle .toggle-container.active .knob{transform:translate(calc(100% - 15px))}:host .toggle .message{margin-top:4px;font-weight:700;font-size:12px;line-height:16px;color:#276678;text-align:justify}:host .toggle.small-toggle .toggle-container .knob{left:0}:host .toggle.small-toggle .toggle-container .knob:after{width:10px;height:10px}:host .toggle.small-toggle .toggle-container .knob.selected{left:-8px}:host .toggle.small-toggle .toggle-container .knob.selected:after{display:none}:host .toggle.small-toggle .toggle-container .knob.selected ui-icon ::ng-deep svg{width:20px;height:20px}:host .toggle.loading .toggle-container{border-color:#d410aa;background-color:#d410aa;padding:0;display:flex;justify-content:center;cursor:default}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme"] }] }); }
|
|
11517
|
+
], usesOnChanges: true, ngImport: i0, template: "<div class=\"toggle\" [ngClass]=\"classes\">\n <div\n [style.--max-width]=\"maxWidth + 'px'\"\n [tabIndex]=\"0\"\n class=\"toggle-container\"\n [ngClass]=\"{ 'active': selected }\"\n (click)=\"onToggle()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n (keydown)=\"onKeydown($event)\"\n role=\"switch\"\n [attr.aria-labelledby]=\"'label'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n [attr.aria-checked]=\"selected\"\n >\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n <div\n class=\"label\"\n uiEllipseText\n [matTooltipShowDelay]=\"800\"\n [matTooltip]=\"showLabelTooltip ? label : ''\"\n (onChangeTextState)=\"changeTextState($event)\"\n id=\"label\"\n >\n {{ label }}\n </div>\n <div class=\"knob\" *ngIf=\"!loading; else loadingTemplate\" [ngClass]=\"{ selected }\">\n <ui-icon [color]=\"disabled ? 'grey' : 'white'\" *ngIf=\"selected && !label\" [size]=\"'16'\" [name]=\"'Check-round-filled'\"></ui-icon>\n </div>\n\n <ng-template #loadingTemplate>\n <ui-spinner [isLoader]=\"false\" [size]=\"'small'\" [applicationTheme]=\"'dark'\"></ui-spinner>\n </ng-template>\n </div>\n <div *ngIf=\"message && selected\" class=\"message\">{{ message }}</div>\n</div>\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:fit-content;display:block}:host .toggle{height:auto;width:fit-content;display:flex;flex-direction:column;align-items:center}:host .toggle .toggle-container{border:1px solid transparent}:host .toggle.disabled{opacity:.5}:host .toggle.disabled .label{color:#242424!important}:host .toggle.disabled .toggle-container{background:#e0e0e0;pointer-events:none}:host .toggle.disabled .toggle-container:focus{outline:none}:host .toggle.dark.disabled .toggle-container.active,:host .toggle.light.disabled .toggle-container.active{background:#e9e9e9;border:1px solid #242424}:host .toggle.dark.disabled .toggle-container.active .knob:after,:host .toggle.light.disabled .toggle-container.active .knob:after{background:#242424}:host .toggle.dark .toggle-container,:host .toggle.light .toggle-container{background:transparent;border:1px solid #242424}:host .toggle.dark .toggle-container .label,:host .toggle.light .toggle-container .label{color:#242424}:host .toggle.dark .toggle-container .knob:after,:host .toggle.light .toggle-container .knob:after{background:#242424}:host .toggle.dark .toggle-container.active,:host .toggle.light .toggle-container.active{background:#d410aa;border:1px solid #D410AA}:host .toggle.dark .toggle-container.active .label,:host .toggle.light .toggle-container.active .label{color:#fff}:host .toggle.dark .toggle-container.active .knob:after,:host .toggle.light .toggle-container.active .knob:after{background:#fff}:host .toggle.dark .message,:host .toggle.light .message{color:#242424}:host .toggle.dark.disabled .toggle-container.active{border-color:#fff}:host .toggle.dark.disabled .toggle-container.active .knob:after{background:#fff}:host .toggle.dark .toggle-container{border-color:#fff}:host .toggle.dark .toggle-container .label{color:#fff}:host .toggle.dark .toggle-container .knob:after{background:#fff}:host .toggle.dark .message{color:#fff}:host .toggle .toggle-container{min-height:20px;max-height:24px;max-width:var(--max-width);padding:0 3px 0 20px;width:fit-content;min-width:36px;border-radius:16px;background:#888;display:flex;align-items:center;cursor:pointer;position:relative;transition:transform .3s,padding .3s,background .3s}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .toggle .toggle-container:focus-visible{position:relative;outline:2px solid #242424;outline-offset:2px;animation:focus-ring-animation .4s forwards}:host .toggle .toggle-container:focus-visible:after{content:\"\";position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);top:-1px;left:-1px;outline:2px solid #ffffff;border-radius:16px}:host .toggle .toggle-container .knob{height:100%;width:100%;position:absolute;left:-1px;top:0;display:flex;align-items:center;padding:3px;max-height:20px;transition:transform .3s}:host .toggle .toggle-container .knob:after{content:\"\";display:block;border-radius:16px;width:12px;height:12px;background:#fff;transition:background .3s}:host .toggle .toggle-container .label{z-index:1;font-size:8px;font-weight:700;color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;pointer-events:visible;line-height:16px}:host .toggle .toggle-container.active{background:#276678;padding:0 20px 0 3px}:host .toggle .toggle-container.active .knob{transform:translate(calc(100% - 15px))}:host .toggle .message{margin-top:4px;font-weight:700;font-size:12px;line-height:16px;color:#276678;text-align:justify}:host .toggle.small-toggle .toggle-container .knob{left:0}:host .toggle.small-toggle .toggle-container .knob:after{width:10px;height:10px}:host .toggle.small-toggle .toggle-container .knob.selected{left:-8px}:host .toggle.small-toggle .toggle-container .knob.selected:after{display:none}:host .toggle.small-toggle .toggle-container .knob.selected ui-icon ::ng-deep svg{width:20px;height:20px}:host .toggle.loading .toggle-container{border-color:#d410aa;background-color:#d410aa;padding:0;display:flex;justify-content:center;cursor:default}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }] }); }
|
|
11504
11518
|
}
|
|
11505
11519
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
11506
11520
|
type: Component,
|
|
@@ -13017,7 +13031,7 @@ class AutocompleteComponent {
|
|
|
13017
13031
|
this.matAutocomplete._setScrollTop(this.matAutocomplete._keyManager.activeItemIndex * optionHeight);
|
|
13018
13032
|
}
|
|
13019
13033
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i2.DomSanitizer }, { token: i1$2.NgControl, optional: true, self: true }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i2$3.FocusMonitor }, { token: i0.DestroyRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13020
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompleteComponent, selector: "ui-autocomplete", inputs: { itemsList: "itemsList", suggestionsList: "suggestionsList", disabled: "disabled", allowAdd: "allowAdd", textField: "textField", valueField: "valueField", label: "label", placeholder: "placeholder", itemValue: "itemValue", type: "type", minCharactersSearch: "minCharactersSearch", variant: "variant", showBottomContent: "showBottomContent", valuePrimitive: "valuePrimitive", fullWidth: "fullWidth", applicationTheme: "applicationTheme", required: "required", errors: "errors", companyColor: "companyColor", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], compareWith: "compareWith", dropdownPanelClass: "dropdownPanelClass", closeOnScroll: "closeOnScroll", size: "size", allowUserInput: "allowUserInput", clearable: "clearable", exactMatchSelect: "exactMatchSelect", maxItemSelected: "maxItemSelected", isDynamicFilteringEnabled: "isDynamicFilteringEnabled", dynamicFilterLoading: "dynamicFilterLoading", dynamicFilteredList: "dynamicFilteredList", infiniteScroll: "infiniteScroll", hasMoreOptionsForInfiniteScroll: "hasMoreOptionsForInfiniteScroll" }, outputs: { selectionChange: "selectionChange", searchTextChange: "searchTextChange", blur: "blur", focus: "focus", scrollViewportBottomReached: "scrollViewportBottomReached" }, host: { properties: { "class.full-width": "this.fullWidth", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "formFieldElement", first: true, predicate: ["formField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "matInput", first: true, predicate: ["matInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n <mat-form-field\n [color]=\"(safeErrors.length || (ngControl?.errors && ngControl?.touched ) || (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' ')) ) ? 'warn' : 'accent'\"\n [appearance]=\"'outline'\"\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent, 'keyboard-focused': keyboardFocused(), 'has-label': !!label }\"\n >\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <div #formField class=\"input-container\">\n <span style=\"position: absolute; left: -9999px\" *ngIf=\"textField ? value?.[textField] : value === inputValue\"\n aria-live=\"polite\">{{ (('SELECTED') | uiTranslate | async) + ' ' + inputValue }}</span>\n\n <input\n #trigger=\"matAutocompleteTrigger\"\n #matInput\n [uiPreventInput]=\"!allowUserInput\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n [attr.aria-label]=\"((translationContext + 'SELECTED') | uiTranslate | async) + ' ' + (value | transformItem: textField : true)\"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n matInput\n [placeholder]=\"value && value.length ? '': placeholder\"\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n />\n <div\n class=\"selected-items\"\n #tagContainer\n *ngIf=\"\n (type === autocompleteType.LARGE && this.value) ||\n (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n \"\n >\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n *ngFor=\"let valueItem of value; let i = index\"\n [label]=\"valueItem | transformItem: textField\"\n [allowClose]=\"true\"\n [applicationTheme]=\"applicationTheme\"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n [style.display]=\"(isOverLapping && i > 0 && i >= overlapIndex) || (size === 'small' && value.length > 1) ? 'none' : 'block'\"\n [ngStyle]=\"{ '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px' }\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n @if (size === 'small') {\n <div class=\"selected-count\" *ngIf=\"value.length > 1\">\n {{ (translationContext + 'SELECTED_AMOUNT' | uiTranslate : { numberSelected: (value | slice: overlapIndex).length }) | async }}\n </div>\n } @else {\n <div *ngIf=\"value.length > 1 && isOverLapping\" class=\"overlap-count\">\n <ui-tag [applicationTheme]=\"applicationTheme\"\n [label]=\"'+' + (value.length - overlapIndex)\"></ui-tag>\n </div>\n }\n </div>\n </div>\n\n <ui-icon\n *ngIf=\"clearable && (type === autocompleteType.SINGLE && (value?.length || hasObjectValue)) || (type !== autocompleteType.SINGLE && value && value.length > 1 && ((AutocompleteUtils.isPrimitive(value) && value.length) || (!AutocompleteUtils.isPrimitive(value) && (AutocompleteUtils.isArray(value) && value.length || !AutocompleteUtils.isArray(value) && !value.length))))\"\n class=\"remove-selected\"\n [tabIndex]=\"disabled ? -1 : 0\"\n (keydown.enter)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n (keydown.space)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [attr.aria-label]=\"('COMMON.CLEAR') | uiTranslate | async\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n *ngIf=\"isDropdown\"\n [size]=\"'24'\"\n [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme + ' ' + dropdownPanelClass\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n (opened)=\"gotoUp()\"\n >\n @if (type !== autocompleteType.MULTI || value?.length < maxItemSelected) {\n <ng-container *ngIf=\"!(searchResult$ | async)\">\n <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n <mat-optgroup [label]=\"((translationContext + 'SUGGESTED') | uiTranslate | async)! | uppercase\"\n *ngIf=\"suggestionsList.length\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': suggested | includes: value : valueField }\"\n *ngFor=\"let suggested of suggestionsList\"\n [value]=\"suggested\"\n >\n <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"((translationContext + 'SELECTED') | uiTranslate | async)! | uppercase\"\n *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of value\"\n [value]=\"item\"\n >\n <span>{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n\n @if (isGrouped) {\n @for (group of itemsList; track group) {\n\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n }\n }\n }\n\n <mat-optgroup [label]=\"((translationContext + 'SELECTED') | uiTranslate | async)! | uppercase\"\n *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [class]=\"'selected-option'\"\n [value]=\"value\"\n >\n <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-template #dropdownList>\n <cdk-virtual-scroll-viewport *ngIf=\"virtualScroll || infiniteScroll; else defaultViewPort\" [itemSize]=\"48\"\n [style.height]=\"'200px'\" class=\"virtual-scroll\">\n @if (!isGrouped) {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n\n @if(infiniteScroll && hasMoreOptionsForInfiniteScroll) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n } @else {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n } }\n }\n\n </cdk-virtual-scroll-viewport>\n\n <ng-template #defaultViewPort>\n @if (!isGrouped) {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n } @else {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n }\n }\n }\n </ng-template>\n\n </ng-template>\n\n </ng-container>\n\n <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n }\n }\n }\n\n <mat-optgroup [label]=\"((translationContext + 'SUGGESTED') | uiTranslate | async)! | uppercase\"\n *ngIf=\"filteredSuggestionList.length\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container *ngIf=\"!filteredSuggestionList.length && !isGrouped; else showItemListWithGroup\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </ng-container>\n\n <ng-template #showItemListWithGroup>\n <mat-optgroup [label]=\"((translationContext + 'ALL_ITEMS') | uiTranslate | async)! | uppercase\"\n *ngIf=\"filteredItemsList.length && !isGrouped\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-template>\n\n @if(isDynamicFilteringEnabled && dynamicFilterLoading) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if(inputValue) {\n @if (allowAdd && !isAlreadyAdded) {\n <mat-option (mousedown)=$event.preventDefault() [value]=\"inputValue\">\n <span>{{ ('COMMON.ADD') | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n </ng-container>\n </ng-container>\n }\n </mat-autocomplete>\n <mat-hint class=\"error\"\n *ngIf=\"safeErrors.length || (ngControl?.errors | hasValidationError) || (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' '))\">\n <div class=\"errors\"\n *ngIf=\"(AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' '))\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ (translationContext + 'MAX_SELECTED_ERROR') | uiTranslate : { max: maxItemSelected } | async }}</span>\n </div>\n <ng-container *ngIf=\"safeErrors.length\">\n <div class=\"errors\" *ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n\n </mat-hint>\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}:host ui-tag ::ng-deep .tag-wrapper{max-width:fit-content}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:flex;flex-direction:column-reverse}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex;flex-direction:row-reverse}.input-container .selected-items{display:flex;padding-left:4px}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items .value-tag{max-width:var(--tag-max-width)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width)}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px}.input-container .selected-items .overlap-count ui-tag{display:block}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:6px}.input-container input.unset-margin{margin-top:unset}.input-container input.no-caret{cursor:pointer;caret-color:transparent!important}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer;margin-right:2px;border-radius:50px;height:fit-content}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.loading-option{display:flex}.loading-option .loading-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;top:0;left:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2$4.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "isDisabled", "applicationTheme", "ariaLabel", "ariaRequired"], outputs: ["close", "press"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "directive", type: i12.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i12.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i12.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: PreventInputDirective, selector: "[uiPreventInput]", inputs: ["uiPreventInput"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme"] }, { kind: "directive", type: SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }, { kind: "pipe", type: TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13034
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompleteComponent, selector: "ui-autocomplete", inputs: { itemsList: "itemsList", suggestionsList: "suggestionsList", disabled: "disabled", allowAdd: "allowAdd", textField: "textField", valueField: "valueField", label: "label", placeholder: "placeholder", itemValue: "itemValue", type: "type", minCharactersSearch: "minCharactersSearch", variant: "variant", showBottomContent: "showBottomContent", valuePrimitive: "valuePrimitive", fullWidth: "fullWidth", applicationTheme: "applicationTheme", required: "required", errors: "errors", companyColor: "companyColor", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], compareWith: "compareWith", dropdownPanelClass: "dropdownPanelClass", closeOnScroll: "closeOnScroll", size: "size", allowUserInput: "allowUserInput", clearable: "clearable", exactMatchSelect: "exactMatchSelect", maxItemSelected: "maxItemSelected", isDynamicFilteringEnabled: "isDynamicFilteringEnabled", dynamicFilterLoading: "dynamicFilterLoading", dynamicFilteredList: "dynamicFilteredList", infiniteScroll: "infiniteScroll", hasMoreOptionsForInfiniteScroll: "hasMoreOptionsForInfiniteScroll" }, outputs: { selectionChange: "selectionChange", searchTextChange: "searchTextChange", blur: "blur", focus: "focus", scrollViewportBottomReached: "scrollViewportBottomReached" }, host: { properties: { "class.full-width": "this.fullWidth", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "formFieldElement", first: true, predicate: ["formField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "matInput", first: true, predicate: ["matInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n <mat-form-field\n [color]=\"(safeErrors.length || (ngControl?.errors && ngControl?.touched ) || (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' ')) ) ? 'warn' : 'accent'\"\n [appearance]=\"'outline'\"\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent, 'keyboard-focused': keyboardFocused(), 'has-label': !!label }\"\n >\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <div #formField class=\"input-container\">\n <span style=\"position: absolute; left: -9999px\" *ngIf=\"textField ? value?.[textField] : value === inputValue\"\n aria-live=\"polite\">{{ (('SELECTED') | uiTranslate | async) + ' ' + inputValue }}</span>\n\n <input\n #trigger=\"matAutocompleteTrigger\"\n #matInput\n [uiPreventInput]=\"!allowUserInput\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n [attr.aria-label]=\"((translationContext + 'SELECTED') | uiTranslate | async) + ' ' + (value | transformItem: textField : true)\"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n matInput\n [placeholder]=\"value && value.length ? '': placeholder\"\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n />\n <div\n class=\"selected-items\"\n #tagContainer\n *ngIf=\"\n (type === autocompleteType.LARGE && this.value) ||\n (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n \"\n >\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n *ngFor=\"let valueItem of value; let i = index\"\n [label]=\"valueItem | transformItem: textField\"\n [allowClose]=\"true\"\n [applicationTheme]=\"applicationTheme\"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n [style.display]=\"(isOverLapping && i > 0 && i >= overlapIndex) || (size === 'small' && value.length > 1) ? 'none' : 'block'\"\n [ngStyle]=\"{ '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px' }\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n @if (size === 'small') {\n <div class=\"selected-count\" *ngIf=\"value.length > 1\">\n {{ (translationContext + 'SELECTED_AMOUNT' | uiTranslate : { numberSelected: (value | slice: overlapIndex).length }) | async }}\n </div>\n } @else {\n <div *ngIf=\"value.length > 1 && isOverLapping\" class=\"overlap-count\">\n <ui-tag [applicationTheme]=\"applicationTheme\"\n [label]=\"'+' + (value.length - overlapIndex)\"></ui-tag>\n </div>\n }\n </div>\n </div>\n\n <ui-icon\n *ngIf=\"clearable && (type === autocompleteType.SINGLE && (value?.length || hasObjectValue)) || (type !== autocompleteType.SINGLE && value && value.length > 1 && ((AutocompleteUtils.isPrimitive(value) && value.length) || (!AutocompleteUtils.isPrimitive(value) && (AutocompleteUtils.isArray(value) && value.length || !AutocompleteUtils.isArray(value) && !value.length))))\"\n class=\"remove-selected\"\n [tabIndex]=\"disabled ? -1 : 0\"\n (keydown.enter)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n (keydown.space)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [attr.aria-label]=\"('COMMON.CLEAR') | uiTranslate | async\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n *ngIf=\"isDropdown\"\n [size]=\"'24'\"\n [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme + ' ' + dropdownPanelClass\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n (opened)=\"gotoUp()\"\n >\n @if (type !== autocompleteType.MULTI || value?.length < maxItemSelected) {\n <ng-container *ngIf=\"!(searchResult$ | async)\">\n <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n <mat-optgroup [label]=\"((translationContext + 'SUGGESTED') | uiTranslate | async)! | uppercase\"\n *ngIf=\"suggestionsList.length\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': suggested | includes: value : valueField }\"\n *ngFor=\"let suggested of suggestionsList\"\n [value]=\"suggested\"\n >\n <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"((translationContext + 'SELECTED') | uiTranslate | async)! | uppercase\"\n *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of value\"\n [value]=\"item\"\n >\n <span>{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n\n @if (isGrouped) {\n @for (group of itemsList; track group) {\n\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n }\n }\n }\n\n <mat-optgroup [label]=\"((translationContext + 'SELECTED') | uiTranslate | async)! | uppercase\"\n *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [class]=\"'selected-option'\"\n [value]=\"value\"\n >\n <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-template #dropdownList>\n <cdk-virtual-scroll-viewport *ngIf=\"virtualScroll || infiniteScroll; else defaultViewPort\" [itemSize]=\"48\"\n [style.height]=\"'200px'\" class=\"virtual-scroll\">\n @if (!isGrouped) {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n\n @if(infiniteScroll && hasMoreOptionsForInfiniteScroll) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n } @else {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n } }\n }\n\n </cdk-virtual-scroll-viewport>\n\n <ng-template #defaultViewPort>\n @if (!isGrouped) {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n } @else {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n }\n }\n }\n </ng-template>\n\n </ng-template>\n\n </ng-container>\n\n <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n }\n }\n }\n\n <mat-optgroup [label]=\"((translationContext + 'SUGGESTED') | uiTranslate | async)! | uppercase\"\n *ngIf=\"filteredSuggestionList.length\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container *ngIf=\"!filteredSuggestionList.length && !isGrouped; else showItemListWithGroup\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </ng-container>\n\n <ng-template #showItemListWithGroup>\n <mat-optgroup [label]=\"((translationContext + 'ALL_ITEMS') | uiTranslate | async)! | uppercase\"\n *ngIf=\"filteredItemsList.length && !isGrouped\">\n <mat-option\n (mousedown)=$event.preventDefault()\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-template>\n\n @if(isDynamicFilteringEnabled && dynamicFilterLoading) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if(inputValue) {\n @if (allowAdd && !isAlreadyAdded) {\n <mat-option (mousedown)=$event.preventDefault() [value]=\"inputValue\">\n <span>{{ ('COMMON.ADD') | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n </ng-container>\n </ng-container>\n }\n </mat-autocomplete>\n <mat-hint class=\"error\"\n *ngIf=\"safeErrors.length || (ngControl?.errors | hasValidationError) || (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' '))\">\n <div class=\"errors\"\n *ngIf=\"(AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' '))\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ (translationContext + 'MAX_SELECTED_ERROR') | uiTranslate : { max: maxItemSelected } | async }}</span>\n </div>\n <ng-container *ngIf=\"safeErrors.length\">\n <div class=\"errors\" *ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n\n </mat-hint>\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}:host ui-tag ::ng-deep .tag-wrapper{max-width:fit-content}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:flex;flex-direction:column-reverse}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex;flex-direction:row-reverse}.input-container .selected-items{display:flex;padding-left:4px}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items .value-tag{max-width:var(--tag-max-width)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width)}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px}.input-container .selected-items .overlap-count ui-tag{display:block}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:6px}.input-container input.unset-margin{margin-top:unset}.input-container input.no-caret{cursor:pointer;caret-color:transparent!important}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer;margin-right:2px;border-radius:50px;height:fit-content}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.loading-option{display:flex}.loading-option .loading-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;top:0;left:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2$4.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "isDisabled", "applicationTheme", "ariaLabel", "ariaRequired"], outputs: ["close", "press"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "directive", type: i12.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i12.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i12.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: PreventInputDirective, selector: "[uiPreventInput]", inputs: ["uiPreventInput"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }, { kind: "directive", type: SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }, { kind: "pipe", type: TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13021
13035
|
}
|
|
13022
13036
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
13023
13037
|
type: Component,
|
|
@@ -16653,7 +16667,7 @@ class SpiderChartComponent {
|
|
|
16653
16667
|
return label.substring(firstLine.length).trim();
|
|
16654
16668
|
}
|
|
16655
16669
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpiderChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16656
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpiderChartComponent, selector: "ui-spider-chart", inputs: { size: "size", spiderChartData: "spiderChartData", stepSize: "stepSize", ariaLabel: "ariaLabel", loading: "loading", applicationTheme: "applicationTheme" }, viewQueries: [{ propertyName: "chart", first: true, predicate: BaseChartDirective, descendants: true }, { propertyName: "labelContainers", predicate: ["labelContainer"], descendants: true }, { propertyName: "fakeDataPoints", predicate: ["fakeDataPoints"], descendants: true }, { propertyName: "fakeDataPointsSecondary", predicate: ["fakeDataPointsSecondary"], descendants: true }, { propertyName: "legendItems", predicate: ["legendItem"], descendants: true }], ngImport: i0, template: "<div class=\"spider-chart-container\"\n tabindex=\"0\"\n [attr.aria-label]=\"ariaLabel\">\n <div class=\"spacing-container\"\n [ngClass]=\"{'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading}\">\n <div class=\"chart-container\"\n [style.width]=\"size === 'large' ? '280px' : '200px'\"\n [style.height]=\"size === 'large' ? '280px' : '200px'\">\n @if (!loading) {\n <canvas\n baseChart\n [data]=\"radarChartData\"\n [options]=\"radarChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n } @else {\n <canvas\n baseChart\n [data]=\"loadingChartData\"\n [options]=\"loadingChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n <ui-spinner></ui-spinner>\n }\n\n @if (labelPositionsVisible) {\n <div class=\"overlay-container\">\n @for (label of spiderChartData.labels; track label) {\n <div class=\"label-container\" #labelContainer\n [matTooltip]=\"spiderChartData.labelDescription[$index]\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n (keydown)=\"onLabelKeyDown($event, $index)\"\n [attr.aria-label]=\"spiderChartData.labelDescription[$index]\"\n [style.left]=\"getCenteredLabelLeftPosition(label, labelContainer.offsetWidth)\"\n [style.bottom]=\"getCenteredLabelBottomPosition(label, labelContainer.offsetHeight)\">\n @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n {{ label }}\n </div>\n } @else {\n <div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getFirstLine }}</div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getSecondLine : this }}</div>\n </div>\n }\n <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n </div>\n <span class=\"fake-data-points\" #fakeDataPoints\n [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index)\">\n </span>\n @if (radarChartData.datasets.length > 1) {\n <span class=\"fake-data-points-secondary\" #fakeDataPointsSecondary\n [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\">\n </span>\n }\n }\n </div>\n }\n </div>\n </div>\n @if (radarChartData.datasets.length > 0) {\n <div class=\"legend-container\">\n @for (dataset of radarChartData.datasets; track dataset.label) {\n <div class=\"legend-item\"\n (click)=\"toggleDatasetVisibility($index)\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n role=\"button\"\n [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n [attr.aria-label]=\"isDatasetVisible($index) ?\n ((translationContext + 'DATASET_VISIBLE') | uiTranslate : { dataset: dataset.label } | async) :\n ((translationContext + 'DATASET_HIDDEN') | uiTranslate : { dataset: dataset.label } | async)\"\n (keydown)=\"onLegendItemKeyDown($event, $index)\"\n #legendItem>\n <span class=\"legend-line\" [ngClass]=\"{'solid-line': $index === 0, 'dashed-line': $index === 1}\"></span>\n <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n {{ dataset.label }}\n </span>\n </div>\n }\n </div>\n }\n</div>\n\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.spider-chart-container{display:flex;flex-direction:column;align-items:center}.spider-chart-container .spacing-container{padding:40px 140px}.spider-chart-container .spacing-container.small-spacing{padding:0 80px}.spider-chart-container .spacing-container .chart-container{position:relative}.spider-chart-container .spacing-container .chart-container .overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container{display:flex;gap:4px;position:absolute;pointer-events:all;cursor:pointer}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .fake-data-points{visibility:hidden}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container:focus{outline:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .label{font-size:12px;border-bottom:1px dashed #D3D3D3;white-space:nowrap;overflow:hidden;width:fit-content;text-overflow:ellipsis}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .value{font-weight:700}.spider-chart-container .legend-container{display:flex;gap:16px;cursor:pointer}.spider-chart-container .legend-container .legend-item{display:flex;align-items:center;gap:8px}.spider-chart-container .legend-container .legend-item .legend-line{display:inline-block;width:11px;height:4px}.spider-chart-container .legend-container .legend-item .solid-line{background-color:#d410aa}.spider-chart-container .legend-container .legend-item .dashed-line{border-top:2px dashed #242424}:host ::ng-deep .spider-chart-container .spinner-container.loader{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$b.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
|
|
16670
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SpiderChartComponent, selector: "ui-spider-chart", inputs: { size: "size", spiderChartData: "spiderChartData", stepSize: "stepSize", ariaLabel: "ariaLabel", loading: "loading", applicationTheme: "applicationTheme" }, viewQueries: [{ propertyName: "chart", first: true, predicate: BaseChartDirective, descendants: true }, { propertyName: "labelContainers", predicate: ["labelContainer"], descendants: true }, { propertyName: "fakeDataPoints", predicate: ["fakeDataPoints"], descendants: true }, { propertyName: "fakeDataPointsSecondary", predicate: ["fakeDataPointsSecondary"], descendants: true }, { propertyName: "legendItems", predicate: ["legendItem"], descendants: true }], ngImport: i0, template: "<div class=\"spider-chart-container\"\n tabindex=\"0\"\n [attr.aria-label]=\"ariaLabel\">\n <div class=\"spacing-container\"\n [ngClass]=\"{'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading}\">\n <div class=\"chart-container\"\n [style.width]=\"size === 'large' ? '280px' : '200px'\"\n [style.height]=\"size === 'large' ? '280px' : '200px'\">\n @if (!loading) {\n <canvas\n baseChart\n [data]=\"radarChartData\"\n [options]=\"radarChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n } @else {\n <canvas\n baseChart\n [data]=\"loadingChartData\"\n [options]=\"loadingChartOptions\"\n type=\"radar\"\n class=\"chart\"\n >\n </canvas>\n <ui-spinner></ui-spinner>\n }\n\n @if (labelPositionsVisible) {\n <div class=\"overlay-container\">\n @for (label of spiderChartData.labels; track label) {\n <div class=\"label-container\" #labelContainer\n [matTooltip]=\"spiderChartData.labelDescription[$index]\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n (keydown)=\"onLabelKeyDown($event, $index)\"\n [attr.aria-label]=\"spiderChartData.labelDescription[$index]\"\n [style.left]=\"getCenteredLabelLeftPosition(label, labelContainer.offsetWidth)\"\n [style.bottom]=\"getCenteredLabelBottomPosition(label, labelContainer.offsetHeight)\">\n @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n {{ label }}\n </div>\n } @else {\n <div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getFirstLine }}</div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">{{ label | memoizeFunc : getSecondLine : this }}</div>\n </div>\n }\n <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n </div>\n <span class=\"fake-data-points\" #fakeDataPoints\n [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index)\">\n </span>\n @if (radarChartData.datasets.length > 1) {\n <span class=\"fake-data-points-secondary\" #fakeDataPointsSecondary\n [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\">\n </span>\n }\n }\n </div>\n }\n </div>\n </div>\n @if (radarChartData.datasets.length > 0) {\n <div class=\"legend-container\">\n @for (dataset of radarChartData.datasets; track dataset.label) {\n <div class=\"legend-item\"\n (click)=\"toggleDatasetVisibility($index)\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n role=\"button\"\n [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n [attr.aria-label]=\"isDatasetVisible($index) ?\n ((translationContext + 'DATASET_VISIBLE') | uiTranslate : { dataset: dataset.label } | async) :\n ((translationContext + 'DATASET_HIDDEN') | uiTranslate : { dataset: dataset.label } | async)\"\n (keydown)=\"onLegendItemKeyDown($event, $index)\"\n #legendItem>\n <span class=\"legend-line\" [ngClass]=\"{'solid-line': $index === 0, 'dashed-line': $index === 1}\"></span>\n <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n {{ dataset.label }}\n </span>\n </div>\n }\n </div>\n }\n</div>\n\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.spider-chart-container{display:flex;flex-direction:column;align-items:center}.spider-chart-container .spacing-container{padding:40px 140px}.spider-chart-container .spacing-container.small-spacing{padding:0 80px}.spider-chart-container .spacing-container .chart-container{position:relative}.spider-chart-container .spacing-container .chart-container .overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container{display:flex;gap:4px;position:absolute;pointer-events:all;cursor:pointer}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .fake-data-points{visibility:hidden}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container:focus{outline:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .label{font-size:12px;border-bottom:1px dashed #D3D3D3;white-space:nowrap;overflow:hidden;width:fit-content;text-overflow:ellipsis}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .value{font-weight:700}.spider-chart-container .legend-container{display:flex;gap:16px;cursor:pointer}.spider-chart-container .legend-container .legend-item{display:flex;align-items:center;gap:8px}.spider-chart-container .legend-container .legend-item .legend-line{display:inline-block;width:11px;height:4px}.spider-chart-container .legend-container .legend-item .solid-line{background-color:#d410aa}.spider-chart-container .legend-container .legend-item .dashed-line{border-top:2px dashed #242424}:host ::ng-deep .spider-chart-container .spinner-container.loader{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$b.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
|
|
16657
16671
|
}
|
|
16658
16672
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpiderChartComponent, decorators: [{
|
|
16659
16673
|
type: Component,
|