@testgorilla/tgo-ui 1.12.18 → 1.13.1
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/badge/badge.component.d.ts +10 -3
- package/components/badge/badge.model.d.ts +9 -0
- package/components/button/button.component.d.ts +9 -1
- package/components/icon/icon.config.d.ts +1 -1
- package/components/icon/icon.model.d.ts +1 -1
- package/components/step/step.component.d.ts +10 -1
- package/esm2022/components/accordion/accordion.component.mjs +2 -2
- package/esm2022/components/alert-banner/alert-banner.component.mjs +3 -3
- package/esm2022/components/autocomplete/autocomplete.component.mjs +2 -2
- package/esm2022/components/avatar/avatar.component.mjs +2 -2
- package/esm2022/components/badge/badge.component.mjs +22 -5
- package/esm2022/components/badge/badge.model.mjs +10 -1
- package/esm2022/components/banner-action/banner-action.component.mjs +2 -2
- package/esm2022/components/button/button.component.mjs +13 -3
- package/esm2022/components/card/card.component.mjs +3 -3
- package/esm2022/components/checkbox/checkbox.component.mjs +2 -2
- package/esm2022/components/datepicker/datepicker.component.mjs +2 -2
- package/esm2022/components/deprecated-paginator/deprecated-paginator.component.mjs +2 -2
- package/esm2022/components/deprecated-table/deprecated-table.component.mjs +3 -3
- package/esm2022/components/dialog/dialog.component.mjs +2 -2
- package/esm2022/components/divider/divider.component.mjs +2 -2
- package/esm2022/components/dropdown/dropdown.component.mjs +2 -2
- package/esm2022/components/elevation-shadow/elevation-shadow.component.mjs +2 -2
- package/esm2022/components/empty-state/empty-state.component.mjs +2 -2
- package/esm2022/components/field/field.component.mjs +2 -2
- package/esm2022/components/file-upload/file-upload.component.mjs +3 -3
- package/esm2022/components/icon/icon.component.mjs +2 -2
- package/esm2022/components/icon/icon.config.mjs +5 -2
- package/esm2022/components/icon/icon.model.mjs +1 -1
- package/esm2022/components/navbar/navbar.component.mjs +2 -2
- package/esm2022/components/navigation/navigation.component.mjs +2 -2
- package/esm2022/components/overflow-menu/overflow-menu.component.mjs +3 -3
- package/esm2022/components/page-header/page-header.component.mjs +2 -2
- package/esm2022/components/paginator/paginator.component.mjs +2 -2
- package/esm2022/components/progress-bar/progress-bar.component.mjs +2 -2
- package/esm2022/components/radial-progress/radial-progress.component.mjs +3 -3
- package/esm2022/components/radio-button/radio-button.component.mjs +2 -2
- package/esm2022/components/rating/rating.component.mjs +2 -2
- package/esm2022/components/scale/scale.component.mjs +2 -2
- package/esm2022/components/segmented-bar/segmented-bar.component.mjs +2 -2
- package/esm2022/components/side-sheet/side-sheet.component.mjs +2 -2
- package/esm2022/components/slider/slider.component.mjs +2 -2
- package/esm2022/components/snackbar/snackbar.component.mjs +3 -3
- package/esm2022/components/spinner/spinner.component.mjs +2 -2
- package/esm2022/components/step/step.component.mjs +13 -3
- package/esm2022/components/stepper/stepper.component.mjs +3 -3
- package/esm2022/components/table/table.component.mjs +2 -2
- package/esm2022/components/tabs/tabs.component.mjs +2 -2
- package/esm2022/components/tag/tag.component.mjs +2 -2
- package/esm2022/components/toggle/toggle.component.mjs +2 -2
- package/fesm2022/testgorilla-tgo-ui.mjs +134 -85
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/icons/Employee.svg +13 -0
- package/src/assets/icons/Minimize.svg +1 -1
- package/src/assets/icons/Money-bag.svg +10 -0
- package/src/assets/icons/Suitcase.svg +11 -0
- package/src/assets/images/rebrand-last-step-icon-black.svg +3 -0
- package/src/assets/images/rebrand-last-step-icon-light.svg +3 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { IconColor, IconName } from '../icon/icon.model';
|
|
2
|
-
import { BadgeColor, BadgeVariant, BadgeVariantEnum } from './badge.model';
|
|
3
|
-
import { ApplicationTheme } from
|
|
2
|
+
import { BadgeColor, BadgeVariant, BadgeVariantEnum, RebrandBadgeColor } from './badge.model';
|
|
3
|
+
import { ApplicationTheme } from '../../models/application-theme.model';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
export declare class BadgeComponent {
|
|
6
6
|
/**
|
|
@@ -41,9 +41,16 @@ export declare class BadgeComponent {
|
|
|
41
41
|
* @memberof BadgeComponent
|
|
42
42
|
*/
|
|
43
43
|
applicationTheme: ApplicationTheme;
|
|
44
|
+
/**
|
|
45
|
+
* The color of the badge on new theme. Defaults to 'brand'.
|
|
46
|
+
* @type {RebrandBadgeColor}
|
|
47
|
+
* @memberof BadgeComponent
|
|
48
|
+
*/
|
|
49
|
+
rebrandColor: RebrandBadgeColor;
|
|
44
50
|
protected badgeVariant: typeof BadgeVariantEnum;
|
|
45
51
|
private darkColors;
|
|
46
52
|
protected get iconColor(): IconColor;
|
|
53
|
+
protected get isClassicTheme(): boolean;
|
|
47
54
|
static ɵfac: i0.ɵɵFactoryDeclaration<BadgeComponent, never>;
|
|
48
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<BadgeComponent, "ui-badge", never, { "label": { "alias": "label"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "color": { "alias": "color"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "notificationsAmount": { "alias": "notificationsAmount"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; }, {}, never, never, false, never>;
|
|
55
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<BadgeComponent, "ui-badge", never, { "label": { "alias": "label"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "color": { "alias": "color"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "notificationsAmount": { "alias": "notificationsAmount"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "rebrandColor": { "alias": "rebrandColor"; "required": false; }; }, {}, never, never, false, never>;
|
|
49
56
|
}
|
|
@@ -11,6 +11,15 @@ export declare enum BadgeColorEnum {
|
|
|
11
11
|
PETROL_60W = "petrol-60w",
|
|
12
12
|
GREY_DARK = "grey-dark"
|
|
13
13
|
}
|
|
14
|
+
export type RebrandBadgeColor = 'success' | 'warning' | 'negative' | 'info' | 'brand' | 'neutral';
|
|
15
|
+
export declare enum RebrandBadgeColorEnum {
|
|
16
|
+
SUCCESS = "success",
|
|
17
|
+
WARNING = "warning",
|
|
18
|
+
NEGATIVE = "negative",
|
|
19
|
+
INFO = "info",
|
|
20
|
+
BRAND = "brand",
|
|
21
|
+
NEUTRAL = "neutral"
|
|
22
|
+
}
|
|
14
23
|
export declare enum BadgeVariantEnum {
|
|
15
24
|
PRIMARY = "primary",
|
|
16
25
|
SECONDARY = "secondary",
|
|
@@ -128,6 +128,14 @@ export declare class ButtonComponent implements OnInit, AfterViewInit {
|
|
|
128
128
|
* @memberof ButtonComponent
|
|
129
129
|
*/
|
|
130
130
|
applicationTheme: ApplicationTheme;
|
|
131
|
+
/**
|
|
132
|
+
*
|
|
133
|
+
* Disabled button scale on click
|
|
134
|
+
*
|
|
135
|
+
* @type {boolean}
|
|
136
|
+
* @memberof ButtonComponent
|
|
137
|
+
*/
|
|
138
|
+
disabledScaleOnClick: boolean;
|
|
131
139
|
buttonClickEvent: EventEmitter<Event>;
|
|
132
140
|
buttonHoverEvent: EventEmitter<Event>;
|
|
133
141
|
buttonElement: MatButton;
|
|
@@ -159,5 +167,5 @@ export declare class ButtonComponent implements OnInit, AfterViewInit {
|
|
|
159
167
|
get getCompanyColor(): string;
|
|
160
168
|
get shouldChangeFilledStatus(): boolean;
|
|
161
169
|
static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
|
|
162
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "ui-button", never, { "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "label": { "alias": "label"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "justIcon": { "alias": "justIcon"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "url": { "alias": "url"; "required": false; }; "urlTarget": { "alias": "urlTarget"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "isPremium": { "alias": "isPremium"; "required": false; }; "type": { "alias": "type"; "required": false; }; "companyColor": { "alias": "companyColor"; "required": false; }; "buttonBadgeConfig": { "alias": "buttonBadgeConfig"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; }, { "buttonClickEvent": "buttonClickEvent"; "buttonHoverEvent": "buttonHoverEvent"; }, never, never, false, never>;
|
|
170
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "ui-button", never, { "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "label": { "alias": "label"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "justIcon": { "alias": "justIcon"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "url": { "alias": "url"; "required": false; }; "urlTarget": { "alias": "urlTarget"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "isPremium": { "alias": "isPremium"; "required": false; }; "type": { "alias": "type"; "required": false; }; "companyColor": { "alias": "companyColor"; "required": false; }; "buttonBadgeConfig": { "alias": "buttonBadgeConfig"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "disabledScaleOnClick": { "alias": "disabledScaleOnClick"; "required": false; }; }, { "buttonClickEvent": "buttonClickEvent"; "buttonHoverEvent": "buttonHoverEvent"; }, never, never, false, never>;
|
|
163
171
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const tgoIcons: readonly ["Add", "Archive", "Arrow_down", "Arrow_left", "Arrow_right", "Arrow_up", "Assessment", "Attempts", "Book", "Calendar", "Candidates", "Chat-notifications", "Chat", "Check", "Clone", "Close", "Code", "Company", "Copy", "Custom-questions", "Delete", "Devices", "Document", "Download", "Edit", "Email-message", "Empty-placeholder", "Error", "Essay", "Eye-hide", "Eye-view", "Feedback-1", "Feedback-2", "Feedback-3", "Feedback-4", "Feedback-5", "File-attach", "File-upload", "Filter", "Folder", "Format-add-file", "Format-add-table", "Format-align-L", "Format-align-R", "Format-align-center", "Format-align-justify", "Format-bold", "Format-code-active", "Format-code-block", "Format-edit-table", "Format-format", "Format-function", "Format-italics", "Format-list-bulleted", "Format-list-numbered", "Format-picker", "Format-quote", "Format-subscript", "Format-superscript", "Format-text-direction-L", "Format-text-direction-R", "Format-text-size", "Format-underline", "Format-variable", "Full-screen", "Gender-female", "Gender-male", "Help-2", "Help", "Image", "Info", "Integration", "Language", "Layout", "Learn", "Level", "Light-bulb", "Link", "Loading-spinner", "Localisation", "Location", "Lock", "Log-out", "Menu-burger", "Menu-ellipsis", "Microphone", "Minus", "Mouse-cursor", "Mouse-grab-cursor", "Mouse", "Multi-choice", "Notifications", "Password", "Path", "Plan-billing", "Plus", "Premium", "Promotion", "Question-count", "Refer", "Reset", "Review", "Round-check-filled", "Round-check", "Search", "Secure-checkout", "Send", "Settings", "Social-facebook", "Social-instagram", "Social-linkedin", "Sorting-down-1", "Sorting-down", "Speedometer", "Star-filled", "Star-half", "Star-outline", "Support", "Sync", "Team", "Test", "Thunder", "Timer", "Type", "Unarchive", "Unlock", "Upgrade", "Upload", "User-access", "User-add", "User-invite", "User-profile", "User-reject", "User-switch", "Video-pause", "Video-play", "Video-record", "Video", "Volume", "Warning", "Zoom-in", "Zoom-out", "Fire", "Gift", "Grab", "Share", "Sparkles", "Video-stop", "Minimize"];
|
|
1
|
+
export declare const tgoIcons: readonly ["Add", "Archive", "Arrow_down", "Arrow_left", "Arrow_right", "Arrow_up", "Assessment", "Attempts", "Book", "Calendar", "Candidates", "Chat-notifications", "Chat", "Check", "Clone", "Close", "Code", "Company", "Copy", "Custom-questions", "Delete", "Devices", "Document", "Download", "Edit", "Email-message", "Empty-placeholder", "Error", "Essay", "Eye-hide", "Eye-view", "Feedback-1", "Feedback-2", "Feedback-3", "Feedback-4", "Feedback-5", "File-attach", "File-upload", "Filter", "Folder", "Format-add-file", "Format-add-table", "Format-align-L", "Format-align-R", "Format-align-center", "Format-align-justify", "Format-bold", "Format-code-active", "Format-code-block", "Format-edit-table", "Format-format", "Format-function", "Format-italics", "Format-list-bulleted", "Format-list-numbered", "Format-picker", "Format-quote", "Format-subscript", "Format-superscript", "Format-text-direction-L", "Format-text-direction-R", "Format-text-size", "Format-underline", "Format-variable", "Full-screen", "Gender-female", "Gender-male", "Help-2", "Help", "Image", "Info", "Integration", "Language", "Layout", "Learn", "Level", "Light-bulb", "Link", "Loading-spinner", "Localisation", "Location", "Lock", "Log-out", "Menu-burger", "Menu-ellipsis", "Microphone", "Minus", "Mouse-cursor", "Mouse-grab-cursor", "Mouse", "Multi-choice", "Notifications", "Password", "Path", "Plan-billing", "Plus", "Premium", "Promotion", "Question-count", "Refer", "Reset", "Review", "Round-check-filled", "Round-check", "Search", "Secure-checkout", "Send", "Settings", "Social-facebook", "Social-instagram", "Social-linkedin", "Sorting-down-1", "Sorting-down", "Speedometer", "Star-filled", "Star-half", "Star-outline", "Support", "Sync", "Team", "Test", "Thunder", "Timer", "Type", "Unarchive", "Unlock", "Upgrade", "Upload", "User-access", "User-add", "User-invite", "User-profile", "User-reject", "User-switch", "Video-pause", "Video-play", "Video-record", "Video", "Volume", "Warning", "Zoom-in", "Zoom-out", "Fire", "Gift", "Grab", "Share", "Sparkles", "Video-stop", "Minimize", "Employee", "Money-bag", "Suitcase"];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { tgoIcons } from './icon.config';
|
|
2
2
|
export type IconSize = '16' | '24' | '40' | '80';
|
|
3
3
|
export type IconName = typeof tgoIcons[number] | '';
|
|
4
|
-
export type IconColor = 'teal' | 'petrol' | 'dark' | 'white' | 'black' | 'inherit';
|
|
4
|
+
export type IconColor = 'teal' | 'petrol' | 'dark' | 'white' | 'black' | 'inherit' | 'rebrand-black';
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { EventEmitter } from '@angular/core';
|
|
2
2
|
import { IconName } from '../icon/icon.model';
|
|
3
|
+
import { ApplicationTheme } from "../../models/application-theme.model";
|
|
3
4
|
import * as i0 from "@angular/core";
|
|
4
5
|
export declare class StepComponent {
|
|
5
6
|
/**
|
|
@@ -80,6 +81,14 @@ export declare class StepComponent {
|
|
|
80
81
|
* @memberof StepComponent
|
|
81
82
|
*/
|
|
82
83
|
showIconWhenSelected: boolean;
|
|
84
|
+
/**
|
|
85
|
+
*
|
|
86
|
+
* Defines the application theme
|
|
87
|
+
*
|
|
88
|
+
* @type {ApplicationTheme}
|
|
89
|
+
* @memberof StepComponent
|
|
90
|
+
*/
|
|
91
|
+
applicationTheme: ApplicationTheme;
|
|
83
92
|
/**
|
|
84
93
|
* Event emitted when the step was clicked.
|
|
85
94
|
* @type {number}
|
|
@@ -89,5 +98,5 @@ export declare class StepComponent {
|
|
|
89
98
|
protected get hasLastStepDefaultIcon(): boolean;
|
|
90
99
|
protected onStepSelected(index: number): void;
|
|
91
100
|
static ɵfac: i0.ɵɵFactoryDeclaration<StepComponent, never>;
|
|
92
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<StepComponent, "ui-step", never, { "label": { "alias": "label"; "required": false; }; "isVisited": { "alias": "isVisited"; "required": false; }; "submitted": { "alias": "submitted"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "index": { "alias": "index"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "isLast": { "alias": "isLast"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "prevStepIsVisited": { "alias": "prevStepIsVisited"; "required": false; }; "mobileMode": { "alias": "mobileMode"; "required": false; }; "finalIcon": { "alias": "finalIcon"; "required": false; }; "showIconWhenSelected": { "alias": "showIconWhenSelected"; "required": false; }; }, { "stepSelected": "stepSelected"; }, never, never, false, never>;
|
|
101
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<StepComponent, "ui-step", never, { "label": { "alias": "label"; "required": false; }; "isVisited": { "alias": "isVisited"; "required": false; }; "submitted": { "alias": "submitted"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "index": { "alias": "index"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "isLast": { "alias": "isLast"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "prevStepIsVisited": { "alias": "prevStepIsVisited"; "required": false; }; "mobileMode": { "alias": "mobileMode"; "required": false; }; "finalIcon": { "alias": "finalIcon"; "required": false; }; "showIconWhenSelected": { "alias": "showIconWhenSelected"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; }, { "stepSelected": "stepSelected"; }, never, never, false, never>;
|
|
93
102
|
}
|
|
@@ -55,11 +55,11 @@ export class AccordionComponent {
|
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
58
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: AccordionComponent, selector: "ui-accordion", inputs: { label: "label", open: ["open", "open", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], showPremiumIcon: ["showPremiumIcon", "showPremiumIcon", booleanAttribute], premiumTooltipText: "premiumTooltipText", applicationTheme: "applicationTheme" }, outputs: { closed: "closed", opened: "opened" }, ngImport: i0, template: "<mat-accordion class=\"accordion-wrapper\" [ngClass]=\"{ disabled }\">\n <mat-expansion-panel [expanded]=\"open\"\n (opened)=\"toggle(true)\"\n (closed)=\"toggle(false)\">\n <mat-expansion-panel-header >\n <mat-panel-title>\n <div class=\"accordion-label\">\n {{ label }}\n <ui-icon [matTooltip]=\"premiumTooltipText\" [name]=\"'Premium'\" *ngIf=\"showPremiumIcon\"></ui-icon>\n </div>\n </mat-panel-title>\n <mat-panel-description>\n <div class=\"accordion-actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </mat-panel-description>\n </mat-expansion-panel-header>\n <ng-content></ng-content>\n </mat-expansion-panel>\n</mat-accordion>\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:#
|
|
58
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: AccordionComponent, selector: "ui-accordion", inputs: { label: "label", open: ["open", "open", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], showPremiumIcon: ["showPremiumIcon", "showPremiumIcon", booleanAttribute], premiumTooltipText: "premiumTooltipText", applicationTheme: "applicationTheme" }, outputs: { closed: "closed", opened: "opened" }, ngImport: i0, template: "<mat-accordion class=\"accordion-wrapper\" [ngClass]=\"{ disabled }\">\n <mat-expansion-panel [expanded]=\"open\"\n (opened)=\"toggle(true)\"\n (closed)=\"toggle(false)\">\n <mat-expansion-panel-header >\n <mat-panel-title>\n <div class=\"accordion-label\">\n {{ label }}\n <ui-icon [matTooltip]=\"premiumTooltipText\" [name]=\"'Premium'\" *ngIf=\"showPremiumIcon\"></ui-icon>\n </div>\n </mat-panel-title>\n <mat-panel-description>\n <div class=\"accordion-actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </mat-panel-description>\n </mat-expansion-panel-header>\n <ng-content></ng-content>\n </mat-expansion-panel>\n</mat-accordion>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-center,.mat-expansion-panel-header .accordion-label,.mat-expansion-panel-header-description .accordion-actions{display:flex;justify-content:center;align-items:center}:host ::ng-deep .mat-expansion-panel-body{background:#ededed;border-radius:8px;width:calc(100% - 32px);padding:0;margin:0 auto}:host ::ng-deep .mat-expansion-indicator:after{color:#000!important;margin-top:-6px}.mat-expansion-panel{box-shadow:unset!important;background:transparent}.accordion-wrapper.disabled{opacity:.5;pointer-events:none}.mat-expansion-panel-header-description{justify-content:end;margin:0 16px 0 8px}.mat-expansion-panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 22px 12px 16px;height:48px!important;border-radius:8px;z-index:1;border:1px solid transparent}.mat-expansion-panel-header:focus{border:1px dashed #888888!important}.mat-expansion-panel-header:hover{background:#f6f6f6!important}.mat-expansion-panel-header .accordion-label{font-size:14px;font-weight:700;gap:8px}::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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i4.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i4.MatExpansionPanelDescription, selector: "mat-panel-description" }] }); }
|
|
59
59
|
}
|
|
60
60
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
61
61
|
type: Component,
|
|
62
|
-
args: [{ selector: 'ui-accordion', template: "<mat-accordion class=\"accordion-wrapper\" [ngClass]=\"{ disabled }\">\n <mat-expansion-panel [expanded]=\"open\"\n (opened)=\"toggle(true)\"\n (closed)=\"toggle(false)\">\n <mat-expansion-panel-header >\n <mat-panel-title>\n <div class=\"accordion-label\">\n {{ label }}\n <ui-icon [matTooltip]=\"premiumTooltipText\" [name]=\"'Premium'\" *ngIf=\"showPremiumIcon\"></ui-icon>\n </div>\n </mat-panel-title>\n <mat-panel-description>\n <div class=\"accordion-actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </mat-panel-description>\n </mat-expansion-panel-header>\n <ng-content></ng-content>\n </mat-expansion-panel>\n</mat-accordion>\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:#
|
|
62
|
+
args: [{ selector: 'ui-accordion', template: "<mat-accordion class=\"accordion-wrapper\" [ngClass]=\"{ disabled }\">\n <mat-expansion-panel [expanded]=\"open\"\n (opened)=\"toggle(true)\"\n (closed)=\"toggle(false)\">\n <mat-expansion-panel-header >\n <mat-panel-title>\n <div class=\"accordion-label\">\n {{ label }}\n <ui-icon [matTooltip]=\"premiumTooltipText\" [name]=\"'Premium'\" *ngIf=\"showPremiumIcon\"></ui-icon>\n </div>\n </mat-panel-title>\n <mat-panel-description>\n <div class=\"accordion-actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </mat-panel-description>\n </mat-expansion-panel-header>\n <ng-content></ng-content>\n </mat-expansion-panel>\n</mat-accordion>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-center,.mat-expansion-panel-header .accordion-label,.mat-expansion-panel-header-description .accordion-actions{display:flex;justify-content:center;align-items:center}:host ::ng-deep .mat-expansion-panel-body{background:#ededed;border-radius:8px;width:calc(100% - 32px);padding:0;margin:0 auto}:host ::ng-deep .mat-expansion-indicator:after{color:#000!important;margin-top:-6px}.mat-expansion-panel{box-shadow:unset!important;background:transparent}.accordion-wrapper.disabled{opacity:.5;pointer-events:none}.mat-expansion-panel-header-description{justify-content:end;margin:0 16px 0 8px}.mat-expansion-panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 22px 12px 16px;height:48px!important;border-radius:8px;z-index:1;border:1px solid transparent}.mat-expansion-panel-header:focus{border:1px dashed #888888!important}.mat-expansion-panel-header:hover{background:#f6f6f6!important}.mat-expansion-panel-header .accordion-label{font-size:14px;font-weight:700;gap:8px}::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"] }]
|
|
63
63
|
}], propDecorators: { label: [{
|
|
64
64
|
type: Input,
|
|
65
65
|
args: [{ required: true }]
|
|
@@ -76,7 +76,7 @@ export class AlertBannerComponent {
|
|
|
76
76
|
this.visible = false;
|
|
77
77
|
}
|
|
78
78
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertBannerComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
79
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AlertBannerComponent, selector: "ui-alert-banner", inputs: { alertType: "alertType", message: "message", includeDismissButton: "includeDismissButton", fixed: "fixed", fullWidth: "fullWidth", linkText: "linkText", linkUrl: "linkUrl", linkTarget: "linkTarget", applicationTheme: "applicationTheme" }, ngImport: i0, template: "<div [ngClass]=\"cssClass\" [@openClose] *ngIf=\"visible\" class=\"alert-container\">\n <div class=\"alert-text\">\n <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n <span [innerHTML]=\"_message\"></span>\n <a *ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n </div>\n <ui-button\n *ngIf=\"includeDismissButton\"\n variant=\"text\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n (buttonClickEvent)=\"dismissClick()\"\n ></ui-button>\n</div>\n", styles: [".bg-teal-60b{background:#
|
|
79
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AlertBannerComponent, selector: "ui-alert-banner", inputs: { alertType: "alertType", message: "message", includeDismissButton: "includeDismissButton", fixed: "fixed", fullWidth: "fullWidth", linkText: "linkText", linkUrl: "linkUrl", linkTarget: "linkTarget", applicationTheme: "applicationTheme" }, ngImport: i0, template: "<div [ngClass]=\"cssClass\" [@openClose] *ngIf=\"visible\" class=\"alert-container\">\n <div class=\"alert-text\">\n <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n <span [innerHTML]=\"_message\"></span>\n <a *ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n </div>\n <ui-button\n *ngIf=\"includeDismissButton\"\n variant=\"text\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n (buttonClickEvent)=\"dismissClick()\"\n ></ui-button>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center;color:#000}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}@media (max-width: 600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .alert-container.fixed{top:0;z-index:98}:host .alert-container.full-width{width:100%;min-width:100%}:host .alert-container a{margin-left:7px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i4.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }], animations: [
|
|
80
80
|
trigger('openClose', [
|
|
81
81
|
transition(':enter', [animate('0.2s ease-out', style({ opacity: 1 }))]),
|
|
82
82
|
transition(':leave', [animate('0.2s ease-in', style({ opacity: 0 }))]),
|
|
@@ -90,7 +90,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
90
90
|
transition(':enter', [animate('0.2s ease-out', style({ opacity: 1 }))]),
|
|
91
91
|
transition(':leave', [animate('0.2s ease-in', style({ opacity: 0 }))]),
|
|
92
92
|
]),
|
|
93
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"cssClass\" [@openClose] *ngIf=\"visible\" class=\"alert-container\">\n <div class=\"alert-text\">\n <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n <span [innerHTML]=\"_message\"></span>\n <a *ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n </div>\n <ui-button\n *ngIf=\"includeDismissButton\"\n variant=\"text\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n (buttonClickEvent)=\"dismissClick()\"\n ></ui-button>\n</div>\n", styles: [".bg-teal-60b{background:#
|
|
93
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"cssClass\" [@openClose] *ngIf=\"visible\" class=\"alert-container\">\n <div class=\"alert-text\">\n <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n <span [innerHTML]=\"_message\"></span>\n <a *ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n </div>\n <ui-button\n *ngIf=\"includeDismissButton\"\n variant=\"text\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n (buttonClickEvent)=\"dismissClick()\"\n ></ui-button>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center;color:#000}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}@media (max-width: 600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .alert-container.fixed{top:0;z-index:98}:host .alert-container.full-width{width:100%;min-width:100%}:host .alert-container a{margin-left:7px}\n"] }]
|
|
94
94
|
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; }, propDecorators: { alertType: [{
|
|
95
95
|
type: Input
|
|
96
96
|
}], message: [{
|
|
@@ -110,4 +110,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
110
110
|
}], applicationTheme: [{
|
|
111
111
|
type: Input
|
|
112
112
|
}] } });
|
|
113
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
113
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQtYmFubmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2FsZXJ0LWJhbm5lci9hbGVydC1iYW5uZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYWxlcnQtYmFubmVyL2FsZXJ0LWJhbm5lci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDMUUsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFHbEYsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDhCQUE4QixDQUFDOzs7Ozs7QUFpQjdELE1BQU0sT0FBTyxvQkFBb0I7SUFDL0IsWUFBb0IsWUFBMEI7UUFBMUIsaUJBQVksR0FBWixZQUFZLENBQWM7UUFFOUM7Ozs7O1dBS0c7UUFDTSxjQUFTLEdBQWlCLFNBQVMsQ0FBQztRQVc3Qzs7OztXQUlHO1FBQ00seUJBQW9CLEdBQUcsSUFBSSxDQUFDO1FBRXJDOzs7O1dBSUc7UUFDTSxVQUFLLEdBQUcsS0FBSyxDQUFDO1FBRXZCOzs7O1dBSUc7UUFDTSxjQUFTLEdBQUcsSUFBSSxDQUFDO1FBRTFCOzs7O1dBSUc7UUFDTSxhQUFRLEdBQUksRUFBRSxDQUFDO1FBU3hCOzs7OztXQUtHO1FBQ00sZUFBVSxHQUFvQixRQUFRLENBQUM7UUFFaEQ7Ozs7OztXQU1HO1FBQ00scUJBQWdCLEdBQXFCLFNBQVMsQ0FBQztRQUd4RCxZQUFPLEdBQUcsSUFBSSxDQUFDO1FBR2YsYUFBUSxHQUFhLEVBQUUsQ0FBQztJQTNFeUIsQ0FBQztJQVVsRDs7OztPQUlHO0lBQ0gsSUFBYSxPQUFPLENBQUMsR0FBVztRQUM5QixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsdUJBQXVCLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDakUsQ0FBQztJQTRERCxRQUFRO1FBQ04sSUFBSSxDQUFDLFFBQVEsR0FBRyxhQUFhLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUN0RCxJQUFJLENBQUMsUUFBUSxHQUFHLGFBQWEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3RELElBQUksQ0FBQyxRQUFRLEdBQUcsYUFBYSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFLElBQUksQ0FBQyxTQUFTLEVBQUUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQzNGLENBQUM7SUFFRCw4Q0FBOEM7SUFDOUMsWUFBWTtRQUNWLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO0lBQ3ZCLENBQUM7K0dBdkZVLG9CQUFvQjttR0FBcEIsb0JBQW9CLCtTQ3JCakMsbWhCQWVBLCtwS0RGYztZQUNWLE9BQU8sQ0FBQyxXQUFXLEVBQUU7Z0JBQ25CLFVBQVUsQ0FBQyxRQUFRLEVBQUUsQ0FBQyxPQUFPLENBQUMsZUFBZSxFQUFFLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQztnQkFDdkUsVUFBVSxDQUFDLFFBQVEsRUFBRSxDQUFDLE9BQU8sQ0FBQyxjQUFjLEVBQUUsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDO2FBQ3ZFLENBQUM7U0FDSDs7NEZBR1Usb0JBQW9CO2tCQVpoQyxTQUFTOytCQUNFLGlCQUFpQixjQUdmO3dCQUNWLE9BQU8sQ0FBQyxXQUFXLEVBQUU7NEJBQ25CLFVBQVUsQ0FBQyxRQUFRLEVBQUUsQ0FBQyxPQUFPLENBQUMsZUFBZSxFQUFFLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQzs0QkFDdkUsVUFBVSxDQUFDLFFBQVEsRUFBRSxDQUFDLE9BQU8sQ0FBQyxjQUFjLEVBQUUsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDO3lCQUN2RSxDQUFDO3FCQUNILG1CQUNnQix1QkFBdUIsQ0FBQyxNQUFNO21HQVd0QyxTQUFTO3NCQUFqQixLQUFLO2dCQU9PLE9BQU87c0JBQW5CLEtBQUs7Z0JBU0csb0JBQW9CO3NCQUE1QixLQUFLO2dCQU9HLEtBQUs7c0JBQWIsS0FBSztnQkFPRyxTQUFTO3NCQUFqQixLQUFLO2dCQU9HLFFBQVE7c0JBQWhCLEtBQUs7Z0JBT0csT0FBTztzQkFBZixLQUFLO2dCQVFHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBU0csZ0JBQWdCO3NCQUF4QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgYW5pbWF0ZSwgc3R5bGUsIHRyYW5zaXRpb24sIHRyaWdnZXIgfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEljb25OYW1lIH0gZnJvbSAnLi4vLi4vY29tcG9uZW50cy9pY29uL2ljb24ubW9kZWwnO1xuaW1wb3J0IHsgQWxlcnRCYXJUeXBlIH0gZnJvbSAnLi4vLi4vdXRpbHMvYWxlcnQtYmFyLm1vZGVsJztcbmltcG9ydCB7IGFsZXJ0QmFyc1V0aWwgfSBmcm9tICcuLi8uLi91dGlscy9hbGVydC1iYXJzLnV0aWxzJztcbmltcG9ydCB7IExpbmtUYXJnZXRUeXBlIH0gZnJvbSAnLi9hbGVydC1iYW5uZXIubW9kZWwnO1xuaW1wb3J0IHsgRG9tU2FuaXRpemVyLCBTYWZlSHRtbCB9IGZyb20gXCJAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyXCI7XG5pbXBvcnQgeyBBcHBsaWNhdGlvblRoZW1lIH0gZnJvbSBcIi4uLy4uL21vZGVscy9hcHBsaWNhdGlvbi10aGVtZS5tb2RlbFwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd1aS1hbGVydC1iYW5uZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vYWxlcnQtYmFubmVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYWxlcnQtYmFubmVyLmNvbXBvbmVudC5zY3NzJ10sXG4gIGFuaW1hdGlvbnM6IFtcbiAgICB0cmlnZ2VyKCdvcGVuQ2xvc2UnLCBbXG4gICAgICB0cmFuc2l0aW9uKCc6ZW50ZXInLCBbYW5pbWF0ZSgnMC4ycyBlYXNlLW91dCcsIHN0eWxlKHsgb3BhY2l0eTogMSB9KSldKSxcbiAgICAgIHRyYW5zaXRpb24oJzpsZWF2ZScsIFthbmltYXRlKCcwLjJzIGVhc2UtaW4nLCBzdHlsZSh7IG9wYWNpdHk6IDAgfSkpXSksXG4gICAgXSksXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBBbGVydEJhbm5lckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZG9tU2FuaXRpemVyOiBEb21TYW5pdGl6ZXIpIHt9XG5cbiAgLyoqXG4gICAqIEFsZXJ0IEJhbm5lciB0eXBlXG4gICAqXG4gICAqIEB0eXBlIHtBbGVydEJhclR5cGV9XG4gICAqIEBtZW1iZXJvZiBBbGVydEJhbm5lckNvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgYWxlcnRUeXBlOiBBbGVydEJhclR5cGUgPSAnc3VjY2Vzcyc7XG5cbiAgLyoqXG4gICAqIEFsZXJ0IGJhbm5lciBtZXNzYWdlXG4gICAqXG4gICAqIEBtZW1iZXJvZiBBbGVydEJhbm5lckNvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgc2V0IG1lc3NhZ2UobXNnOiBzdHJpbmcpIHtcbiAgICB0aGlzLl9tZXNzYWdlID0gdGhpcy5kb21TYW5pdGl6ZXIuYnlwYXNzU2VjdXJpdHlUcnVzdEh0bWwobXNnKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBJbmNsdWRlIGRpc21taXNzIGJ1dHRvblxuICAgKlxuICAgKiBAbWVtYmVyb2YgQWxlcnRCYW5uZXJDb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIGluY2x1ZGVEaXNtaXNzQnV0dG9uID0gdHJ1ZTtcblxuICAvKipcbiAgICogU3RhdGljIG9yIGZpeGVkIHBvc2l0aW9uXG4gICAqXG4gICAqIEBtZW1iZXJvZiBBbGVydEJhbm5lckNvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgZml4ZWQgPSBmYWxzZTtcblxuICAvKipcbiAgICogRnVsbCB3aWR0aCBmb3IgYWxlcnQgYmFubmVyXG4gICAqXG4gICAqIEBtZW1iZXJvZiBBbGVydEJhbm5lckNvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgZnVsbFdpZHRoID0gdHJ1ZTtcblxuICAvKipcbiAgICogTGluayB0ZXh0IHRoYXQgd2lsbCBhcHBlbmRlZCBhdCB0aGUgZW5kIG9mIG1lc3NhZ2VcbiAgICpcbiAgICogQG1lbWJlcm9mIEFsZXJ0QmFubmVyQ29tcG9uZW50XG4gICAqL1xuICBASW5wdXQoKSBsaW5rVGV4dD8gPSAnJztcblxuICAvKipcbiAgICogTGluayB1cmxcbiAgICpcbiAgICogQG1lbWJlcm9mIEFsZXJ0QmFubmVyQ29tcG9uZW50XG4gICAqL1xuICBASW5wdXQoKSBsaW5rVXJsPzogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBMaW5rIHRhcmdldFxuICAgKlxuICAgKiBAdHlwZSB7QHR5cGUge0xpbmtUYXJnZXRUeXBlfX1cbiAgICogQG1lbWJlcm9mIEFsZXJ0QmFubmVyQ29tcG9uZW50XG4gICAqL1xuICBASW5wdXQoKSBsaW5rVGFyZ2V0PzogTGlua1RhcmdldFR5cGUgPSAnX2JsYW5rJztcblxuICAvKipcbiAgICpcbiAgICogRGVmaW5lcyB0aGUgYXBwbGljYXRpb24gdGhlbWVcbiAgICpcbiAgICogQHR5cGUge0FwcGxpY2F0aW9uVGhlbWV9XG4gICAqIEBtZW1iZXJvZiBBbGVydEJhbm5lckNvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgYXBwbGljYXRpb25UaGVtZTogQXBwbGljYXRpb25UaGVtZSA9ICdjbGFzc2ljJztcblxuICBpY29uTmFtZTogSWNvbk5hbWU7XG4gIHZpc2libGUgPSB0cnVlO1xuICBwb3NpdGlvbjogc3RyaW5nO1xuICBjc3NDbGFzczogc3RyaW5nO1xuICBfbWVzc2FnZTogU2FmZUh0bWwgPSAnJztcblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmljb25OYW1lID0gYWxlcnRCYXJzVXRpbC5zZXRJY29uKHRoaXMuYWxlcnRUeXBlKTtcbiAgICB0aGlzLnBvc2l0aW9uID0gYWxlcnRCYXJzVXRpbC5zZXRQb3NpdGlvbih0aGlzLmZpeGVkKTtcbiAgICB0aGlzLmNzc0NsYXNzID0gYWxlcnRCYXJzVXRpbC5zZXRDc3NDbGFzcyh0aGlzLmZ1bGxXaWR0aCwgdGhpcy5hbGVydFR5cGUsIHRoaXMucG9zaXRpb24pO1xuICB9XG5cbiAgLy9IaWRlIHNuYWNrYmFyIHdoZW4gZGlzbWlzcyBidXR0b24gaXMgY2xpY2tlZFxuICBkaXNtaXNzQ2xpY2soKSB7XG4gICAgdGhpcy52aXNpYmxlID0gZmFsc2U7XG4gIH1cbn1cbiIsIjxkaXYgW25nQ2xhc3NdPVwiY3NzQ2xhc3NcIiBbQG9wZW5DbG9zZV0gKm5nSWY9XCJ2aXNpYmxlXCIgY2xhc3M9XCJhbGVydC1jb250YWluZXJcIj5cbiAgPGRpdiBjbGFzcz1cImFsZXJ0LXRleHRcIj5cbiAgICA8dWktaWNvbiBbbmFtZV09XCJpY29uTmFtZVwiIHNpemU9XCIyNFwiPjwvdWktaWNvbj5cbiAgICA8c3BhbiBbaW5uZXJIVE1MXT1cIl9tZXNzYWdlXCI+PC9zcGFuPlxuICAgIDxhICpuZ0lmPVwiISFsaW5rVGV4dFwiIFt0YXJnZXRdPVwibGlua1RhcmdldFwiIFtocmVmXT1cImxpbmtVcmxcIj57eyBsaW5rVGV4dCB9fTwvYT5cbiAgPC9kaXY+XG4gIDx1aS1idXR0b25cbiAgICAqbmdJZj1cImluY2x1ZGVEaXNtaXNzQnV0dG9uXCJcbiAgICB2YXJpYW50PVwidGV4dFwiXG4gICAgW2p1c3RJY29uXT1cInRydWVcIlxuICAgIGNsYXNzPVwiY2xvc2VcIlxuICAgIGljb25OYW1lPVwiQ2xvc2VcIlxuICAgIChidXR0b25DbGlja0V2ZW50KT1cImRpc21pc3NDbGljaygpXCJcbiAgPjwvdWktYnV0dG9uPlxuPC9kaXY+XG4iXX0=
|
|
@@ -336,7 +336,7 @@ export class AutocompleteComponent {
|
|
|
336
336
|
useExisting: forwardRef(() => AutocompleteComponent),
|
|
337
337
|
multi: true,
|
|
338
338
|
},
|
|
339
|
-
], 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 }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth }\">\n <mat-form-field\n [appearance]=\"'outline'\"\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, disabled: disabled, 'hide-bottom-content': !showBottomContent }\"\n >\n <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n <div #formField class=\"input-container\">\n <div\n class=\"selected-items\"\n #tagContainer\n *ngIf=\"\n (type === autocompleteType.LARGE && this.value) ||\n (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n \"\n >\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n *ngFor=\"let valueItem of value; let i = index\"\n [label]=\"valueItem | transformItem: textField\"\n [allowClose]=\"true\"\n [style.display]=\"isOverLapping && i >= overlapIndex ? 'none' : 'block'\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n <ng-container *ngIf=\"isOverLapping\">\n <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n {{ (translationContext + 'SELECTED_AMOUNT') | uiTranslate : language : { numberSelected: (value | slice: overlapIndex).length } }}\n </div>\n <ng-template #overlapTag>\n <ui-tag [readOnly]=\"true\" [label]=\"'+' + (value | slice: overlapIndex).length\"></ui-tag>\n </ng-template>\n </ng-container>\n </div>\n <input\n #trigger=\"matAutocompleteTrigger\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n matInput\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n />\n </div>\n\n <ui-icon\n class=\"remove-selected\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear()\"\n *ngIf=\"inputValue || value?.length\"\n [size]=\"'24'\"\n [name]=\"'Close'\"\n ></ui-icon>\n\n <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]=\"'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n\n <mat-autocomplete\n #autocomplete\n (optionSelected)=\"onOptionSelected($event)\"\n [hideSingleSelectionIndicator]=\"false\"\n >\n <ng-container *ngIf=\"!(searchResult$ | async)\">\n <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\" *ngIf=\"suggestionsList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': suggested | includes: value }\"\n *ngFor=\"let suggested of suggestionsList\"\n [value]=\"suggested\"\n >\n <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\" *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of value\"\n [value]=\"item\"\n >\n <span>{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\" *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n <mat-option\n [class]=\"'selected-option'\"\n [value]=\"value\"\n >\n <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-template #dropdownList>\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </ng-template>\n\n </ng-container>\n\n <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\" *ngIf=\"filteredSuggestionList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container *ngIf=\"!filteredSuggestionList.length; else showItemListWithGroup\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </ng-container>\n\n <ng-template #showItemListWithGroup>\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS') | uiTranslate : language | uppercase\" *ngIf=\"filteredItemsList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-template>\n\n <ng-container *ngIf=\"!filteredItemsList.length && !filteredSuggestionList.length && inputValue\">\n <ng-container *ngIf=\"allowAdd && !isDropdown; else notFound\">\n <mat-option [value]=\"inputValue\">\n <span>{{ ('COMMON.ADD') | uiTranslate : language }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n </ng-container>\n\n <ng-template #notFound>\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate : language }}</span>\n </mat-option>\n </ng-template>\n </ng-container>\n </ng-container>\n </ng-container>\n </mat-autocomplete>\n </mat-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:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:block}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled ui-icon{opacity:.5}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px;width:80px}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:4px}.input-container input.unset-margin{margin-top:unset}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{margin-left:8px;height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}.autocomplete-wrapper ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}.autocomplete-wrapper.full-width .mat-mdc-form-field{width:100%}::ng-deep .mdc-menu-surface.mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-form-field{min-width:330px!important}::ng-deep .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#E9F0F1!important}::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:50%!important}::ng-deep .mat-mdc-text-field-wrapper{padding-left:12px!important}::ng-deep .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .mat-mdc-form-field-infix,::ng-deep .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-option.selected-option{background:#E9F0F1}::ng-deep .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i5.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: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "isDisabled", "applicationTheme"], outputs: ["close", "press"] }, { kind: "component", type: i8.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "directive", type: i9.SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i10.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i11.TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: i12.IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
339
|
+
], 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 }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth }\">\n <mat-form-field\n [appearance]=\"'outline'\"\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, disabled: disabled, 'hide-bottom-content': !showBottomContent }\"\n >\n <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n <div #formField class=\"input-container\">\n <div\n class=\"selected-items\"\n #tagContainer\n *ngIf=\"\n (type === autocompleteType.LARGE && this.value) ||\n (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n \"\n >\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n *ngFor=\"let valueItem of value; let i = index\"\n [label]=\"valueItem | transformItem: textField\"\n [allowClose]=\"true\"\n [style.display]=\"isOverLapping && i >= overlapIndex ? 'none' : 'block'\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n <ng-container *ngIf=\"isOverLapping\">\n <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n {{ (translationContext + 'SELECTED_AMOUNT') | uiTranslate : language : { numberSelected: (value | slice: overlapIndex).length } }}\n </div>\n <ng-template #overlapTag>\n <ui-tag [readOnly]=\"true\" [label]=\"'+' + (value | slice: overlapIndex).length\"></ui-tag>\n </ng-template>\n </ng-container>\n </div>\n <input\n #trigger=\"matAutocompleteTrigger\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n matInput\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n />\n </div>\n\n <ui-icon\n class=\"remove-selected\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear()\"\n *ngIf=\"inputValue || value?.length\"\n [size]=\"'24'\"\n [name]=\"'Close'\"\n ></ui-icon>\n\n <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]=\"'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n\n <mat-autocomplete\n #autocomplete\n (optionSelected)=\"onOptionSelected($event)\"\n [hideSingleSelectionIndicator]=\"false\"\n >\n <ng-container *ngIf=\"!(searchResult$ | async)\">\n <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\" *ngIf=\"suggestionsList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': suggested | includes: value }\"\n *ngFor=\"let suggested of suggestionsList\"\n [value]=\"suggested\"\n >\n <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\" *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of value\"\n [value]=\"item\"\n >\n <span>{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\" *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n <mat-option\n [class]=\"'selected-option'\"\n [value]=\"value\"\n >\n <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-template #dropdownList>\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </ng-template>\n\n </ng-container>\n\n <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\" *ngIf=\"filteredSuggestionList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container *ngIf=\"!filteredSuggestionList.length; else showItemListWithGroup\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </ng-container>\n\n <ng-template #showItemListWithGroup>\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS') | uiTranslate : language | uppercase\" *ngIf=\"filteredItemsList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-template>\n\n <ng-container *ngIf=\"!filteredItemsList.length && !filteredSuggestionList.length && inputValue\">\n <ng-container *ngIf=\"allowAdd && !isDropdown; else notFound\">\n <mat-option [value]=\"inputValue\">\n <span>{{ ('COMMON.ADD') | uiTranslate : language }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n </ng-container>\n\n <ng-template #notFound>\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate : language }}</span>\n </mat-option>\n </ng-template>\n </ng-container>\n </ng-container>\n </ng-container>\n </mat-autocomplete>\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:block}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled ui-icon{opacity:.5}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px;width:80px}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:4px}.input-container input.unset-margin{margin-top:unset}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{margin-left:8px;height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}.autocomplete-wrapper ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}.autocomplete-wrapper.full-width .mat-mdc-form-field{width:100%}::ng-deep .mdc-menu-surface.mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-form-field{min-width:330px!important}::ng-deep .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:50%!important}::ng-deep .mat-mdc-text-field-wrapper{padding-left:12px!important}::ng-deep .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .mat-mdc-form-field-infix,::ng-deep .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i5.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: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "isDisabled", "applicationTheme"], outputs: ["close", "press"] }, { kind: "component", type: i8.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "directive", type: i9.SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i10.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i11.TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: i12.IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
340
340
|
}
|
|
341
341
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
342
342
|
type: Component,
|
|
@@ -346,7 +346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
346
346
|
useExisting: forwardRef(() => AutocompleteComponent),
|
|
347
347
|
multi: true,
|
|
348
348
|
},
|
|
349
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth }\">\n <mat-form-field\n [appearance]=\"'outline'\"\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, disabled: disabled, 'hide-bottom-content': !showBottomContent }\"\n >\n <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n <div #formField class=\"input-container\">\n <div\n class=\"selected-items\"\n #tagContainer\n *ngIf=\"\n (type === autocompleteType.LARGE && this.value) ||\n (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n \"\n >\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n *ngFor=\"let valueItem of value; let i = index\"\n [label]=\"valueItem | transformItem: textField\"\n [allowClose]=\"true\"\n [style.display]=\"isOverLapping && i >= overlapIndex ? 'none' : 'block'\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n <ng-container *ngIf=\"isOverLapping\">\n <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n {{ (translationContext + 'SELECTED_AMOUNT') | uiTranslate : language : { numberSelected: (value | slice: overlapIndex).length } }}\n </div>\n <ng-template #overlapTag>\n <ui-tag [readOnly]=\"true\" [label]=\"'+' + (value | slice: overlapIndex).length\"></ui-tag>\n </ng-template>\n </ng-container>\n </div>\n <input\n #trigger=\"matAutocompleteTrigger\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n matInput\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n />\n </div>\n\n <ui-icon\n class=\"remove-selected\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear()\"\n *ngIf=\"inputValue || value?.length\"\n [size]=\"'24'\"\n [name]=\"'Close'\"\n ></ui-icon>\n\n <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]=\"'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n\n <mat-autocomplete\n #autocomplete\n (optionSelected)=\"onOptionSelected($event)\"\n [hideSingleSelectionIndicator]=\"false\"\n >\n <ng-container *ngIf=\"!(searchResult$ | async)\">\n <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\" *ngIf=\"suggestionsList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': suggested | includes: value }\"\n *ngFor=\"let suggested of suggestionsList\"\n [value]=\"suggested\"\n >\n <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\" *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of value\"\n [value]=\"item\"\n >\n <span>{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\" *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n <mat-option\n [class]=\"'selected-option'\"\n [value]=\"value\"\n >\n <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-template #dropdownList>\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </ng-template>\n\n </ng-container>\n\n <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\" *ngIf=\"filteredSuggestionList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container *ngIf=\"!filteredSuggestionList.length; else showItemListWithGroup\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </ng-container>\n\n <ng-template #showItemListWithGroup>\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS') | uiTranslate : language | uppercase\" *ngIf=\"filteredItemsList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-template>\n\n <ng-container *ngIf=\"!filteredItemsList.length && !filteredSuggestionList.length && inputValue\">\n <ng-container *ngIf=\"allowAdd && !isDropdown; else notFound\">\n <mat-option [value]=\"inputValue\">\n <span>{{ ('COMMON.ADD') | uiTranslate : language }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n </ng-container>\n\n <ng-template #notFound>\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate : language }}</span>\n </mat-option>\n </ng-template>\n </ng-container>\n </ng-container>\n </ng-container>\n </mat-autocomplete>\n </mat-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:#000000}.bg-dark{background:#888888}.bg-medium{background:#E0E0E0}.bg-grey{background:#EDEDED}.bg-light{background:#F6F6F6}.bg-white{background:#ffffff}.bg-box-shadow{background:rgba(0,0,0,.0784313725)}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:block}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled ui-icon{opacity:.5}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px;width:80px}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:4px}.input-container input.unset-margin{margin-top:unset}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{margin-left:8px;height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}.autocomplete-wrapper ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}.autocomplete-wrapper.full-width .mat-mdc-form-field{width:100%}::ng-deep .mdc-menu-surface.mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-form-field{min-width:330px!important}::ng-deep .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#E9F0F1!important}::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:50%!important}::ng-deep .mat-mdc-text-field-wrapper{padding-left:12px!important}::ng-deep .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .mat-mdc-form-field-infix,::ng-deep .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-option.selected-option{background:#E9F0F1}::ng-deep .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}\n"] }]
|
|
349
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth }\">\n <mat-form-field\n [appearance]=\"'outline'\"\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, disabled: disabled, 'hide-bottom-content': !showBottomContent }\"\n >\n <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n <div #formField class=\"input-container\">\n <div\n class=\"selected-items\"\n #tagContainer\n *ngIf=\"\n (type === autocompleteType.LARGE && this.value) ||\n (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n \"\n >\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n *ngFor=\"let valueItem of value; let i = index\"\n [label]=\"valueItem | transformItem: textField\"\n [allowClose]=\"true\"\n [style.display]=\"isOverLapping && i >= overlapIndex ? 'none' : 'block'\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n <ng-container *ngIf=\"isOverLapping\">\n <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n {{ (translationContext + 'SELECTED_AMOUNT') | uiTranslate : language : { numberSelected: (value | slice: overlapIndex).length } }}\n </div>\n <ng-template #overlapTag>\n <ui-tag [readOnly]=\"true\" [label]=\"'+' + (value | slice: overlapIndex).length\"></ui-tag>\n </ng-template>\n </ng-container>\n </div>\n <input\n #trigger=\"matAutocompleteTrigger\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n matInput\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n />\n </div>\n\n <ui-icon\n class=\"remove-selected\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear()\"\n *ngIf=\"inputValue || value?.length\"\n [size]=\"'24'\"\n [name]=\"'Close'\"\n ></ui-icon>\n\n <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]=\"'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n\n <mat-autocomplete\n #autocomplete\n (optionSelected)=\"onOptionSelected($event)\"\n [hideSingleSelectionIndicator]=\"false\"\n >\n <ng-container *ngIf=\"!(searchResult$ | async)\">\n <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\" *ngIf=\"suggestionsList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': suggested | includes: value }\"\n *ngFor=\"let suggested of suggestionsList\"\n [value]=\"suggested\"\n >\n <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\" *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of value\"\n [value]=\"item\"\n >\n <span>{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\" *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n <mat-option\n [class]=\"'selected-option'\"\n [value]=\"value\"\n >\n <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-template #dropdownList>\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </ng-template>\n\n </ng-container>\n\n <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\" *ngIf=\"filteredSuggestionList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container *ngIf=\"!filteredSuggestionList.length; else showItemListWithGroup\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </ng-container>\n\n <ng-template #showItemListWithGroup>\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS') | uiTranslate : language | uppercase\" *ngIf=\"filteredItemsList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [name]=\"'Check'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-template>\n\n <ng-container *ngIf=\"!filteredItemsList.length && !filteredSuggestionList.length && inputValue\">\n <ng-container *ngIf=\"allowAdd && !isDropdown; else notFound\">\n <mat-option [value]=\"inputValue\">\n <span>{{ ('COMMON.ADD') | uiTranslate : language }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n </ng-container>\n\n <ng-template #notFound>\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate : language }}</span>\n </mat-option>\n </ng-template>\n </ng-container>\n </ng-container>\n </ng-container>\n </mat-autocomplete>\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:block}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled ui-icon{opacity:.5}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px;width:80px}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:4px}.input-container input.unset-margin{margin-top:unset}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{margin-left:8px;height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}.autocomplete-wrapper ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}.autocomplete-wrapper.full-width .mat-mdc-form-field{width:100%}::ng-deep .mdc-menu-surface.mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-form-field{min-width:330px!important}::ng-deep .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:50%!important}::ng-deep .mat-mdc-text-field-wrapper{padding-left:12px!important}::ng-deep .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .mat-mdc-form-field-infix,::ng-deep .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}\n"] }]
|
|
350
350
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { itemsList: [{
|
|
351
351
|
type: Input
|
|
352
352
|
}], suggestionsList: [{
|
|
@@ -59,11 +59,11 @@ export class AvatarComponent {
|
|
|
59
59
|
this.editClick.emit(event);
|
|
60
60
|
}
|
|
61
61
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
62
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AvatarComponent, selector: "ui-avatar", inputs: { size: "size", imageUrl: "imageUrl", name: "name", tooltipText: "tooltipText", allowEdit: "allowEdit", applicationTheme: "applicationTheme" }, outputs: { editClick: "editClick" }, ngImport: i0, template: "<div\n class=\"avatar-container\"\n [attr.type]=\"!imageUrl && !name ? 'icon' : 'initials'\"\n [ngClass]=\"[size]\"\n>\n <span *ngIf=\"name && !imageUrl\">\n {{ name | nameInitials }}\n </span>\n <img *ngIf=\"imageUrl\" [attr.src]=\"imageUrl\" [alt]=\"'profile-image'\">\n <ui-icon color=\"dark\" [size]=\"iconSize[size]\" *ngIf=\"!imageUrl && !name\" [name]=\"'User-profile'\"></ui-icon>\n <div class=\"edit-avatar\" *ngIf=\"size === avatarSize.LARGE && allowEdit\">\n <ui-button\n [companyColor]=\"'black'\"\n [size]=\"'small'\"\n [iconName]=\"'Edit'\"\n [variant]=\"'icon-button'\"\n [tooltip]=\"tooltipText\"\n (buttonClickEvent)=\"onEditClick($event)\"\n ></ui-button>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#
|
|
62
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AvatarComponent, selector: "ui-avatar", inputs: { size: "size", imageUrl: "imageUrl", name: "name", tooltipText: "tooltipText", allowEdit: "allowEdit", applicationTheme: "applicationTheme" }, outputs: { editClick: "editClick" }, ngImport: i0, template: "<div\n class=\"avatar-container\"\n [attr.type]=\"!imageUrl && !name ? 'icon' : 'initials'\"\n [ngClass]=\"[size]\"\n>\n <span *ngIf=\"name && !imageUrl\">\n {{ name | nameInitials }}\n </span>\n <img *ngIf=\"imageUrl\" [attr.src]=\"imageUrl\" [alt]=\"'profile-image'\">\n <ui-icon color=\"dark\" [size]=\"iconSize[size]\" *ngIf=\"!imageUrl && !name\" [name]=\"'User-profile'\"></ui-icon>\n <div class=\"edit-avatar\" *ngIf=\"size === avatarSize.LARGE && allowEdit\">\n <ui-button\n [companyColor]=\"'black'\"\n [size]=\"'small'\"\n [iconName]=\"'Edit'\"\n [variant]=\"'icon-button'\"\n [tooltip]=\"tooltipText\"\n (buttonClickEvent)=\"onEditClick($event)\"\n ></ui-button>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host .clickable{cursor:pointer}:host .non-clickable{pointer-events:none}:host .avatar-container{font-family:Open Sans,sans-serif;font-weight:400;display:flex;justify-content:center;align-items:center;border-radius:100%;background:#cbd6cb;position:relative;-webkit-user-select:none;user-select:none}:host .avatar-container[type=icon]{background:#e0e0e0}:host .avatar-container img{width:100%;height:100%;object-fit:cover;border-radius:100%}:host .avatar-container.small{width:24px;height:24px;font-size:10px}:host .avatar-container.medium{width:48px;height:48px;font-size:20px}:host .avatar-container.large{width:120px;height:120px;font-size:50px;letter-spacing:-2}:host .avatar-container .edit-avatar{display:flex;justify-content:center;align-items:center;position:absolute;right:0;bottom:0;background:#f6f6f6;width:32px;height:32px;border-radius:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: i3.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: i4.NameInitialsPipe, name: "nameInitials" }] }); }
|
|
63
63
|
}
|
|
64
64
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
65
65
|
type: Component,
|
|
66
|
-
args: [{ selector: 'ui-avatar', template: "<div\n class=\"avatar-container\"\n [attr.type]=\"!imageUrl && !name ? 'icon' : 'initials'\"\n [ngClass]=\"[size]\"\n>\n <span *ngIf=\"name && !imageUrl\">\n {{ name | nameInitials }}\n </span>\n <img *ngIf=\"imageUrl\" [attr.src]=\"imageUrl\" [alt]=\"'profile-image'\">\n <ui-icon color=\"dark\" [size]=\"iconSize[size]\" *ngIf=\"!imageUrl && !name\" [name]=\"'User-profile'\"></ui-icon>\n <div class=\"edit-avatar\" *ngIf=\"size === avatarSize.LARGE && allowEdit\">\n <ui-button\n [companyColor]=\"'black'\"\n [size]=\"'small'\"\n [iconName]=\"'Edit'\"\n [variant]=\"'icon-button'\"\n [tooltip]=\"tooltipText\"\n (buttonClickEvent)=\"onEditClick($event)\"\n ></ui-button>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#
|
|
66
|
+
args: [{ selector: 'ui-avatar', template: "<div\n class=\"avatar-container\"\n [attr.type]=\"!imageUrl && !name ? 'icon' : 'initials'\"\n [ngClass]=\"[size]\"\n>\n <span *ngIf=\"name && !imageUrl\">\n {{ name | nameInitials }}\n </span>\n <img *ngIf=\"imageUrl\" [attr.src]=\"imageUrl\" [alt]=\"'profile-image'\">\n <ui-icon color=\"dark\" [size]=\"iconSize[size]\" *ngIf=\"!imageUrl && !name\" [name]=\"'User-profile'\"></ui-icon>\n <div class=\"edit-avatar\" *ngIf=\"size === avatarSize.LARGE && allowEdit\">\n <ui-button\n [companyColor]=\"'black'\"\n [size]=\"'small'\"\n [iconName]=\"'Edit'\"\n [variant]=\"'icon-button'\"\n [tooltip]=\"tooltipText\"\n (buttonClickEvent)=\"onEditClick($event)\"\n ></ui-button>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host .clickable{cursor:pointer}:host .non-clickable{pointer-events:none}:host .avatar-container{font-family:Open Sans,sans-serif;font-weight:400;display:flex;justify-content:center;align-items:center;border-radius:100%;background:#cbd6cb;position:relative;-webkit-user-select:none;user-select:none}:host .avatar-container[type=icon]{background:#e0e0e0}:host .avatar-container img{width:100%;height:100%;object-fit:cover;border-radius:100%}:host .avatar-container.small{width:24px;height:24px;font-size:10px}:host .avatar-container.medium{width:48px;height:48px;font-size:20px}:host .avatar-container.large{width:120px;height:120px;font-size:50px;letter-spacing:-2}:host .avatar-container .edit-avatar{display:flex;justify-content:center;align-items:center;position:absolute;right:0;bottom:0;background:#f6f6f6;width:32px;height:32px;border-radius:100%}\n"] }]
|
|
67
67
|
}], propDecorators: { size: [{
|
|
68
68
|
type: Input
|
|
69
69
|
}], imageUrl: [{
|