@testgorilla/tgo-ui 1.13.33 → 1.13.35
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/accordion/accordion.component.d.ts +20 -2
- package/components/accordion/accordion.model.d.ts +1 -0
- package/components/alert-banner/alert-banner.component.d.ts +15 -12
- package/components/button/button.component.d.ts +15 -1
- package/components/checkbox/checkbox.component.d.ts +15 -1
- package/components/checkbox/checkbox.component.module.d.ts +2 -1
- package/components/datepicker/datepicker.component.d.ts +2 -1
- package/components/dialog/dialog.service.d.ts +2 -1
- package/components/empty-state/empty-state.component.d.ts +37 -3
- package/components/empty-state/empty-state.model.d.ts +3 -0
- package/components/field/field.component.d.ts +16 -1
- package/components/file-upload/file-upload.component.d.ts +15 -1
- package/components/icon/icon.config.d.ts +1 -1
- package/components/logo/logo.component.d.ts +10 -1
- package/components/navbar/navbar.component.d.ts +10 -2
- package/components/navbar/navbar.component.module.d.ts +2 -1
- package/components/overflow-menu/overflow-menu.component.d.ts +15 -1
- package/components/page-header/page-header.component.module.d.ts +1 -1
- package/components/progress-bar/progress-bar.component.d.ts +4 -2
- package/components/radio-button/radio-button.component.d.ts +15 -1
- package/components/radio-button/radio-button.component.module.d.ts +2 -1
- package/components/rating/rating.component.d.ts +15 -1
- package/components/rating/rating.component.module.d.ts +2 -1
- package/components/segmented-bar/segmented-bar.component.d.ts +15 -1
- package/components/segmented-bar/segmented-bar.component.module.d.ts +2 -1
- package/components/segmented-button/segmented-button.component.d.ts +23 -0
- package/components/segmented-button/segmented-button.component.module.d.ts +10 -0
- package/components/segmented-button/segmented-button.model.d.ts +6 -0
- package/components/stepper/stepper.component.d.ts +15 -1
- package/components/stepper/stepper.component.module.d.ts +2 -1
- package/components/table/sentence-case.pipe.d.ts +7 -0
- package/components/table/table.component.d.ts +2 -1
- package/components/table/table.component.module.d.ts +11 -10
- package/components/tag/tag.component.d.ts +15 -1
- package/components/tag/tag.component.module.d.ts +2 -1
- package/components/toggle/toggle.component.d.ts +15 -1
- package/components/toggle/toggle.component.module.d.ts +2 -1
- package/esm2022/assets/i18n/es.json +73 -1
- package/esm2022/components/accordion/accordion.component.mjs +15 -3
- package/esm2022/components/accordion/accordion.model.mjs +2 -0
- package/esm2022/components/alert-banner/alert-banner.component.mjs +16 -13
- package/esm2022/components/autocomplete/autocomplete.component.mjs +1 -1
- package/esm2022/components/avatar/avatar.component.mjs +2 -2
- package/esm2022/components/banner-action/banner-action.component.mjs +1 -1
- package/esm2022/components/button/button.component.mjs +14 -3
- package/esm2022/components/checkbox/checkbox.component.mjs +15 -4
- package/esm2022/components/checkbox/checkbox.component.module.mjs +5 -4
- package/esm2022/components/datepicker/datepicker.component.mjs +6 -3
- package/esm2022/components/dialog/dialog.component.mjs +2 -2
- package/esm2022/components/dialog/dialog.service.mjs +3 -3
- package/esm2022/components/dropdown/dropdown.component.mjs +1 -1
- package/esm2022/components/empty-state/empty-state.component.mjs +63 -5
- package/esm2022/components/empty-state/empty-state.model.mjs +2 -0
- package/esm2022/components/field/field.component.mjs +16 -4
- package/esm2022/components/file-upload/file-upload.component.mjs +15 -4
- package/esm2022/components/icon/icon.config.mjs +3 -1
- package/esm2022/components/logo/logo.component.mjs +14 -3
- package/esm2022/components/navbar/navbar.component.mjs +15 -4
- package/esm2022/components/navbar/navbar.component.module.mjs +7 -3
- package/esm2022/components/overflow-menu/overflow-menu.component.mjs +14 -3
- package/esm2022/components/page-header/page-header.component.mjs +1 -1
- package/esm2022/components/page-header/page-header.component.module.mjs +3 -2
- package/esm2022/components/progress-bar/progress-bar.component.mjs +8 -11
- package/esm2022/components/radio-button/radio-button.component.mjs +14 -3
- package/esm2022/components/radio-button/radio-button.component.module.mjs +5 -4
- package/esm2022/components/rating/rating.component.mjs +14 -3
- package/esm2022/components/rating/rating.component.module.mjs +5 -4
- package/esm2022/components/segmented-bar/segmented-bar.component.mjs +14 -3
- package/esm2022/components/segmented-bar/segmented-bar.component.module.mjs +5 -4
- package/esm2022/components/segmented-button/segmented-button.component.mjs +53 -0
- package/esm2022/components/segmented-button/segmented-button.component.module.mjs +32 -0
- package/esm2022/components/segmented-button/segmented-button.model.mjs +2 -0
- package/esm2022/components/side-sheet/side-sheet.component.mjs +1 -1
- package/esm2022/components/slider/slider.component.mjs +3 -3
- package/esm2022/components/snackbar/snackbar.component.mjs +3 -3
- package/esm2022/components/stepper/stepper.component.mjs +14 -3
- package/esm2022/components/stepper/stepper.component.module.mjs +7 -3
- package/esm2022/components/table/sentence-case.pipe.mjs +19 -0
- package/esm2022/components/table/table.component.mjs +10 -3
- package/esm2022/components/table/table.component.module.mjs +4 -3
- package/esm2022/components/tabs/tabs.component.mjs +3 -3
- package/esm2022/components/tag/tag.component.mjs +14 -3
- package/esm2022/components/tag/tag.component.module.mjs +5 -4
- package/esm2022/components/toggle/toggle.component.mjs +15 -4
- package/esm2022/components/toggle/toggle.component.module.mjs +5 -4
- package/esm2022/components/tooltip/tooltip.component.mjs +3 -3
- package/esm2022/public-api.mjs +7 -1
- package/esm2022/utils/alert-bar.model.mjs +1 -1
- package/esm2022/utils/alert-bars.utils.mjs +3 -3
- package/fesm2022/testgorilla-tgo-ui.mjs +652 -247
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +5 -0
- package/src/assets/i18n/da-dk.json +77 -0
- package/src/assets/i18n/de.json +77 -0
- package/src/assets/i18n/es.json +74 -2
- package/src/assets/i18n/fr.json +77 -0
- package/src/assets/i18n/it-it.json +77 -0
- package/src/assets/i18n/ja-jp.json +77 -0
- package/src/assets/i18n/nb-no.json +77 -0
- package/src/assets/i18n/nl.json +77 -0
- package/src/assets/i18n/pl-pl.json +77 -0
- package/src/assets/i18n/pt-br.json +77 -0
- package/src/assets/i18n/sv-se.json +77 -0
- package/src/assets/icons/rebrand/Disconnected-in-line.svg +12 -0
- package/src/assets/icons/rebrand/Empty-search-in-line.svg +12 -0
- package/src/assets/icons/rebrand/Lost-found-404-in-line.svg +12 -0
- package/src/assets/icons/rebrand/Premium-circle-in-line.svg +5 -0
- package/src/theme/_tooltip.scss +103 -60
- package/src/theme/_typography.scss +2 -2
- package/src/theme/theme.scss +1 -1
- package/utils/alert-bar.model.d.ts +1 -0
- package/utils/alert-bars.utils.d.ts +2 -1
|
@@ -17,23 +17,24 @@ export class AlertBannerComponent {
|
|
|
17
17
|
*/
|
|
18
18
|
this.alertType = 'success';
|
|
19
19
|
/**
|
|
20
|
-
*
|
|
20
|
+
* Alert Banner variant
|
|
21
21
|
*
|
|
22
|
+
* @type {AlertVariant}
|
|
22
23
|
* @memberof AlertBannerComponent
|
|
23
24
|
*/
|
|
24
|
-
this.
|
|
25
|
+
this.alertVariant = 'banner';
|
|
25
26
|
/**
|
|
26
|
-
*
|
|
27
|
+
* Include dismmiss button
|
|
27
28
|
*
|
|
28
29
|
* @memberof AlertBannerComponent
|
|
29
30
|
*/
|
|
30
|
-
this.
|
|
31
|
+
this.includeDismissButton = true;
|
|
31
32
|
/**
|
|
32
|
-
*
|
|
33
|
+
* Include shadow or not
|
|
33
34
|
*
|
|
34
35
|
* @memberof AlertBannerComponent
|
|
35
36
|
*/
|
|
36
|
-
this.
|
|
37
|
+
this.shadow = false;
|
|
37
38
|
/**
|
|
38
39
|
* Link text that will appended at the end of message
|
|
39
40
|
*
|
|
@@ -69,14 +70,16 @@ export class AlertBannerComponent {
|
|
|
69
70
|
ngOnInit() {
|
|
70
71
|
this.iconName = alertBarsUtil.setIcon(this.alertType);
|
|
71
72
|
this.position = alertBarsUtil.setPosition(this.fixed);
|
|
72
|
-
this.
|
|
73
|
+
this.fixed = this.alertVariant === 'banner' ? true : false;
|
|
74
|
+
this.fullWidth = this.alertVariant === 'banner' ? true : false;
|
|
75
|
+
this.cssClass = alertBarsUtil.setCssClass(this.fullWidth, this.alertType, this.position, this.alertVariant);
|
|
73
76
|
}
|
|
74
77
|
//Hide snackbar when dismiss button is clicked
|
|
75
78
|
dismissClick() {
|
|
76
79
|
this.visible = false;
|
|
77
80
|
}
|
|
78
81
|
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",
|
|
82
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AlertBannerComponent, selector: "ui-alert-banner", inputs: { alertType: "alertType", alertVariant: "alertVariant", message: "message", includeDismissButton: "includeDismissButton", shadow: "shadow", linkText: "linkText", linkUrl: "linkUrl", linkTarget: "linkTarget", applicationTheme: "applicationTheme" }, ngImport: i0, template: "<div [ngClass]=\"cssClass\" [@openClose] *ngIf=\"visible\" class=\"alert-container\" [attr.theme]=\"applicationTheme\" [class.shadow]=\"alertVariant === 'callout' && shadow ? true : false\">\n <div class=\"alert-text\">\n <ui-icon class=\"left-icon\" [name]=\"iconName\" size=\"24\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n <span [innerHTML]=\"_message\"></span>\n <a *ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n </div>\n <ui-button\n *ngIf=\"includeDismissButton && applicationTheme === 'classic'\"\n variant=\"text\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n (buttonClickEvent)=\"dismissClick()\"\n ></ui-button>\n <ui-icon\n class=\"right-icon\"\n *ngIf=\"includeDismissButton && applicationTheme !== 'classic'\"\n applicationTheme='light'\n [name]=\"'Close'\"\n (click)=\"dismissClick()\"\n ></ui-icon>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center;color:#000}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}:host .alert-container[theme=dark].success,:host .alert-container[theme=light].success,:host .snackbar-container[theme=dark].success,:host .snackbar-container[theme=light].success{background-color:#e2f4b3}:host .alert-container[theme=dark].info,:host .alert-container[theme=light].info,:host .snackbar-container[theme=dark].info,:host .snackbar-container[theme=light].info{background-color:#d9e8ff}:host .alert-container[theme=dark].warning,:host .alert-container[theme=light].warning,:host .snackbar-container[theme=dark].warning,:host .snackbar-container[theme=light].warning{background-color:#ffe1b3}:host .alert-container[theme=dark].error,:host .alert-container[theme=light].error,:host .snackbar-container[theme=dark].error,:host .snackbar-container[theme=light].error{background-color:#ffac9a}@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}:host .alert-container[theme=dark].banner,:host .alert-container[theme=light].banner{border-radius:0}:host .alert-container[theme=dark].callout,:host .alert-container[theme=light].callout{border-radius:10px}:host .alert-container[theme=dark].shadow,:host .alert-container[theme=light].shadow{box-shadow:0 4px 16px #2424240a}:host .alert-container[theme=dark] .left-icon,:host .alert-container[theme=light] .left-icon{margin-right:8px}:host .alert-container[theme=dark] .right-icon,:host .alert-container[theme=light] .right-icon{cursor:pointer;margin-left:4px;margin-right:2px}\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", "ariaLabel", "ariaRequired"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i4.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }], animations: [
|
|
80
83
|
trigger('openClose', [
|
|
81
84
|
transition(':enter', [animate('0.2s ease-out', style({ opacity: 1 }))]),
|
|
82
85
|
transition(':leave', [animate('0.2s ease-in', style({ opacity: 0 }))]),
|
|
@@ -90,16 +93,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
90
93
|
transition(':enter', [animate('0.2s ease-out', style({ opacity: 1 }))]),
|
|
91
94
|
transition(':leave', [animate('0.2s ease-in', style({ opacity: 0 }))]),
|
|
92
95
|
]),
|
|
93
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"cssClass\" [@openClose] *ngIf=\"visible\" class=\"alert-container\" [attr.theme]=\"applicationTheme\">\n <div class=\"alert-text\">\n <ui-icon class=\"left-icon\" [name]=\"iconName\" size=\"24\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n <span [innerHTML]=\"_message\"></span>\n <a *ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n </div>\n <ui-button\n *ngIf=\"includeDismissButton && applicationTheme === 'classic'\"\n variant=\"text\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n (buttonClickEvent)=\"dismissClick()\"\n ></ui-button>\n <ui-icon\n class=\"right-icon\"\n *ngIf=\"includeDismissButton && applicationTheme !== 'classic'\"\n applicationTheme='light'\n [name]=\"'Close'\"\n (click)=\"dismissClick()\"\n ></ui-icon>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center;color:#000}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}:host .alert-container[theme=dark].success,:host .alert-container[theme=light].success,:host .snackbar-container[theme=dark].success,:host .snackbar-container[theme=light].success{background-color:#e2f4b3}:host .alert-container[theme=dark].info,:host .alert-container[theme=light].info,:host .snackbar-container[theme=dark].info,:host .snackbar-container[theme=light].info{background-color:#d9e8ff}:host .alert-container[theme=dark].warning,:host .alert-container[theme=light].warning,:host .snackbar-container[theme=dark].warning,:host .snackbar-container[theme=light].warning{background-color:#ffe1b3}:host .alert-container[theme=dark].error,:host .alert-container[theme=light].error,:host .snackbar-container[theme=dark].error,:host .snackbar-container[theme=light].error{background-color:#ffac9a}@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}:host .alert-container[theme=dark] .left-icon,:host .alert-container[theme=light] .left-icon{margin-right:8px}:host .alert-container[theme=dark] .right-icon,:host .alert-container[theme=light] .right-icon{cursor:pointer;margin-left:4px;margin-right:2px}\n"] }]
|
|
96
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"cssClass\" [@openClose] *ngIf=\"visible\" class=\"alert-container\" [attr.theme]=\"applicationTheme\" [class.shadow]=\"alertVariant === 'callout' && shadow ? true : false\">\n <div class=\"alert-text\">\n <ui-icon class=\"left-icon\" [name]=\"iconName\" size=\"24\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n <span [innerHTML]=\"_message\"></span>\n <a *ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n </div>\n <ui-button\n *ngIf=\"includeDismissButton && applicationTheme === 'classic'\"\n variant=\"text\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n (buttonClickEvent)=\"dismissClick()\"\n ></ui-button>\n <ui-icon\n class=\"right-icon\"\n *ngIf=\"includeDismissButton && applicationTheme !== 'classic'\"\n applicationTheme='light'\n [name]=\"'Close'\"\n (click)=\"dismissClick()\"\n ></ui-icon>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center;color:#000}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}:host .alert-container[theme=dark].success,:host .alert-container[theme=light].success,:host .snackbar-container[theme=dark].success,:host .snackbar-container[theme=light].success{background-color:#e2f4b3}:host .alert-container[theme=dark].info,:host .alert-container[theme=light].info,:host .snackbar-container[theme=dark].info,:host .snackbar-container[theme=light].info{background-color:#d9e8ff}:host .alert-container[theme=dark].warning,:host .alert-container[theme=light].warning,:host .snackbar-container[theme=dark].warning,:host .snackbar-container[theme=light].warning{background-color:#ffe1b3}:host .alert-container[theme=dark].error,:host .alert-container[theme=light].error,:host .snackbar-container[theme=dark].error,:host .snackbar-container[theme=light].error{background-color:#ffac9a}@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}:host .alert-container[theme=dark].banner,:host .alert-container[theme=light].banner{border-radius:0}:host .alert-container[theme=dark].callout,:host .alert-container[theme=light].callout{border-radius:10px}:host .alert-container[theme=dark].shadow,:host .alert-container[theme=light].shadow{box-shadow:0 4px 16px #2424240a}:host .alert-container[theme=dark] .left-icon,:host .alert-container[theme=light] .left-icon{margin-right:8px}:host .alert-container[theme=dark] .right-icon,:host .alert-container[theme=light] .right-icon{cursor:pointer;margin-left:4px;margin-right:2px}\n"] }]
|
|
94
97
|
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; }, propDecorators: { alertType: [{
|
|
95
98
|
type: Input
|
|
99
|
+
}], alertVariant: [{
|
|
100
|
+
type: Input
|
|
96
101
|
}], message: [{
|
|
97
102
|
type: Input
|
|
98
103
|
}], includeDismissButton: [{
|
|
99
104
|
type: Input
|
|
100
|
-
}],
|
|
101
|
-
type: Input
|
|
102
|
-
}], fullWidth: [{
|
|
105
|
+
}], shadow: [{
|
|
103
106
|
type: Input
|
|
104
107
|
}], linkText: [{
|
|
105
108
|
type: Input
|
|
@@ -110,4 +113,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
110
113
|
}], applicationTheme: [{
|
|
111
114
|
type: Input
|
|
112
115
|
}] } });
|
|
113
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
116
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQtYmFubmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2FsZXJ0LWJhbm5lci9hbGVydC1iYW5uZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYWxlcnQtYmFubmVyL2FsZXJ0LWJhbm5lci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDMUUsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFHbEYsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDhCQUE4QixDQUFDOzs7Ozs7QUFpQjdELE1BQU0sT0FBTyxvQkFBb0I7SUFDL0IsWUFBb0IsWUFBMEI7UUFBMUIsaUJBQVksR0FBWixZQUFZLENBQWM7UUFFOUM7Ozs7O1dBS0c7UUFDTSxjQUFTLEdBQWlCLFNBQVMsQ0FBQztRQUU3Qzs7Ozs7V0FLRztRQUNNLGlCQUFZLEdBQWlCLFFBQVEsQ0FBQztRQVcvQzs7OztXQUlHO1FBQ00seUJBQW9CLEdBQUcsSUFBSSxDQUFDO1FBRXJDOzs7O1dBSUc7UUFDTSxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBRXhCOzs7O1dBSUc7UUFDTSxhQUFRLEdBQUksRUFBRSxDQUFDO1FBU3hCOzs7OztXQUtHO1FBQ00sZUFBVSxHQUFvQixRQUFRLENBQUM7UUFFaEQ7Ozs7OztXQU1HO1FBQ00scUJBQWdCLEdBQXFCLFNBQVMsQ0FBQztRQUd4RCxZQUFPLEdBQUcsSUFBSSxDQUFDO1FBS2YsYUFBUSxHQUFhLEVBQUUsQ0FBQztJQTlFeUIsQ0FBQztJQWtCbEQ7Ozs7T0FJRztJQUNILElBQWEsT0FBTyxDQUFDLEdBQVc7UUFDOUIsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLHVCQUF1QixDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ2pFLENBQUM7SUF1REQsUUFBUTtRQUNOLElBQUksQ0FBQyxRQUFRLEdBQUcsYUFBYSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDdEQsSUFBSSxDQUFDLFFBQVEsR0FBRyxhQUFhLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN0RCxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxZQUFZLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQztRQUMzRCxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxZQUFZLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQztRQUMvRCxJQUFJLENBQUMsUUFBUSxHQUFHLGFBQWEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxJQUFJLENBQUMsU0FBUyxFQUFFLElBQUksQ0FBQyxRQUFRLEVBQUUsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQzlHLENBQUM7SUFFRCw4Q0FBOEM7SUFDOUMsWUFBWTtRQUNWLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO0lBQ3ZCLENBQUM7K0dBNUZVLG9CQUFvQjttR0FBcEIsb0JBQW9CLHVUQ3JCakMsMjZCQXNCQSw2aE5EVGM7WUFDVixPQUFPLENBQUMsV0FBVyxFQUFFO2dCQUNuQixVQUFVLENBQUMsUUFBUSxFQUFFLENBQUMsT0FBTyxDQUFDLGVBQWUsRUFBRSxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUM7Z0JBQ3ZFLFVBQVUsQ0FBQyxRQUFRLEVBQUUsQ0FBQyxPQUFPLENBQUMsY0FBYyxFQUFFLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQzthQUN2RSxDQUFDO1NBQ0g7OzRGQUdVLG9CQUFvQjtrQkFaaEMsU0FBUzsrQkFDRSxpQkFBaUIsY0FHZjt3QkFDVixPQUFPLENBQUMsV0FBVyxFQUFFOzRCQUNuQixVQUFVLENBQUMsUUFBUSxFQUFFLENBQUMsT0FBTyxDQUFDLGVBQWUsRUFBRSxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUM7NEJBQ3ZFLFVBQVUsQ0FBQyxRQUFRLEVBQUUsQ0FBQyxPQUFPLENBQUMsY0FBYyxFQUFFLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQzt5QkFDdkUsQ0FBQztxQkFDSCxtQkFDZ0IsdUJBQXVCLENBQUMsTUFBTTttR0FXdEMsU0FBUztzQkFBakIsS0FBSztnQkFRRyxZQUFZO3NCQUFwQixLQUFLO2dCQU9PLE9BQU87c0JBQW5CLEtBQUs7Z0JBU0csb0JBQW9CO3NCQUE1QixLQUFLO2dCQU9HLE1BQU07c0JBQWQsS0FBSztnQkFPRyxRQUFRO3NCQUFoQixLQUFLO2dCQU9HLE9BQU87c0JBQWYsS0FBSztnQkFRRyxVQUFVO3NCQUFsQixLQUFLO2dCQVNHLGdCQUFnQjtzQkFBeEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGFuaW1hdGUsIHN0eWxlLCB0cmFuc2l0aW9uLCB0cmlnZ2VyIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJY29uTmFtZSB9IGZyb20gJy4uLy4uL2NvbXBvbmVudHMvaWNvbi9pY29uLm1vZGVsJztcbmltcG9ydCB7IEFsZXJ0QmFyVHlwZSwgQWxlcnRWYXJpYW50IH0gZnJvbSAnLi4vLi4vdXRpbHMvYWxlcnQtYmFyLm1vZGVsJztcbmltcG9ydCB7IGFsZXJ0QmFyc1V0aWwgfSBmcm9tICcuLi8uLi91dGlscy9hbGVydC1iYXJzLnV0aWxzJztcbmltcG9ydCB7IExpbmtUYXJnZXRUeXBlIH0gZnJvbSAnLi9hbGVydC1iYW5uZXIubW9kZWwnO1xuaW1wb3J0IHsgRG9tU2FuaXRpemVyLCBTYWZlSHRtbCB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXInO1xuaW1wb3J0IHsgQXBwbGljYXRpb25UaGVtZSB9IGZyb20gJy4uLy4uL21vZGVscy9hcHBsaWNhdGlvbi10aGVtZS5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3VpLWFsZXJ0LWJhbm5lcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9hbGVydC1iYW5uZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9hbGVydC1iYW5uZXIuY29tcG9uZW50LnNjc3MnXSxcbiAgYW5pbWF0aW9uczogW1xuICAgIHRyaWdnZXIoJ29wZW5DbG9zZScsIFtcbiAgICAgIHRyYW5zaXRpb24oJzplbnRlcicsIFthbmltYXRlKCcwLjJzIGVhc2Utb3V0Jywgc3R5bGUoeyBvcGFjaXR5OiAxIH0pKV0pLFxuICAgICAgdHJhbnNpdGlvbignOmxlYXZlJywgW2FuaW1hdGUoJzAuMnMgZWFzZS1pbicsIHN0eWxlKHsgb3BhY2l0eTogMCB9KSldKSxcbiAgICBdKSxcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEFsZXJ0QmFubmVyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBkb21TYW5pdGl6ZXI6IERvbVNhbml0aXplcikge31cblxuICAvKipcbiAgICogQWxlcnQgQmFubmVyIHR5cGVcbiAgICpcbiAgICogQHR5cGUge0FsZXJ0QmFyVHlwZX1cbiAgICogQG1lbWJlcm9mIEFsZXJ0QmFubmVyQ29tcG9uZW50XG4gICAqL1xuICBASW5wdXQoKSBhbGVydFR5cGU6IEFsZXJ0QmFyVHlwZSA9ICdzdWNjZXNzJztcblxuICAvKipcbiAgICogQWxlcnQgQmFubmVyIHZhcmlhbnRcbiAgICpcbiAgICogQHR5cGUge0FsZXJ0VmFyaWFudH1cbiAgICogQG1lbWJlcm9mIEFsZXJ0QmFubmVyQ29tcG9uZW50XG4gICAqL1xuICBASW5wdXQoKSBhbGVydFZhcmlhbnQ6IEFsZXJ0VmFyaWFudCA9ICdiYW5uZXInO1xuXG4gIC8qKlxuICAgKiBBbGVydCBiYW5uZXIgbWVzc2FnZVxuICAgKlxuICAgKiBAbWVtYmVyb2YgQWxlcnRCYW5uZXJDb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIHNldCBtZXNzYWdlKG1zZzogc3RyaW5nKSB7XG4gICAgdGhpcy5fbWVzc2FnZSA9IHRoaXMuZG9tU2FuaXRpemVyLmJ5cGFzc1NlY3VyaXR5VHJ1c3RIdG1sKG1zZyk7XG4gIH1cblxuICAvKipcbiAgICogSW5jbHVkZSBkaXNtbWlzcyBidXR0b25cbiAgICpcbiAgICogQG1lbWJlcm9mIEFsZXJ0QmFubmVyQ29tcG9uZW50XG4gICAqL1xuICBASW5wdXQoKSBpbmNsdWRlRGlzbWlzc0J1dHRvbiA9IHRydWU7XG5cbiAgLyoqXG4gICAqIEluY2x1ZGUgc2hhZG93IG9yIG5vdFxuICAgKlxuICAgKiBAbWVtYmVyb2YgQWxlcnRCYW5uZXJDb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIHNoYWRvdyA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBMaW5rIHRleHQgdGhhdCB3aWxsIGFwcGVuZGVkIGF0IHRoZSBlbmQgb2YgbWVzc2FnZVxuICAgKlxuICAgKiBAbWVtYmVyb2YgQWxlcnRCYW5uZXJDb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIGxpbmtUZXh0PyA9ICcnO1xuXG4gIC8qKlxuICAgKiBMaW5rIHVybFxuICAgKlxuICAgKiBAbWVtYmVyb2YgQWxlcnRCYW5uZXJDb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIGxpbmtVcmw/OiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIExpbmsgdGFyZ2V0XG4gICAqXG4gICAqIEB0eXBlIHtAdHlwZSB7TGlua1RhcmdldFR5cGV9fVxuICAgKiBAbWVtYmVyb2YgQWxlcnRCYW5uZXJDb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIGxpbmtUYXJnZXQ/OiBMaW5rVGFyZ2V0VHlwZSA9ICdfYmxhbmsnO1xuXG4gIC8qKlxuICAgKlxuICAgKiBEZWZpbmVzIHRoZSBhcHBsaWNhdGlvbiB0aGVtZVxuICAgKlxuICAgKiBAdHlwZSB7QXBwbGljYXRpb25UaGVtZX1cbiAgICogQG1lbWJlcm9mIEFsZXJ0QmFubmVyQ29tcG9uZW50XG4gICAqL1xuICBASW5wdXQoKSBhcHBsaWNhdGlvblRoZW1lOiBBcHBsaWNhdGlvblRoZW1lID0gJ2NsYXNzaWMnO1xuXG4gIGljb25OYW1lOiBJY29uTmFtZTtcbiAgdmlzaWJsZSA9IHRydWU7XG4gIGZ1bGxXaWR0aDogYm9vbGVhbjtcbiAgZml4ZWQ6IGJvb2xlYW47XG4gIHBvc2l0aW9uOiBzdHJpbmc7XG4gIGNzc0NsYXNzOiBzdHJpbmc7XG4gIF9tZXNzYWdlOiBTYWZlSHRtbCA9ICcnO1xuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuaWNvbk5hbWUgPSBhbGVydEJhcnNVdGlsLnNldEljb24odGhpcy5hbGVydFR5cGUpO1xuICAgIHRoaXMucG9zaXRpb24gPSBhbGVydEJhcnNVdGlsLnNldFBvc2l0aW9uKHRoaXMuZml4ZWQpO1xuICAgIHRoaXMuZml4ZWQgPSB0aGlzLmFsZXJ0VmFyaWFudCA9PT0gJ2Jhbm5lcicgPyB0cnVlIDogZmFsc2U7XG4gICAgdGhpcy5mdWxsV2lkdGggPSB0aGlzLmFsZXJ0VmFyaWFudCA9PT0gJ2Jhbm5lcicgPyB0cnVlIDogZmFsc2U7XG4gICAgdGhpcy5jc3NDbGFzcyA9IGFsZXJ0QmFyc1V0aWwuc2V0Q3NzQ2xhc3ModGhpcy5mdWxsV2lkdGgsIHRoaXMuYWxlcnRUeXBlLCB0aGlzLnBvc2l0aW9uLCB0aGlzLmFsZXJ0VmFyaWFudCk7XG4gIH1cblxuICAvL0hpZGUgc25hY2tiYXIgd2hlbiBkaXNtaXNzIGJ1dHRvbiBpcyBjbGlja2VkXG4gIGRpc21pc3NDbGljaygpIHtcbiAgICB0aGlzLnZpc2libGUgPSBmYWxzZTtcbiAgfVxufVxuIiwiPGRpdiBbbmdDbGFzc109XCJjc3NDbGFzc1wiIFtAb3BlbkNsb3NlXSAqbmdJZj1cInZpc2libGVcIiBjbGFzcz1cImFsZXJ0LWNvbnRhaW5lclwiIFthdHRyLnRoZW1lXT1cImFwcGxpY2F0aW9uVGhlbWVcIiBbY2xhc3Muc2hhZG93XT1cImFsZXJ0VmFyaWFudCA9PT0gJ2NhbGxvdXQnICYmIHNoYWRvdyA/IHRydWUgOiBmYWxzZVwiPlxuICA8ZGl2IGNsYXNzPVwiYWxlcnQtdGV4dFwiPlxuICAgIDx1aS1pY29uIGNsYXNzPVwibGVmdC1pY29uXCIgW25hbWVdPVwiaWNvbk5hbWVcIiBzaXplPVwiMjRcIiBbYXBwbGljYXRpb25UaGVtZV09XCJhcHBsaWNhdGlvblRoZW1lXCI+PC91aS1pY29uPlxuICAgIDxzcGFuIFtpbm5lckhUTUxdPVwiX21lc3NhZ2VcIj48L3NwYW4+XG4gICAgPGEgKm5nSWY9XCIhIWxpbmtUZXh0XCIgW3RhcmdldF09XCJsaW5rVGFyZ2V0XCIgW2hyZWZdPVwibGlua1VybFwiPnt7IGxpbmtUZXh0IH19PC9hPlxuICA8L2Rpdj5cbiAgPHVpLWJ1dHRvblxuICAgICpuZ0lmPVwiaW5jbHVkZURpc21pc3NCdXR0b24gJiYgYXBwbGljYXRpb25UaGVtZSA9PT0gJ2NsYXNzaWMnXCJcbiAgICB2YXJpYW50PVwidGV4dFwiXG4gICAgW2p1c3RJY29uXT1cInRydWVcIlxuICAgIGNsYXNzPVwiY2xvc2VcIlxuICAgIGljb25OYW1lPVwiQ2xvc2VcIlxuICAgIChidXR0b25DbGlja0V2ZW50KT1cImRpc21pc3NDbGljaygpXCJcbiAgPjwvdWktYnV0dG9uPlxuICA8dWktaWNvblxuICAgIGNsYXNzPVwicmlnaHQtaWNvblwiXG4gICAgKm5nSWY9XCJpbmNsdWRlRGlzbWlzc0J1dHRvbiAmJiBhcHBsaWNhdGlvblRoZW1lICE9PSAnY2xhc3NpYydcIlxuICAgIGFwcGxpY2F0aW9uVGhlbWU9J2xpZ2h0J1xuICAgIFtuYW1lXT1cIidDbG9zZSdcIlxuICAgIChjbGljayk9XCJkaXNtaXNzQ2xpY2soKVwiXG4gID48L3VpLWljb24+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -351,7 +351,7 @@ export class AutocompleteComponent {
|
|
|
351
351
|
useExisting: forwardRef(() => AutocompleteComponent),
|
|
352
352
|
multi: true,
|
|
353
353
|
},
|
|
354
|
-
], 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, disabled: disabled }\">\n <mat-form-field\n [appearance]=\"'outline'\"\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, '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 [applicationTheme]=\"applicationTheme\"\n [style.display]=\"isOverLapping && i >= overlapIndex ? 'none' : 'block'\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n <ng-container *ngIf=\"isOverLapping\">\n <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n {{ (translationContext + 'SELECTED_AMOUNT') | uiTranslate : language : { numberSelected: (value | slice: overlapIndex).length } }}\n </div>\n <ng-template #overlapTag>\n <ui-tag [applicationTheme]=\"applicationTheme\" [readOnly]=\"true\" [label]=\"'+' + (value | slice: overlapIndex).length\"></ui-tag>\n </ng-template>\n </ng-container>\n </div>\n <input\n #trigger=\"matAutocompleteTrigger\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n matInput\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n />\n </div>\n\n <ui-icon\n class=\"remove-selected\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n *ngIf=\"isDropdown\"\n [size]=\"'24'\"\n [name]=\"'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n >\n <ng-container *ngIf=\"!(searchResult$ | async)\">\n <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\" *ngIf=\"suggestionsList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': suggested | includes: value }\"\n *ngFor=\"let suggested of suggestionsList\"\n [value]=\"suggested\"\n >\n <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\" *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of value\"\n [value]=\"item\"\n >\n <span>{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\" *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n <mat-option\n [class]=\"'selected-option'\"\n [value]=\"value\"\n >\n <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-template #dropdownList>\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </ng-template>\n\n </ng-container>\n\n <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\" *ngIf=\"filteredSuggestionList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container *ngIf=\"!filteredSuggestionList.length; else showItemListWithGroup\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </ng-container>\n\n <ng-template #showItemListWithGroup>\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS') | uiTranslate : language | uppercase\" *ngIf=\"filteredItemsList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-template>\n\n <ng-container *ngIf=\"!filteredItemsList.length && !filteredSuggestionList.length && inputValue\">\n <ng-container *ngIf=\"allowAdd && !isDropdown; else notFound\">\n <mat-option [value]=\"inputValue\">\n <span>{{ ('COMMON.ADD') | uiTranslate : language }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n </ng-container>\n\n <ng-template #notFound>\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate : language }}</span>\n </mat-option>\n </ng-template>\n </ng-container>\n </ng-container>\n </ng-container>\n </mat-autocomplete>\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:block}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled{opacity:.5}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px;width:80px}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:4px}.input-container input.unset-margin{margin-top:unset}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{margin-left:8px;height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{max-width:330px;min-width:330px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:50%!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .autocomplete-wrapper.full-width .mat-mdc-form-field{width:100%;max-width:100%}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}\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 }); }
|
|
354
|
+
], 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, disabled: disabled }\">\n <mat-form-field\n [appearance]=\"'outline'\"\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, '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 [applicationTheme]=\"applicationTheme\"\n [style.display]=\"isOverLapping && i >= overlapIndex ? 'none' : 'block'\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n <ng-container *ngIf=\"isOverLapping\">\n <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n {{ (translationContext + 'SELECTED_AMOUNT') | uiTranslate : language : { numberSelected: (value | slice: overlapIndex).length } }}\n </div>\n <ng-template #overlapTag>\n <ui-tag [applicationTheme]=\"applicationTheme\" [readOnly]=\"true\" [label]=\"'+' + (value | slice: overlapIndex).length\"></ui-tag>\n </ng-template>\n </ng-container>\n </div>\n <input\n #trigger=\"matAutocompleteTrigger\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n matInput\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n />\n </div>\n\n <ui-icon\n class=\"remove-selected\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n *ngIf=\"isDropdown\"\n [size]=\"'24'\"\n [name]=\"'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n >\n <ng-container *ngIf=\"!(searchResult$ | async)\">\n <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\" *ngIf=\"suggestionsList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': suggested | includes: value }\"\n *ngFor=\"let suggested of suggestionsList\"\n [value]=\"suggested\"\n >\n <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\" *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of value\"\n [value]=\"item\"\n >\n <span>{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup [label]=\"(translationContext + 'SELECTED') | uiTranslate : language | uppercase\" *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n <mat-option\n [class]=\"'selected-option'\"\n [value]=\"value\"\n >\n <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-template #dropdownList>\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </ng-template>\n\n </ng-container>\n\n <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED') | uiTranslate : language | uppercase\" *ngIf=\"filteredSuggestionList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container *ngIf=\"!filteredSuggestionList.length; else showItemListWithGroup\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </ng-container>\n\n <ng-template #showItemListWithGroup>\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS') | uiTranslate : language | uppercase\" *ngIf=\"filteredItemsList.length\">\n <mat-option\n [ngClass]=\"{ 'selected-option': item | includes: value }\"\n *ngFor=\"let item of filteredItemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-template>\n\n <ng-container *ngIf=\"!filteredItemsList.length && !filteredSuggestionList.length && inputValue\">\n <ng-container *ngIf=\"allowAdd && !isDropdown; else notFound\">\n <mat-option [value]=\"inputValue\">\n <span>{{ ('COMMON.ADD') | uiTranslate : language }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n </ng-container>\n\n <ng-template #notFound>\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate : language }}</span>\n </mat-option>\n </ng-template>\n </ng-container>\n </ng-container>\n </ng-container>\n </mat-autocomplete>\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:block}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled{opacity:.5}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px;width:80px}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:4px}.input-container input.unset-margin{margin-top:unset}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{margin-left:8px;height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{max-width:330px;min-width:330px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:50%!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .autocomplete-wrapper.full-width .mat-mdc-form-field{width:100%;max-width:100%}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}\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", "ariaLabel", "ariaRequired"], 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 }); }
|
|
355
355
|
}
|
|
356
356
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
357
357
|
type: Component,
|
|
@@ -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 [attr.theme]=\"applicationTheme\"\n>\n <span *ngIf=\"name && !imageUrl\">\n {{ name | nameInitials }}\n </span>\n <img *ngIf=\"imageUrl\" [attr.src]=\"imageUrl\" [alt]=\"'profile-image'\">\n <ui-icon [color]=\"applicationTheme === 'classic' ? 'dark' : 'rebrand-black'\" [applicationTheme]=\"applicationTheme\" [size]=\"iconSize[size]\" *ngIf=\"!imageUrl && !name\" [name]=\"'User-profile'\"></ui-icon>\n <div class=\"edit-avatar\" *ngIf=\"size === avatarSize.LARGE && allowEdit\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n [companyColor]=\"'black'\"\n [size]=\"'small'\"\n [iconName]=\"'Edit'\"\n [variant]=\"'icon-button'\"\n [tooltip]=\"tooltipText\"\n (buttonClickEvent)=\"onEditClick($event)\"\n ></ui-button>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host .clickable{cursor:pointer}:host .non-clickable{pointer-events:none}:host .avatar-container{font-family:Open Sans,sans-serif;font-weight:400;display:flex;justify-content:center;align-items:center;border-radius:100%;background:#cbd6cb;position:relative;-webkit-user-select:none;user-select:none}:host .avatar-container[type=icon]{background:#e0e0e0}:host .avatar-container img{width:100%;height:100%;object-fit:cover;border-radius:100%}:host .avatar-container.small{width:24px;height:24px;font-size:10px}:host .avatar-container.medium{width:48px;height:48px;font-size:20px}:host .avatar-container.large{width:120px;height:120px;font-size:50px;letter-spacing:-2}:host .avatar-container .edit-avatar{display:flex;justify-content:center;align-items:center;position:absolute;right:0;bottom:0;background:#f6f6f6;width:32px;height:32px;border-radius:100%}:host .avatar-container[theme=dark],:host .avatar-container[theme=light]{background:#
|
|
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 [attr.theme]=\"applicationTheme\"\n>\n <span *ngIf=\"name && !imageUrl\">\n {{ name | nameInitials }}\n </span>\n <img *ngIf=\"imageUrl\" [attr.src]=\"imageUrl\" [alt]=\"'profile-image'\">\n <ui-icon [color]=\"applicationTheme === 'classic' ? 'dark' : 'rebrand-black'\" [applicationTheme]=\"applicationTheme\" [size]=\"iconSize[size]\" *ngIf=\"!imageUrl && !name\" [name]=\"'User-profile'\"></ui-icon>\n <div class=\"edit-avatar\" *ngIf=\"size === avatarSize.LARGE && allowEdit\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n [companyColor]=\"'black'\"\n [size]=\"'small'\"\n [iconName]=\"'Edit'\"\n [variant]=\"'icon-button'\"\n [tooltip]=\"tooltipText\"\n (buttonClickEvent)=\"onEditClick($event)\"\n ></ui-button>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host .clickable{cursor:pointer}:host .non-clickable{pointer-events:none}:host .avatar-container{font-family:Open Sans,sans-serif;font-weight:400;display:flex;justify-content:center;align-items:center;border-radius:100%;background:#cbd6cb;position:relative;-webkit-user-select:none;user-select:none}:host .avatar-container[type=icon]{background:#e0e0e0}:host .avatar-container img{width:100%;height:100%;object-fit:cover;border-radius:100%}:host .avatar-container.small{width:24px;height:24px;font-size:10px}:host .avatar-container.medium{width:48px;height:48px;font-size:20px}:host .avatar-container.large{width:120px;height:120px;font-size:50px;letter-spacing:-2}:host .avatar-container .edit-avatar{display:flex;justify-content:center;align-items:center;position:absolute;right:0;bottom:0;background:#f6f6f6;width:32px;height:32px;border-radius:100%}:host .avatar-container[theme=dark],:host .avatar-container[theme=light]{background:#e9e9e9;color:#242424}:host .avatar-container[theme=dark] .edit-avatar,:host .avatar-container[theme=light] .edit-avatar{box-shadow:0 4px 16px #24242414;background:#fff}\n"], dependencies: [{ kind: "directive", type: i1.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", "ariaLabel", "ariaRequired"], 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 [attr.theme]=\"applicationTheme\"\n>\n <span *ngIf=\"name && !imageUrl\">\n {{ name | nameInitials }}\n </span>\n <img *ngIf=\"imageUrl\" [attr.src]=\"imageUrl\" [alt]=\"'profile-image'\">\n <ui-icon [color]=\"applicationTheme === 'classic' ? 'dark' : 'rebrand-black'\" [applicationTheme]=\"applicationTheme\" [size]=\"iconSize[size]\" *ngIf=\"!imageUrl && !name\" [name]=\"'User-profile'\"></ui-icon>\n <div class=\"edit-avatar\" *ngIf=\"size === avatarSize.LARGE && allowEdit\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n [companyColor]=\"'black'\"\n [size]=\"'small'\"\n [iconName]=\"'Edit'\"\n [variant]=\"'icon-button'\"\n [tooltip]=\"tooltipText\"\n (buttonClickEvent)=\"onEditClick($event)\"\n ></ui-button>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host .clickable{cursor:pointer}:host .non-clickable{pointer-events:none}:host .avatar-container{font-family:Open Sans,sans-serif;font-weight:400;display:flex;justify-content:center;align-items:center;border-radius:100%;background:#cbd6cb;position:relative;-webkit-user-select:none;user-select:none}:host .avatar-container[type=icon]{background:#e0e0e0}:host .avatar-container img{width:100%;height:100%;object-fit:cover;border-radius:100%}:host .avatar-container.small{width:24px;height:24px;font-size:10px}:host .avatar-container.medium{width:48px;height:48px;font-size:20px}:host .avatar-container.large{width:120px;height:120px;font-size:50px;letter-spacing:-2}:host .avatar-container .edit-avatar{display:flex;justify-content:center;align-items:center;position:absolute;right:0;bottom:0;background:#f6f6f6;width:32px;height:32px;border-radius:100%}:host .avatar-container[theme=dark],:host .avatar-container[theme=light]{background:#
|
|
66
|
+
args: [{ selector: 'ui-avatar', template: "<div\n class=\"avatar-container\"\n [attr.type]=\"!imageUrl && !name ? 'icon' : 'initials'\"\n [ngClass]=\"[size]\"\n [attr.theme]=\"applicationTheme\"\n>\n <span *ngIf=\"name && !imageUrl\">\n {{ name | nameInitials }}\n </span>\n <img *ngIf=\"imageUrl\" [attr.src]=\"imageUrl\" [alt]=\"'profile-image'\">\n <ui-icon [color]=\"applicationTheme === 'classic' ? 'dark' : 'rebrand-black'\" [applicationTheme]=\"applicationTheme\" [size]=\"iconSize[size]\" *ngIf=\"!imageUrl && !name\" [name]=\"'User-profile'\"></ui-icon>\n <div class=\"edit-avatar\" *ngIf=\"size === avatarSize.LARGE && allowEdit\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n [companyColor]=\"'black'\"\n [size]=\"'small'\"\n [iconName]=\"'Edit'\"\n [variant]=\"'icon-button'\"\n [tooltip]=\"tooltipText\"\n (buttonClickEvent)=\"onEditClick($event)\"\n ></ui-button>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host .clickable{cursor:pointer}:host .non-clickable{pointer-events:none}:host .avatar-container{font-family:Open Sans,sans-serif;font-weight:400;display:flex;justify-content:center;align-items:center;border-radius:100%;background:#cbd6cb;position:relative;-webkit-user-select:none;user-select:none}:host .avatar-container[type=icon]{background:#e0e0e0}:host .avatar-container img{width:100%;height:100%;object-fit:cover;border-radius:100%}:host .avatar-container.small{width:24px;height:24px;font-size:10px}:host .avatar-container.medium{width:48px;height:48px;font-size:20px}:host .avatar-container.large{width:120px;height:120px;font-size:50px;letter-spacing:-2}:host .avatar-container .edit-avatar{display:flex;justify-content:center;align-items:center;position:absolute;right:0;bottom:0;background:#f6f6f6;width:32px;height:32px;border-radius:100%}:host .avatar-container[theme=dark],:host .avatar-container[theme=light]{background:#e9e9e9;color:#242424}:host .avatar-container[theme=dark] .edit-avatar,:host .avatar-container[theme=light] .edit-avatar{box-shadow:0 4px 16px #24242414;background:#fff}\n"] }]
|
|
67
67
|
}], propDecorators: { size: [{
|
|
68
68
|
type: Input
|
|
69
69
|
}], imageUrl: [{
|
|
@@ -66,7 +66,7 @@ export class BannerActionComponent {
|
|
|
66
66
|
this.buttonClickEvent.emit(event);
|
|
67
67
|
}
|
|
68
68
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BannerActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
69
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BannerActionComponent, selector: "ui-banner-action", inputs: { message: "message", bannerActionType: "bannerActionType", buttonText: "buttonText", fixed: "fixed", fullWidth: "fullWidth", buttonIcon: "buttonIcon", iconName: "iconName", title: "title", applicationTheme: "applicationTheme" }, outputs: { buttonClickEvent: "buttonClickEvent" }, ngImport: i0, template: "<div id=\"banner-action\" class=\"banner-action-container\" [ngClass]=\"cssClass\">\n <div class=\"banner-action-content\">\n <ui-radial-progress\n *ngIf=\"bannerActionType === bannerType.INCOMPLETE || bannerActionType === bannerType.NOT_STARTED\"\n [size]=\"'small'\"\n [value]=\"bannerActionType === bannerType.NOT_STARTED ? BannerProgress.NOT_STARTED : BannerProgress.INCOMPLETE\"\n [total]=\"BannerProgress.TOTAL\"\n ></ui-radial-progress>\n <ui-icon *ngIf=\"iconName\" [name]=\"iconName\" [size]=\"bannerActionType === bannerType.BODY_TEXT ? '40' : '24'\"></ui-icon>\n <div class=\"banner-action-text\">\n <div *ngIf=\"title && bannerActionType === bannerType.BODY_TEXT\" class=\"title\">{{ title }}</div>\n <span>{{ message }}</span>\n </div>\n </div>\n <ui-button [label]=\"buttonText\" (buttonClickEvent)=\"buttonClick($event)\" [iconName]=\"buttonIcon\"></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 .banner-action-container{min-height:72px;padding:12px 16px;color:#000;font-size:14px;display:flex;align-items:center;background:#fff;border-radius:8px;justify-content:space-between;border-width:2px;border-style:solid}:host .banner-action-container.fixed{position:fixed;z-index:98;top:0}:host .banner-action-container.static{position:relative}:host .banner-action-container.full-width{width:100%;min-width:100%}:host .banner-action-container .banner-action-content{display:flex;align-items:center}:host .banner-action-container .banner-action-content .banner-action-text{display:flex;flex-direction:column}:host .banner-action-container .banner-action-content .title{font-size:16px;line-height:24px;font-weight:700;margin-bottom:4px}:host .banner-action-container ui-icon,:host .banner-action-container ui-radial-progress{margin-right:16px}:host .banner-action-container ui-button{margin-left:16px}:host .banner-action-container.success{border-color:#46a997}:host .banner-action-container.info,:host .banner-action-container.incomplete,:host .banner-action-container.not-started,:host .banner-action-container.body-text{border-color:#276678}:host .banner-action-container.warning{border-color:#cca45f}:host .banner-action-container.error{border-color:#cb7b7a}@media (max-width: 600px){:host .banner-action-container{height:auto;padding:16px;display:flex;flex-flow:column;align-items:flex-start}:host .banner-action-container .banner-action-content{margin-bottom:10px}:host .banner-action-container.body-text ui-icon{display:none}:host .banner-action-container ui-button{margin:0;width:100%}:host .banner-action-container ui-button ::ng-deep .button-wrapper{width:100%!important}:host .banner-action-container ui-button ::ng-deep button{min-width:100%}:host .banner-action-container ui-button ::ng-deep button .label{justify-content:center}}\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.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: i3.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: i4.RadialProgressComponent, selector: "ui-radial-progress", inputs: ["size", "value", "total", "applicationTheme"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
69
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BannerActionComponent, selector: "ui-banner-action", inputs: { message: "message", bannerActionType: "bannerActionType", buttonText: "buttonText", fixed: "fixed", fullWidth: "fullWidth", buttonIcon: "buttonIcon", iconName: "iconName", title: "title", applicationTheme: "applicationTheme" }, outputs: { buttonClickEvent: "buttonClickEvent" }, ngImport: i0, template: "<div id=\"banner-action\" class=\"banner-action-container\" [ngClass]=\"cssClass\">\n <div class=\"banner-action-content\">\n <ui-radial-progress\n *ngIf=\"bannerActionType === bannerType.INCOMPLETE || bannerActionType === bannerType.NOT_STARTED\"\n [size]=\"'small'\"\n [value]=\"bannerActionType === bannerType.NOT_STARTED ? BannerProgress.NOT_STARTED : BannerProgress.INCOMPLETE\"\n [total]=\"BannerProgress.TOTAL\"\n ></ui-radial-progress>\n <ui-icon *ngIf=\"iconName\" [name]=\"iconName\" [size]=\"bannerActionType === bannerType.BODY_TEXT ? '40' : '24'\"></ui-icon>\n <div class=\"banner-action-text\">\n <div *ngIf=\"title && bannerActionType === bannerType.BODY_TEXT\" class=\"title\">{{ title }}</div>\n <span>{{ message }}</span>\n </div>\n </div>\n <ui-button [label]=\"buttonText\" (buttonClickEvent)=\"buttonClick($event)\" [iconName]=\"buttonIcon\"></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 .banner-action-container{min-height:72px;padding:12px 16px;color:#000;font-size:14px;display:flex;align-items:center;background:#fff;border-radius:8px;justify-content:space-between;border-width:2px;border-style:solid}:host .banner-action-container.fixed{position:fixed;z-index:98;top:0}:host .banner-action-container.static{position:relative}:host .banner-action-container.full-width{width:100%;min-width:100%}:host .banner-action-container .banner-action-content{display:flex;align-items:center}:host .banner-action-container .banner-action-content .banner-action-text{display:flex;flex-direction:column}:host .banner-action-container .banner-action-content .title{font-size:16px;line-height:24px;font-weight:700;margin-bottom:4px}:host .banner-action-container ui-icon,:host .banner-action-container ui-radial-progress{margin-right:16px}:host .banner-action-container ui-button{margin-left:16px}:host .banner-action-container.success{border-color:#46a997}:host .banner-action-container.info,:host .banner-action-container.incomplete,:host .banner-action-container.not-started,:host .banner-action-container.body-text{border-color:#276678}:host .banner-action-container.warning{border-color:#cca45f}:host .banner-action-container.error{border-color:#cb7b7a}@media (max-width: 600px){:host .banner-action-container{height:auto;padding:16px;display:flex;flex-flow:column;align-items:flex-start}:host .banner-action-container .banner-action-content{margin-bottom:10px}:host .banner-action-container.body-text ui-icon{display:none}:host .banner-action-container ui-button{margin:0;width:100%}:host .banner-action-container ui-button ::ng-deep .button-wrapper{width:100%!important}:host .banner-action-container ui-button ::ng-deep button{min-width:100%}:host .banner-action-container ui-button ::ng-deep button .label{justify-content:center}}\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.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i3.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: i4.RadialProgressComponent, selector: "ui-radial-progress", inputs: ["size", "value", "total", "applicationTheme"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
70
70
|
}
|
|
71
71
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BannerActionComponent, decorators: [{
|
|
72
72
|
type: Component,
|