@testgorilla/tgo-ui 2.3.4 → 2.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/autocomplete/autocomplete.component.d.ts +8 -1
- package/components/phone-input/phone-input.component.d.ts +8 -1
- package/esm2022/components/autocomplete/autocomplete.component.mjs +5 -3
- package/esm2022/components/badge/badge.component.mjs +2 -2
- package/esm2022/components/field/field.component.mjs +2 -1
- package/esm2022/components/navbar/mobile-navbar-side-sheet/mobile-navbar-side-sheet.component.mjs +3 -3
- package/esm2022/components/phone-input/phone-input.component.mjs +15 -5
- package/esm2022/components/scale/scale.component.mjs +2 -2
- package/esm2022/components/segmented-button/segmented-button.component.mjs +2 -2
- package/fesm2022/testgorilla-tgo-ui.mjs +27 -14
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/src/theme/_font.scss +43 -35
- package/src/theme/_lib-styles.scss +2 -1
- package/src/theme/_typography.scss +5 -5
- package/src/theme/theme.scss +2 -1
|
@@ -1092,11 +1092,11 @@ class BadgeComponent {
|
|
|
1092
1092
|
return this.applicationTheme === 'classic';
|
|
1093
1093
|
}
|
|
1094
1094
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1095
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BadgeComponent, selector: "ui-badge", inputs: { label: "label", icon: "icon", color: "color", variant: "variant", notificationsAmount: "notificationsAmount", applicationTheme: "applicationTheme", rebrandColor: "rebrandColor" }, ngImport: i0, template: "<div [class]=\"'badge-container-' + variant\" [attr.theme]=\"applicationTheme\" [attr.color]=\"isClassicTheme ? color : rebrandColor\">\n <ng-container [ngSwitch]=\"variant\">\n <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY\">\n <ui-icon *ngIf=\"icon\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n </ng-container>\n <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n </ng-container>\n <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label }}</div>\n</div>\n", styles: [".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:block;width:-moz-fit-content;width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;
|
|
1095
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BadgeComponent, selector: "ui-badge", inputs: { label: "label", icon: "icon", color: "color", variant: "variant", notificationsAmount: "notificationsAmount", applicationTheme: "applicationTheme", rebrandColor: "rebrandColor" }, ngImport: i0, template: "<div [class]=\"'badge-container-' + variant\" [attr.theme]=\"applicationTheme\" [attr.color]=\"isClassicTheme ? color : rebrandColor\">\n <ng-container [ngSwitch]=\"variant\">\n <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY\">\n <ui-icon *ngIf=\"icon\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n </ng-container>\n <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n </ng-container>\n <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label }}</div>\n</div>\n", styles: [".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:block;width:-moz-fit-content;width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;line-height:10px}:host .badge-container-primary .label,:host .badge-container-secondary .label{font-size:12px}:host .badge-container-primary .badge-icon,:host .badge-container-secondary .badge-icon{margin-right:8px}:host .badge-container-secondary .point{border-radius:50%;width:8px;height:8px;margin-right:8px}:host .badge-container-secondary .label{color:#000!important}:host .badge-container-secondary[theme=dark],:host .badge-container-secondary[theme=light]{color:#242424}:host .badge-container-notification{width:20px;height:20px;border-radius:50%;color:#fff;line-height:10px}:host .badge-container-notification .label{font-size:12px}:host .badge-container-notification[theme=dark],:host .badge-container-notification[theme=light]{background:#242424!important;color:#fff!important;border-color:1px solid #ffffff}.flex-center,:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host .badge-container-secondary [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host .badge-container-secondary [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#e0e0e0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host .badge-container-secondary [color=teal].point,:host [color=teal].badge-container-notification{background:#46a997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host .badge-container-secondary [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host .badge-container-secondary [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host .badge-container-secondary [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#b5ddd5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host .badge-container-secondary [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#e9f0f1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host .badge-container-secondary [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#a9c2c9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host .badge-container-secondary [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888}.background-colors[color=success],:host [color=success].badge-container-primary,:host .badge-container-secondary [color=success].point,:host [color=success].badge-container-notification{background:#e2f4b3;color:#242424}.background-colors[color=warning],:host [color=warning].badge-container-primary,:host .badge-container-secondary [color=warning].point,:host [color=warning].badge-container-notification{background:#ffe1b3;color:#242424}.background-colors[color=negative],:host [color=negative].badge-container-primary,:host .badge-container-secondary [color=negative].point,:host [color=negative].badge-container-notification{background:#ffac9a;color:#242424}.background-colors[color=info],:host [color=info].badge-container-primary,:host .badge-container-secondary [color=info].point,:host [color=info].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=brand],:host [color=brand].badge-container-primary,:host .badge-container-secondary [color=brand].point,:host [color=brand].badge-container-notification{background:#ffe6fa;color:#242424}.background-colors[color=neutral],:host [color=neutral].badge-container-primary,:host .badge-container-secondary [color=neutral].point,:host [color=neutral].badge-container-notification{background:#e9e9e9;color:#242424}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }] }); }
|
|
1096
1096
|
}
|
|
1097
1097
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
1098
1098
|
type: Component,
|
|
1099
|
-
args: [{ selector: 'ui-badge', template: "<div [class]=\"'badge-container-' + variant\" [attr.theme]=\"applicationTheme\" [attr.color]=\"isClassicTheme ? color : rebrandColor\">\n <ng-container [ngSwitch]=\"variant\">\n <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY\">\n <ui-icon *ngIf=\"icon\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n </ng-container>\n <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n </ng-container>\n <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label }}</div>\n</div>\n", styles: [".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:block;width:-moz-fit-content;width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;
|
|
1099
|
+
args: [{ selector: 'ui-badge', template: "<div [class]=\"'badge-container-' + variant\" [attr.theme]=\"applicationTheme\" [attr.color]=\"isClassicTheme ? color : rebrandColor\">\n <ng-container [ngSwitch]=\"variant\">\n <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY\">\n <ui-icon *ngIf=\"icon\" class=\"badge-icon\" [name]=\"icon\" [color]=\"iconColor\" ></ui-icon>\n </ng-container>\n <div *ngSwitchCase=\"badgeVariant.SECONDARY\" class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n </ng-container>\n <div class=\"label\" *ngIf=\"label && variant !== badgeVariant.NOTIFICATION\">{{ label }}</div>\n</div>\n", styles: [".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:block;width:-moz-fit-content;width:fit-content}:host .badge-container-primary,:host .badge-container-secondary{height:24px;padding:0 8px;border-radius:21px;color:#fff;line-height:10px}:host .badge-container-primary .label,:host .badge-container-secondary .label{font-size:12px}:host .badge-container-primary .badge-icon,:host .badge-container-secondary .badge-icon{margin-right:8px}:host .badge-container-secondary .point{border-radius:50%;width:8px;height:8px;margin-right:8px}:host .badge-container-secondary .label{color:#000!important}:host .badge-container-secondary[theme=dark],:host .badge-container-secondary[theme=light]{color:#242424}:host .badge-container-notification{width:20px;height:20px;border-radius:50%;color:#fff;line-height:10px}:host .badge-container-notification .label{font-size:12px}:host .badge-container-notification[theme=dark],:host .badge-container-notification[theme=light]{background:#242424!important;color:#fff!important;border-color:1px solid #ffffff}.flex-center,:host .badge-container-primary,:host .badge-container-secondary,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host .badge-container-secondary [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host .badge-container-secondary [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#e0e0e0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host .badge-container-secondary [color=teal].point,:host [color=teal].badge-container-notification{background:#46a997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host .badge-container-secondary [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host .badge-container-secondary [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host .badge-container-secondary [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#b5ddd5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host .badge-container-secondary [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#e9f0f1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host .badge-container-secondary [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#a9c2c9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host .badge-container-secondary [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888}.background-colors[color=success],:host [color=success].badge-container-primary,:host .badge-container-secondary [color=success].point,:host [color=success].badge-container-notification{background:#e2f4b3;color:#242424}.background-colors[color=warning],:host [color=warning].badge-container-primary,:host .badge-container-secondary [color=warning].point,:host [color=warning].badge-container-notification{background:#ffe1b3;color:#242424}.background-colors[color=negative],:host [color=negative].badge-container-primary,:host .badge-container-secondary [color=negative].point,:host [color=negative].badge-container-notification{background:#ffac9a;color:#242424}.background-colors[color=info],:host [color=info].badge-container-primary,:host .badge-container-secondary [color=info].point,:host [color=info].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=brand],:host [color=brand].badge-container-primary,:host .badge-container-secondary [color=brand].point,:host [color=brand].badge-container-notification{background:#ffe6fa;color:#242424}.background-colors[color=neutral],:host [color=neutral].badge-container-primary,:host .badge-container-secondary [color=neutral].point,:host [color=neutral].badge-container-notification{background:#e9e9e9;color:#242424}\n"] }]
|
|
1100
1100
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
1101
1101
|
type: Optional
|
|
1102
1102
|
}, {
|
|
@@ -4072,6 +4072,7 @@ class FieldComponent {
|
|
|
4072
4072
|
//Clear input value
|
|
4073
4073
|
clearValue() {
|
|
4074
4074
|
this.value = '';
|
|
4075
|
+
this.onChange(this.value);
|
|
4075
4076
|
this.onChangeInputSearch();
|
|
4076
4077
|
}
|
|
4077
4078
|
//toggle for password
|
|
@@ -5106,7 +5107,7 @@ class MobileNavbarSideSheetComponent {
|
|
|
5106
5107
|
this.menuItemClicked.emit(id);
|
|
5107
5108
|
}
|
|
5108
5109
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileNavbarSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5109
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MobileNavbarSideSheetComponent, isStandalone: true, selector: "ui-mobile-navbar-side-sheet", inputs: { routes: "routes", activedRoute: "activedRoute", email: "email", userName: "userName", menuItems: "menuItems", language: "language", contentTemplateRef: "contentTemplateRef" }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<div class=\"mobile-navbar-container\">\n <div class=\"user-info\">\n <span class=\"user-name\">{{ userName }}</span>\n <span class=\"user-email\">{{ email }}</span>\n </div>\n\n <div class=\"routes\">\n <div *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" class=\"route\"\n [ngClass]=\"{'active': activedRoute === route.id}\">\n <span>{{ route.title }}</span>\n </div>\n </div>\n <div class=\"settings\" (click)=\"isOpenSettings = !isOpenSettings\">\n <span>Settings</span>\n <ui-icon [applicationTheme]=\"'dark'\" [size]=\"'24'\"\n [name]=\"isOpenSettings ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"></ui-icon>\n </div>\n\n <div *ngIf=\"isOpenSettings\">\n <button *ngFor=\"let e of menuItems\" mat-menu-item (click)=\"clickMenuItem(e.id)\">\n <div class=\"menu-item\">\n <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n {{ e.text }}\n </div>\n </button>\n <button mat-menu-item (click)=\"logout()\">\n <mat-icon>power_settings_new</mat-icon>\n {{ (translationContext + 'LOG_OUT') | uiTranslate : language }}\n </button>\n </div>\n\n <div class=\"bottom-content\">\n <ng-container *ngTemplateOutlet=\"contentTemplateRef\"></ng-container>\n </div>\n\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mobile-navbar-container .user-info{padding:0 16px;display:flex;flex-direction:column;margin-bottom:32px}.mobile-navbar-container .user-info .user-name{font-weight:700;font-size:16px;line-height:22px;font-family:ModernGothic
|
|
5110
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MobileNavbarSideSheetComponent, isStandalone: true, selector: "ui-mobile-navbar-side-sheet", inputs: { routes: "routes", activedRoute: "activedRoute", email: "email", userName: "userName", menuItems: "menuItems", language: "language", contentTemplateRef: "contentTemplateRef" }, outputs: { navigateEvent: "navigateEvent", menuItemClicked: "menuItemClicked", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<div class=\"mobile-navbar-container\">\n <div class=\"user-info\">\n <span class=\"user-name\">{{ userName }}</span>\n <span class=\"user-email\">{{ email }}</span>\n </div>\n\n <div class=\"routes\">\n <div *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" class=\"route\"\n [ngClass]=\"{'active': activedRoute === route.id}\">\n <span>{{ route.title }}</span>\n </div>\n </div>\n <div class=\"settings\" (click)=\"isOpenSettings = !isOpenSettings\">\n <span>Settings</span>\n <ui-icon [applicationTheme]=\"'dark'\" [size]=\"'24'\"\n [name]=\"isOpenSettings ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"></ui-icon>\n </div>\n\n <div *ngIf=\"isOpenSettings\">\n <button *ngFor=\"let e of menuItems\" mat-menu-item (click)=\"clickMenuItem(e.id)\">\n <div class=\"menu-item\">\n <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n {{ e.text }}\n </div>\n </button>\n <button mat-menu-item (click)=\"logout()\">\n <mat-icon>power_settings_new</mat-icon>\n {{ (translationContext + 'LOG_OUT') | uiTranslate : language }}\n </button>\n </div>\n\n <div class=\"bottom-content\">\n <ng-container *ngTemplateOutlet=\"contentTemplateRef\"></ng-container>\n </div>\n\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mobile-navbar-container .user-info{padding:0 16px;display:flex;flex-direction:column;margin-bottom:32px}.mobile-navbar-container .user-info .user-name{font-weight:700;font-size:16px;line-height:22px;font-family:ModernGothic,sans-serif}.mobile-navbar-container .user-info .user-email{font-size:12px}.mobile-navbar-container .routes .route{padding:0 16px;width:100%;height:48px;display:flex;justify-content:flex-start;align-items:center;font-size:14px}.mobile-navbar-container .routes .route.active{background-color:#fff2fc;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .settings{height:48px;padding:0 16px;display:flex;font-size:14px;font-weight:700;font-family:ModernGothic,sans-serif;flex-direction:row;align-items:center;gap:16px}.mobile-navbar-container .menu-item{display:flex;align-items:center}.mobile-navbar-container .menu-item ui-icon{margin-right:16px}.mobile-navbar-container .bottom-content{padding:32px 16px;width:calc(100% - 32px);position:absolute;bottom:0;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: AccordionComponentModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
5110
5111
|
}
|
|
5111
5112
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileNavbarSideSheetComponent, decorators: [{
|
|
5112
5113
|
type: Component,
|
|
@@ -5121,7 +5122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
5121
5122
|
AccordionComponentModule,
|
|
5122
5123
|
NgIf,
|
|
5123
5124
|
NgTemplateOutlet
|
|
5124
|
-
], template: "<div class=\"mobile-navbar-container\">\n <div class=\"user-info\">\n <span class=\"user-name\">{{ userName }}</span>\n <span class=\"user-email\">{{ email }}</span>\n </div>\n\n <div class=\"routes\">\n <div *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" class=\"route\"\n [ngClass]=\"{'active': activedRoute === route.id}\">\n <span>{{ route.title }}</span>\n </div>\n </div>\n <div class=\"settings\" (click)=\"isOpenSettings = !isOpenSettings\">\n <span>Settings</span>\n <ui-icon [applicationTheme]=\"'dark'\" [size]=\"'24'\"\n [name]=\"isOpenSettings ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"></ui-icon>\n </div>\n\n <div *ngIf=\"isOpenSettings\">\n <button *ngFor=\"let e of menuItems\" mat-menu-item (click)=\"clickMenuItem(e.id)\">\n <div class=\"menu-item\">\n <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n {{ e.text }}\n </div>\n </button>\n <button mat-menu-item (click)=\"logout()\">\n <mat-icon>power_settings_new</mat-icon>\n {{ (translationContext + 'LOG_OUT') | uiTranslate : language }}\n </button>\n </div>\n\n <div class=\"bottom-content\">\n <ng-container *ngTemplateOutlet=\"contentTemplateRef\"></ng-container>\n </div>\n\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mobile-navbar-container .user-info{padding:0 16px;display:flex;flex-direction:column;margin-bottom:32px}.mobile-navbar-container .user-info .user-name{font-weight:700;font-size:16px;line-height:22px;font-family:ModernGothic
|
|
5125
|
+
], template: "<div class=\"mobile-navbar-container\">\n <div class=\"user-info\">\n <span class=\"user-name\">{{ userName }}</span>\n <span class=\"user-email\">{{ email }}</span>\n </div>\n\n <div class=\"routes\">\n <div *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" class=\"route\"\n [ngClass]=\"{'active': activedRoute === route.id}\">\n <span>{{ route.title }}</span>\n </div>\n </div>\n <div class=\"settings\" (click)=\"isOpenSettings = !isOpenSettings\">\n <span>Settings</span>\n <ui-icon [applicationTheme]=\"'dark'\" [size]=\"'24'\"\n [name]=\"isOpenSettings ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"></ui-icon>\n </div>\n\n <div *ngIf=\"isOpenSettings\">\n <button *ngFor=\"let e of menuItems\" mat-menu-item (click)=\"clickMenuItem(e.id)\">\n <div class=\"menu-item\">\n <ui-icon [name]=\"e.icon\" size=\"24\"></ui-icon>\n {{ e.text }}\n </div>\n </button>\n <button mat-menu-item (click)=\"logout()\">\n <mat-icon>power_settings_new</mat-icon>\n {{ (translationContext + 'LOG_OUT') | uiTranslate : language }}\n </button>\n </div>\n\n <div class=\"bottom-content\">\n <ng-container *ngTemplateOutlet=\"contentTemplateRef\"></ng-container>\n </div>\n\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mobile-navbar-container .user-info{padding:0 16px;display:flex;flex-direction:column;margin-bottom:32px}.mobile-navbar-container .user-info .user-name{font-weight:700;font-size:16px;line-height:22px;font-family:ModernGothic,sans-serif}.mobile-navbar-container .user-info .user-email{font-size:12px}.mobile-navbar-container .routes .route{padding:0 16px;width:100%;height:48px;display:flex;justify-content:flex-start;align-items:center;font-size:14px}.mobile-navbar-container .routes .route.active{background-color:#fff2fc;font-weight:700;font-family:ModernGothic,sans-serif}.mobile-navbar-container .settings{height:48px;padding:0 16px;display:flex;font-size:14px;font-weight:700;font-family:ModernGothic,sans-serif;flex-direction:row;align-items:center;gap:16px}.mobile-navbar-container .menu-item{display:flex;align-items:center}.mobile-navbar-container .menu-item ui-icon{margin-right:16px}.mobile-navbar-container .bottom-content{padding:32px 16px;width:calc(100% - 32px);position:absolute;bottom:0;display:flex;justify-content:center;align-items:center}\n"] }]
|
|
5125
5126
|
}], propDecorators: { routes: [{
|
|
5126
5127
|
type: Input
|
|
5127
5128
|
}], activedRoute: [{
|
|
@@ -7632,11 +7633,11 @@ class ScaleComponent {
|
|
|
7632
7633
|
this.selectedIndexChange.emit(this.selectedIndex);
|
|
7633
7634
|
}
|
|
7634
7635
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScaleComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7635
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ScaleComponent, selector: "ui-scale", inputs: { selectedIndex: "selectedIndex", length: "length", applicationTheme: "applicationTheme" }, outputs: { selectedIndexChange: "selectedIndexChange" }, ngImport: i0, template: "<div class=\"scale\"\n [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\">\n <div class=\"scale-item\" *ngFor=\"let item of items\" (click)=\"select(item)\"\n [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\">\n {{ item + 1 }}\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}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center}.scale-item{display:flex;align-items:center;justify-content:center;width:72px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-family:ModernGothic
|
|
7636
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ScaleComponent, selector: "ui-scale", inputs: { selectedIndex: "selectedIndex", length: "length", applicationTheme: "applicationTheme" }, outputs: { selectedIndexChange: "selectedIndexChange" }, ngImport: i0, template: "<div class=\"scale\"\n [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\">\n <div class=\"scale-item\" *ngFor=\"let item of items\" (click)=\"select(item)\"\n [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\">\n {{ item + 1 }}\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}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center}.scale-item{display:flex;align-items:center;justify-content:center;width:72px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color:#ffb3ee}.scale-item:first-child{border-radius:10px 0 0 10px;border-left:1px solid #919191}.scale-item:last-child{border-radius:0 10px 10px 0}.scale-item-selected{background-color:#d410aa;color:#fff;font-weight:700}.scale-classic .scale-item{border-color:#e0e0e0;font-family:Open Sans,serif}.scale-classic .scale-item:first-child{border-radius:4px 0 0 4px;border-left:1px solid #E0E0E0}.scale-classic .scale-item:last-child{border-radius:0 4px 4px 0}.scale-classic .scale-item:not(.scale-item-selected){color:#242424}.scale-classic .scale-item:hover:not(.scale-item-selected){background-color:#b5ddd5}.scale-classic .scale-item-selected{background-color:#46a997}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7636
7637
|
}
|
|
7637
7638
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScaleComponent, decorators: [{
|
|
7638
7639
|
type: Component,
|
|
7639
|
-
args: [{ selector: 'ui-scale', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scale\"\n [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\">\n <div class=\"scale-item\" *ngFor=\"let item of items\" (click)=\"select(item)\"\n [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\">\n {{ item + 1 }}\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}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center}.scale-item{display:flex;align-items:center;justify-content:center;width:72px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-family:ModernGothic
|
|
7640
|
+
args: [{ selector: 'ui-scale', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scale\"\n [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\">\n <div class=\"scale-item\" *ngFor=\"let item of items\" (click)=\"select(item)\"\n [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\">\n {{ item + 1 }}\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}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center}.scale-item{display:flex;align-items:center;justify-content:center;width:72px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color:#ffb3ee}.scale-item:first-child{border-radius:10px 0 0 10px;border-left:1px solid #919191}.scale-item:last-child{border-radius:0 10px 10px 0}.scale-item-selected{background-color:#d410aa;color:#fff;font-weight:700}.scale-classic .scale-item{border-color:#e0e0e0;font-family:Open Sans,serif}.scale-classic .scale-item:first-child{border-radius:4px 0 0 4px;border-left:1px solid #E0E0E0}.scale-classic .scale-item:last-child{border-radius:0 4px 4px 0}.scale-classic .scale-item:not(.scale-item-selected){color:#242424}.scale-classic .scale-item:hover:not(.scale-item-selected){background-color:#b5ddd5}.scale-classic .scale-item-selected{background-color:#46a997}\n"] }]
|
|
7640
7641
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
7641
7642
|
type: Optional
|
|
7642
7643
|
}, {
|
|
@@ -8691,11 +8692,11 @@ class AutocompleteComponent {
|
|
|
8691
8692
|
(this.isDropdown ? Padding.DROPDOWN_CONTAINER : Padding.AUTOCOMPLETE_CONTAINER));
|
|
8692
8693
|
}
|
|
8693
8694
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutocompleteComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i1$1.DomSanitizer }, { token: i1$3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8694
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AutocompleteComponent, selector: "ui-autocomplete", inputs: { itemsList: "itemsList", suggestionsList: "suggestionsList", disabled: "disabled", allowAdd: "allowAdd", textField: "textField", valueField: "valueField", label: "label", itemValue: "itemValue", type: "type", minCharactersSearch: "minCharactersSearch", variant: "variant", language: "language", showBottomContent: "showBottomContent", valuePrimitive: "valuePrimitive", fullWidth: "fullWidth", applicationTheme: "applicationTheme", errors: "errors" }, outputs: { selectionChange: "selectionChange", searchTextChange: "searchTextChange" }, host: { properties: { "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "formFieldElement", first: true, predicate: ["formField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: ["trigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n <mat-form-field\n [color]=\"(safeErrors.length || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [appearance]=\"'outline'\"\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent }\"\n >\n <mat-label *ngIf=\"label\">{{ label }}</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-hint class=\"error\" *ngIf=\"safeErrors.length || ngControl?.errors\">\n <ng-container *ngIf=\"safeErrors.length\">\n <div class=\"errors\" *ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n\n <ui-validation-error [ngControl]=\"ngControl\" [label]=\"label\" [language]=\"language\"></ui-validation-error>\n\n </mat-hint>\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:block}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled{opacity:.5}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px;width:80px}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:4px}.input-container input.unset-margin{margin-top:unset}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{margin-left:8px;height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{max-width:330px;min-width:330px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;margin-top:-14px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top: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}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i2$2.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i5$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "isDisabled", "applicationTheme", "ariaLabel", "ariaRequired"], outputs: ["close", "press"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "label", "applicationTheme", "language"] }, { kind: "directive", type: SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8695
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AutocompleteComponent, selector: "ui-autocomplete", inputs: { itemsList: "itemsList", suggestionsList: "suggestionsList", disabled: "disabled", allowAdd: "allowAdd", textField: "textField", valueField: "valueField", label: "label", itemValue: "itemValue", type: "type", minCharactersSearch: "minCharactersSearch", variant: "variant", language: "language", showBottomContent: "showBottomContent", valuePrimitive: "valuePrimitive", fullWidth: "fullWidth", applicationTheme: "applicationTheme", required: "required", errors: "errors" }, outputs: { selectionChange: "selectionChange", searchTextChange: "searchTextChange" }, host: { properties: { "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "formFieldElement", first: true, predicate: ["formField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: ["trigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n <mat-form-field\n [color]=\"(safeErrors.length || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [appearance]=\"'outline'\"\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent }\"\n >\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <div #formField class=\"input-container\">\n <div\n class=\"selected-items\"\n #tagContainer\n *ngIf=\"\n (type === autocompleteType.LARGE && this.value) ||\n (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n \"\n >\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n *ngFor=\"let valueItem of value; let i = index\"\n [label]=\"valueItem | transformItem: textField\"\n [allowClose]=\"true\"\n [applicationTheme]=\"applicationTheme\"\n [style.display]=\"isOverLapping && i >= overlapIndex ? 'none' : 'block'\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n <ng-container *ngIf=\"isOverLapping\">\n <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n {{ (translationContext + 'SELECTED_AMOUNT') | uiTranslate : language : { numberSelected: (value | slice: overlapIndex).length } }}\n </div>\n <ng-template #overlapTag>\n <ui-tag [applicationTheme]=\"applicationTheme\" [readOnly]=\"true\" [label]=\"'+' + (value | slice: overlapIndex).length\"></ui-tag>\n </ng-template>\n </ng-container>\n </div>\n <input\n #trigger=\"matAutocompleteTrigger\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n matInput\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n />\n </div>\n\n <ui-icon\n 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-hint class=\"error\" *ngIf=\"safeErrors.length || ngControl?.errors\">\n <ng-container *ngIf=\"safeErrors.length\">\n <div class=\"errors\" *ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n\n <ui-validation-error *ngIf=\"ngControl\" [ngControl]=\"ngControl\" [label]=\"label\" [language]=\"language\"></ui-validation-error>\n\n </mat-hint>\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:block}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled{opacity:.5}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px;width:80px}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:4px}.input-container input.unset-margin{margin-top:unset}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{margin-left:8px;height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{max-width:330px;min-width:330px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;margin-top:-14px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top: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}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i2$2.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i5$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "isDisabled", "applicationTheme", "ariaLabel", "ariaRequired"], outputs: ["close", "press"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "label", "applicationTheme", "language"] }, { kind: "directive", type: SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8695
8696
|
}
|
|
8696
8697
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
8697
8698
|
type: Component,
|
|
8698
|
-
args: [{ selector: 'ui-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n <mat-form-field\n [color]=\"(safeErrors.length || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [appearance]=\"'outline'\"\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent }\"\n >\n <mat-label *ngIf=\"label\">{{ label }}</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-hint class=\"error\" *ngIf=\"safeErrors.length || ngControl?.errors\">\n <ng-container *ngIf=\"safeErrors.length\">\n <div class=\"errors\" *ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n\n <ui-validation-error [ngControl]=\"ngControl\" [label]=\"label\" [language]=\"language\"></ui-validation-error>\n\n </mat-hint>\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:block}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled{opacity:.5}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px;width:80px}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:4px}.input-container input.unset-margin{margin-top:unset}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{margin-left:8px;height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{max-width:330px;min-width:330px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;margin-top:-14px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top: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}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}\n"] }]
|
|
8699
|
+
args: [{ selector: 'ui-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n <mat-form-field\n [color]=\"(safeErrors.length || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [appearance]=\"'outline'\"\n [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent }\"\n >\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <div #formField class=\"input-container\">\n <div\n class=\"selected-items\"\n #tagContainer\n *ngIf=\"\n (type === autocompleteType.LARGE && this.value) ||\n (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n \"\n >\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n *ngFor=\"let valueItem of value; let i = index\"\n [label]=\"valueItem | transformItem: textField\"\n [allowClose]=\"true\"\n [applicationTheme]=\"applicationTheme\"\n [style.display]=\"isOverLapping && i >= overlapIndex ? 'none' : 'block'\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n <ng-container *ngIf=\"isOverLapping\">\n <div *ngIf=\"!overlapIndex; else overlapTag\" class=\"overlap-count\">\n {{ (translationContext + 'SELECTED_AMOUNT') | uiTranslate : language : { numberSelected: (value | slice: overlapIndex).length } }}\n </div>\n <ng-template #overlapTag>\n <ui-tag [applicationTheme]=\"applicationTheme\" [readOnly]=\"true\" [label]=\"'+' + (value | slice: overlapIndex).length\"></ui-tag>\n </ng-template>\n </ng-container>\n </div>\n <input\n #trigger=\"matAutocompleteTrigger\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n matInput\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n />\n </div>\n\n <ui-icon\n 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-hint class=\"error\" *ngIf=\"safeErrors.length || ngControl?.errors\">\n <ng-container *ngIf=\"safeErrors.length\">\n <div class=\"errors\" *ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n\n <ui-validation-error *ngIf=\"ngControl\" [ngControl]=\"ngControl\" [label]=\"label\" [language]=\"language\"></ui-validation-error>\n\n </mat-hint>\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:block}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled{opacity:.5}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex}.input-container .selected-items{display:flex}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px;width:80px}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:4px}.input-container input.unset-margin{margin-top:unset}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{margin-left:8px;height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{max-width:330px;min-width:330px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;margin-top:-14px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top: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}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}\n"] }]
|
|
8699
8700
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
8700
8701
|
type: Optional
|
|
8701
8702
|
}, {
|
|
@@ -8741,6 +8742,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
8741
8742
|
args: ['attr.theme']
|
|
8742
8743
|
}, {
|
|
8743
8744
|
type: Input
|
|
8745
|
+
}], required: [{
|
|
8746
|
+
type: Input
|
|
8744
8747
|
}], errors: [{
|
|
8745
8748
|
type: Input
|
|
8746
8749
|
}], selectionChange: [{
|
|
@@ -10047,7 +10050,7 @@ class SegmentedButtonComponent {
|
|
|
10047
10050
|
useExisting: forwardRef(() => SegmentedButtonComponent),
|
|
10048
10051
|
multi: true,
|
|
10049
10052
|
},
|
|
10050
|
-
], ngImport: i0, template: "<mat-button-toggle-group class=\"segmented-button-container\" [(value)]=\"value\">\n <mat-button-toggle\n class=\"start-button\"\n [disableRipple]=\"true\"\n *ngFor=\"let button of buttonConfig\"\n [value]=\"button.value\"\n >\n <ng-container *ngIf=\"button.template; else label\" [ngTemplateOutlet]=\"button.template\"></ng-container>\n <ng-template #label>{{ button.label }}</ng-template>\n </mat-button-toggle>\n</mat-button-toggle-group>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}h1,h2,h3,.h1,.h2,.h3{font-weight:400;margin:0}h4,h5,h6,.h4,.h5,.h6{font-weight:700;margin:0}h1,.h1{font-size:40px;line-height:60px;font-weight:700}h2,.h2{font-size:24px;line-height:36px}h2.bold,.h2.bold{font-weight:700}h3,.h3{font-size:20px;line-height:28px}h3.bold,.h3.bold{font-weight:700}h4,.h4{font-size:16px;line-height:24px}h5,.h5{font-size:14px;line-height:20px}h6,.h6{font-size:12px;line-height:16px;text-transform:uppercase}body{font-size:14px;line-height:20px}strong,b{font-weight:700}.featured{font-size:16px;line-height:24px}p .semibold,.featured .semibold,.caption .semibold{font-weight:600;color:#46a997}small{font-size:8px;line-height:12px}caption,.caption{font-size:12px;line-height:16px;display:inline-block}*[theme=dark] h1,*[theme=dark] .h1,*[theme=light] h1,*[theme=light] .h1{color:#242424;font-size:32px;line-height:48px;font-weight:400}*[theme=dark] h1.black,*[theme=dark] .h1.black,*[theme=light] h1.black,*[theme=light] .h1.black{font-family:ModernGothic
|
|
10053
|
+
], ngImport: i0, template: "<mat-button-toggle-group class=\"segmented-button-container\" [(value)]=\"value\">\n <mat-button-toggle\n class=\"start-button\"\n [disableRipple]=\"true\"\n *ngFor=\"let button of buttonConfig\"\n [value]=\"button.value\"\n >\n <ng-container *ngIf=\"button.template; else label\" [ngTemplateOutlet]=\"button.template\"></ng-container>\n <ng-template #label>{{ button.label }}</ng-template>\n </mat-button-toggle>\n</mat-button-toggle-group>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}h1,h2,h3,.h1,.h2,.h3{font-weight:400;margin:0}h4,h5,h6,.h4,.h5,.h6{font-weight:700;margin:0}h1,.h1{font-size:40px;line-height:60px;font-weight:700}h2,.h2{font-size:24px;line-height:36px}h2.bold,.h2.bold{font-weight:700}h3,.h3{font-size:20px;line-height:28px}h3.bold,.h3.bold{font-weight:700}h4,.h4{font-size:16px;line-height:24px}h5,.h5{font-size:14px;line-height:20px}h6,.h6{font-size:12px;line-height:16px;text-transform:uppercase}body{font-size:14px;line-height:20px}strong,b{font-weight:700}.featured{font-size:16px;line-height:24px}p .semibold,.featured .semibold,.caption .semibold{font-weight:600;color:#46a997}small{font-size:8px;line-height:12px}caption,.caption{font-size:12px;line-height:16px;display:inline-block}*[theme=dark] h1,*[theme=dark] .h1,*[theme=light] h1,*[theme=light] .h1{color:#242424;font-size:32px;line-height:48px;font-weight:400}*[theme=dark] h1.black,*[theme=dark] .h1.black,*[theme=light] h1.black,*[theme=light] .h1.black{font-family:ModernGothic,sans-serif!important;font-weight:900}*[theme=dark] h2,*[theme=dark] .h2,*[theme=light] h2,*[theme=light] .h2{color:#242424;font-size:24px;line-height:30px;font-weight:900;font-family:ModernGothic,sans-serif!important}*[theme=dark] h3,*[theme=dark] .h3,*[theme=light] h3,*[theme=light] .h3{font-size:20px;line-height:26px;font-weight:400;color:#242424}*[theme=dark] h3.bold,*[theme=dark] .h3.bold,*[theme=light] h3.bold,*[theme=light] .h3.bold{font-family:ModernGothic,sans-serif!important;font-weight:700}*[theme=dark] h4,*[theme=dark] .h4,*[theme=light] h4,*[theme=light] .h4{font-size:16px;line-height:20px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] h5,*[theme=dark] .h5,*[theme=light] h5,*[theme=light] .h5{font-size:14px;line-height:18px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] .body-large,*[theme=light] .body-large{font-weight:700;font-size:14px;line-height:22px}*[theme=dark] .body-large-bold,*[theme=light] .body-large-bold{font-weight:700;font-size:16px;line-height:24px}*[theme=dark] .body-large-regular,*[theme=light] .body-large-regular{font-weight:400;font-size:16px;line-height:24px}*[theme=dark] .body-small-bold,*[theme=light] .body-small-bold{font-weight:700;font-size:12px;line-height:16px}*[theme=dark] .hyperlink-large,*[theme=light] .hyperlink-large{font-weight:500;font-size:16px;line-height:24px}*[theme=dark] .hyperlink,*[theme=light] .hyperlink{font-weight:500;font-size:14px;line-height:22px}*[theme=dark] .hyperlink-small,*[theme=light] .hyperlink-small{font-weight:500;font-size:12px;line-height:16px}*[theme=dark] .button-label,*[theme=light] .button-label{font-weight:500;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .label,*[theme=light] .label{font-weight:400;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .large-hover-state,*[theme=light] .large-hover-state{font-weight:700;text-decoration:underline;font-size:16px;line-height:24px}*[theme=dark] .hover-state,*[theme=light] .hover-state{font-weight:700;text-decoration:underline;font-size:14px;line-height:22px}.segmented-button-container{border-color:#919191}.segmented-button-container:first-child{border-bottom-left-radius:10px;border-top-left-radius:10px}.segmented-button-container:last-child{border-bottom-right-radius:10px;border-top-right-radius:10px}.segmented-button-container .mat-button-toggle{min-width:80px;min-height:48px;border-color:#919191}.segmented-button-container .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#242424;font-weight:400;font-size:14px;font-feature-settings:\"capb\"}.segmented-button-container .mat-button-toggle:hover{background:#fff2fc}.segmented-button-container .mat-button-toggle.mat-button-toggle-checked{background:#ffe6fa}.segmented-button-container .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content{font-weight:700}.segmented-button-container .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$7.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$7.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10051
10054
|
}
|
|
10052
10055
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SegmentedButtonComponent, decorators: [{
|
|
10053
10056
|
type: Component,
|
|
@@ -10057,7 +10060,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
10057
10060
|
useExisting: forwardRef(() => SegmentedButtonComponent),
|
|
10058
10061
|
multi: true,
|
|
10059
10062
|
},
|
|
10060
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-button-toggle-group class=\"segmented-button-container\" [(value)]=\"value\">\n <mat-button-toggle\n class=\"start-button\"\n [disableRipple]=\"true\"\n *ngFor=\"let button of buttonConfig\"\n [value]=\"button.value\"\n >\n <ng-container *ngIf=\"button.template; else label\" [ngTemplateOutlet]=\"button.template\"></ng-container>\n <ng-template #label>{{ button.label }}</ng-template>\n </mat-button-toggle>\n</mat-button-toggle-group>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}h1,h2,h3,.h1,.h2,.h3{font-weight:400;margin:0}h4,h5,h6,.h4,.h5,.h6{font-weight:700;margin:0}h1,.h1{font-size:40px;line-height:60px;font-weight:700}h2,.h2{font-size:24px;line-height:36px}h2.bold,.h2.bold{font-weight:700}h3,.h3{font-size:20px;line-height:28px}h3.bold,.h3.bold{font-weight:700}h4,.h4{font-size:16px;line-height:24px}h5,.h5{font-size:14px;line-height:20px}h6,.h6{font-size:12px;line-height:16px;text-transform:uppercase}body{font-size:14px;line-height:20px}strong,b{font-weight:700}.featured{font-size:16px;line-height:24px}p .semibold,.featured .semibold,.caption .semibold{font-weight:600;color:#46a997}small{font-size:8px;line-height:12px}caption,.caption{font-size:12px;line-height:16px;display:inline-block}*[theme=dark] h1,*[theme=dark] .h1,*[theme=light] h1,*[theme=light] .h1{color:#242424;font-size:32px;line-height:48px;font-weight:400}*[theme=dark] h1.black,*[theme=dark] .h1.black,*[theme=light] h1.black,*[theme=light] .h1.black{font-family:ModernGothic
|
|
10063
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-button-toggle-group class=\"segmented-button-container\" [(value)]=\"value\">\n <mat-button-toggle\n class=\"start-button\"\n [disableRipple]=\"true\"\n *ngFor=\"let button of buttonConfig\"\n [value]=\"button.value\"\n >\n <ng-container *ngIf=\"button.template; else label\" [ngTemplateOutlet]=\"button.template\"></ng-container>\n <ng-template #label>{{ button.label }}</ng-template>\n </mat-button-toggle>\n</mat-button-toggle-group>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}h1,h2,h3,.h1,.h2,.h3{font-weight:400;margin:0}h4,h5,h6,.h4,.h5,.h6{font-weight:700;margin:0}h1,.h1{font-size:40px;line-height:60px;font-weight:700}h2,.h2{font-size:24px;line-height:36px}h2.bold,.h2.bold{font-weight:700}h3,.h3{font-size:20px;line-height:28px}h3.bold,.h3.bold{font-weight:700}h4,.h4{font-size:16px;line-height:24px}h5,.h5{font-size:14px;line-height:20px}h6,.h6{font-size:12px;line-height:16px;text-transform:uppercase}body{font-size:14px;line-height:20px}strong,b{font-weight:700}.featured{font-size:16px;line-height:24px}p .semibold,.featured .semibold,.caption .semibold{font-weight:600;color:#46a997}small{font-size:8px;line-height:12px}caption,.caption{font-size:12px;line-height:16px;display:inline-block}*[theme=dark] h1,*[theme=dark] .h1,*[theme=light] h1,*[theme=light] .h1{color:#242424;font-size:32px;line-height:48px;font-weight:400}*[theme=dark] h1.black,*[theme=dark] .h1.black,*[theme=light] h1.black,*[theme=light] .h1.black{font-family:ModernGothic,sans-serif!important;font-weight:900}*[theme=dark] h2,*[theme=dark] .h2,*[theme=light] h2,*[theme=light] .h2{color:#242424;font-size:24px;line-height:30px;font-weight:900;font-family:ModernGothic,sans-serif!important}*[theme=dark] h3,*[theme=dark] .h3,*[theme=light] h3,*[theme=light] .h3{font-size:20px;line-height:26px;font-weight:400;color:#242424}*[theme=dark] h3.bold,*[theme=dark] .h3.bold,*[theme=light] h3.bold,*[theme=light] .h3.bold{font-family:ModernGothic,sans-serif!important;font-weight:700}*[theme=dark] h4,*[theme=dark] .h4,*[theme=light] h4,*[theme=light] .h4{font-size:16px;line-height:20px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] h5,*[theme=dark] .h5,*[theme=light] h5,*[theme=light] .h5{font-size:14px;line-height:18px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] .body-large,*[theme=light] .body-large{font-weight:700;font-size:14px;line-height:22px}*[theme=dark] .body-large-bold,*[theme=light] .body-large-bold{font-weight:700;font-size:16px;line-height:24px}*[theme=dark] .body-large-regular,*[theme=light] .body-large-regular{font-weight:400;font-size:16px;line-height:24px}*[theme=dark] .body-small-bold,*[theme=light] .body-small-bold{font-weight:700;font-size:12px;line-height:16px}*[theme=dark] .hyperlink-large,*[theme=light] .hyperlink-large{font-weight:500;font-size:16px;line-height:24px}*[theme=dark] .hyperlink,*[theme=light] .hyperlink{font-weight:500;font-size:14px;line-height:22px}*[theme=dark] .hyperlink-small,*[theme=light] .hyperlink-small{font-weight:500;font-size:12px;line-height:16px}*[theme=dark] .button-label,*[theme=light] .button-label{font-weight:500;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .label,*[theme=light] .label{font-weight:400;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .large-hover-state,*[theme=light] .large-hover-state{font-weight:700;text-decoration:underline;font-size:16px;line-height:24px}*[theme=dark] .hover-state,*[theme=light] .hover-state{font-weight:700;text-decoration:underline;font-size:14px;line-height:22px}.segmented-button-container{border-color:#919191}.segmented-button-container:first-child{border-bottom-left-radius:10px;border-top-left-radius:10px}.segmented-button-container:last-child{border-bottom-right-radius:10px;border-top-right-radius:10px}.segmented-button-container .mat-button-toggle{min-width:80px;min-height:48px;border-color:#919191}.segmented-button-container .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#242424;font-weight:400;font-size:14px;font-feature-settings:\"capb\"}.segmented-button-container .mat-button-toggle:hover{background:#fff2fc}.segmented-button-container .mat-button-toggle.mat-button-toggle-checked{background:#ffe6fa}.segmented-button-container .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content{font-weight:700}.segmented-button-container .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay{display:none}\n"] }]
|
|
10061
10064
|
}], propDecorators: { buttonConfig: [{
|
|
10062
10065
|
type: Input,
|
|
10063
10066
|
args: [{ required: true }]
|
|
@@ -10260,7 +10263,7 @@ class PhoneInputComponent {
|
|
|
10260
10263
|
set countryList(countryList) {
|
|
10261
10264
|
countryList.forEach(country => this.registerCountryFlag(country.alpha2Code));
|
|
10262
10265
|
this.loadCountries$.next(countryList);
|
|
10263
|
-
this.selectedCountry = countryList[0];
|
|
10266
|
+
this.selectedCountry = this.selectedCountry ?? countryList[0];
|
|
10264
10267
|
}
|
|
10265
10268
|
/**
|
|
10266
10269
|
* Placeholder input
|
|
@@ -10317,6 +10320,13 @@ class PhoneInputComponent {
|
|
|
10317
10320
|
* @memberof PhoneInputComponent
|
|
10318
10321
|
*/
|
|
10319
10322
|
this.applicationTheme = 'light';
|
|
10323
|
+
/**
|
|
10324
|
+
* Indicator of the phone input width
|
|
10325
|
+
* @property fullWidth
|
|
10326
|
+
* @type {boolean}
|
|
10327
|
+
* @memberof PhoneInputComponent
|
|
10328
|
+
*/
|
|
10329
|
+
this.fullWidth = false;
|
|
10320
10330
|
/**
|
|
10321
10331
|
* The language to be used
|
|
10322
10332
|
* @property language
|
|
@@ -10393,6 +10403,7 @@ class PhoneInputComponent {
|
|
|
10393
10403
|
}
|
|
10394
10404
|
this.disabled = isDisabled;
|
|
10395
10405
|
this.stateChanges.next();
|
|
10406
|
+
this.ref.markForCheck();
|
|
10396
10407
|
}
|
|
10397
10408
|
ngOnDestroy() {
|
|
10398
10409
|
this.focusMonitor.stopMonitoring(this.input);
|
|
@@ -10482,12 +10493,12 @@ class PhoneInputComponent {
|
|
|
10482
10493
|
ev.stopPropagation();
|
|
10483
10494
|
}
|
|
10484
10495
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PhoneInputComponent, deps: [{ token: i1$3.NgControl, optional: true, self: true }, { token: i2$2.ErrorStateMatcher }, { token: i1$3.UntypedFormBuilder }, { token: i3$3.FocusMonitor }, { token: i0.ChangeDetectorRef }, { token: i1.MatIconRegistry }, { token: i1$1.DomSanitizer }, { token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10485
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PhoneInputComponent, selector: "ui-phone-input", inputs: { value: "value", countryList: "countryList", placeholder: "placeholder", disabled: "disabled", required: "required", applicationTheme: "applicationTheme", errors: "errors", language: "language" }, host: { properties: { "attr.disabled": "this.disabled", "attr.theme": "this.applicationTheme", "id": "this.id", "class.floated": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, providers: [
|
|
10496
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PhoneInputComponent, selector: "ui-phone-input", inputs: { value: "value", countryList: "countryList", placeholder: "placeholder", disabled: "disabled", required: "required", applicationTheme: "applicationTheme", fullWidth: "fullWidth", errors: "errors", language: "language" }, host: { properties: { "attr.disabled": "this.disabled", "attr.theme": "this.applicationTheme", "id": "this.id", "class.floated": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, providers: [
|
|
10486
10497
|
{
|
|
10487
10498
|
provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
|
|
10488
10499
|
useValue: { overlayPanelClass: 'phone-number-autocomplete' },
|
|
10489
10500
|
},
|
|
10490
|
-
], viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true, read: ElementRef, static: true }, { propertyName: "select", first: true, predicate: MatSelect, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<mat-form-field\n [formGroup]=\"form\"\n appearance=\"outline\"\n [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [ngClass]=\"{ disabled: form.disabled }\"\n>\n <mat-label>{{ 'COMMON.PHONE_NUMBER' | uiTranslate : language }} <span *ngIf=\"required\">*</span></mat-label>\n\n <div matPrefix class=\"country\">\n <button class=\"selected-flag\" matPrefix *ngIf=\"selectedCountry\">\n <mat-icon [svgIcon]=\"selectedCountry?.alpha2Code?.toLowerCase()!\"></mat-icon>\n </button>\n <mat-select\n #select\n (selectionChange)=\"onOptionsSelected($event.value)\"\n [value]=\"selectedCountry\"\n [disableOptionCentering]=\"true\"\n [panelClass]=\"'phone-number-select'\"\n [ngClass]=\"{ opened: select.panelOpen }\"\n >\n <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search\n [formControl]=\"selectFilterCtrl\"\n ngDefaultControl\n placeholderLabel=\"\"\n noEntriesFoundLabel=\"\"\n >\n <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n </ngx-mat-select-search>\n </mat-option>\n <mat-option *ngFor=\"let country of countries$ | async; trackBy: filteredCountryTrackByMethod\" [value]=\"country\">\n <mat-icon [svgIcon]=\"country?.alpha2Code?.toLowerCase()!\"></mat-icon>\n <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) | joinStrings : ' ' }}</small>\n </mat-option>\n </mat-select>\n </div>\n\n <input\n (input)=\"onInput(form.get('phone_number')!.value)\"\n formControlName=\"phone_number\"\n (click)=\"disableClick($event)\"\n [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n [required]=\"required\"\n matInput\n type=\"text\"\n />\n\n <mat-hint class=\"error\" *ngIf=\"errorsLength || ngControl?.errors\">\n <ng-container *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of _errors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n\n <ui-validation-error [ngControl]=\"ngControl\" [label]=\"'COMMON.PHONE_NUMBER' | uiTranslate : language\" [language]=\"language\"></ui-validation-error>\n\n </mat-hint>\n</mat-form-field>\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;align-items:center}:host .selected-flag{display:flex;position:relative;margin-right:1rem;align-items:center}:host mat-spinner{padding:0 20px}:host .country{cursor:pointer!important;display:flex;align-items:center;margin:-8px 12px 0 16px}:host .country button{margin:0 8px 0 0;background:transparent;border:unset;padding:0}:host ::ng-deep .mat-mdc-select-trigger{display:flex;gap:8px}:host mat-select{flex:0}:host .mat-mdc-form-field{min-width:320px}:host .mat-mdc-form-field.disabled ::ng-deep *{border-color:#d3d3d3;color:#d3d3d3;pointer-events:none}:host .mat-mdc-form-field.disabled ::ng-deep * .mat-mdc-select-arrow{opacity:.1}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2225%22 viewBox%3D%220 0 24 25%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 17.025L6 11.025L7.4 9.625L12 14.225L16.6 9.625L18 11.025L12 17.025Z%22 fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E\");background-size:cover;width:16px;height:16px}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow svg,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow svg{display:none}:host[theme=dark] mat-select.opened ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select.opened ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2225%22 viewBox%3D%220 0 24 25%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 9.6249L18 15.6249L16.6 17.0249L12 12.4249L7.4 17.0249L6 15.6249L12 9.6249Z%22 fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E\");background-size:cover;width:16px;height:16px}::ng-deep .mat-form-field-appearance-outline mat-select .mat-select-arrow-wrapper{transform:none}::ng-deep .mat-select-panel.phone-number-select{margin-top:36px;margin-left:45px}::ng-deep .mat-select-search-inner{box-shadow:none!important;height:48px;background-color:#fff!important;border-bottom:none!important}::ng-deep .mat-select-search-inner .mat-select-search-inner-row{width:100%}::ng-deep .mat-select-search-inner button.mat-select-search-clear{right:35px}::ng-deep .mat-select-search-inner button.mat-select-search-clear mat-icon{font-size:20px}@media screen and (min-width: 599px){::ng-deep .mat-select-panel.phone-number-select{margin-left:-33px;min-width:510px}::ng-deep .mat-select-search-inner{min-width:calc(100% + 33px)!important}}ngx-mat-select-search ::ng-deep button .mat-mdc-button-persistent-ripple,ngx-mat-select-search ::ng-deep button .mat-ripple,ngx-mat-select-search ::ng-deep button .mat-mdc-button-ripple{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i8.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "directive", type: i10.MatSelectSearchClearDirective, selector: "[ngxMatSelectSearchClear]" }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "label", "applicationTheme", "language"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: JoinStringsPipe, name: "joinStrings" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10501
|
+
], viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true, read: ElementRef, static: true }, { propertyName: "select", first: true, predicate: MatSelect, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<mat-form-field\n [formGroup]=\"form\"\n appearance=\"outline\"\n [color]=\"(errorsLength || required || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [ngClass]=\"{ disabled: form.disabled || disabled, 'full-width': fullWidth }\"\n>\n <mat-label>{{ 'COMMON.PHONE_NUMBER' | uiTranslate : language }} <span *ngIf=\"required\">*</span></mat-label>\n\n <div matPrefix class=\"country\">\n <button class=\"selected-flag\" matPrefix *ngIf=\"selectedCountry\">\n <mat-icon [svgIcon]=\"selectedCountry?.alpha2Code?.toLowerCase()!\"></mat-icon>\n </button>\n <mat-select\n #select\n (selectionChange)=\"onOptionsSelected($event.value)\"\n [value]=\"selectedCountry\"\n [disableOptionCentering]=\"true\"\n [panelClass]=\"'phone-number-select'\"\n [ngClass]=\"{ opened: select.panelOpen }\"\n >\n <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search\n [formControl]=\"selectFilterCtrl\"\n ngDefaultControl\n placeholderLabel=\"\"\n noEntriesFoundLabel=\"\"\n >\n <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n </ngx-mat-select-search>\n </mat-option>\n <mat-option *ngFor=\"let country of countries$ | async; trackBy: filteredCountryTrackByMethod\" [value]=\"country\">\n <mat-icon [svgIcon]=\"country?.alpha2Code?.toLowerCase()!\"></mat-icon>\n <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) | joinStrings : ' ' }}</small>\n </mat-option>\n </mat-select>\n </div>\n\n <input\n (input)=\"onInput(form.get('phone_number')!.value)\"\n formControlName=\"phone_number\"\n (click)=\"disableClick($event)\"\n [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n [required]=\"required\"\n matInput\n type=\"text\"\n />\n\n <mat-hint class=\"error\" *ngIf=\"errorsLength || ngControl?.errors\">\n <ng-container *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of _errors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n\n <ui-validation-error [ngControl]=\"ngControl\" [label]=\"'COMMON.PHONE_NUMBER' | uiTranslate : language\" [language]=\"language\"></ui-validation-error>\n\n </mat-hint>\n</mat-form-field>\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;align-items:center}:host .selected-flag{display:flex;position:relative;margin-right:1rem;align-items:center}:host mat-spinner{padding:0 20px}:host .country{cursor:pointer!important;display:flex;align-items:center;margin:-8px 12px 0 16px}:host .country button{margin:0 8px 0 0;background:transparent;border:unset;padding:0}:host ::ng-deep .mat-mdc-select-trigger{display:flex;gap:8px}:host mat-select{flex:0}:host .mat-mdc-form-field{min-width:320px}:host .mat-mdc-form-field.full-width{width:100%}:host .mat-mdc-form-field.disabled ::ng-deep *{border-color:#d3d3d3;color:#d3d3d3;pointer-events:none}:host .mat-mdc-form-field.disabled ::ng-deep * .mat-mdc-select-arrow{opacity:.1}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2225%22 viewBox%3D%220 0 24 25%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 17.025L6 11.025L7.4 9.625L12 14.225L16.6 9.625L18 11.025L12 17.025Z%22 fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E\");background-size:cover;width:16px;height:16px}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow svg,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow svg{display:none}:host[theme=dark] mat-select.opened ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select.opened ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2225%22 viewBox%3D%220 0 24 25%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 9.6249L18 15.6249L16.6 17.0249L12 12.4249L7.4 17.0249L6 15.6249L12 9.6249Z%22 fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E\");background-size:cover;width:16px;height:16px}::ng-deep .mat-form-field-appearance-outline mat-select .mat-select-arrow-wrapper{transform:none}::ng-deep .mat-select-panel.phone-number-select{margin-top:36px;margin-left:45px}::ng-deep .mat-select-search-inner{box-shadow:none!important;height:48px;background-color:#fff!important;border-bottom:none!important}::ng-deep .mat-select-search-inner .mat-select-search-inner-row{width:100%}::ng-deep .mat-select-search-inner button.mat-select-search-clear{right:35px}::ng-deep .mat-select-search-inner button.mat-select-search-clear mat-icon{font-size:20px}@media screen and (min-width: 599px){::ng-deep .mat-select-panel.phone-number-select{margin-left:-33px;min-width:510px}::ng-deep .mat-select-search-inner{min-width:calc(100% + 33px)!important}}ngx-mat-select-search ::ng-deep button .mat-mdc-button-persistent-ripple,ngx-mat-select-search ::ng-deep button .mat-ripple,ngx-mat-select-search ::ng-deep button .mat-mdc-button-ripple{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i8.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "directive", type: i10.MatSelectSearchClearDirective, selector: "[ngxMatSelectSearchClear]" }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "label", "applicationTheme", "language"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: JoinStringsPipe, name: "joinStrings" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10491
10502
|
}
|
|
10492
10503
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PhoneInputComponent, decorators: [{
|
|
10493
10504
|
type: Component,
|
|
@@ -10496,7 +10507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
10496
10507
|
provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
|
|
10497
10508
|
useValue: { overlayPanelClass: 'phone-number-autocomplete' },
|
|
10498
10509
|
},
|
|
10499
|
-
], template: "<mat-form-field\n [formGroup]=\"form\"\n appearance=\"outline\"\n [color]=\"(errorsLength || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [ngClass]=\"{ disabled: form.disabled }\"\n>\n <mat-label>{{ 'COMMON.PHONE_NUMBER' | uiTranslate : language }} <span *ngIf=\"required\">*</span></mat-label>\n\n <div matPrefix class=\"country\">\n <button class=\"selected-flag\" matPrefix *ngIf=\"selectedCountry\">\n <mat-icon [svgIcon]=\"selectedCountry?.alpha2Code?.toLowerCase()!\"></mat-icon>\n </button>\n <mat-select\n #select\n (selectionChange)=\"onOptionsSelected($event.value)\"\n [value]=\"selectedCountry\"\n [disableOptionCentering]=\"true\"\n [panelClass]=\"'phone-number-select'\"\n [ngClass]=\"{ opened: select.panelOpen }\"\n >\n <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search\n [formControl]=\"selectFilterCtrl\"\n ngDefaultControl\n placeholderLabel=\"\"\n noEntriesFoundLabel=\"\"\n >\n <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n </ngx-mat-select-search>\n </mat-option>\n <mat-option *ngFor=\"let country of countries$ | async; trackBy: filteredCountryTrackByMethod\" [value]=\"country\">\n <mat-icon [svgIcon]=\"country?.alpha2Code?.toLowerCase()!\"></mat-icon>\n <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) | joinStrings : ' ' }}</small>\n </mat-option>\n </mat-select>\n </div>\n\n <input\n (input)=\"onInput(form.get('phone_number')!.value)\"\n formControlName=\"phone_number\"\n (click)=\"disableClick($event)\"\n [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n [required]=\"required\"\n matInput\n type=\"text\"\n />\n\n <mat-hint class=\"error\" *ngIf=\"errorsLength || ngControl?.errors\">\n <ng-container *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of _errors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n\n <ui-validation-error [ngControl]=\"ngControl\" [label]=\"'COMMON.PHONE_NUMBER' | uiTranslate : language\" [language]=\"language\"></ui-validation-error>\n\n </mat-hint>\n</mat-form-field>\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;align-items:center}:host .selected-flag{display:flex;position:relative;margin-right:1rem;align-items:center}:host mat-spinner{padding:0 20px}:host .country{cursor:pointer!important;display:flex;align-items:center;margin:-8px 12px 0 16px}:host .country button{margin:0 8px 0 0;background:transparent;border:unset;padding:0}:host ::ng-deep .mat-mdc-select-trigger{display:flex;gap:8px}:host mat-select{flex:0}:host .mat-mdc-form-field{min-width:320px}:host .mat-mdc-form-field.disabled ::ng-deep *{border-color:#d3d3d3;color:#d3d3d3;pointer-events:none}:host .mat-mdc-form-field.disabled ::ng-deep * .mat-mdc-select-arrow{opacity:.1}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2225%22 viewBox%3D%220 0 24 25%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 17.025L6 11.025L7.4 9.625L12 14.225L16.6 9.625L18 11.025L12 17.025Z%22 fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E\");background-size:cover;width:16px;height:16px}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow svg,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow svg{display:none}:host[theme=dark] mat-select.opened ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select.opened ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2225%22 viewBox%3D%220 0 24 25%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 9.6249L18 15.6249L16.6 17.0249L12 12.4249L7.4 17.0249L6 15.6249L12 9.6249Z%22 fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E\");background-size:cover;width:16px;height:16px}::ng-deep .mat-form-field-appearance-outline mat-select .mat-select-arrow-wrapper{transform:none}::ng-deep .mat-select-panel.phone-number-select{margin-top:36px;margin-left:45px}::ng-deep .mat-select-search-inner{box-shadow:none!important;height:48px;background-color:#fff!important;border-bottom:none!important}::ng-deep .mat-select-search-inner .mat-select-search-inner-row{width:100%}::ng-deep .mat-select-search-inner button.mat-select-search-clear{right:35px}::ng-deep .mat-select-search-inner button.mat-select-search-clear mat-icon{font-size:20px}@media screen and (min-width: 599px){::ng-deep .mat-select-panel.phone-number-select{margin-left:-33px;min-width:510px}::ng-deep .mat-select-search-inner{min-width:calc(100% + 33px)!important}}ngx-mat-select-search ::ng-deep button .mat-mdc-button-persistent-ripple,ngx-mat-select-search ::ng-deep button .mat-ripple,ngx-mat-select-search ::ng-deep button .mat-mdc-button-ripple{display:none}\n"] }]
|
|
10510
|
+
], template: "<mat-form-field\n [formGroup]=\"form\"\n appearance=\"outline\"\n [color]=\"(errorsLength || required || (ngControl?.errors && ngControl?.touched )) ? 'warn' : 'accent'\"\n [ngClass]=\"{ disabled: form.disabled || disabled, 'full-width': fullWidth }\"\n>\n <mat-label>{{ 'COMMON.PHONE_NUMBER' | uiTranslate : language }} <span *ngIf=\"required\">*</span></mat-label>\n\n <div matPrefix class=\"country\">\n <button class=\"selected-flag\" matPrefix *ngIf=\"selectedCountry\">\n <mat-icon [svgIcon]=\"selectedCountry?.alpha2Code?.toLowerCase()!\"></mat-icon>\n </button>\n <mat-select\n #select\n (selectionChange)=\"onOptionsSelected($event.value)\"\n [value]=\"selectedCountry\"\n [disableOptionCentering]=\"true\"\n [panelClass]=\"'phone-number-select'\"\n [ngClass]=\"{ opened: select.panelOpen }\"\n >\n <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search\n [formControl]=\"selectFilterCtrl\"\n ngDefaultControl\n placeholderLabel=\"\"\n noEntriesFoundLabel=\"\"\n >\n <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n </ngx-mat-select-search>\n </mat-option>\n <mat-option *ngFor=\"let country of countries$ | async; trackBy: filteredCountryTrackByMethod\" [value]=\"country\">\n <mat-icon [svgIcon]=\"country?.alpha2Code?.toLowerCase()!\"></mat-icon>\n <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) | joinStrings : ' ' }}</small>\n </mat-option>\n </mat-select>\n </div>\n\n <input\n (input)=\"onInput(form.get('phone_number')!.value)\"\n formControlName=\"phone_number\"\n (click)=\"disableClick($event)\"\n [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n [required]=\"required\"\n matInput\n type=\"text\"\n />\n\n <mat-hint class=\"error\" *ngIf=\"errorsLength || ngControl?.errors\">\n <ng-container *ngIf=\"errorsLength\">\n <div class=\"errors\" *ngFor=\"let error of _errors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n\n <ui-validation-error [ngControl]=\"ngControl\" [label]=\"'COMMON.PHONE_NUMBER' | uiTranslate : language\" [language]=\"language\"></ui-validation-error>\n\n </mat-hint>\n</mat-form-field>\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;align-items:center}:host .selected-flag{display:flex;position:relative;margin-right:1rem;align-items:center}:host mat-spinner{padding:0 20px}:host .country{cursor:pointer!important;display:flex;align-items:center;margin:-8px 12px 0 16px}:host .country button{margin:0 8px 0 0;background:transparent;border:unset;padding:0}:host ::ng-deep .mat-mdc-select-trigger{display:flex;gap:8px}:host mat-select{flex:0}:host .mat-mdc-form-field{min-width:320px}:host .mat-mdc-form-field.full-width{width:100%}:host .mat-mdc-form-field.disabled ::ng-deep *{border-color:#d3d3d3;color:#d3d3d3;pointer-events:none}:host .mat-mdc-form-field.disabled ::ng-deep * .mat-mdc-select-arrow{opacity:.1}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2225%22 viewBox%3D%220 0 24 25%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 17.025L6 11.025L7.4 9.625L12 14.225L16.6 9.625L18 11.025L12 17.025Z%22 fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E\");background-size:cover;width:16px;height:16px}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow svg,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow svg{display:none}:host[theme=dark] mat-select.opened ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select.opened ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2225%22 viewBox%3D%220 0 24 25%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 9.6249L18 15.6249L16.6 17.0249L12 12.4249L7.4 17.0249L6 15.6249L12 9.6249Z%22 fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E\");background-size:cover;width:16px;height:16px}::ng-deep .mat-form-field-appearance-outline mat-select .mat-select-arrow-wrapper{transform:none}::ng-deep .mat-select-panel.phone-number-select{margin-top:36px;margin-left:45px}::ng-deep .mat-select-search-inner{box-shadow:none!important;height:48px;background-color:#fff!important;border-bottom:none!important}::ng-deep .mat-select-search-inner .mat-select-search-inner-row{width:100%}::ng-deep .mat-select-search-inner button.mat-select-search-clear{right:35px}::ng-deep .mat-select-search-inner button.mat-select-search-clear mat-icon{font-size:20px}@media screen and (min-width: 599px){::ng-deep .mat-select-panel.phone-number-select{margin-left:-33px;min-width:510px}::ng-deep .mat-select-search-inner{min-width:calc(100% + 33px)!important}}ngx-mat-select-search ::ng-deep button .mat-mdc-button-persistent-ripple,ngx-mat-select-search ::ng-deep button .mat-ripple,ngx-mat-select-search ::ng-deep button .mat-mdc-button-ripple{display:none}\n"] }]
|
|
10500
10511
|
}], ctorParameters: function () { return [{ type: i1$3.NgControl, decorators: [{
|
|
10501
10512
|
type: Optional
|
|
10502
10513
|
}, {
|
|
@@ -10524,6 +10535,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
10524
10535
|
args: ['attr.theme']
|
|
10525
10536
|
}, {
|
|
10526
10537
|
type: Input
|
|
10538
|
+
}], fullWidth: [{
|
|
10539
|
+
type: Input
|
|
10527
10540
|
}], errors: [{
|
|
10528
10541
|
type: Input
|
|
10529
10542
|
}], language: [{
|